/* ==========================================================================
   OTTOM4T3 — le site
   Structure : celle du site de Jordan Girbon, que nous avons construit
   (entete, identite + releve, cartes, lignes de metiers, bande, contact,
   pied riche, sections qui s'empilent).

   Univers, donne par Kemy le 21/09/2026 (planche de references dans
   « Kemy SITE ») : l'interieur d'un vaisseau blanc. On ne reprend aucune
   image, on en tire un langage :
     - le BLANC est blanc (#FFFFFF), brillant, ombre en gris froid ;
     - l'ORANGE n'est pas une encre, c'est une LUMIERE CHAUDE : des rampes
       qui emettent (coeur presque blanc, bords ambre), un halo, et la paroi
       blanche qui se teinte autour. Jamais d'aplat orange, jamais de texte
       orange sur blanc ;
     - gris Nardo pour les panneaux techniques, noir pour les joints epais,
       les plaques et le pied ;
     - formes : sas et hublots a grands rayons, plaques a pans coupes,
       joints de panneaux, rivets, grilles d'aeration, gros chiffres ;
     - typographie : Michroma (l'Eurostile etendue des coursives) pour les
       titres, chiffres et etiquettes ; Cabinet Grotesk pour lire.
   Contrastes (WCAG 2.2) : noir/blanc 19,6 ; texte-2/blanc 9,6 ; Nardo/blanc
   5,4 ; blanc/Nardo 5,4 ; noir sur lumiere 11 ; lumiere sur noir 11.
   Cout : tous les halos sont des ombres et des degrades STATIQUES (peints une
   fois) ; seules des opacites et des transformations sont animees.
   ========================================================================== */

@font-face{font-family:"Michroma";src:url("/assets/fonts/michroma-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Cabinet";src:url("/assets/fonts/cabinet-500.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Cabinet";src:url("/assets/fonts/cabinet-700.woff2") format("woff2");font-weight:700;font-display:swap}

:root{
  --blanc:#FFFFFF;
  --coque:#F3F5F8;            /* le meme blanc, dans l'ombre */
  --coque-2:#E7EBF0;
  --noir:#0B0C0E;
  --texte-2:#3F444B;
  --nardo:#686A6C;            /* gris Nardo */
  --nardo-fonce:#4E5052;
  --lum-coeur:#FFE9C7;        /* coeur de la lumiere : presque blanc, chaud */
  --lum:#FFB55C;              /* la lumiere chaude */
  --lum-bord:#FF9233;         /* son bord, plus ambre */
  --halo:255,152,58;          /* rvb du halo */
  --joint:rgba(11,12,14,.13);
  --joint-clair:rgba(11,12,14,.07);
  --ombre:24,34,52;           /* rvb des ombres : gris froid, pour que le blanc reste blanc */
  --titre:"Michroma","Eurostile Extended","Eurostile",ui-sans-serif,system-ui,sans-serif;
  --texte:"Cabinet",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --lisse:cubic-bezier(.22,.61,.36,1);
  --sortie:cubic-bezier(.22,1,.36,1);
  --entete:88px;              /* comme chez Jordan : 88 sur ordinateur, 70 sur telephone */
  --r-panneau:26px;
  --r-touche:14px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--blanc);scroll-behavior:smooth;overflow-x:hidden;overflow-x:clip;-webkit-text-size-adjust:100%}
body{
  background:var(--blanc);color:var(--noir);
  font-family:var(--texte);font-weight:500;font-size:1.06rem;line-height:1.72;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
::selection{background:var(--lum);color:var(--noir)}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
ul,ol{list-style:none}
h1,h2,h3{font-family:var(--titre);font-weight:400;line-height:1.16;letter-spacing:-.02em;text-wrap:balance}
p,li,dd{text-wrap:pretty}
.enveloppe{width:min(1220px,90vw);margin-inline:auto}
.hors-ecran{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.filet{width:100%;height:1px;background:var(--joint);border:0}

/* etiquette technique : une plaque noire a pans coupes, comme au mur d'une coursive */
.sur{display:inline-flex;align-items:center;gap:.7em;font-family:var(--titre);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--blanc);background:var(--noir);padding:.62em 1.2em .58em 1em;
  clip-path:polygon(0 0,calc(100% - .8em) 0,100% .8em,100% 100%,.8em 100%,0 calc(100% - .8em))}
.sur::before{content:"";width:.55em;height:.55em;border-radius:50%;background:var(--lum);box-shadow:0 0 6px 1px rgba(var(--halo),.9)}

:focus-visible{outline:2px solid var(--noir);outline-offset:3px;border-radius:4px}
[id]{scroll-margin-top:calc(var(--entete) + 1.2rem)}

.aller-contenu{position:absolute;left:1rem;top:1rem;z-index:60;padding:.7rem 1rem;background:var(--noir);color:var(--blanc);
  opacity:0;pointer-events:none;transform:translateY(-1rem);font-family:var(--titre);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  transition:opacity .18s var(--sortie),transform .18s var(--sortie)}
.aller-contenu:focus{opacity:1;pointer-events:auto;transform:none}

/* ---------- La rampe de lumiere ----------
   Une ligne qui emet : coeur presque blanc, bords ambre, halo autour. */

.rampe{display:block;height:3px;border:0;border-radius:3px;
  background:linear-gradient(90deg,rgba(var(--halo),0) 0%,var(--lum) 14%,var(--lum-coeur) 50%,var(--lum) 86%,rgba(var(--halo),0) 100%);
  box-shadow:0 0 8px rgba(var(--halo),.8)}

/* ---------- Entete ----------
   Un bandeau de coque blanc, opaque, de hauteur fixe. Sa rampe eclaire le
   haut de la page : le blanc se teinte sous elle, comme sous un plafonnier. */
header.tete{position:sticky;top:0;z-index:40;background:var(--blanc)}
header.tete::after{content:"";position:absolute;left:0;right:0;top:100%;height:3px;pointer-events:none;
  background:linear-gradient(90deg,rgba(var(--halo),0) 0%,var(--lum) 12%,var(--lum-coeur) 50%,var(--lum) 88%,rgba(var(--halo),0) 100%);
  box-shadow:0 0 8px rgba(var(--halo),.8)}
header.tete::before{content:"";position:absolute;left:0;right:0;top:100%;height:110px;pointer-events:none;
  background:radial-gradient(58% 100% at 50% 0%,rgba(var(--halo),.17),rgba(var(--halo),0) 72%)}
/* La barre : logo, menu, bouton. L'ecart se resserre avec la fenetre et aucun
   des trois ne peut pousser les autres dehors (min-width:0 + pas de retour a la
   ligne). Le bouton d'appel garde sa taille : c'est lui qui doit rester lisible. */
header .dedans{display:flex;align-items:center;justify-content:space-between;flex-wrap:nowrap;
  gap:clamp(.9rem,1.6vw,1.8rem);height:var(--entete);min-width:0}
header .dedans > *{min-width:0}
header .dedans > .bouton{flex:none}
.marque{font-family:var(--titre);font-size:1rem;letter-spacing:.14em;white-space:nowrap}
.marque i{display:inline-block;width:.5em;height:.5em;border-radius:50%;background:var(--lum);margin-left:.55rem;vertical-align:.08em;
  box-shadow:0 0 8px 2px rgba(var(--halo),.85)}

/* les entrees du menu : des touches de pupitre. La page courante est allumee. */
nav.liens{display:flex;gap:.4rem}
nav.liens a{position:relative;display:inline-flex;align-items:center;min-height:40px;padding:.4rem .85rem;border-radius:var(--r-touche);
  font-family:var(--titre);font-size:.6rem;letter-spacing:.13em;text-transform:uppercase;color:var(--texte-2);white-space:nowrap;
  background:linear-gradient(180deg,#fff 0%,var(--coque) 100%);
  box-shadow:inset 0 0 0 1px var(--joint),inset 0 1px 0 #fff,0 1px 2px rgba(var(--ombre),.10);
  transition:color .2s var(--sortie),box-shadow .25s var(--sortie),transform .2s var(--sortie)}
nav.liens a::after{content:"";position:absolute;left:22%;right:22%;bottom:5px;height:2px;border-radius:2px;background:var(--lum);
  box-shadow:0 0 8px 1px rgba(var(--halo),.9);opacity:0;transition:opacity .25s var(--sortie)}
@media(hover:hover){
  nav.liens a:hover{color:var(--noir);box-shadow:inset 0 0 0 1px var(--joint),inset 0 1px 0 #fff,0 8px 18px -8px rgba(var(--halo),.75)}
  nav.liens a:hover::after{opacity:1}
}
nav.liens a[aria-current="page"]{color:var(--noir);box-shadow:inset 0 0 0 1px var(--joint),inset 0 1px 0 #fff,0 8px 18px -8px rgba(var(--halo),.8)}
nav.liens a[aria-current="page"]::after{opacity:1}
nav.liens a:active{transform:translateY(1px)}

/* ---------- Boutons : des touches ----------
   .bouton          : touche de coque blanche, brillante
   .bouton.lumiere  : la touche allumee, c'est elle qui eclaire. Texte noir (11:1). */
.bouton{position:relative;display:inline-flex;align-items:center;gap:.8rem;padding:1.05rem 1.5rem;border-radius:var(--r-touche);white-space:nowrap;
  cursor:pointer;-webkit-tap-highlight-color:transparent;font-family:var(--titre);font-size:.64rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--noir);background:linear-gradient(180deg,#fff 0%,var(--coque) 100%);
  box-shadow:inset 0 0 0 1px var(--joint),inset 0 1px 0 #fff,0 1px 2px rgba(var(--ombre),.10),0 8px 14px -10px rgba(var(--ombre),.4);
  transition:transform .25s var(--sortie),box-shadow .3s var(--sortie)}
@media(hover:hover){
  .bouton:hover{transform:translateY(-1px);
    box-shadow:inset 0 0 0 1px var(--joint),inset 0 1px 0 #fff,0 1px 2px rgba(var(--ombre),.10),0 10px 18px -10px rgba(var(--halo),.75)}
}
.bouton:active{transform:translateY(1px);transition-duration:.08s}
.bouton.lumiere{background:linear-gradient(180deg,var(--lum-coeur) 0%,#FFCB85 42%,var(--lum) 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.55),inset 0 1px 0 rgba(255,255,255,.95),0 0 0 1px rgba(255,146,51,.55),
    0 0 12px rgba(var(--halo),.55),0 8px 18px -8px rgba(var(--halo),.7)}
@media(hover:hover){
  .bouton.lumiere:hover{box-shadow:inset 0 0 0 1px rgba(255,255,255,.6),inset 0 1px 0 #fff,0 0 0 1px rgba(255,146,51,.6),
    0 0 14px rgba(var(--halo),.75),0 10px 22px -8px rgba(var(--halo),.85)}
}
@media(prefers-reduced-motion:reduce){
  .bouton,nav.liens a{transition:none}
  .bouton:hover,.bouton:active,nav.liens a:active{transform:none}
}
/* Entre le menu compact et les grands ecrans, les touches se resserrent :
   sans ca, logo + menu + bouton demandent 1251 px pour une colonne de 1220. */
@media(max-width:1439px){
  nav.liens{gap:.25rem}
  nav.liens a{padding:.4rem .7rem;font-size:.55rem}
}

/* la fleche s'allonge au survol, par transformation seulement */
.bouton .fl{width:1.4rem;margin-right:-.5rem;height:1px;position:relative;flex:none}
.bouton .fl::before{content:"";position:absolute;left:0;top:0;width:100%;height:1px;background:currentColor;
  transform:scaleX(.62);transform-origin:left;transition:transform .35s var(--sortie)}
.bouton .fl::after{content:"";position:absolute;right:0;top:-3px;width:6px;height:6px;
  border-top:1px solid currentColor;border-right:1px solid currentColor;
  transform:translateX(-.53rem) rotate(45deg);transition:transform .35s var(--sortie)}
@media(hover:hover){
  .bouton:hover .fl::before{transform:scaleX(1)}
  .bouton:hover .fl::after{transform:translateX(0) rotate(45deg)}
}

/* ---------- Menu du telephone ---------- */
.burger{display:none;align-items:center;gap:.7rem;background:none;border:0;cursor:pointer;
  padding:.6rem .2rem;min-height:44px;color:var(--noir);font-family:var(--titre);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase}
.burger .barres{display:block;width:1.35rem}
.burger .barres i{display:block;height:2px;background:currentColor;transition:transform .35s var(--lisse)}
.burger .barres i+i{margin-top:.36rem}
.burger[aria-expanded="true"] .barres i:first-child{transform:translateY(.19rem) rotate(45deg)}
.burger[aria-expanded="true"] .barres i+i{transform:translateY(-.19rem) rotate(-45deg)}
.menu-telephone{border-top:1px solid var(--joint-clair);background:var(--blanc);padding:.6rem 0 1.6rem;
  max-height:calc(100vh - var(--entete));max-height:calc(100dvh - var(--entete));overflow-y:auto;overscroll-behavior:contain}
.menu-telephone .enveloppe{display:grid}
.menu-telephone a{font-family:var(--titre);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;padding:1.05rem 0;border-bottom:1px solid var(--joint-clair)}
.menu-telephone a[aria-current="page"]{box-shadow:inset 3px 0 0 var(--lum);padding-left:.9rem}
.menu-telephone a.bouton{margin-top:1.2rem;margin-bottom:8px;padding:1.1rem 1.6rem;justify-content:center;border-bottom:0;font-size:.68rem}
/* Sous 1260 px le menu passe en bouton « Menu » : au-dessus, logo + menu +
   bouton d'appel demandent plus de place que la colonne et le bouton sortait
   de la fenetre. Le bouton d'appel, lui, reste visible : c'est l'action. */
@media(max-width:1260px){
  nav.liens{display:none}
  .burger{display:inline-flex}
  header .dedans{justify-content:flex-start}
  header .dedans .contact-tete{margin-left:auto}
}
@media(max-width:1060px){
  header.tete{position:fixed;top:0;left:0;right:0;transform:translateZ(0)}
  body{padding-top:var(--entete)}
  :root{--entete:70px}
  .contact-tete{display:none}          /* sur telephone il est dans le menu */
}
@media(max-width:1260px) and (min-width:1061px){
  .menu-telephone a.bouton{display:none}   /* deja dans la barre */
}
@media(min-width:1261px){.menu-telephone{display:none}}

/* ---------- Sections : des baies ----------
   Chaque titre de section porte son numero de baie, en gros chiffres, et le
   joint noir a pan coupe des parois de laboratoire. Les numeros se comptent
   seuls (compteur CSS) : rien a ecrire dans les pages. */
main{counter-reset:baie}
main > section{position:relative;padding:8vh 0;background-color:var(--blanc);
  /* les joints de la coque, ranges dans les marges : un long joint a pan coupe,
     une trappe rivetee, une grille, deux reperes. Jamais sous le texte. */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='900' fill='none'%3E%3Cg stroke='%230B0C0E' stroke-opacity='.11'%3E%3Cpath d='M72.5 0v300l-24 24v200l24 24v352M0 120.5h72M0 600.5h72'/%3E%3Crect x='14.5' y='160.5' width='42' height='104' rx='14'/%3E%3C/g%3E%3Cg fill='%230B0C0E' fill-opacity='.2'%3E%3Ccircle cx='24' cy='172' r='1.6'/%3E%3Ccircle cx='47' cy='172' r='1.6'/%3E%3Ccircle cx='24' cy='253' r='1.6'/%3E%3Ccircle cx='47' cy='253' r='1.6'/%3E%3Cpath d='M16 640h40v3H16zM16 649h40v3H16zM16 658h40v3H16z'/%3E%3Crect x='16' y='700' width='7' height='7'/%3E%3C/g%3E%3Crect x='27' y='700' width='7' height='7' fill='%23FFB55C' fill-opacity='.9'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='900' fill='none'%3E%3Cg stroke='%230B0C0E' stroke-opacity='.11'%3E%3Cpath d='M23.5 0v180l24 24v260l-24 24v412M24 90.5h72M24 520.5h72'/%3E%3Crect x='40.5' y='560.5' width='42' height='104' rx='14'/%3E%3C/g%3E%3Cg fill='%230B0C0E' fill-opacity='.2'%3E%3Ccircle cx='50' cy='572' r='1.6'/%3E%3Ccircle cx='73' cy='572' r='1.6'/%3E%3Ccircle cx='50' cy='653' r='1.6'/%3E%3Ccircle cx='73' cy='653' r='1.6'/%3E%3Cpath d='M42 240h40v3H42zM42 249h40v3H42zM42 258h40v3H42z'/%3E%3Crect x='73' y='300' width='7' height='7'/%3E%3C/g%3E%3Crect x='62' y='300' width='7' height='7' fill='%23FFB55C' fill-opacity='.9'/%3E%3C/svg%3E");
  background-repeat:repeat-y,repeat-y;background-position:left top,right top;background-size:96px 900px,96px 900px}
/* Les bandes de joints font 96 px : elles ne sont dessinees que si la marge
   libre de chaque cote est plus large qu'elles (fenetre > 1540 px avec une
   colonne de 1220). En dessous, elles passaient sur le texte. */
@media(max-width:1539px){ main > section{background-image:none} }
main > section.gris{background:var(--coque);box-shadow:inset 0 1px 0 var(--joint-clair),inset 0 -1px 0 var(--joint-clair)}
.section-titre{counter-increment:baie;position:relative;font-size:clamp(1.55rem,2.9vw,2.5rem);max-width:22ch;margin-bottom:2.4rem;padding-top:5.6rem}
.section-titre::before{content:counter(baie,decimal-leading-zero);position:absolute;left:0;top:-.35rem;
  font-size:clamp(2.6rem,4.6vw,4.2rem);line-height:1;letter-spacing:.02em;color:var(--noir)}
.section-titre::after{content:"";position:absolute;left:clamp(5.6rem,9.4vw,8.4rem);top:.55rem;width:min(300px,50vw);height:30px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='30' fill='none'%3E%3Cpath d='M0 3.5h150l21 21h129' stroke='%230B0C0E' stroke-width='3'/%3E%3Crect x='188' y='6' width='8' height='8' fill='%230B0C0E'/%3E%3Crect x='202' y='6' width='8' height='8' fill='%23FFB55C'/%3E%3C/svg%3E") no-repeat left top/300px 30px}
.chapeau{color:var(--texte-2);max-width:42rem;margin:-1.2rem 0 2.8rem;font-size:1.08rem}

/* bande gris Nardo : un panneau technique, avec ses joints et ses cables de lumiere */
main > section.nardo{background-color:var(--nardo);color:#fff;overflow:hidden;
  background-image:
    linear-gradient(90deg,rgba(var(--halo),0) 0,rgba(var(--halo),.9) 20%,rgba(var(--halo),.9) 80%,rgba(var(--halo),0) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='320' fill='none' stroke-width='1'%3E%3Cg stroke='%23000' stroke-opacity='.10'%3E%3Cpath d='M0 80.5h150l30 30h300M180 0v60l30 30v230M330 110.5v120l-30 30v60M0 250.5h120l30-30h180'/%3E%3Crect x='40.5' y='120.5' width='90' height='70' rx='14'/%3E%3Crect x='360.5' y='150.5' width='80' height='110' rx='18'/%3E%3C/g%3E%3Cg stroke='%23fff' stroke-opacity='.05'%3E%3Cpath d='M0 81.5h150l30 30h300M181 0v60l30 30v230M0 251.5h120l30-30h180'/%3E%3C/g%3E%3Cg fill='%23000' fill-opacity='.15'%3E%3Ccircle cx='52' cy='132' r='1.6'/%3E%3Ccircle cx='119' cy='132' r='1.6'/%3E%3Ccircle cx='52' cy='179' r='1.6'/%3E%3Ccircle cx='119' cy='179' r='1.6'/%3E%3Cpath d='M380 168h40v3h-40zM380 176h40v3h-40zM380 184h40v3h-40z'/%3E%3C/g%3E%3C/svg%3E");
  background-size:100% 2px,480px 320px;background-position:left top,left top;background-repeat:no-repeat,repeat}
main > section.nardo::before{content:"";position:absolute;left:0;right:0;top:0;height:140px;pointer-events:none;
  background:radial-gradient(50% 100% at 50% 0%,rgba(var(--halo),.22),rgba(var(--halo),0) 70%)}
.nardo .section-titre::before{color:#fff}
.nardo .section-titre::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='30' fill='none'%3E%3Cpath d='M0 3.5h150l21 21h129' stroke='%23fff' stroke-width='3'/%3E%3Crect x='188' y='6' width='8' height='8' fill='%23fff'/%3E%3Crect x='202' y='6' width='8' height='8' fill='%23FFB55C'/%3E%3C/svg%3E")}
.nardo .colonnes p,.nardo .chapeau,.nardo p{color:#F2F3F4}
.nardo .enveloppe{position:relative}
/* Le motif technique de la paroi ne doit JAMAIS passer derriere le texte : le
   contenu est pose sur une plaque, comme un panneau visse sur la paroi. */
.nardo .enveloppe > *{position:relative;z-index:1}
.nardo .enveloppe::before{content:"";position:absolute;inset:-2.6rem -2.2rem;border-radius:var(--r-panneau);pointer-events:none;
  background:linear-gradient(180deg,#75777A 0%,#65676A 55%,#5C5E61 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),inset 0 1px 0 rgba(255,255,255,.22),0 20px 40px -26px rgba(0,0,0,.6)}
/* quatre rivets, aux angles de la plaque */
.nardo .enveloppe::after{content:"";position:absolute;inset:-2.6rem -2.2rem;border-radius:var(--r-panneau);pointer-events:none;
  background:
    radial-gradient(circle at 18px 18px,rgba(0,0,0,.35) 0 1.6px,rgba(0,0,0,0) 2.4px),
    radial-gradient(circle at calc(100% - 18px) 18px,rgba(0,0,0,.35) 0 1.6px,rgba(0,0,0,0) 2.4px),
    radial-gradient(circle at 18px calc(100% - 18px),rgba(0,0,0,.35) 0 1.6px,rgba(0,0,0,0) 2.4px),
    radial-gradient(circle at calc(100% - 18px) calc(100% - 18px),rgba(0,0,0,.35) 0 1.6px,rgba(0,0,0,0) 2.4px)}

/* bande noire : la coursive, de nuit. Des arches de lumiere s'eloignent derriere l'image. */
main > section.noir{background:var(--noir);color:#fff;overflow:hidden}
.noir .sur{background:#fff;color:var(--noir)}
.noir p{color:#C8CCD1}
.noir .bouton:not(.lumiere){background:linear-gradient(180deg,#1B1D21,#121316);color:#fff;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),inset 0 1px 0 rgba(255,255,255,.12),0 14px 26px -16px #000}
@media(hover:hover){.noir .bouton:not(.lumiere):hover{box-shadow:inset 0 0 0 1px rgba(255,255,255,.2),inset 0 1px 0 rgba(255,255,255,.14),0 16px 34px -12px rgba(var(--halo),.7)}}
.noir .apercu figcaption{color:#A4A9AF}
.arches{position:absolute;right:-9vw;top:50%;width:min(56vw,800px);aspect-ratio:1/1;transform:translateY(-50%);pointer-events:none}
.arches i{position:absolute;inset:var(--i);border-radius:24%;border:2px solid var(--lum);opacity:var(--o);
  box-shadow:0 0 10px rgba(var(--halo),.7),inset 0 0 10px rgba(var(--halo),.4)}
.arches::before{content:"";position:absolute;inset:-10%;border-radius:30%;background:radial-gradient(closest-side,rgba(var(--halo),.22),rgba(var(--halo),0) 100%)}
.arches i:nth-child(1){--i:0%;--o:.95}
.arches i:nth-child(2){--i:9%;--o:.8}
.arches i:nth-child(3){--i:17%;--o:.64}
.arches i:nth-child(4){--i:24%;--o:.5}
.arches i:nth-child(5){--i:30%;--o:.38}
.arches i:nth-child(6){--i:35%;--o:.28}
.noir .grille-bande{position:relative}

/* ---------- Accueil : l'identite ---------- */
.identite{padding:7vh 0 8vh;overflow:hidden}
.grille-identite{display:grid;grid-template-columns:1.12fr .88fr;gap:6vw;align-items:center}
.identite .sur{margin-bottom:1.8rem}
.identite h1{font-size:clamp(2rem,3.3vw,3.75rem);letter-spacing:-.03em;line-height:1.1;margin-bottom:1.8rem}
.identite .presentation{font-size:clamp(1.02rem,1.2vw,1.22rem);color:var(--texte-2);max-width:38rem;line-height:1.72}
.identite .actions{display:flex;gap:.9rem;flex-wrap:wrap;margin-top:2.4rem}
.entree{animation:entree-gauche .7s var(--sortie) both;animation-delay:var(--d,0s)}
.entree-image{animation:entree-image 1s var(--sortie) both;animation-delay:.35s}
@keyframes entree-gauche{from{opacity:0;transform:translateX(-30px)}to{opacity:1;transform:none}}
@keyframes entree-image{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}

/* le sas : un hublot a grand rayon, sa levre blanche, son joint noir, et l'anneau
   de lumiere qui eclaire la paroi autour. Tout est fait d'ombres portees
   concentriques : elles suivent le rayon du hublot. --u est l'unite du dessin. */
.sas{--u:clamp(3.4px,.36vw,5.4px);position:relative;margin:0 auto;width:min(100%,calc(100svh - var(--entete) - 12rem));max-width:30rem;
  padding:calc(var(--u) * 17) calc(var(--u) * 17) calc(var(--u) * 30)}
.sas__hublot{display:block;position:relative;aspect-ratio:1/1;border-radius:27%;overflow:hidden;background:var(--noir);
  box-shadow:
    0 0 0 calc(var(--u) * 1.2) var(--noir),
    0 0 0 calc(var(--u) * 6.6) #fff,
    0 0 0 calc(var(--u) * 6.9) var(--joint),
    0 0 0 calc(var(--u) * 7.7) var(--lum),
    0 0 0 calc(var(--u) * 8.9) var(--lum-coeur),
    0 0 0 calc(var(--u) * 9.8) var(--lum),
    0 0 calc(var(--u) * 2.5) calc(var(--u) * 10.4) rgba(var(--halo),.6)}
.sas__hublot img{width:100%;height:100%;object-fit:cover}
/* un reflet en travers de la vitre */
.sas__hublot::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  box-shadow:inset 0 calc(var(--u) * 2) calc(var(--u) * 3) rgba(0,0,0,.55),inset 0 0 0 1px rgba(255,255,255,.08);
  background:linear-gradient(118deg,rgba(255,255,255,.22) 0%,rgba(255,255,255,0) 26%,rgba(255,255,255,0) 72%,rgba(255,255,255,.10) 100%)}
/* la lumiere respire : seul le voile du halo change d'opacite */
.sas::before{content:"";position:absolute;inset:calc(var(--u) * -10) calc(var(--u) * -10) calc(var(--u) * 3);border-radius:38%;pointer-events:none;z-index:-1;
  background:radial-gradient(closest-side,rgba(var(--halo),.55) 52%,rgba(var(--halo),.32) 64%,rgba(var(--halo),.12) 80%,rgba(var(--halo),0) 100%);
  animation:respire 6s ease-in-out infinite;will-change:opacity}
@keyframes respire{0%,100%{opacity:.6}50%{opacity:1}}
/* le sol brillant : l'anneau s'y reflete, ecrase par la perspective, puis la
   lumiere s'y etale en flaque. Deux formes, aucune image. */
.sas::after{content:"";position:absolute;left:12%;right:12%;top:calc(100% - var(--u) * 24);height:calc(var(--u) * 13);pointer-events:none;border-radius:50%;
  border:calc(var(--u) * .7) solid rgba(var(--halo),.5);
  background:radial-gradient(50% 50% at 50% 50%,rgba(var(--halo),.38),rgba(var(--halo),.1) 60%,rgba(var(--halo),0) 100%);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.25) 100%);mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.25) 100%)}
/* Le hublot se balaie : une invite, une jauge d'avancee sous la vitre.
   L'invite disparait des que le visiteur a compris (--avance bouge). */
.sas__hublot{cursor:grab;touch-action:pan-y}
.sas[data-geste="oui"] .sas__hublot{cursor:grabbing}
.sas__geste{position:absolute;left:50%;bottom:calc(var(--u) * 33);transform:translateX(-50%);z-index:2;pointer-events:none;
  display:inline-flex;align-items:center;gap:.5rem;padding:.42rem .8rem;border-radius:var(--r-touche);white-space:nowrap;
  font-family:var(--titre);font-size:.5rem;letter-spacing:.17em;text-transform:uppercase;color:var(--noir);
  background:rgba(255,255,255,.88);box-shadow:inset 0 0 0 1px var(--joint),0 4px 14px -6px rgba(var(--ombre),.5);
  opacity:0;transition:opacity .4s var(--sortie)}
.sas__geste i{display:block;width:1.6rem;height:1px;background:currentColor;position:relative}
.sas__geste i::before,.sas__geste i::after{content:"";position:absolute;top:-2.5px;width:5px;height:5px;border-top:1px solid currentColor}
.sas__geste i::before{left:0;border-left:1px solid currentColor;transform:rotate(-45deg);animation:pousse 2.4s var(--lisse) infinite}
.sas__geste i::after{right:0;border-right:1px solid currentColor;transform:rotate(45deg);animation:pousse 2.4s var(--lisse) infinite reverse}
@keyframes pousse{0%,100%{opacity:.35}50%{opacity:1}}
@media(hover:hover){.sas:hover .sas__geste{opacity:1}}
.sas[data-etat="chargement"] .sas__geste,.sas[data-etat="pret"] .sas__geste{opacity:0}
.sas__jauge{position:absolute;left:18%;right:18%;bottom:calc(var(--u) * 27);height:2px;border-radius:2px;z-index:2;pointer-events:none;
  background:rgba(var(--halo),.22);opacity:0;transition:opacity .4s var(--sortie)}
.sas__jauge::after{content:"";position:absolute;left:0;top:0;bottom:0;border-radius:2px;background:var(--lum);
  box-shadow:0 0 8px 1px rgba(var(--halo),.9);width:calc(var(--avance,0) * 100%);transition:width .12s linear}
.sas[data-etat="chargement"] .sas__jauge,.sas[data-etat="pret"] .sas__jauge{opacity:1}
@media(prefers-reduced-motion:reduce){
  .sas__geste,.sas__jauge{display:none}
  .sas__hublot{cursor:pointer}
  .sas__geste i::before,.sas__geste i::after{animation:none}
}

.sas figcaption{position:absolute;right:0;top:0;text-align:right;font-family:var(--titre);font-size:.56rem;letter-spacing:.18em;text-transform:uppercase;color:var(--nardo)}
.sas figcaption a{color:var(--noir);border-bottom:2px solid var(--lum)}

/* le releve : la plaque signaletique du bord */
.releve{position:relative;margin-top:8vh;border-radius:var(--r-panneau);padding:.6rem 2.2rem;
  background:linear-gradient(180deg,#fff 0%,#fff 55%,var(--coque) 100%);
  box-shadow:inset 0 0 0 1px var(--joint),inset 0 1px 0 #fff,0 14px 24px -18px rgba(var(--ombre),.45),0 12px 22px -16px rgba(var(--halo),.4)}
.releve::after{content:"";position:absolute;right:2.2rem;top:-7px;width:64px;height:14px;border-radius:4px;background:
  repeating-linear-gradient(90deg,var(--noir) 0 3px,rgba(11,12,14,0) 3px 7px) var(--blanc);box-shadow:0 0 0 4px var(--blanc),0 0 0 5px var(--joint)}
.releve > div{display:grid;grid-template-columns:12rem 1fr;gap:2rem;padding:1.15rem 0;border-bottom:1px solid var(--joint-clair)}
.releve > div:last-child{border-bottom:0}
.releve dt{font-family:var(--titre);font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:var(--nardo);padding-top:.5rem}
.releve dd{color:var(--noir);max-width:48rem}
.releve a{border-bottom:2px solid var(--lum);padding-bottom:1px;transition:background-color .18s var(--sortie)}
@media(hover:hover){.releve a:hover{background:rgba(var(--halo),.18)}}

.colonnes{columns:2;column-gap:4vw;max-width:66rem}
.colonnes p{color:var(--texte-2);margin-bottom:1.15rem;break-inside:avoid}
.colonnes p:last-child{margin-bottom:0}

/* ---------- Panneaux ----------
   La paroi blanche : brillante en haut, ombree en bas, un joint sur le bord,
   quatre rivets, une ombre froide au sol. Au survol, la lumiere s'allume dessous. */
.cartes{counter-reset:carte;display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem}
.carte{counter-increment:carte;position:relative;padding:4.4rem 2rem 2.2rem;border-radius:var(--r-panneau);
  display:flex;flex-direction:column;gap:1rem;
  background:
    radial-gradient(circle at 16px 16px,rgba(11,12,14,.3) 0 1.4px,rgba(11,12,14,0) 2px),
    radial-gradient(circle at calc(100% - 16px) 16px,rgba(11,12,14,.3) 0 1.4px,rgba(11,12,14,0) 2px),
    radial-gradient(circle at 16px calc(100% - 16px),rgba(11,12,14,.3) 0 1.4px,rgba(11,12,14,0) 2px),
    radial-gradient(circle at calc(100% - 16px) calc(100% - 16px),rgba(11,12,14,.3) 0 1.4px,rgba(11,12,14,0) 2px),
    linear-gradient(180deg,#fff 0%,#fff 50%,var(--coque) 100%);
  box-shadow:inset 0 0 0 1px var(--joint),inset 0 1px 0 #fff,0 14px 22px -16px rgba(var(--ombre),.45);
  transition:transform .4s var(--sortie)}
/* la plaque du numero */
.carte::before{content:counter(carte,decimal-leading-zero);position:absolute;left:2rem;top:1.7rem;font-family:var(--titre);font-size:.62rem;letter-spacing:.16em;
  color:#fff;background:var(--noir);padding:.5em 1.1em .46em .9em;
  clip-path:polygon(0 0,calc(100% - .7em) 0,100% .7em,100% 100%,.7em 100%,0 calc(100% - .7em))}
/* la lumiere sous le panneau */
.carte::after{content:"";position:absolute;left:9%;right:9%;bottom:-2px;height:3px;border-radius:3px;pointer-events:none;
  background:linear-gradient(90deg,rgba(var(--halo),0),var(--lum) 18%,var(--lum-coeur) 50%,var(--lum) 82%,rgba(var(--halo),0));
  box-shadow:0 0 10px rgba(var(--halo),.9),0 6px 16px 2px rgba(var(--halo),.45);opacity:.4;transition:opacity .45s var(--sortie)}
@media(hover:hover){
  .carte:hover{transform:translateY(-3px)}
  .carte:hover::after{opacity:1}
}
.carte:focus-within::after{opacity:1}
.carte h3,.carte h2{font-size:1.06rem;line-height:1.35;letter-spacing:-.01em}
.carte p{font-size:.98rem;color:var(--texte-2);flex:1}
.carte .lien{display:inline-flex;align-items:center;gap:.7rem;font-family:var(--titre);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--noir);min-height:44px}
.carte .lien i{width:1.6rem;margin-right:-.3rem;height:2px;border-radius:2px;background:var(--lum);box-shadow:0 0 8px rgba(var(--halo),.9);flex:none;
  transform:scaleX(.7);transform-origin:left;transition:transform .35s var(--sortie)}
.carte:hover .lien i{transform:scaleX(1)}
.cartes.deux{grid-template-columns:repeat(2,1fr)}
.carte .mention{position:absolute;right:2rem;top:1.85rem;font-family:var(--titre);font-size:.56rem;letter-spacing:.18em;text-transform:uppercase;color:var(--nardo)}
.carte ul{display:grid;gap:.5rem;font-size:.95rem;color:var(--texte-2)}
.carte ul li{position:relative;padding-left:1.2rem}
.carte ul li::before{content:"";position:absolute;left:0;top:.74em;width:.55rem;height:2px;border-radius:2px;background:var(--lum);box-shadow:0 0 6px rgba(var(--halo),.9)}
.carte .prix{padding-top:1rem;border-top:1px solid var(--joint-clair);font-family:var(--titre);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--noir)}
.carte .bouton{align-self:flex-start}

/* ---------- Activites : une ligne par metier ---------- */
.activite{display:grid;grid-template-columns:.38fr .62fr;gap:3vw;padding:2.5rem 0;border-top:1px solid var(--joint)}
.activite:last-child{border-bottom:1px solid var(--joint)}
.activite .nom{font-family:var(--titre);font-size:1.12rem;line-height:1.4;letter-spacing:-.005em}
.activite .nom small{display:block;font-family:var(--titre);font-size:.56rem;letter-spacing:.18em;text-transform:uppercase;color:var(--nardo);margin-top:.8rem}
.activite p{color:var(--texte-2);max-width:42rem;margin-bottom:1.3rem}
.activite p:last-child{margin-bottom:0}
.etiquettes{display:flex;flex-wrap:wrap;gap:.45rem;margin:.2rem 0 1.5rem}
.etiquettes li{font-family:var(--titre);font-size:.54rem;letter-spacing:.12em;text-transform:uppercase;color:var(--texte-2);
  border-radius:9px;padding:.55rem .8rem;background:linear-gradient(180deg,#fff,var(--coque));box-shadow:inset 0 0 0 1px var(--joint)}

.bande h2{font-size:clamp(1.6rem,3vw,2.65rem);max-width:19ch}
.bande p{max-width:40rem;margin:1.5rem 0 2.3rem}
.bande .grille-bande{display:grid;grid-template-columns:1fr 1fr;gap:5vw;align-items:center}

/* ---------- Realisations ---------- */
.realisation{display:grid;grid-template-columns:.92fr 1.08fr;gap:4.5vw;padding:3.4rem 0;border-top:1px solid var(--joint);align-items:start}
.realisation:last-child{border-bottom:1px solid var(--joint)}
.realisation .rang{display:inline-block;font-family:var(--titre);font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;color:#fff;background:var(--noir);
  padding:.55em 1.1em .5em .9em;margin-bottom:1.1rem;clip-path:polygon(0 0,calc(100% - .7em) 0,100% .7em,100% 100%,.7em 100%,0 calc(100% - .7em))}
.realisation h2,.realisation h3{font-size:clamp(1.25rem,2vw,1.8rem);margin-bottom:.5rem}
.realisation .genre{font-size:.95rem;color:var(--nardo);margin-bottom:1.3rem}
.realisation p{color:var(--texte-2);max-width:40rem;margin-bottom:1.3rem}
.faits{border-top:1px solid var(--joint-clair);margin:1.4rem 0}
.faits > div{display:grid;grid-template-columns:10rem 1fr;gap:1.4rem;padding:.85rem 0;border-bottom:1px solid var(--joint-clair)}
.faits dt{font-family:var(--titre);font-size:.55rem;letter-spacing:.18em;text-transform:uppercase;color:var(--nardo);padding-top:.45rem}
.faits dd{font-size:.97rem}
.lien-externe{display:inline-flex;align-items:center;gap:.5rem;font-weight:700;color:var(--noir);border-bottom:2px solid var(--lum);padding-bottom:1px;min-height:32px}
@media(hover:hover){.lien-externe:hover{background:rgba(var(--halo),.18)}}
/* un ecran de bord : levre blanche, joint noir, lumiere dessous */
.apercu{margin:0}
.apercu .cadre{position:relative;border-radius:var(--r-panneau);overflow:hidden;background:var(--noir);aspect-ratio:16/10;border:3px solid var(--noir);
  box-shadow:0 0 0 7px #fff,0 0 0 8px var(--joint),0 16px 26px -16px rgba(var(--ombre),.5),0 14px 26px -14px rgba(var(--halo),.5)}
.apercu .cadre img{width:100%;height:100%;object-fit:cover}
.apercu .cadre::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(118deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,0) 24%)}
.apercu figcaption{margin-top:1.3rem;font-size:.84rem;color:var(--nardo)}
.noir .apercu .cadre{box-shadow:0 0 0 7px #17181B,0 0 0 8px rgba(255,255,255,.14),0 0 24px rgba(var(--halo),.4)}
.apercu .cadre.texte{display:grid;place-items:center;padding:2rem}
.apercu .cadre.texte span{font-family:var(--titre);font-size:clamp(1rem,1.6vw,1.35rem);line-height:1.45;max-width:18ch;text-align:center;color:#fff}
.apercu .cadre.texte span::after{content:"";display:block;width:3rem;height:3px;border-radius:3px;background:var(--lum);box-shadow:0 0 12px rgba(var(--halo),.9);margin:1.3rem auto 0}

/* ---------- Pages interieures ---------- */
.page-tete{padding:10vh 0 8vh;overflow:hidden}
.page-tete::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--joint)}
.page-tete .sur{display:flex;width:max-content;margin-bottom:1.8rem}
.page-tete h1{font-size:clamp(1.9rem,4.4vw,3.75rem);max-width:18ch;margin-bottom:1.7rem;letter-spacing:-.03em}
.page-tete .intro{font-size:clamp(1.03rem,1.2vw,1.18rem);color:var(--texte-2);max-width:42rem;line-height:1.76}
.page-tete .intro + .intro{margin-top:1rem}
.page-tete .actions{display:flex;gap:.9rem;flex-wrap:wrap;margin-top:2.2rem}
/* Le hublot de lumiere, en haut a droite. Il est ancre sur le BORD DROIT DE LA
   FENETRE et ne sort que d'un sixieme : la forme ronde se lit, au lieu de
   ressembler a un panneau coupe. Il reste toujours a droite du texte, qui est
   limite a 42 rem. Sous 980 px il n'y a plus la place : il disparait. */
.page-tete::before{content:"";position:absolute;right:clamp(24px,4vw,72px);top:50%;width:min(18vw,230px);aspect-ratio:1/1;transform:translateY(-50%);border-radius:27%;pointer-events:none;z-index:0;
  box-shadow:0 0 0 2px var(--noir),0 0 0 11px #fff,0 0 0 12px var(--joint),0 0 0 15px var(--lum),0 0 0 17px var(--lum-coeur),0 0 0 19px var(--lum),
    0 0 18px 20px rgba(var(--halo),.40);
  background:radial-gradient(circle at 38% 34%,var(--lum-coeur) 0%,#FFF6E8 38%,#fff 74%)}
.page-tete .enveloppe{position:relative;z-index:1}
.page-tete .enveloppe > *{animation:entree-gauche .7s var(--sortie) both;animation-delay:var(--d,.40s)}
.page-tete .fil{--d:0s}
.page-tete .sur{--d:.10s}
.page-tete h1{--d:.24s}
.page-tete h1 ~ *{--d:.40s}
.page-tete h1 ~ * ~ *{--d:.54s}

.fil{display:flex;flex-wrap:wrap;gap:.6rem;font-family:var(--titre);font-size:.55rem;letter-spacing:.16em;text-transform:uppercase;color:var(--nardo);margin-bottom:2.4rem}
.fil a{color:var(--noir);border-bottom:1px solid var(--joint)}
@media(hover:hover){.fil a:hover{border-color:var(--lum-bord)}}

.bloc-texte{counter-increment:baie;display:grid;grid-template-columns:.8fr 1.2fr;gap:5vw;padding:8vh 0;border-bottom:1px solid var(--joint)}
.bloc-texte:last-child{border-bottom:0}
.bloc-texte h2{font-size:clamp(1.2rem,1.9vw,1.7rem);max-width:17ch;line-height:1.3}
.bloc-texte .etiquette{margin-bottom:1.3rem}
.prose p{color:var(--texte-2);margin-bottom:1.15rem;max-width:42rem}
.prose p:last-child{margin-bottom:0}
.prose .bouton{margin-top:.6rem}
.prose figure{margin-top:2.2rem}

.points{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem}
.point{position:relative;padding:2.4rem 2rem 2.2rem;border-radius:var(--r-panneau);background:linear-gradient(180deg,#fff 0%,#fff 50%,var(--coque) 100%);
  box-shadow:inset 0 0 0 1px var(--joint),inset 0 1px 0 #fff,0 14px 22px -16px rgba(var(--ombre),.45)}
.gris .point,.gris .carte{background-color:#fff}
.point h3{font-size:.92rem;margin-bottom:.9rem;line-height:1.45}
.point h3::before{content:"";display:block;width:2.4rem;height:3px;border-radius:3px;background:var(--lum);box-shadow:0 0 10px rgba(var(--halo),.9);margin-bottom:1.4rem}
.point p{font-size:.98rem;color:var(--texte-2)}

.faq{border-top:1px solid var(--joint);max-width:56rem}
.faq details{border-bottom:1px solid var(--joint)}
.faq summary{list-style:none;cursor:pointer;padding:1.5rem 3.4rem 1.5rem 0;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary h3{font-size:.9rem;line-height:1.5;letter-spacing:-.005em}
/* un voyant : eteint ferme, allume ouvert */
.faq summary::after{content:"";position:absolute;right:.6rem;top:50%;width:.8rem;height:.8rem;border-radius:50%;transform:translateY(-50%);
  background:var(--coque-2);box-shadow:inset 0 0 0 1px var(--joint);transition:background-color .3s var(--lisse),box-shadow .3s var(--lisse)}
.faq details[open] summary::after{background:var(--lum);box-shadow:0 0 0 1px var(--lum-bord),0 0 12px 2px rgba(var(--halo),.85)}
.faq details p{padding:0 0 1.7rem;color:var(--texte-2);max-width:46rem}

/* ---------- La methode : une rampe qui s'allume au defilement ---------- */
.chrono{position:relative;padding-left:3.4rem;max-width:54rem}
.chrono::before{content:"";position:absolute;left:.66rem;top:.55rem;bottom:.55rem;width:3px;border-radius:3px;background:var(--coque-2);box-shadow:inset 0 0 0 1px var(--joint-clair)}
.chrono .trace{position:absolute;left:.66rem;top:.55rem;width:3px;border-radius:3px;height:calc(100% - 18px);
  background:linear-gradient(180deg,var(--lum),var(--lum-coeur) 50%,var(--lum));box-shadow:0 0 10px rgba(var(--halo),.85);
  transform:scaleY(0);transform-origin:top}
.etape{position:relative;padding-bottom:3.6rem}
.etape:last-child{padding-bottom:0}
.etape::before{content:"";position:absolute;left:-3.4rem;top:.3rem;width:1.5rem;height:1.5rem;border-radius:50%;
  background:#fff;box-shadow:inset 0 0 0 1px var(--joint),0 2px 5px rgba(var(--ombre),.18);
  transition:background-color .5s var(--lisse),box-shadow .5s var(--lisse)}
.etape.atteinte::before{background:var(--lum-coeur);box-shadow:inset 0 0 0 2px var(--lum),0 0 16px 3px rgba(var(--halo),.8)}
.etape .rang{display:block;font-family:var(--titre);font-size:.56rem;letter-spacing:.2em;text-transform:uppercase;color:var(--nardo);margin-bottom:.8rem;transition:color .5s var(--lisse)}
.etape.atteinte .rang{color:var(--noir)}
.etape h2{font-size:clamp(1.15rem,1.7vw,1.5rem);margin-bottom:.9rem;max-width:24ch}
.etape p{color:var(--texte-2);max-width:42rem}

.contact{display:grid;grid-template-columns:1fr 1fr;gap:5vw;align-items:center}
.contact h2{font-size:clamp(1.5rem,2.7vw,2.3rem);max-width:19ch}
.contact p{color:var(--texte-2);margin:1.3rem 0 2.1rem;max-width:34rem}
.contact .actions{display:flex;gap:.9rem;flex-wrap:wrap}
.contact .note{font-size:.95rem;color:var(--nardo);margin-top:1.4rem}
.contact .note a{color:var(--noir);border-bottom:2px solid var(--lum)}

.orientation{position:relative;display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap;
  padding:2rem 2.4rem 2rem 2.8rem;border-radius:var(--r-panneau);background:linear-gradient(180deg,#fff,#fff 50%,var(--coque));
  box-shadow:inset 0 0 0 1px var(--joint),inset 0 1px 0 #fff,0 14px 22px -16px rgba(var(--ombre),.45)}
.orientation::before{content:"";position:absolute;left:1rem;top:18%;bottom:18%;width:3px;border-radius:3px;background:linear-gradient(180deg,var(--lum),var(--lum-coeur),var(--lum));
  box-shadow:0 0 10px rgba(var(--halo),.85)}
.orientation .sur{margin-bottom:.9rem}
.orientation h3{font-size:1rem;margin-bottom:.6rem}
.orientation p{color:var(--texte-2);max-width:40rem}

/* ---------- Blog : cartes d'articles ----------
   Le meme panneau que les cartes, avec un ecran de bord en tete. */
.categories{display:flex;flex-wrap:wrap;gap:.5rem;margin:-1rem 0 2.4rem}
.categories span{font-family:var(--titre);font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;color:var(--texte-2);
  border-radius:9px;padding:.55rem .85rem;background:linear-gradient(180deg,#fff,var(--coque));box-shadow:inset 0 0 0 1px var(--joint)}
.cartes.articles .article-carte{padding:1.2rem 1.2rem 2.2rem}
.cartes.articles .article-carte::before{display:none}
.article-carte__image{display:block;border-radius:calc(var(--r-panneau) - 8px);overflow:hidden;background:var(--noir);aspect-ratio:16/9;margin-bottom:1.4rem;
  box-shadow:inset 0 0 0 1px var(--joint)}
.article-carte__image img{width:100%;height:100%;object-fit:cover}
.article-carte h3{padding:0 .8rem}
.article-carte p{padding:0 .8rem}
.article-carte .lien{margin:0 .8rem}
.article-carte .video__date{padding:0 .8rem}

/* la page d'un article */
.page-tete--article h1{max-width:24ch}
.article__meta{margin-top:1.4rem;font-family:var(--titre);font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;color:var(--nardo)}
.article .enveloppe{max-width:54rem}
.article__image{margin-bottom:3.4rem}
.article__image .cadre{aspect-ratio:16/9}
.article__corps h2{font-size:clamp(1.1rem,1.7vw,1.45rem);line-height:1.4;margin:2.8rem 0 1rem}
.article__corps h2::before{content:"";display:block;width:2.4rem;height:3px;border-radius:3px;background:var(--lum);box-shadow:0 0 10px rgba(var(--halo),.85);margin-bottom:1rem}
.article__corps h3{font-size:1rem;margin:2rem 0 .8rem}
.article__corps p{font-size:1.08rem;line-height:1.8;color:var(--texte-2);max-width:none;margin-bottom:1.25rem}
.article__corps p:first-of-type{font-size:1.16rem;color:var(--noir)}
.article__corps ul{padding-left:1.2rem;list-style:disc;color:var(--texte-2);margin-bottom:1.25rem}
.article__corps a{color:var(--noir);border-bottom:2px solid var(--lum)}
.article__partage{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-top:3.4rem;padding-top:2rem;border-top:1px solid var(--joint)}

/* ---------- L'affiche : la porte du film ----------
   Un panneau large, l'image dans son hublot rectangulaire, le bouton a cote.
   Le film ne se charge que sur la page suivante : ici, rien ne pese. */
.affiche{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.6rem,3vw,3rem);align-items:center;
  padding:clamp(1.4rem,2vw,2rem);border-radius:var(--r-panneau);color:var(--noir);
  background:linear-gradient(180deg,#fff 0%,#fff 50%,var(--coque) 100%);
  box-shadow:inset 0 0 0 1px var(--joint),inset 0 1px 0 #fff,0 16px 26px -18px rgba(var(--ombre),.45);
  transition:transform .3s var(--sortie),box-shadow .35s var(--sortie)}
@media(hover:hover){.affiche:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1px var(--joint),inset 0 1px 0 #fff,0 18px 34px -16px rgba(var(--halo),.75)}}
.affiche__image{display:block;position:relative;border-radius:calc(var(--r-panneau) - 6px);overflow:hidden;background:var(--noir);aspect-ratio:4/3;
  border:3px solid var(--noir);box-shadow:0 0 0 6px #fff,0 0 0 7px var(--joint),0 0 22px rgba(var(--halo),.35)}
.affiche__image img{width:100%;height:100%;object-fit:cover}
.affiche__image::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(118deg,rgba(255,255,255,.18) 0%,rgba(255,255,255,0) 26%)}
.affiche__texte{display:flex;flex-direction:column;align-items:flex-start;gap:1rem}
.affiche__titre{font-family:var(--titre);font-size:clamp(1.2rem,2vw,1.8rem);line-height:1.25;letter-spacing:-.015em}
.affiche__note{color:var(--texte-2);font-size:.98rem;max-width:34rem}
.affiche .bouton{margin-top:.4rem}

/* ---------- Videos : des ecrans de bord qui renvoient vers YouTube ---------- */
.videos-bande .videos{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem}
.video{display:flex;flex-direction:column;gap:.7rem;color:var(--noir)}
.video__vignette{position:relative;display:block;border-radius:var(--r-panneau);overflow:hidden;background:var(--noir);aspect-ratio:16/9;border:3px solid var(--noir);
  box-shadow:0 0 0 6px #fff,0 0 0 7px var(--joint),0 16px 26px -16px rgba(var(--ombre),.5)}
.video__vignette img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--lisse)}
@media(hover:hover){.video:hover .video__vignette img{transform:scale(1.03)}}
/* la touche « lecture » : un disque de lumiere, un triangle noir */
.video__vignette i{position:absolute;left:50%;top:50%;width:3.6rem;height:3.6rem;border-radius:50%;transform:translate(-50%,-50%);
  background:linear-gradient(180deg,var(--lum-coeur),#FFCB85 45%,var(--lum));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 0 0 2px rgba(255,146,51,.6),0 0 18px rgba(var(--halo),.75)}
.video__vignette i::after{content:"";position:absolute;left:55%;top:50%;transform:translate(-50%,-50%);
  border-left:15px solid var(--noir);border-top:9px solid transparent;border-bottom:9px solid transparent}
.video__date{font-family:var(--titre);font-size:.55rem;letter-spacing:.16em;text-transform:uppercase;color:var(--nardo);margin-top:.5rem}
.video__titre{font-family:var(--titre);font-size:.9rem;line-height:1.45;letter-spacing:-.005em}
.videos__suite{margin-top:2.4rem}
.gris .video__vignette{box-shadow:0 0 0 6px #fff,0 0 0 7px var(--joint),0 16px 26px -16px rgba(var(--ombre),.5)}

/* ---------- Portraits et galeries ---------- */
.portrait-bloc{display:grid;grid-template-columns:.7fr 1.3fr;gap:5vw;align-items:center}
.portrait{margin:0;max-width:26rem}
.portrait .cadre{position:relative;border-radius:27%;overflow:hidden;border:3px solid var(--noir);aspect-ratio:1/1;background:var(--noir);
  box-shadow:0 0 0 8px #fff,0 0 0 9px var(--joint),0 0 0 12px var(--lum),0 0 0 15px var(--lum-coeur),0 0 0 17px var(--lum),0 0 18px 18px rgba(var(--halo),.5)}
.portrait .cadre img{width:100%;height:100%;object-fit:cover}
.portrait figcaption{margin-top:1.6rem;font-family:var(--titre);font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;color:var(--nardo);text-align:center}
.portrait-bloc .prose h2{font-size:clamp(1.3rem,2.2vw,1.9rem);margin-bottom:1.1rem}
.portrait-bloc .prose .etiquette{margin-bottom:1.2rem}
.galerie-trois{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem;margin:2.4rem 0 1rem}
.galerie-trois .apercu .cadre{aspect-ratio:16/10}
.galerie-trois .apercu .cadre.portrait-cadre{aspect-ratio:1/1}
.galerie-trois .apercu .cadre.portrait-cadre img{object-position:50% 20%}
.galerie-otto{display:grid;grid-template-columns:repeat(4,1fr);gap:1.3rem;margin:2.4rem 0 3rem}
.galerie-otto .apercu.telephone{grid-row:span 2}
.galerie-otto .apercu.telephone .cadre{aspect-ratio:390/844;border-radius:32px}
.cartes.explorations .carte{padding:1.2rem 1.2rem 2.2rem}
.cartes.explorations .carte::before{display:none}
.cartes.explorations .carte h3,.cartes.explorations .carte p,.cartes.explorations .carte .lien{margin-left:.8rem;margin-right:.8rem}
.cartes.explorations .carte .mention{position:static;margin:0 .8rem}

/* ---------- OTTO parle : le hublot dont la lumiere suit la voix ---------- */
.otto{display:grid;grid-template-columns:.7fr 1.3fr;gap:5vw;align-items:center}
.otto__hublot{position:relative;width:min(100%,20rem);aspect-ratio:1/1;margin:0 auto;border-radius:27%;background:var(--noir);
  box-shadow:0 0 0 8px #fff,0 0 0 9px var(--joint),0 0 0 12px var(--lum),0 0 0 15px var(--lum-coeur),0 0 0 17px var(--lum),
    0 0 calc(14px + var(--niveau,0) * 40px) calc(16px + var(--niveau,0) * 18px) rgba(var(--halo),calc(.35 + var(--niveau,0) * .5))}
/* le coeur de lumiere : un disque chaud qui respire au repos et bat avec la voix */
.otto__hublot i{position:absolute;left:50%;top:50%;width:38%;height:38%;border-radius:50%;transform:translate(-50%,-50%) scale(calc(1 + var(--niveau,0) * .55));
  background:radial-gradient(circle,#FFF4E0 0%,var(--lum-coeur) 30%,var(--lum) 62%,rgba(255,146,51,0) 72%);
  box-shadow:0 0 30px 6px rgba(var(--halo),.7);transition:transform .08s linear;animation:otto-respire 4s ease-in-out infinite}
.otto__hublot b{position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(118deg,rgba(255,255,255,.2) 0%,rgba(255,255,255,0) 26%,rgba(255,255,255,0) 72%,rgba(255,255,255,.08) 100%)}
@keyframes otto-respire{0%,100%{opacity:.75}50%{opacity:1}}
.otto.en-ligne .otto__hublot i{animation:none;opacity:1}
.otto[data-etat="erreur"] .otto__hublot i{background:radial-gradient(circle,#fff 0%,#C8CCD1 40%,rgba(200,204,209,0) 72%);box-shadow:none}
.otto__texte h2{font-size:clamp(1.3rem,2.2vw,1.9rem);margin:1.2rem 0 1rem}
.otto__texte p{color:var(--texte-2);max-width:40rem}
.otto__etat{margin-top:1.2rem;font-family:var(--titre);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--noir);min-height:1.4em}
.otto__etat::before{content:"";display:inline-block;width:.6em;height:.6em;border-radius:50%;background:var(--coque-2);margin-right:.7em;vertical-align:.05em;box-shadow:inset 0 0 0 1px var(--joint)}
.otto[data-etat="ecoute"] .otto__etat::before,.otto[data-etat="parle"] .otto__etat::before{background:var(--lum);box-shadow:0 0 8px 2px rgba(var(--halo),.85)}
.otto[data-etat="parle"] .otto__etat::before{animation:otto-respire .6s ease-in-out infinite}
.otto[data-etat="erreur"] .otto__etat{color:#9A2E12}
.otto__actions{display:flex;gap:.9rem;flex-wrap:wrap;margin-top:1.4rem}
.otto__actions .bouton{font:inherit;font-family:var(--titre);font-size:.64rem;letter-spacing:.13em;text-transform:uppercase}
.otto.en-ligne .otto__actions .bouton.lumiere{background:linear-gradient(180deg,#fff,var(--coque));box-shadow:inset 0 0 0 1px var(--joint),inset 0 1px 0 #fff}
.otto__note{margin-top:1.4rem;font-size:.86rem;color:var(--nardo);max-width:40rem}

/* ---------- Contenus : filtres (comme chez Jordan) ---------- */
.filtres{display:flex;flex-wrap:wrap;gap:.5rem;margin:-1rem 0 2.4rem}
.filtre{font-family:var(--titre);font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--texte-2);cursor:pointer;
  border:0;border-radius:999px;padding:.7rem 1rem;background:linear-gradient(180deg,#fff,var(--coque));box-shadow:inset 0 0 0 1px var(--joint);
  transition:color .2s var(--sortie),box-shadow .25s var(--sortie)}
.filtre[aria-pressed="true"]{color:var(--noir);box-shadow:inset 0 0 0 1px var(--joint),inset 0 -2px 0 var(--lum),0 8px 18px -8px rgba(var(--halo),.8)}
.video[hidden]{display:none}
.aucun-contenu{padding:2rem 0;color:var(--nardo)}

/* ---------- Pages legales ---------- */
.legal{max-width:52rem}
.legal h1{font-size:clamp(1.7rem,3.2vw,2.8rem);letter-spacing:-.025em;margin-bottom:1.4rem}
.legal .maj{font-size:.88rem;color:var(--nardo);margin:-.4rem 0 2.6rem}
.legal h2{font-size:clamp(.98rem,1.4vw,1.15rem);margin:3rem 0 1.1rem;line-height:1.45}
.legal p,.legal li{color:var(--texte-2);margin-bottom:1rem}
.legal ul{padding-left:1.1rem;list-style:disc}
.legal a{color:var(--noir);border-bottom:2px solid var(--lum)}
.legal strong,.legal b{color:var(--noir)}
.fiche{border-top:1px solid var(--joint-clair);margin:1rem 0 1.4rem}
.fiche > div{display:grid;grid-template-columns:15rem 1fr;gap:1.4rem;padding:.85rem 0;border-bottom:1px solid var(--joint-clair)}
.fiche > div > span:first-child{font-family:var(--titre);font-size:.55rem;letter-spacing:.16em;text-transform:uppercase;color:var(--nardo);padding-top:.45rem}
.legal table{width:100%;border-collapse:collapse;margin:1rem 0 1.6rem;font-size:.95rem}
.legal th,.legal td{text-align:left;padding:.7rem .8rem .7rem 0;border-bottom:1px solid var(--joint-clair);vertical-align:top;color:var(--texte-2)}
.legal th{font-family:var(--titre);font-size:.55rem;letter-spacing:.14em;text-transform:uppercase;color:var(--nardo)}

.introuvable{padding:18vh 0 16vh}
.introuvable h1{font-size:clamp(1.7rem,3.4vw,2.9rem);max-width:20ch;margin-bottom:1.4rem}
.introuvable p{color:var(--texte-2);max-width:36rem;margin-bottom:2rem}

/* ---------- Pied de page : le pont inferieur, noir, sous sa rampe ---------- */
footer.pied{position:relative;padding:9vh 0 3vh;background:var(--noir);color:#fff}
footer.pied::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,rgba(var(--halo),0) 0%,var(--lum) 12%,var(--lum-coeur) 50%,var(--lum) 88%,rgba(var(--halo),0) 100%);
  box-shadow:0 0 10px rgba(var(--halo),.85)}
footer.pied::after{content:"";position:absolute;left:0;right:0;top:0;height:160px;pointer-events:none;
  background:radial-gradient(50% 100% at 50% 0%,rgba(var(--halo),.2),rgba(var(--halo),0) 70%)}
footer .enveloppe{position:relative;z-index:1}
footer .haut{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:3rem;margin-bottom:3.4rem}
footer .signature{font-size:1rem;color:#C8CCD1;max-width:24rem;margin-top:1.1rem}
footer .titre-pied{font-family:var(--titre);font-size:.56rem;letter-spacing:.2em;text-transform:uppercase;color:#9EA3A9;margin-bottom:1.2rem}
footer ul{display:grid;gap:.5rem;font-size:.95rem}
footer ul a{background:linear-gradient(var(--lum),var(--lum)) no-repeat left bottom/0 2px;transition:background-size .2s var(--sortie)}
@media(hover:hover){footer ul a:hover{background-size:100% 2px}}
footer .mentions{border-top:1px solid rgba(255,255,255,.13);padding-top:1.7rem;margin-bottom:1.7rem;
  display:grid;gap:.8rem;font-size:.8rem;line-height:1.75;color:#9EA3A9}
footer .mentions p{max-width:72rem}
footer .mentions a{color:#fff;text-decoration:underline;text-decoration-color:var(--lum);text-underline-offset:3px}
footer .bas{border-top:1px solid rgba(255,255,255,.13);padding-top:1.5rem;display:flex;justify-content:space-between;
  gap:1rem;flex-wrap:wrap;font-size:.84rem;color:#9EA3A9}
footer .legaux{display:flex;gap:1.4rem;flex-wrap:wrap}
footer .legaux a{text-decoration:underline;text-underline-offset:3px}
footer a:focus-visible{outline-color:var(--lum)}

/* ---------- Les sections s'empilent (accueil, ordinateur) ----------
   Le geste du site de Jordan : chaque section colle sous l'entete et la
   suivante vient se poser par-dessus. Une section plus haute que l'ecran sort
   de la pile (classe hors-pile, posee par le script). */
@media(min-width:861px) and (prefers-reduced-motion:no-preference){
  /* Pas de centrage vertical et la hauteur minimale reste la meme dans les deux
     etats : sortir une section de la pile ne deplace plus rien (le recentrage au
     chargement des polices faisait un decalage de mise en page de 0,8). */
  main.pile > section{position:sticky;top:var(--entete);min-height:calc(100vh - var(--entete));
    min-height:calc(100svh - var(--entete));display:flex;flex-direction:column;justify-content:flex-start;padding-top:9vh;padding-bottom:9vh}
  main.pile > section + section{box-shadow:0 -1px 0 var(--joint),0 -14px 22px -18px rgba(var(--ombre),.6)}
  main.pile > section.identite{position:relative;top:auto;min-height:0;box-shadow:none;display:block}
  main.pile > section.hors-pile{position:relative;top:auto}
}

/* ---------- Apparitions : retirees ----------
   Les blocs se fondaient en montant a leur entree a l'ecran. Chaque bloc etant
   un panneau lourd a dessiner (degrades, ombres, joints), la transition
   forcait le navigateur a le redessiner sur sa propre couche pendant une demi-
   seconde, a chaque section : mesure le 22/09/2026, 5 a 7 images en retard par
   defilement, contre 0 a 1 sans. Les blocs sont donc visibles d'emblee. */
.app{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .entree,.entree-image,.page-tete .enveloppe > *{animation:none}
  .sas::before{animation:none;opacity:.7}
  .etape::before,.etape .rang,.carte,.carte::after{transition:none}
}

/* ==========================================================================
   Responsive — en fin de fichier : a specificite egale, la derniere regle gagne
   ========================================================================== */
@media(max-width:980px){
  .grille-identite{grid-template-columns:1fr;gap:3rem}
  .sas{--u:clamp(3.2px,.9vw,5px);max-width:24rem}
  .cartes,.cartes.deux,.points{grid-template-columns:1fr}
  .videos-bande .videos{grid-template-columns:1fr;max-width:34rem}
  .portrait-bloc,.otto,.affiche{grid-template-columns:1fr;gap:2.4rem}
  .portrait,.otto__hublot{max-width:16rem}
  .galerie-trois{grid-template-columns:1fr}
  .galerie-otto{grid-template-columns:1fr 1fr}
  .galerie-otto .apercu.telephone{grid-row:auto}
  .contact,.bande .grille-bande{grid-template-columns:1fr;gap:2.4rem}
  .arches{right:-30vw;width:120vw;opacity:.55}
  .page-tete::before{display:none}
  footer .haut{grid-template-columns:1fr 1fr;gap:2.4rem}
  footer .haut > div:first-child{grid-column:1 / -1}
}
@media(max-width:860px){
  .bloc-texte,.realisation{grid-template-columns:1fr;gap:1.6rem}
  .colonnes{columns:1}
}
@media(max-width:760px){
  main > section{padding:8vh 0}
  .identite{padding:5vh 0 6vh}
  .identite h1{font-size:clamp(1.6rem,6.6vw,2.05rem)}
  .identite .actions .bouton,.page-tete .actions .bouton,.contact .actions .bouton{flex:1 1 100%;justify-content:center}
  .activite{grid-template-columns:1fr;gap:1rem}
  .releve{padding:.4rem 1.3rem}
  .releve > div,.faits > div,.fiche > div{grid-template-columns:1fr;gap:.3rem}
  .releve dt,.faits dt{padding-top:0}
  .page-tete{padding:7vh 0 6vh}
  .page-tete h1{font-size:clamp(1.55rem,6.6vw,2.1rem)}
  .section-titre{padding-top:4.6rem}
  .chrono{padding-left:2.6rem}
  .chrono::before,.chrono .trace{left:.5rem}
  .etape::before{left:-2.6rem;width:1.25rem;height:1.25rem}
  .orientation{padding:1.8rem 1.4rem 1.8rem 2.2rem}
}
@media(max-width:520px){
  footer .haut{grid-template-columns:1fr}
  .carte{padding:4.2rem 1.4rem 2rem}
  .carte::before{left:1.4rem}
  .carte .mention{right:1.4rem}
}