/* Atletisport — page d'accueil
   Direction artistique : blocs sombres encadres poses sur un fond creme,
   navigation en pilule flottante, monospace pour toute la typographie
   secondaire. Les regles sont portees par body.accueil-home quand elles ne
   doivent pas fuir vers la boutique et les actualites, qui chargent la meme
   feuille. */

body.accueil-home{background:var(--creme)}

/* ====================== 1. HERO ENCADRE ====================== */
/* Le hero n'est pas pleine largeur : il est pose dans un cadre arrondi avec
   14 px de fond creme tout autour. La pilule de navigation le survole. */
.hero{padding:14px;background:var(--creme)}
.hero-scene{
  position:relative;isolation:isolate;overflow:hidden;
  border-radius:var(--r-cadre);
  background:var(--noir);color:#fff;
  min-height:min(92vh,880px);
  display:flex;flex-direction:column;
  padding:calc(var(--h-nav) + 56px) clamp(22px,4vw,56px) clamp(30px,4vw,54px);
}
/* Empilement en indices positifs. Le montage precedent posait le fond en
   z-index negatif : l'ajout d'un backdrop-filter sur les pastilles suffisait
   a le faire disparaitre entierement, le hero devenait noir. */
.hero-fond{position:absolute;inset:0;z-index:0}
.hero-fond img{width:100%;height:100%;object-fit:cover;object-position:center 50%}
/* Voile leger : la photo est deja sombre et porte son propre eclairage rouge.
   Le reglage precedent, calibre pour une photo de salle tres claire, la
   noircissait au point d'effacer la machine. On ne garde de l'opacite que la
   ou du texte se pose — la bande haute sous la pilule, et le tiers bas sous
   le titre. Le milieu reste quasi nu pour laisser voir le sujet. */
.hero-scene::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(to bottom,
    rgba(8,8,9,.55) 0%,
    rgba(8,8,9,.10) 26%,
    rgba(8,8,9,.08) 48%,
    rgba(8,8,9,.55) 76%,
    rgba(8,8,9,.88) 100%);
}

.hero-reperes{
  position:relative;z-index:2;
  /* margin-top:auto absorbe toute la hauteur libre au-dessus : les pastilles
     descendent donc se poser juste au-dessus du titre, quelle que soit la
     hauteur de la scene. Elles etaient auparavant centrees verticalement
     (margin:auto 0), ce qui les laissait flotter au milieu de la photo. */
  margin-top:auto;margin-bottom:22px;
  /* Groupees a gauche, et non reparties sur la largeur : la repartition
     n'avait de sens qu'a trois etiquettes. A deux, elle laissait un vide. */
  display:flex;flex-wrap:wrap;justify-content:flex-start;
  gap:10px 14px;
  font-family:var(--mono);font-size:11px;font-weight:400;
  letter-spacing:.14em;text-transform:uppercase;color:#D9DBDE;
}
/* Chaque etiquette porte sa propre pastille sombre. Sans elle, la lisibilite
   depend entierement de ce qui se trouve derriere : sur la photo actuelle,
   le texte tombait a 1,0:1 au-dessus du panneau clair de la machine.
   0,72 d'opacite garantit 5,9:1 meme sur un pixel blanc pur — le hero peut
   donc changer de photo sans repasser par ce calcul.
   Pas de backdrop-filter ici : dans cette scene (isolation:isolate + image de
   fond en position absolue), Chromium cesse de peindre la photo des qu'un
   descendant en porte un. Le hero devenait entierement noir. Le flou etait
   decoratif, la photo ne l'est pas. */
.hero-reperes span{
  display:flex;align-items:center;gap:9px;
  background:rgba(8,8,9,.72);
  border:1px solid rgba(255,255,255,.10);
  border-radius:100px;padding:9px 16px;
  width:fit-content;
}
.hero-reperes i{width:5px;height:5px;border-radius:50%;background:var(--rouge);flex-shrink:0}

.hero-bas{
  position:relative;z-index:2;
  display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);
  gap:clamp(26px,4vw,56px);align-items:end;
}
/* Voile solidaire du bloc de texte, et non de la hauteur de la scene.
   Le degrade general est cale en pourcentages : sur mobile, ou la scene est
   bien plus haute, le titre tombait dans une zone voilee a 17 % seulement et
   passait a 1,46:1 sur les pixels clairs de la machine. Ici le voile suit le
   texte, quelle que soit la hauteur.
   Indices positifs uniquement : un z-index negatif disparaitrait des qu'un
   descendant porte un backdrop-filter. */
.hero-bas::before{
  content:"";position:absolute;z-index:0;pointer-events:none;
  left:calc(-1 * clamp(22px,4vw,56px));
  right:calc(-1 * clamp(22px,4vw,56px));
  bottom:calc(-1 * clamp(30px,4vw,54px));
  top:-56px;
  background:linear-gradient(to top,
    rgba(8,8,9,.93) 0%, rgba(8,8,9,.88) 52%, rgba(8,8,9,.58) 82%, transparent 100%);
}
.hero-bas>*{position:relative;z-index:1}
.hero-bas h1{
  font-size:clamp(33px,6.3vw,76px);font-weight:500;
  letter-spacing:-.04em;line-height:1.01;max-width:13ch;
}
.hero-bas h1 em{font-style:normal;color:var(--rouge-clair)}
.hero-aparte{
  font-family:var(--mono);font-size:11.5px;line-height:1.85;
  letter-spacing:.04em;text-transform:uppercase;color:#C6C9CE;margin-bottom:22px;
}
.hero-actions{display:flex;flex-wrap:wrap;gap:10px}

@media(max-width:900px){
  .hero-scene{min-height:auto;padding-top:calc(var(--h-nav) + 46px)}
  .hero-reperes{margin-top:44px;margin-bottom:20px;flex-direction:column;align-items:flex-start;gap:9px}
  .hero-bas{grid-template-columns:1fr;align-items:start}
  .hero-bas h1{max-width:none}
}

/* Bouton secondaire pose sur photo : fond translucide plutot que bord gris,
   qui disparaitrait sur un fond sombre.
   Sans backdrop-filter, comme les pastilles du hero et pour la meme raison :
   tout flou d'arriere-plan dans cette scene fait cesser le rendu de la photo
   sous Chromium. Il se posait de toute facon sur un voile a 0,88. */
.btn-hero-secondaire{
  background:rgba(255,255,255,.12);color:#fff;
  border:1px solid rgba(255,255,255,.24);
}
.btn-hero-secondaire:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.4)}

/* ====================== 2. MANIFESTE ====================== */
.propos{padding:clamp(66px,8vw,120px) 0;background:var(--creme)}
/* Deux colonnes tres desequilibrees : l'etiquette tient a gauche, la phrase
   occupe le reste. En dessous de 860 px elles s'empilent. */
.propos-grille{
  display:grid;grid-template-columns:minmax(0,.26fr) minmax(0,1fr);
  gap:clamp(18px,4vw,56px);
}
.etiquette{
  align-self:start;   /* sinon le flex centre l'etiquette sur toute la colonne */
  font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--rouge-texte);display:flex;align-items:center;gap:8px;
}
.etiquette::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--rouge-texte)}
.propos-phrase{
  font-size:clamp(19px,2.35vw,30px);font-weight:400;
  line-height:1.4;letter-spacing:-.018em;color:var(--noir);
}
.propos-phrase strong{font-weight:500}
.propos-meta{margin-top:30px;display:flex;flex-wrap:wrap;gap:9px}
.propos-meta span{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  border:1px solid rgba(14,15,17,.16);border-radius:100px;padding:8px 14px;color:var(--gris-700);
}
.propos-actions{margin-top:26px}
.propos-image{
  margin-top:clamp(36px,5vw,66px);border-radius:var(--r-cadre);overflow:hidden;
  /* 16/9 et non 21/9 : le cadre epouse desormais le format des photos
     fournies, qui y perdaient 24 % de leur hauteur. */
  aspect-ratio:16/9;background:var(--gris-200);
}
/* height:auto indispensable : sans lui l'attribut HTML height fait loi et
   aspect-ratio est ignore. */
.propos-image img{width:100%;height:100%;object-fit:cover;object-position:center 44%}
@media(max-width:860px){
  .propos-grille{grid-template-columns:1fr;gap:18px}
  .propos-image{aspect-ratio:16/10}
}

/* ====================== 3. BLOC SOMBRE + FICHE TECHNIQUE ====================== */
.espace{
  position:relative;isolation:isolate;overflow:hidden;
  background:var(--noir);color:#fff;
  padding:clamp(70px,9vw,132px) 0 clamp(50px,6vw,80px);
}
.espace-fond{position:absolute;inset:0;z-index:-2}
.espace-fond img{width:100%;height:100%;object-fit:cover;opacity:.22}
.espace::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(to bottom, rgba(8,8,9,.86) 0%, rgba(8,8,9,.58) 42%, rgba(8,8,9,.90) 100%);
}
.espace>.conteneur{position:relative;z-index:2}
.espace-tete{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(24px,4vw,56px);align-items:end;margin-bottom:clamp(48px,7vw,94px);
}
.espace-tete h2{
  font-size:clamp(26px,3.7vw,42px);font-weight:500;
  letter-spacing:-.032em;line-height:1.12;
}
/* Tout en blanc pur — et ce n'etait pas suffisant. Le texte etait deja en
   rgb(255,255,255), sans opacite ni filtre : ce qui le faisait paraitre gris,
   c'est l'epaisseur du trait. Deux causes cumulees, toutes deux corrigees ici :
   le monospace n'etait charge qu'en graisses 400 et 500, et
   `-webkit-font-smoothing:antialiased`, pose sur le body, amincit encore les
   glyphes clairs sur fond sombre sous macOS. */
.espace-mono{
  font-family:var(--mono);font-size:13.5px;font-weight:600;line-height:2;
  letter-spacing:.03em;text-transform:uppercase;color:#fff;max-width:46ch;
  -webkit-font-smoothing:subpixel-antialiased;
}
.espace-mono a{color:var(--rouge-clair);text-decoration:none}
.espace-mono a:hover{text-decoration:underline}

.specs{border-top:1px solid rgba(255,255,255,.2)}
.specs>div{
  display:grid;grid-template-columns:minmax(140px,.24fr) minmax(0,1fr);
  gap:14px clamp(16px,3vw,40px);
  padding:17px 0;border-bottom:1px solid rgba(255,255,255,.2);
  font-family:var(--mono);letter-spacing:.06em;text-transform:uppercase;
  -webkit-font-smoothing:subpixel-antialiased;
}
.specs dt{color:#fff;font-size:12.5px;font-weight:500;letter-spacing:.1em}
.specs dd{color:#fff;font-size:14px;font-weight:600;line-height:1.75}
@media(max-width:700px){
  .espace-tete{grid-template-columns:1fr}
  .specs>div{grid-template-columns:1fr;gap:5px}
}

/* ====================== 4. GALERIE DES INSTALLATIONS ====================== */
/* Cinq projets au meme format carre, trois par rang. Six colonnes plutot que
   trois : cela permet de decaler la paire du second rang d'une demi-colonne
   pour la centrer, au lieu de la laisser collee a gauche avec un trou a
   droite. */
.galerie-accueil{
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px;
}
/* Une carte est un <figure> tant qu'elle n'a pas de reportage photo, et un
   <button> des qu'elle en a un : d'ou la classe commune plutot qu'un selecteur
   d'element. */
.projet{
  position:relative;border-radius:18px;overflow:hidden;background:var(--gris-200);
  grid-column:span 2;aspect-ratio:1/1;
  margin:0;padding:0;border:0;width:100%;display:block;
  font:inherit;color:inherit;text-align:left;
}
.projet:nth-child(4){grid-column:2/span 2}
.galerie-accueil img{width:100%;height:100%;object-fit:cover}
.projet-legende{
  position:absolute;left:0;right:0;bottom:0;padding:44px 18px 16px;
  background:linear-gradient(to top, rgba(8,8,9,.94) 0%, rgba(8,8,9,.74) 46%, rgba(8,8,9,0) 100%);
  font-family:var(--mono);font-size:10.5px;line-height:1.7;
  letter-spacing:.07em;text-transform:uppercase;color:#E1E3E6;
}
.projet-legende b{display:block;color:#fff;font-weight:500;margin-bottom:4px}

/* Carte cliquable : la photo se rapproche et une invite apparait en haut.
   Sans ce signal, rien ne distingue une carte qui ouvre une visite d'une
   carte qui ne fait rien. */
.projet-visitable{cursor:pointer}
.projet-visitable img{transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.projet-visitable:hover img,
.projet-visitable:focus-visible img{transform:scale(1.045)}
.projet-voir{
  position:absolute;top:14px;left:14px;
  display:inline-flex;align-items:center;gap:7px;
  padding:8px 14px;border-radius:100px;
  background:var(--rouge-texte);color:#fff;
  font-family:var(--mono);font-size:10px;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;
  opacity:0;transform:translateY(-6px);
  transition:opacity .25s ease,transform .25s ease;
}
.projet-visitable:hover .projet-voir,
.projet-visitable:focus-visible .projet-voir{opacity:1;transform:translateY(0)}
.projet-voir svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2}
@media(hover:none){
  /* Sans survol, l'invite reste affichee : c'est le seul indice de clic. */
  .projet-voir{opacity:1;transform:none}
}
@media(max-width:860px){
  .galerie-accueil{grid-template-columns:repeat(2,minmax(0,1fr))}
  .projet,.projet:nth-child(4){grid-column:span 1}
}
@media(max-width:520px){
  .galerie-accueil{grid-template-columns:1fr}
  .projet,.projet:nth-child(4){grid-column:span 1}
}

/* ====================== 5. CARROUSEL DES UNIVERS ====================== */
.entete-carrousel{
  max-width:none;text-align:left;margin-bottom:38px;
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:end;
}
.carrousel-fleches{display:flex;gap:9px}
.carrousel-btn{
  width:42px;height:42px;border-radius:50%;
  border:1px solid rgba(255,255,255,.22);color:#fff;
  display:grid;place-items:center;transition:background .18s,border-color .18s;
}
.carrousel-btn:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.45)}
.carrousel-btn svg{width:15px;height:15px}
.carrousel{
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  padding-inline:max(20px,calc(50vw - var(--max)/2 + 20px));
  scroll-padding-inline:max(20px,calc(50vw - var(--max)/2 + 20px));
  scrollbar-width:none;
}
.carrousel::-webkit-scrollbar{display:none}
.carrousel-piste{display:flex;gap:16px;width:max-content}
.univers{flex:0 0 clamp(236px,23vw,304px);scroll-snap-align:start}
/* La carte n'a plus de cadre : l'image porte le bloc, le texte se pose
   directement sur le fond de section, comme dans la maquette. */
.univers-carte{display:flex;flex-direction:column;height:100%}
.univers-visuel{
  position:relative;aspect-ratio:3/4;overflow:hidden;
  border-radius:16px;background:#0B0C0E;
}
.univers-visuel img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.univers-carte:hover .univers-visuel img{transform:scale(1.045)}
.univers-corps{padding:17px 2px 0;display:flex;flex-direction:column;flex:1}
.univers-gammes{
  display:block;font-family:var(--mono);font-size:10.5px;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:var(--rouge-clair);margin-bottom:9px;
}
.univers-corps h3{font-size:19px;font-weight:500;letter-spacing:-.022em;margin-bottom:9px;color:#fff}
.univers-corps p{color:#9DA2A9;font-size:13.5px;line-height:1.65;flex:1}
/* Un univers peut couvrir deux gammes (AXIS + RE-FIT+, DH-FOR + IMPACT).
   La carte n'est donc pas un lien unique : chaque gamme citee a le sien,
   sinon l'une des deux est nommee sans etre atteignable. */
.univers-liens{margin-top:16px;display:flex;flex-direction:column;gap:8px}
.univers-corps .lien{
  font-family:var(--mono);font-size:10.5px;font-weight:500;
  letter-spacing:.09em;text-transform:uppercase;color:var(--rouge-clair);
  display:flex;align-items:center;gap:7px;text-decoration:none;width:fit-content;
}
.univers-corps .lien:hover{text-decoration:underline;text-underline-offset:3px}
.univers-corps .lien svg{width:11px;height:11px;transition:transform .2s}
.univers-corps .lien:hover svg{transform:translateX(3px)}
@media(max-width:700px){
  .entete-carrousel{grid-template-columns:1fr}
  .carrousel-fleches{display:none}
}

/* ====================== 6. SECTEURS EQUIPES ====================== */
.grille-secteurs{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;
}
@media(max-width:820px){.grille-secteurs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.grille-secteurs{grid-template-columns:1fr}}
.secteur{position:relative;border-radius:18px;overflow:hidden;background:var(--gris-200)}
.secteur img{width:100%;height:100%;aspect-ratio:4/5;object-fit:cover}
.secteur figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:52px 18px 18px;
  background:linear-gradient(to top, rgba(8,8,9,.95) 0%, rgba(8,8,9,.78) 42%, rgba(8,8,9,0) 100%);
}
.secteur figcaption b{
  display:block;color:#fff;font-size:16px;font-weight:500;
  letter-spacing:-.015em;margin-bottom:6px;
}
.secteur figcaption span{
  display:block;font-family:var(--mono);font-size:10.5px;line-height:1.7;
  letter-spacing:.05em;color:#C9CDD2;
}

/* ====================== 7. MISE EN AVANT MULTISTATION ====================== */
.mise-en-avant{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.82fr);
  gap:clamp(28px,4vw,64px);align-items:center;margin-bottom:clamp(40px,5vw,72px);
}
.mise-en-avant-texte h2{
  font-size:clamp(26px,3.6vw,40px);font-weight:500;
  letter-spacing:-.032em;line-height:1.12;margin:14px 0 18px;
}
.mise-en-avant-texte p{color:var(--gris-500);font-size:15.5px;line-height:1.72;margin-bottom:14px}
.mise-en-avant-texte .cta-boutons{margin-top:26px;display:flex;flex-wrap:wrap;gap:10px}
.mise-en-avant-photo{border-radius:var(--r-cadre);overflow:hidden;background:var(--gris-200)}
.mise-en-avant-photo img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}

.configs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:18px}
.config{background:var(--blanc);border-radius:20px;overflow:hidden;border:1px solid rgba(14,15,17,.09)}
.config-visuel{aspect-ratio:1/1;background:var(--gris-100);overflow:hidden}
.config-visuel img{width:100%;height:100%;object-fit:cover}
.config-corps{padding:20px 20px 24px}
.config-corps h3{font-size:19px;font-weight:500;letter-spacing:-.02em;margin-bottom:8px}
.config-specs{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--rouge-texte);margin-bottom:11px;line-height:1.7;
}
.config-corps p{color:var(--gris-500);font-size:14px;line-height:1.65}
@media(max-width:860px){.mise-en-avant{grid-template-columns:1fr}}

/* ====================== 8. SERVICES ====================== */
.grille-services{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:18px}
.service-illustre{background:var(--blanc);border-radius:20px;overflow:hidden;border:1px solid rgba(14,15,17,.09)}
.service-illustre img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;background:var(--gris-100)}
.service-illustre .corps{padding:22px 22px 26px}
.service-illustre h3{font-size:19px;font-weight:500;letter-spacing:-.02em;margin-bottom:11px}
.service-illustre p{color:var(--gris-500);font-size:14px;line-height:1.7}
.service-illustre p+p{margin-top:11px}
.service-illustre strong{color:var(--noir);font-weight:500}

/* ====================== 9. EDITO ====================== */
.edito{display:grid;gap:clamp(40px,6vw,86px)}
.edito-bloc{
  display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1fr);
  gap:clamp(24px,4vw,58px);align-items:center;
}
/* Le visuel passe a droite un bloc sur deux. Sans inverser aussi le gabarit
   de colonnes, il changerait aussi de largeur (407 px a gauche, 656 px a
   droite) : deux tailles de photo a fournir au lieu d'une. */
.edito-bloc:nth-child(even){grid-template-columns:minmax(0,1fr) minmax(0,.62fr)}
.edito-bloc:nth-child(even) figure{order:2}
.edito-bloc figure{border-radius:20px;overflow:hidden;background:#0B0C0E}
.edito-bloc figure img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.edito-num{
  display:block;font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:.16em;color:var(--rouge-clair);margin-bottom:14px;
}
.edito-bloc h3{
  font-size:clamp(21px,2.7vw,30px);font-weight:500;color:#fff;
  letter-spacing:-.028em;line-height:1.18;margin-bottom:16px;
}
.edito-bloc p{color:#A8ADB4;font-size:15px;line-height:1.75}
.edito-bloc p+p{margin-top:13px}
.edito-bloc strong{color:#E4E6E9;font-weight:500}
.edito-bloc a{color:var(--rouge-clair);text-decoration:underline;text-underline-offset:3px}
.note-perimetre{
  margin-top:clamp(40px,5vw,72px);padding-top:26px;
  border-top:1px solid rgba(255,255,255,.14);
  font-family:var(--mono);font-size:11px;line-height:1.9;
  letter-spacing:.05em;text-transform:uppercase;color:#7E848C;max-width:70ch;
}
@media(max-width:820px){
  /* Le selecteur pair doit etre repete ici : une requete media n'ajoute
     aucune specificite, et `.edito-bloc:nth-child(even)` l'emportait donc
     encore sur `.edito-bloc`. Un bloc sur deux restait en deux colonnes sur
     telephone, avec un texte reduit a 119 px de large. */
  .edito-bloc,
  .edito-bloc:nth-child(even){grid-template-columns:minmax(0,1fr)}
  .edito-bloc:nth-child(even) figure{order:0}
}

/* ====================== 10. FAQ EN DEUX COLONNES ====================== */
.faq-bloc{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(28px,4vw,64px);align-items:start;
}
.faq-bloc .faq{max-width:none;margin:0}
/* Un seul visuel, colle en haut de colonne. L'accordeon fait plus du double
   de sa hauteur : `sticky` le fait accompagner le defilement plutot que de
   laisser un grand vide sous lui. */
.faq-visuel{
  position:sticky;top:calc(var(--h-nav) + 44px);
  border-radius:20px;overflow:hidden;background:var(--gris-200);
  aspect-ratio:4/5;
}
.faq-visuel img{width:100%;height:100%;object-fit:cover}
@media(max-width:860px){
  .faq-bloc{grid-template-columns:1fr}
  .faq-visuel{position:static;max-width:460px}
}

/* ====================== 11. ETAPES ====================== */
.specs-rapides{
  display:flex;flex-wrap:wrap;gap:10px 28px;justify-content:center;
  font-family:var(--mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--gris-500);margin-bottom:38px;
}

/* ====================== 9. GAMMES EN ONGLETS ====================== */
/* Deux colonnes : la liste des gammes a gauche, le visuel de celle qui est
   choisie a droite. Les huit volets coexistent dans le HTML, seul l'affichage
   bascule — un moteur de recherche lit donc le catalogue entier. */
.salles{
  display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:clamp(28px,4vw,64px);align-items:stretch;
}
/* L'etiquette rouge est stylee ailleurs pour `.entete-section` seulement :
   ce bloc a son titre aligne a gauche, hors de ce conteneur centre. */
.salles-texte .eyebrow{
  font-family:var(--mono);
  font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--rouge);display:block;
}
.salles-texte h2{
  font-size:clamp(28px,3.6vw,44px);font-weight:500;
  letter-spacing:-.032em;line-height:1.1;color:#fff;margin:10px 0 14px;
}
.salles-texte>p{color:#9AA0A8;line-height:1.7;max-width:46ch;margin-bottom:26px}

.salles-onglets{
  display:flex;flex-direction:column;gap:2px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);
  border-radius:20px;padding:8px;
}
.salle-onglet{
  display:flex;align-items:center;width:100%;
  padding:13px 16px;border:0;border-radius:14px;
  background:transparent;color:#C8CBCF;text-align:left;cursor:pointer;
  transition:background .18s ease,color .18s ease;
}
.salle-onglet:hover{background:rgba(255,255,255,.05);color:#fff}
.salle-onglet.actif{background:rgba(255,255,255,.1);color:#fff}
.salle-etiquette{display:flex;flex-direction:column;gap:2px;min-width:0}
.salle-nom{font-size:16.5px;font-weight:600;letter-spacing:-.01em}
/* Monospace pour la mention secondaire, comme partout ailleurs sur le site. */
.salle-cat{
  font-family:var(--mono);font-size:10.5px;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;color:#9AA0A8;
}
.salle-onglet.actif .salle-cat{color:#C8CBCF}
.salles-cta{margin-top:26px}

/* Le volet occupe toute la hauteur de la colonne de gauche : avec huit
   onglets, un cadre a ratio fixe laissait pres de 400 px de vide sous lui.
   Le visuel s'etire donc, et c'est le recadrage qui absorbe la difference.
   display:flex ici impose de neutraliser [hidden] juste apres : un attribut
   hidden ne fait plus rien face a un display explicite. */
.salles-scene{display:flex}
.salle-volet{display:flex;flex-direction:column;flex:1;min-width:0}
.salle-volet[hidden]{display:none}
.salle-cadre{
  flex:1;min-height:320px;
  border-radius:var(--r-cadre);overflow:hidden;
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 30px 70px -30px rgba(255,38,38,.35);
  background:var(--noir-doux);
}
.salle-cadre img{display:block;width:100%;height:100%;object-fit:cover}
.salle-infos{
  display:flex;flex-direction:column;gap:10px;align-items:flex-start;
  padding:22px 4px 0;
}
.salle-tags{
  font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;color:var(--rouge);
}
.salle-infos p{color:#C8CBCF;line-height:1.7;max-width:62ch;margin:0}
.salle-lien{
  display:inline-flex;align-items:center;gap:8px;
  color:#fff;font-weight:600;text-decoration:none;
}
.salle-lien svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.9;transition:transform .18s ease}
.salle-lien:hover{color:var(--rouge-clair)}
.salle-lien:hover svg{transform:translateX(4px)}

@media(max-width:900px){
  /* minmax(0,1fr) et non 1fr : le minimum automatique d'une piste de grille
     vaut la largeur naturelle de son contenu. La piste s'alignait donc sur les
     huit onglets mis bout a bout (~930 px), ce qui annulait leur propre
     defilement et faisait deborder toute la page horizontalement. */
  .salles{grid-template-columns:minmax(0,1fr)}
  .salles-cta{margin-top:22px}
  /* Sous 900px la colonne de gammes passe en bandeau horizontal defilant :
     huit lignes empilees repousseraient le visuel hors de l'ecran. */
  .salles-onglets{
    flex-direction:row;overflow-x:auto;gap:6px;
    scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
  }
  .salle-onglet{width:auto;flex:0 0 auto;scroll-snap-align:start}
  .salle-cat{display:none}
  /* Colonne unique : plus rien a egaliser, le cadre reprend un ratio fixe
     plutot que d'etirer la photo sur une hauteur arbitraire. */
  .salle-cadre{flex:none;min-height:0;aspect-ratio:3/2}
}

/* ====================== 11. VISITE D'UNE REALISATION ====================== */
/* Fenetre modale native : <dialog> apporte le piege a focus, la fermeture par
   Echap et l'inertie du reste de la page sans une ligne de JavaScript. */
.visite{
  padding:0;border:0;background:transparent;
  max-width:min(1060px,calc(100vw - 32px));
  max-height:calc(100dvh - 48px);
  width:100%;overflow:visible;color:var(--noir);
}
/* Le fond ne defile pas derriere la fenetre. En CSS et non en JavaScript :
   l'etat suit l'attribut `open` du <dialog>, donc il ne peut pas rester
   bloque apres une fermeture, quelle qu'en soit la facon. */
body:has(dialog.visite[open]){overflow:hidden}
.visite::backdrop{
  background:rgba(12,10,10,.62);
  backdrop-filter:blur(14px) saturate(120%);
  -webkit-backdrop-filter:blur(14px) saturate(120%);
}
/* Le cadre reprend le traitement du hero : bloc arrondi, fond creme, un liseré
   clair pour le detacher du flou. */
.visite-cadre{
  background:var(--creme);
  border:1px solid rgba(255,255,255,.5);
  border-radius:var(--r-cadre);
  box-shadow:0 40px 110px -40px rgba(0,0,0,.65);
  max-height:calc(100dvh - 48px);
  display:flex;flex-direction:column;overflow:hidden;
}
.visite-tete{
  display:flex;align-items:flex-start;justify-content:space-between;gap:18px;
  padding:clamp(20px,3vw,30px) clamp(20px,3.4vw,38px) 16px;
  border-bottom:1px solid rgba(14,15,17,.10);
  background:var(--creme);flex-shrink:0;
}
.visite-meta{
  display:block;font-family:var(--mono);font-size:10.5px;font-weight:500;
  letter-spacing:.13em;text-transform:uppercase;color:var(--rouge-texte);margin-bottom:8px;
}
.visite-tete h2{
  font-size:clamp(23px,3vw,34px);font-weight:500;
  letter-spacing:-.03em;line-height:1.1;margin:0;
}
.visite-fermer{
  flex-shrink:0;width:40px;height:40px;border-radius:50%;cursor:pointer;
  border:1px solid rgba(14,15,17,.16);background:var(--blanc);color:var(--noir);
  display:grid;place-items:center;transition:background .18s ease,border-color .18s ease;
}
.visite-fermer:hover{background:var(--noir);border-color:var(--noir);color:#fff}
.visite-fermer svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2}

.visite-corps{
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:clamp(20px,3vw,30px) clamp(20px,3.4vw,38px) clamp(24px,3.4vw,38px);
}
.visite-texte{max-width:72ch}
.visite-statut{
  display:inline-block;margin-bottom:16px;padding:7px 14px;border-radius:100px;
  background:rgba(196,15,15,.09);border:1px solid rgba(196,15,15,.28);
  font-family:var(--mono);font-size:10px;font-weight:500;
  letter-spacing:.11em;text-transform:uppercase;color:var(--rouge-texte);
}
.visite-texte p{color:var(--gris-700);line-height:1.75;margin-bottom:14px}
.visite-gammes{margin:22px 0 4px;display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.visite-gammes-titre{
  font-family:var(--mono);font-size:10px;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:var(--gris-500);
}
.visite-gammes div{display:flex;flex-wrap:wrap;gap:8px}
.visite-gammes a{
  padding:7px 14px;border-radius:100px;text-decoration:none;
  border:1px solid rgba(14,15,17,.18);background:var(--blanc);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--noir);
  transition:background .18s ease,color .18s ease,border-color .18s ease;
}
.visite-gammes a:hover{background:var(--noir);border-color:var(--noir);color:#fff}

.visite-photos{
  margin-top:clamp(22px,3vw,32px);
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;
}
/* La premiere photo passe pleine largeur : c'est celle qui porte le projet. */
.visite-photos figure:first-child{grid-column:1/-1}
.visite-photos figure{
  margin:0;border-radius:16px;overflow:hidden;background:var(--gris-200);
  aspect-ratio:4/3;
}
.visite-photos img{width:100%;height:100%;object-fit:cover;display:block}
.visite-cta{margin-top:clamp(22px,3vw,30px)}

@media(max-width:640px){
  .visite{max-width:calc(100vw - 20px);max-height:calc(100dvh - 24px)}
  .visite-cadre{max-height:calc(100dvh - 24px)}
  .visite-photos{grid-template-columns:1fr}
  .visite-gammes{align-items:flex-start;flex-direction:column;gap:10px}
}