/* WIZIYO, site immersif bleu, composition « L'anse » : accueil, portfolio, contact.
   Les tailles suivent la largeur de l'écran, comme dans la référence : 1rem vaut 1 % de la largeur (14,4 px à 1440), 16 px sur téléphone. */
@font-face { font-family: 'Instrument Serif'; src: url('../assets/polices/instrument-serif-latin.5eb09b5a.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Instrument Serif'; src: url('../assets/polices/instrument-serif-italique-latin.5a51946d.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Inter Tight'; src: url('../assets/polices/inter-tight-latin.77fefe8c.woff2') format('woff2'); font-weight: 300 600; font-style: normal; font-display: swap; }

:root {
  --encre: #131a2e;
  --papier: #eef2f7;
  --blanc: #fff;
  --doux: rgba(19, 26, 46, .64);
  --filet: rgba(19, 26, 46, .3);
  --serif: 'Instrument Serif', 'Times New Roman', serif;
  --grot: 'Inter Tight', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --courbe: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { font-size: clamp(12px, 1vw, 19px); scrollbar-width: none; -webkit-text-size-adjust: 100%; }
html::-webkit-scrollbar { display: none; }
html.avec-webgl, html.seuil-ouvert, html.menu-ouvert { overflow: hidden; }
body { margin: 0; font-family: var(--grot); font-size: 1.05rem; line-height: 1.35; color: var(--encre); background: #dfe8f4; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
.avec-webgl body { overscroll-behavior: none; touch-action: none; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 4px; }
.lecteur, .avec-webgl .hero, .avec-webgl .grille { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.evitement { position: fixed; top: .6rem; left: .6rem; z-index: 90; padding: .7rem 1.1rem; border-radius: 99rem; background: var(--encre); color: var(--blanc); transform: translateY(-300%); }
.evitement:focus { transform: none; }
.sans-script { position: relative; z-index: 5; padding: 2rem; }
.ico { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

#scene { position: fixed; top: 0; left: 0; z-index: 0; display: block; width: 100%; height: 100vh; height: 100lvh; }
main { position: relative; z-index: 1; }
.surtitre { margin: 0; font-size: max(.98rem, 11px); line-height: 1.25; letter-spacing: -.01em; text-transform: uppercase; }
.serif { font-family: var(--serif); font-style: italic; font-weight: 400; }
.doux { color: var(--doux); }

/* Pilules et boutons ronds */
.pilule { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-height: 2.4rem; padding: 0 1.25rem; border: 1.5px solid transparent; border-radius: 99rem; font-size: 1.05rem; line-height: 1; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color .35s, color .35s, border-color .35s; }
.pilule .ico { font-size: .95em; transition: transform .5s var(--courbe); }
/* v26 : le survol seulement là où il existe. Au doigt, il restait collé après le toucher : « Continuer », touché, passait
   au blanc et paraissait moins fort que « Retour ». */
@media (hover: hover) { .pilule:hover .ico { transform: translate(.14em, .14em); } }
.pilule.pleine { background: var(--blanc); color: var(--encre); }
@media (hover: hover) { .pilule.pleine:hover { background: var(--encre); color: var(--blanc); } }
.pilule.sombre { background: var(--encre); color: var(--blanc); }
@media (hover: hover) { .pilule.sombre:hover { background: var(--blanc); color: var(--encre); } }
.pilule.contour { background: transparent; border-color: var(--encre); color: var(--encre); }
@media (hover: hover) { .pilule.contour:hover { background: var(--encre); color: var(--blanc); } }
.pilule:disabled { opacity: .6; cursor: progress; }

.rond { position: relative; display: grid; place-content: center; flex: none; width: 2.8rem; height: 2.8rem; padding: 0; border: 0; border-radius: 50%; cursor: pointer; transition: transform .5s var(--courbe); }
.rond::after { content: ''; position: absolute; inset: -.5rem; border-radius: 50%; }
button.rond:hover, .suivant:hover .rond { transform: scale(1.08); }
.rond.clair { grid-auto-flow: column; gap: .24rem; background: var(--blanc); color: var(--encre); }
.rond.clair i { width: .28rem; height: .28rem; border-radius: 50%; background: currentColor; }
.rond.sombre, .rond.noir { background: var(--encre); color: var(--blanc); }
.rond .ico { font-size: 1.15rem; }

/* Barre du haut */
.barre { position: fixed; top: 0; left: 0; right: 0; z-index: 30; display: flex; align-items: center; gap: .55rem; height: 5.7rem; padding: 0 2.5rem 0 2rem; pointer-events: none; }
.barre > * { pointer-events: auto; }
.barre > :not(.logo) { opacity: var(--pied, 0); }
/* Logo : le signe WIZIYO est le W du nom, comme sur le site d'origine. Il a la hauteur des capitales qui le
   suivent et repose sur leur ligne de base. Tracé vectoriel : net à toutes les tailles, à la couleur du texte.
   Il arrive du seuil (js/seuil.js) : tant que le signe n'est pas posé, celui de la barre reste invisible ;
   les lettres du nom se lèvent l'une après l'autre quand les gouttes finissent de couler. */
.logo { display: inline-flex; align-items: baseline; margin-right: auto; font-size: 1.8rem; font-weight: 600; line-height: 1; letter-spacing: .015em; text-decoration: none; white-space: nowrap; }
html:not(.pose) .logo-signe, html:not(.mot) .logo-mot { visibility: hidden; }
.logo-signe { flex: none; width: 1.163em; height: .727em; margin-right: .09em; overflow: visible; }
.logo-mot { display: inline-block; }
.logo-mot i { display: inline-block; font-style: normal; }
.mot:not(.direct) .logo-mot i { animation: ls-leve .62s var(--courbe) both; animation-delay: calc(var(--i, 0) * .055s); }
.logo-mot i:nth-child(2) { --i: 1; } .logo-mot i:nth-child(3) { --i: 2; } .logo-mot i:nth-child(4) { --i: 3; } .logo-mot i:nth-child(5) { --i: 4; }
@keyframes ls-leve { from { transform: translateY(.42em); opacity: 0; } }
/* Le signe est fait de trois têtes rondes égales, alignées ; les deux premières ont une queue. Chaque queue est une
   coulée épaisse, découpée par le tracé exact du logo : elle peut rentrer dans sa tête ou en couler sans que la forme
   finale change. Au survol ou au focus (classe posée par js/interface.js, jouée une fois jusqu'au bout) : les queues
   rentrent, il reste trois points, puis elles coulent de gauche à droite et le point accuse l'arrivée de l'onde. */
.w-coule { fill: none; stroke: currentColor; stroke-width: 80; stroke-linecap: round; stroke-dasharray: 1 1.2; }
.w-tete, .w-point { fill: currentColor; }
.w-point { transform-box: fill-box; transform-origin: 50% 50%; }
.logo.joue .w-g1 .w-coule { animation: w-repli-1 .94s both; }
.logo.joue .w-g2 .w-coule { animation: w-repli-2 .94s both; }
.logo.joue .w-point { animation: w-pouls .94s both; }
@keyframes w-repli-1 {
  0%, 6% { stroke-dashoffset: 0; animation-timing-function: cubic-bezier(.55, 0, .45, 1); }
  32%, 38% { stroke-dashoffset: 1.04; animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  88%, 100% { stroke-dashoffset: 0; }
}
@keyframes w-repli-2 {
  0% { stroke-dashoffset: 0; animation-timing-function: cubic-bezier(.55, 0, .45, 1); }
  26%, 47% { stroke-dashoffset: 1.04; animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  97%, 100% { stroke-dashoffset: 0; }
}
@keyframes w-pouls {
  0%, 56% { transform: none; animation-timing-function: cubic-bezier(.4, 0, .6, 1); }
  72% { transform: scale(.84); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  100% { transform: none; }
}
.liens { display: flex; }
.liens a { position: relative; padding: .55rem .75rem; font-size: 1.2rem; line-height: 1.1; text-decoration: none; }
.liens span { display: block; transition: opacity .35s, transform .5s var(--courbe); }
.liens .italique { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--serif); font-style: italic; font-size: 1.3rem; opacity: 0; transform: translateY(.4rem); }
.liens a:hover .droit, .liens a[aria-current] .droit { opacity: 0; transform: translateY(-.4rem); }
.liens a:hover .italique, .liens a[aria-current] .italique { opacity: 1; transform: none; }
/* Sélecteur de langue (FR / EN). Dans la barre, il est posé hors du flux, à droite du logo : la navigation ne bouge pas.
   La langue de la page est soulignée ; l'autre, plus claire, le devient au survol. Dans le menu, il suit les adresses. */
.langues { display: flex; align-items: center; font-size: .95rem; line-height: 1; letter-spacing: .04em; }
.barre .langues { position: absolute; left: 12.2rem; top: 50%; transform: translateY(-50%); }
.langues a { padding: .7rem .38rem; text-decoration: none; opacity: .52; transition: opacity .3s; }
.langues a + a::before { content: '/'; margin-right: .38rem; opacity: .45; }
.langues a:hover, .langues a:focus-visible, .langues a[aria-current] { opacity: 1; }
.langues a[aria-current] { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .32em; }
.menu-pied .langues { margin-left: -.38rem; font-size: 1.05rem; }

/* Vues : avec la 3D, chaque section est un calque plein écran ; la scène fait le reste. */
.avec-webgl .vue { position: fixed; inset: 0; pointer-events: none; }
.avec-webgl .vue > * { pointer-events: auto; }
.hero-action, .bloc-contact { position: fixed; left: 0; top: 0; margin: 0; }
/* v21 (A4) : les services en une ligne, sous le bouton (le bouton garde sa place sous le titre). */
.hero-services { position: absolute; left: 50%; top: calc(100% + .75rem); width: max-content; max-width: min(34rem, 86vw); font-size: max(1rem, 14px); line-height: 1.35; text-align: center; text-wrap: balance; transform: translateX(-50%); text-shadow: 0 0 14px rgba(242, 246, 253, .95), 0 0 3px rgba(242, 246, 253, .85); }
.sans-webgl .hero-services { position: static; display: block; width: auto; max-width: none; margin-top: .9rem; transform: none; }
/* Avec la 3D, ces blocs n'apparaissent que lorsque le script les y invite (il règle leur opacité image par image). */
.avec-webgl :is(.hero-action, .bloc-contact, .entete-portfolio, .appel), .bas { opacity: 0; }

/* Portfolio : le titre et les filtres restent en haut, les feuilles passent dessous. */
/* Son bandeau laisse passer la souris jusqu'à la scène (seuls les filtres la retiennent) : de part et d'autre du titre, c'est du décor. */
.entete-portfolio, .avec-webgl .vue > .entete-portfolio { position: fixed; left: 0; right: 0; top: 0; padding-top: 5.42rem; text-align: center; pointer-events: none; }
.entete-portfolio > * { pointer-events: auto; }
.entete-portfolio h2 { margin: 0; font-size: 4rem; font-weight: 400; line-height: 1; letter-spacing: -.04em; pointer-events: none; }
.bascule { display: none; }
.filtres { display: inline-flex; gap: .3rem; margin-top: 1.76rem; }
.filtre { position: relative; height: 1.6rem; padding: 0 .9rem; border: 1px solid rgba(19, 26, 46, .16); border-radius: 99rem; background: transparent; font-size: max(.76rem, 10.5px); line-height: 1; white-space: nowrap; cursor: pointer; transition: background-color .3s, color .3s, border-color .3s; }
.filtre::after { content: ''; position: absolute; inset: -.6rem -.1rem; }
.filtre sup { margin-left: .15em; font-size: .75em; line-height: 0; vertical-align: .4em; }
.filtre:hover { border-color: var(--encre); }
.filtre[aria-pressed="true"] { border-color: var(--encre); background: var(--encre); color: var(--blanc); }
.appel { position: fixed; left: 0; right: 0; bottom: 9rem; text-align: center; transition: opacity .3s; }
.appel p { margin: 0 0 .7rem; }
/* Avec la 3D, l'invitation peut se tenir à côté de la dernière feuille : sa bande laisse passer la souris, son lien la retient. */
.avec-webgl .vue > .appel { pointer-events: none; }
.avec-webgl .vue > .appel a { pointer-events: auto; }

/* Contact : la disposition de l'écran Contact de la référence, sur deux lignes de titre. v26 : la première tient ce qui
   rassure (délai, sans engagement), la seconde l'appel principal, la demande ; la présentation, l'audit, le rendez-vous
   et le courriel suivent, hors du flux, pour que le titre garde sa place dans la scène. */
.bloc-contact { display: grid; grid-template-columns: auto auto; grid-template-rows: 1fr 1fr auto; column-gap: 2.05rem; align-items: center; width: max-content; }
.bloc-contact h2 { grid-column: 1; grid-row: 1 / span 2; margin: 0; font-size: 5.1rem; line-height: .94; letter-spacing: -.03em; text-align: right; white-space: nowrap; }
.garanties { grid-column: 2; grid-row: 1; align-self: end; margin: 0 0 .35rem; font-size: max(1rem, 13px); letter-spacing: -.01em; white-space: nowrap; }
.bloc-contact .surtitre { grid-column: 1; grid-row: 3; align-self: start; margin-top: .95rem; font-size: max(.7rem, 10px); line-height: 1.12; text-align: right; }
.detail { grid-column: 2; grid-row: 2; align-self: start; position: relative; }
.appel-principal { margin: 0; }
.appel-principal .pilule { min-height: 3.3rem; padding: 0 1.8rem; font-size: 1.4rem; gap: .6rem; }
.avec-webgl .suite-detail { position: absolute; left: 0; top: calc(100% + 1rem); width: 27rem; }
.presentation { margin: 0; font-size: max(1.05rem, 13px); line-height: 1.35; }
/* Le courriel, en second : l'adresse en clair et « Copier » à côté (elles peuvent passer sur le fauteuil du décor). */
.par-courriel { margin: .55rem 0 0; font-size: max(.95rem, 13px); line-height: 1.35; text-shadow: 0 0 12px rgba(242, 246, 253, .95), 0 0 3px rgba(242, 246, 253, .85); }
.par-courriel + .par-courriel { margin-top: .2rem; }
.par-courriel a { text-underline-offset: .2em; }
.lien-bouton { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }
/* (Un bouton caché le reste : .pilule pose display: inline-flex, qui l'emportait sur l'attribut hidden.) */
:is(.actions, .appel-principal) [hidden] { display: none; }
/* v21, v22 : le formulaire de demande, dans une fenêtre (js/formulaire.js) ; v22 : trois étapes. */
.formulaire { width: min(34rem, 92vw); max-height: 92vh; padding: 1.5rem 1.5rem 1.6rem; border: 0; border-radius: 1.1rem; background: #f2f6fd; color: var(--encre); box-shadow: 0 2.4rem 5rem -1.6rem rgba(6, 12, 36, .6); }
.formulaire::backdrop { background: rgba(13, 22, 48, .62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.formulaire form, .formulaire-merci { display: grid; gap: .9rem; }
.formulaire [hidden] { display: none; }
.formulaire-titre { margin: 0 3rem .2rem 0; font: italic 400 2rem / 1.05 var(--serif); letter-spacing: -.01em; }
.formulaire .champ { display: grid; gap: .35rem; font-size: max(.95rem, 14px); }
.formulaire .champ small { opacity: .75; }
.formulaire :is(input, textarea) { width: 100%; padding: .7rem .85rem; border: 1px solid rgba(19, 26, 46, .38); border-radius: .6rem; background: #fff; color: inherit; font: inherit; font-size: max(1rem, 16px); }
.formulaire textarea { min-height: 8.5rem; resize: vertical; }
.formulaire :is(input, textarea):focus-visible { outline: 2px solid #3f7cf0; outline-offset: 1px; border-color: transparent; }
.formulaire [aria-invalid] { border-color: #b42318; }
.formulaire-info, .formulaire-merci p { margin: 0; font-size: max(.9rem, 13px); line-height: 1.45; }
.formulaire-etat { margin: 0; min-height: 1.3em; font-size: max(.92rem, 13.5px); }
.formulaire-etat:empty { display: none; }
.formulaire-actions { margin: .2rem 0 0; }
.formulaire-fermer { position: absolute; right: .9rem; top: .9rem; }
/* v22 : les étapes. Trois points en tête (fait, ici, à venir) ; chaque étape est un fieldset ; les choix sont des pastilles. */
.formulaire { width: min(38rem, 92vw); }
.formulaire-pas { display: flex; gap: .4rem; margin: 0 3.2rem .2rem 0; padding: 0; list-style: none; }
.formulaire-pas li { flex: 1; height: 3px; border-radius: 3px; background: rgba(19, 26, 46, .14); transition: background-color .4s ease; }
.formulaire-pas li:is(.fait, .ici) { background: var(--encre); }
.formulaire-pas li.ici { background: #2f66d8; }
.etape-form { display: grid; gap: .9rem; min-width: 0; margin: 0; padding: 0; border: 0; }
.etape-form legend { float: left; width: 100%; padding: 0; }
.etape-form legend:focus { outline: none; }
.etape-form legend + * { clear: both; }
.formulaire-rang { margin: -.4rem 0 .1rem; font-size: max(.85rem, 12.5px); color: var(--doux, #4a5470); }
.choix { display: grid; gap: .5rem; }
.choix-titre { margin: 0; font-size: max(.95rem, 14px); }
.choix-titre small, .formulaire .champ small { opacity: .75; }
.choix-puces { display: flex; flex-wrap: wrap; gap: .4rem; }
.choix-puces label { position: relative; }
.choix-puces input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; }
.choix-puces span { display: inline-flex; align-items: center; min-height: 2.4rem; padding: 0 .95rem; border: 1px solid rgba(19, 26, 46, .3); border-radius: 99rem; background: #fff; font-size: max(.93rem, 13.5px); line-height: 1.2; transition: background-color .25s, color .25s, border-color .25s; }
.choix-puces input:checked + span { border-color: var(--encre); background: var(--encre); color: #f2f6fd; }
.choix-puces input:focus-visible + span { outline: 2px solid #3f7cf0; outline-offset: 2px; }
.choix-puces input[aria-invalid] + span { border-color: #b42318; }
.formulaire-recap { display: grid; grid-template-columns: max-content 1fr; gap: .25rem 1rem; margin: .2rem 0 0; padding: .8rem .9rem; border-radius: .7rem; background: rgba(19, 26, 46, .05); font-size: max(.9rem, 13px); }
.formulaire-recap:empty { display: none; }
.formulaire-recap dt { color: var(--doux, #4a5470); }
.formulaire-recap dd { margin: 0; overflow-wrap: anywhere; }
.formulaire-actions { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: flex-end; }
@media (max-width: 760px) { .formulaire { padding: 1.2rem 1rem 1.3rem; } .formulaire-recap { grid-template-columns: 1fr; } .formulaire-recap dd { margin-bottom: .3rem; } }
/* v26 : ce que contient l'audit gratuit ; la faute de frappe du courriel ; les suites proposées après l'envoi. */
.formulaire-audit { margin: -.15rem 0 0; padding: .7rem .85rem; border-radius: .7rem; background: rgba(47, 102, 216, .09); font-size: max(.92rem, 13.5px); line-height: 1.4; }
.formulaire-suggestion { margin: -.45rem 0 0; font-size: max(.92rem, 13.5px); }
.formulaire-suggestion .lien-bouton { font-weight: 600; }
.formulaire-merci .formulaire-actions { justify-content: flex-start; margin-top: .3rem; }
/* v22 : le curseur, une goutte (js/curseur.js). Il prend l'encre de la section (claire dans l'Agence) et un halo de la
   teinte opposée, lisible sur la scène claire comme sur l'heure bleue. */
html.curseur-actif, html.curseur-actif * { cursor: none !important; }
html.curseur-actif :is(input:not([type="range"]):not([type="radio"]):not([type="checkbox"]):not([type="button"]):not([type="submit"]), textarea, select, [contenteditable="true"]) { cursor: text !important; }
.curseur { --curseur-halo: rgba(242, 246, 253, .95); position: fixed; left: 0; top: 0; z-index: 1000; width: 0; height: 0; pointer-events: none; color: var(--texte-barre, var(--encre)); opacity: 0; transition: opacity .25s ease, color .4s ease; }
body[data-vue="agence"] .curseur { --curseur-halo: rgba(8, 14, 38, .85); }
html.curseur-actif .curseur.vu:not([data-etat="texte"]) { opacity: 1; }
.curseur svg { position: absolute; left: -40px; top: -40px; width: 80px; height: 80px; overflow: visible; filter: drop-shadow(0 0 1.2px var(--curseur-halo)) drop-shadow(0 0 .4px var(--curseur-halo)); }
.curseur :is(.tete, .queue) { fill: currentColor; }
.curseur .tete { transform-box: fill-box; transform-origin: center; transition: transform .35s var(--courbe); }
.curseur :is(.onde, .ride) { fill: none; stroke: currentColor; stroke-width: 1.5; transform-box: fill-box; transform-origin: center; }
.curseur .onde { opacity: 0; transform: scale(.35); transition: transform .4s var(--courbe), opacity .25s ease; }
.curseur .fleches { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; opacity: 0; transition: opacity .25s ease; }
.curseur:is([data-etat="lien"], [data-etat="glisser"]) .onde { opacity: 1; transform: scale(1); }
.curseur:is([data-etat="lien"], [data-etat="glisser"]) .tete { transform: scale(.55); }
.curseur[data-etat="glisser"] .fleches { opacity: 1; }
.actions { display: flex; flex-wrap: wrap; gap: .45rem; margin: .95rem 0 0; }
.actions .pilule { min-height: 2.15rem; }
.actions:not(:has(> :not([hidden]))) { display: none; }

/* Barre du bas */
.bas { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; align-items: center; gap: 1.25rem; height: 6.8rem; padding: 0 1.95rem; pointer-events: none; }
.bas > * { pointer-events: auto; }
.bas .pilule { min-height: 2.55rem; padding: 0 1.45rem; }
/* v14 : les libellés du bas restent lisibles sur la scène claire (contraste mesuré à 3,5-3,7:1 auparavant). */
.bas .pilule.contour { background: rgba(242, 246, 253, .62); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
body:not([data-genre="piece"]) .bas :is(.suivant > span:not(.rond), .copie) { font-weight: 600; text-shadow: 0 0 14px rgba(242, 246, 253, .95), 0 0 3px rgba(242, 246, 253, .8); }
.suivant { position: absolute; left: 50%; top: 50%; display: flex; align-items: center; gap: .55rem; padding: 0; border: 0; background: none; font-size: max(.8rem, 11px); text-transform: uppercase; cursor: pointer; transform: translate(-50%, -50%); }
.copie { position: absolute; right: 2rem; top: 50%; margin: 0; transform: translateY(-10%); }
#demarrer, .copie, .suivant, .suivant > span { transition: opacity .5s, visibility .5s, background-color .5s, color .5s; }
body[data-vue="contact"] .suivant .rond { background: var(--blanc); color: var(--encre); }
/* (Le portfolio et les pièces de contenu règlent leur pied dans css/pieces.css : le bouton du centre n'y paraît qu'au bout.) */
body[data-vue="contact"] :is(#demarrer, .suivant > span:not(.rond)) { opacity: 0; visibility: hidden; }

/* Seuil : l'écran de chargement (sa place et son bleu sont posés dans index.html, pour paraître dès la première image).
   Le signe se forme goutte après goutte, le point tombe en dernier ; dessous, la ligne d'eau avance avec la préparation
   réelle du site, et le reflet du signe ondule. À l'ouverture, le signe vole jusqu'à la barre et le reste s'efface. */
.seuil { display: grid; place-items: center; color: #f2f6fd; }
.seuil[hidden] { display: none; }
.seuil::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 62% 54% at 50% 47%, rgba(96, 132, 224, .34), transparent 72%); transition: opacity .35s ease; }
.seuil-coeur { position: relative; width: min(14.5rem, 44vw); margin-top: -2.2rem; }
.seuil-signe, .seuil-reflet svg { display: block; width: 100%; height: auto; overflow: visible; }
/* À l'ouverture, js/seuil.js conduit lui-même les trois têtes du signe jusqu'à la barre : ses animations de formation se taisent. */
.seuil-signe.vole :is(.w-g, .w-coule, .w-point) { animation: none; }
.seuil-signe.vole :is(.w-g, .w-point) { transform-box: view-box; will-change: transform; }
.seuil-eau { position: relative; height: 1px; margin: .85rem -24% 0; background: rgba(242, 246, 253, .2); transition: opacity .3s ease; }
.seuil-eau i { position: absolute; inset: 0; background: currentColor; transform: scaleX(0); transform-origin: 0 50%; transition: transform .45s var(--courbe); }
.seuil-reflet { margin-top: .85rem; opacity: .32; transform: scaleY(-1); filter: url(#w-onde); -webkit-mask-image: linear-gradient(to top, #000, transparent 82%); mask-image: linear-gradient(to top, #000, transparent 82%); transition: opacity .3s ease; }
.seuil-etat { position: absolute; left: 0; right: 0; bottom: 3.4rem; display: flex; justify-content: center; gap: 1.1em; margin: 0; font-size: max(.72rem, 10.5px); font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: rgba(242, 246, 253, .8); transition: opacity .3s ease; }
#seuil-rang { opacity: .62; font-variant-numeric: tabular-nums; }
.seuil-aide { position: absolute; left: 0; right: 0; bottom: 6.2rem; margin: 0; padding: 0 1.5rem; text-align: center; font-size: max(.98rem, 14px); }
.seuil-aide a { text-underline-offset: .2em; }
.seuil .w-g1 { animation: sl-nait .3s ease-out .1s both; }
.seuil .w-g2 { animation: sl-nait .3s ease-out .24s both; }
.seuil .w-g1 .w-coule { animation: sl-coule .64s cubic-bezier(.65, 0, .35, 1) .1s both; }
.seuil .w-g2 .w-coule { animation: sl-coule .64s cubic-bezier(.65, 0, .35, 1) .24s both; }
.seuil .w-point { animation: sl-tombe .52s var(--courbe) .6s both; }
@keyframes sl-nait { from { opacity: 0; } }
@keyframes sl-coule { from { stroke-dashoffset: 1.04; } }
@keyframes sl-tombe { from { transform: translateY(-70%) scale(.6); opacity: 0; } }
.direct .seuil * { animation: none; }
/* La goutte (v14) : elle quitte le point du signe, tombe dans la ligne d'eau ; ses ondes ouvrent le voile (js/seuil.js). */
.seuil-goutte { position: fixed; z-index: 3; border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%; background: currentColor; pointer-events: none; will-change: transform; box-shadow: 0 0 18px rgba(170, 196, 255, .35); }
.seuil-onde { position: fixed; z-index: 3; width: min(34rem, 86vw); aspect-ratio: 5 / 1; border: 1.5px solid rgba(242, 246, 253, .8); border-radius: 50%; pointer-events: none; will-change: transform, opacity; }
.entre .seuil { pointer-events: none; }
.entre .seuil::before, .entre .seuil-eau, .entre .seuil-reflet, .entre .seuil-etat { opacity: 0; }
/* Avec la scène, le fond du seuil s'efface d'un coup (le voile de la scène, de la même couleur, a pris sa place et
   s'ouvre) ; sans elle, il se fond dans la page. */
.seuil.ouvre { background: transparent; }
.seuil.fond { background: transparent; transition: background-color .9s ease; }

/* Menu : un panneau à droite ; les lettres, d'abord espacées, se resserrent. */
.menu-fond { position: fixed; inset: 0; z-index: 39; visibility: hidden; }
.menu-ouvert .menu-fond { visibility: visible; }
.menu { position: fixed; top: 0; right: 0; bottom: 0; z-index: 40; display: flex; flex-direction: column; justify-content: center; width: 41vw; min-width: 22rem; padding: 0 5.2rem; background: var(--papier); visibility: hidden; transform: translateX(101%); transition: transform .9s var(--courbe), visibility 0s .9s; }
.menu-ouvert .menu { visibility: visible; transform: none; transition: transform .9s var(--courbe); }
#fermer-menu { position: absolute; top: 1.45rem; right: 2.5rem; }
.menu-liens { margin: 0; padding: 0; list-style: none; }
.menu-liens li:nth-child(2) { --rang: 1; } .menu-liens li:nth-child(3) { --rang: 2; } .menu-liens li:nth-child(4) { --rang: 3; } .menu-liens li:nth-child(5) { --rang: 4; } .menu-liens li:nth-child(6) { --rang: 5; }
/* Six entrées : la taille suit aussi la hauteur de l'écran, pour que la liste tienne toujours au-dessus du pied du menu. */
.menu-liens a { display: inline-flex; align-items: flex-start; gap: .5rem; font-family: var(--serif); font-size: min(6.3rem, 10.4vh); line-height: .98; letter-spacing: -.02em; text-decoration: none; }
.menu-liens sup { margin-top: .9rem; font-family: var(--grot); font-size: 1.3rem; line-height: 1; letter-spacing: 0; }
.menu-liens .mot i { display: inline-block; font-style: normal; opacity: 0; transform: translateX(calc(var(--i) * .3em)); transition: transform 0s .9s, opacity 0s .9s; }
.menu-ouvert .menu-liens .mot i { opacity: 1; transform: none; transition: transform 1.2s var(--courbe), opacity .7s ease; transition-delay: calc(.12s + var(--rang, 0) * .07s + var(--i) * .014s); }
.menu-liens a[aria-current] { color: rgba(19, 26, 46, .5); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .08em; }
/* v29 : sous les six entrées, en petit, les pages de services qui existent ; elles paraissent après les entrées. */
.menu-services { display: flex; flex-wrap: wrap; align-items: baseline; gap: .45rem 1.2rem; margin-top: min(2.6rem, 4.2vh); opacity: 0; transition: opacity 0s .9s; }
.menu-ouvert .menu-services { opacity: 1; transition: opacity .7s ease .55s; }
.menu-services .surtitre { font-size: max(.72rem, 10.5px); color: rgba(19, 26, 46, .62); }
.menu-services ul { display: flex; flex-wrap: wrap; gap: .45rem 1.2rem; margin: 0; padding: 0; list-style: none; }
.menu-services a { text-decoration: none; }
.menu-services a:hover { text-decoration: underline; }
/* Repliée (js/commun.js, placerServices) : la ligne « Services » prend la place libre en haut du menu, à hauteur de la
   croix ; la liste s'ouvre dessous, sur le papier du menu, par-dessus les entrées. */
.menu-services-bouton { display: none; align-items: center; gap: .4rem; min-height: 2.8rem; padding: 0; border: 0; background: none; color: inherit; font: inherit; font-size: max(.72rem, 10.5px); letter-spacing: -.01em; text-transform: uppercase; cursor: pointer; }
.menu-services-bouton .ico { font-size: 1.1em; transition: transform .4s var(--courbe); }
.menu-services-bouton[aria-expanded="true"] .ico { transform: rotate(180deg); }
.menu-services.replie { position: absolute; top: 1.45rem; left: 5.2rem; z-index: 1; display: block; margin: 0; }
.menu-services.replie .menu-services-bouton { display: inline-flex; }
.menu-services.replie > .surtitre, .menu-services.replie:not(.deplie) ul { display: none; }
.menu-services.replie ul { position: absolute; top: calc(100% + .5rem); left: -1.1rem; flex-direction: column; flex-wrap: nowrap; gap: 0; width: max-content; max-width: calc(100vw - 3rem); max-height: calc(100vh - 7rem); max-height: calc(100svh - 7rem); overflow: auto; padding: .5rem 1.1rem; border: 1px solid rgba(19, 26, 46, .14); border-radius: .9rem; background: var(--papier); box-shadow: 0 1.6rem 3rem -1.4rem rgba(6, 12, 36, .35); }
.menu-services.replie li a { display: block; padding: .62rem 0; font-size: max(1.05rem, 15px); }
.menu-pied { position: absolute; left: 5.2rem; right: 2.6rem; bottom: 2.6rem; display: flex; align-items: flex-end; justify-content: space-between; }
.menu-pied p { margin: 0; line-height: 1.5; }
.menu-pied .surtitre { font-size: max(.72rem, 10.5px); }
.menu-pied a { text-decoration: none; }
.menu-pied a:hover { text-decoration: underline; }

/* La 3D n'a pas pu être lue (réseau) : on le dit, en bas de l'écran, avec de quoi réessayer. */
.note-3d { position: fixed; left: 50%; bottom: 1.2rem; z-index: 35; width: max-content; max-width: calc(100vw - 2rem); margin: 0; padding: .7rem 1.2rem; border-radius: 99rem; background: var(--encre); color: var(--blanc); font-size: max(.95rem, 14px); transform: translateX(-50%); }
.note-3d[hidden] { display: none; }
/* v28 (audit SEO, T2) : l'invitation vers l'anglais, à la place de l'ancienne redirection par langue (js/choix-langue.js).
   Même allure que la note de la 3D, mais en haut, sous la barre : le bas de l'écran porte déjà ses boutons (pause, suite,
   demande). Sous le seuil (z-index 60) tant qu'il couvre la page ; sous le menu (40). */
.invitation-langue { position: fixed; left: 50%; top: calc(5.7rem + env(safe-area-inset-top, 0px)); z-index: 35; display: flex; align-items: center; gap: .3rem; width: max-content; max-width: calc(100vw - 2rem); margin: 0; padding: .3rem .35rem .3rem 1.2rem; border-radius: 99rem; background: var(--encre); color: var(--blanc); font-size: max(.95rem, 14px); line-height: 1.3; transform: translateX(-50%); }
.invitation-langue a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .28em; }
.invitation-langue button { flex: none; width: 2.4rem; height: 2.4rem; border: 0; border-radius: 50%; background: transparent; color: inherit; font: inherit; font-size: 1.2rem; line-height: 1; cursor: pointer; }
.invitation-langue button:hover, .invitation-langue button:focus-visible { background: rgba(255, 255, 255, .16); }

/* Sans 3D : les trois sections se suivent dans une page ordinaire, sur des aplats. */
.sans-webgl #scene { display: none; }
.sans-webgl .vue { position: relative; min-height: 100vh; min-height: 100svh; display: grid; place-items: center; padding: 7rem 0; }
.sans-webgl .accueil { background: linear-gradient(180deg, #c9d7ee 0%, #b4c5e3 58%, #90a4c8 100%); text-align: center; }
.sans-webgl .hero .surtitre { margin-bottom: .5rem; }
.sans-webgl .titre { margin: 0; font-weight: 400; }
.sans-webgl .ligne { display: block; font-size: 7rem; line-height: .94; }
.sans-webgl .ligne.grot { letter-spacing: -.02em; margin-top: -.09em; }
.sans-webgl :is(.hero-action, .bloc-contact, .entete-portfolio, .appel) { position: static; opacity: 1 !important; visibility: visible !important; transform: none !important; }
.sans-webgl .portfolio { display: block; background: #eef2f8; }
.sans-webgl .entete-portfolio { padding-top: 0; }
.sans-webgl .grille { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem 2.8vw; width: 81vw; margin: 2rem auto 0; padding: 0; list-style: none; }
.sans-webgl .carte[hidden] { display: none; }
.sans-webgl .carte a { display: block; text-decoration: none; }
.sans-webgl .carte-image img { display: block; width: 100%; height: auto; aspect-ratio: 1.907; object-fit: cover; }
.sans-webgl .carte-texte { display: flex; align-items: flex-end; justify-content: space-between; padding: .75rem 0 .6rem; border-bottom: 1px solid var(--filet); line-height: 1.22; }
.sans-webgl .carte-texte strong { display: block; font-weight: 600; }
.sans-webgl .appel { margin-top: 5rem; }
.sans-webgl .contact { background: linear-gradient(180deg, #c9d7ee, #a9bbdb); }
.sans-webgl .suite-detail { margin-top: 1.15rem; max-width: 27rem; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .seuil-reflet { filter: none; }
}

@media (max-width: 760px) {
  /* v21 (A4) : au téléphone, la ligne des services passe sur le décor (l'écran du bureau) : un fond dépoli la garde lisible. */
  .avec-webgl .hero-services { width: min(21rem, 86vw); padding: .4rem .8rem .45rem; border-radius: .9rem; background: rgba(242, 246, 253, .66); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-size: 14px; text-shadow: none; }
  html { font-size: 16px; }
  .rond { width: 2.75rem; height: 2.75rem; }
  .pilule { min-height: 2.75rem; padding: 0 1.2rem; font-size: .95rem; }
  .surtitre { font-size: .72rem; }
  .barre { height: 4.6rem; padding: 0 1rem; }
  .logo { position: absolute; left: 50%; margin: 0; font-size: 1.5rem; transform: translateX(-50%); }
  .liens { display: none; }
  .barre .langues { left: .65rem; }
  #ouvrir-menu { margin-left: auto; }
  .bas { height: 5.2rem; padding: 0 1rem; gap: .8rem; }
  .bas .pilule { min-height: 2.75rem; }
  .suivant, .copie { display: none; }
  .entete-portfolio { padding-top: 3.6rem; }
  .avec-webgl .entete-portfolio h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .bascule { display: inline-flex; }
  .bascule[aria-expanded="true"] .ico { transform: rotate(180deg); }
  .filtres { display: none; flex-wrap: wrap; justify-content: center; max-width: 92vw; margin: .5rem auto 0; padding: .6rem; border-radius: 1.3rem; background: rgba(238, 242, 247, .94); }
  .bascule[aria-expanded="true"] + .filtres { display: flex; }
  .filtre { height: 2.5rem; padding: 0 1rem; font-size: .85rem; }
  .appel { bottom: 6.5rem; }
  .bloc-contact { left: 7vw; top: 6.2rem; grid-template-columns: 1fr; grid-template-rows: none; row-gap: .75rem; width: 86vw; }
  .bloc-contact h2 { grid-row: 1; font-size: 3.35rem; text-align: left; }
  .bloc-contact .surtitre { grid-column: 1; grid-row: 2; margin: 0; text-align: left; }
  .bloc-contact .surtitre br { display: none; }
  .garanties { grid-column: 1; grid-row: 3; margin: 0; font-size: .95rem; white-space: normal; }
  .detail { grid-column: 1; grid-row: 4; }
  .appel-principal .pilule { min-height: 3.2rem; padding: 0 1.5rem; font-size: 1.2rem; }
  .avec-webgl .suite-detail { position: static; width: auto; }
  .suite-detail { margin-top: .8rem; }
  .presentation { font-size: .98rem; }
  .actions { margin-top: .8rem; }
  .actions .pilule { min-height: 2.75rem; }
  /* (au doigt : l'adresse et « Copier » gardent une cible de 44 px de haut) */
  .par-courriel :is(a, .lien-bouton) { display: inline-block; padding: .6rem 0; }
  .par-courriel .lien-bouton { padding-inline: .35rem; }
  .par-courriel, .par-courriel + .par-courriel { margin-top: 0; }
  .seuil-etat { bottom: 2.4rem; }
  .seuil-aide { bottom: 4.6rem; }
  .sans-webgl .ligne { font-size: 19vw; }
  .sans-webgl .grille { grid-template-columns: 1fr; width: auto; margin: 2rem .85rem 0; }
  .menu { width: 100%; min-width: 0; padding: 0 1.5rem; }
  .menu-liens a { font-size: 4.2rem; }
  .menu-liens sup { margin-top: .6rem; font-size: 1rem; }
  .menu-pied { left: 1.5rem; right: 1.5rem; bottom: 1.6rem; }
  #fermer-menu { top: .9rem; right: 1rem; }
  .menu-services.replie { top: .9rem; left: 1.5rem; }
}