/* ==================================================================
   Atlas Consulting, page commerciale.
   Échelle mesurée, filets d'un pixel, l'orange signale et ne décore pas.
   Contrastes mesurés, WCAG 2.2 AA tenu sur tous les textes.
   ================================================================== */

/* Polices auto hébergées, sous ensemble latin, aucune requête tierce. */
@font-face{font-family:'Prata';font-style:normal;font-weight:400;font-display:swap;
  src:url(/polices/prata.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Jost';font-style:normal;font-weight:300 500;font-display:swap;
  src:url(/polices/jost.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Grand Hotel';font-style:normal;font-weight:400;font-display:swap;
  src:url(/polices/grand-hotel.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  /* Marque, quatre couleurs de la charte */
  --indigo:#1C2058; --orange:#CE6A1E; --sable:#F0E7D8; --blanc:#FFFFFF;

  /* Textes sur fond clair, tous mesurés au dessus de 4,5 pour 1 */
  --n700:#3E4171;        /* 7,79 sur sable   9,55 sur blanc   8,87 sur crème */
  --n500:#5A5D80;        /* 5,17 sur sable   6,34 sur blanc   5,89 sur crème */
  --orange-txt:#9E4D0F;  /* 4,86 sur sable   5,96 sur blanc   5,54 sur crème */
  --petrole-txt:#2A6685; /* 5,13 sur sable   5,84 sur crème */
  --erreur:#A63A1F;      /* 6,47 sur blanc   6,01 sur crème */

  /* Fonds et filets clairs */
  --creme:#FAF6F0; --sable-fonce:#E7DAC5;
  --bordure-c:#DED2BD;   /* filet décoratif de section */
  --champ-bord:#8C8CA6;  /* 3,04 sur crème, seuil non textuel tenu */

  /* Famille du fond indigo, tous mesurés au dessus de 4,5 pour 1 */
  --sur-indigo:#FFFFFF;        /* 15,03 */
  --sur-indigo-fort:#C3C6DD;   /*  8,91 */
  --sur-indigo-moyen:#BFC1DA;  /*  8,49 */
  --sur-indigo-faible:#A9ACCB; /*  6,77 */
  --orange-clair:#E08A45;      /*  5,65 */
  --petrole-clair:#8FBEDA;     /*  7,55 */
  --bordure-sombre:#3A3E76;

  /* Échelle typographique, seize degrés pour toute la page */
  --t-9:9.5px; --t-10:10px; --t-12:12.5px; --t-13:13.5px; --t-14:14.5px; --t-15:15.5px;
  --t-16:16px; --t-17:17px; --t-19:19px; --t-mot:25px;
  --t-22:clamp(17px,1.5vw,22px);
  --t-21:clamp(18px,1.5vw,23px);
  --t-faq:clamp(16px,1.35vw,20px);
  --t-preuve:clamp(21px,2vw,30px);
  --t-chiffre:clamp(24px,2vw,30px);
  --t-marque-p:clamp(24px,2.2vw,32px);
  --t-38:clamp(24px,2.5vw,38px);
  --t-54:clamp(29px,3.5vw,54px);
  --t-marque:clamp(30px,3vw,44px);

  /* Espacements, échelle de quatre */
  --e-1:4px; --e-2:8px; --e-3:12px; --e-4:16px; --e-5:22px; --e-6:28px;
  --e-bloc:clamp(16px,1.8vw,24px);
  --e-carte:clamp(22px,2.4vw,34px);
  --e-carte-l:clamp(24px,2.4vw,38px);
  --e-tete:clamp(30px,4vw,54px);
  --e-section-i:clamp(38px,5vw,64px);
  --e-section:clamp(56px,7vw,104px);
  --e-col:clamp(22px,4vw,64px);

  /* Crénage, deux valeurs */
  --cren-titre:-.016em; --cren-etiquette:.2em;

  /* Durées, trois valeurs */
  --vite:.3s; --moyen:.5s; --lent:.9s;

  --pad:clamp(22px,5vw,96px); --max:1340px;
  --display:'Prata',Georgia,Constantia,serif;
  --ui:'Jost','Century Gothic','Segoe UI',sans-serif;
  --marque:'Grand Hotel',cursive;
  --out:cubic-bezier(.16,.84,.24,1);
}
*{box-sizing:border-box;min-width:0}
html{scroll-behavior:smooth;scroll-padding-top:86px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--sable);color:var(--indigo);font-family:var(--ui);
  font-size:var(--t-15);line-height:1.68;font-weight:400;-webkit-font-smoothing:antialiased;
  overflow-wrap:break-word}
a{color:inherit}
svg,img{max-width:100%}
.zone{max-width:var(--max);margin-inline:auto;
  padding-left:calc(var(--pad) + env(safe-area-inset-left, 0px));
  padding-right:calc(var(--pad) + env(safe-area-inset-right, 0px))}
.piege{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.saut{position:absolute;left:-9999px;background:var(--indigo);color:var(--sur-indigo);
  padding:var(--e-3) 18px;z-index:200;text-decoration:none}
.saut:focus{left:12px;top:12px}
::selection{background:var(--indigo);color:var(--sur-indigo)}
main:focus{outline:none}

/* Échelle */
h1,h2,h3,h4{font-weight:400;margin:0}
h1{font-family:var(--display);font-size:var(--t-54);line-height:1.1;letter-spacing:-.018em}
h2{font-family:var(--display);font-size:var(--t-38);line-height:1.16;letter-spacing:var(--cren-titre)}
h3{font-family:var(--display);font-size:var(--t-21);line-height:1.25}
h4{font-size:var(--t-16);font-weight:500;line-height:1.4}
em{font-style:normal;color:var(--orange-txt)}
h1 em,h2 em{color:var(--orange)}
p{margin:0 0 var(--e-3)}
p:last-child{margin-bottom:0}
.gris{color:var(--n700)}
.mesure{max-width:60ch}
.appuie{font-weight:500;color:var(--indigo)}
.sombre-bloc .appuie,.offre.sombre .appuie{color:var(--sur-indigo)}
.esp-h{margin-top:var(--e-5)}
.esp-h-p{margin-top:10px}
.esp-b{margin-bottom:clamp(18px,2vw,28px)}
.compass h3.grand{font-size:var(--t-38);line-height:1.16;letter-spacing:var(--cren-titre)}
.esp-h-l{margin-top:var(--e-tete)}
.note{font-size:var(--t-14)}

/* Étiquette en capitales, un seul composant pour toute la page */
.lab,.sous-tt,.champ label,.rang .aile b,.res-l .ou,.res-l .ch small,
.outil .role,.poste .an,.coord b,.villes{
  font-size:var(--t-10);font-weight:500;letter-spacing:var(--cren-etiquette);
  text-transform:uppercase;color:var(--n500)}
.champ label,.rang .aile b,.res-l .ou,.res-l .ch small,.poste .an,.coord b,.villes{font-size:var(--t-9)}
.lab.acc{color:var(--orange-txt)}
.rang .aile b,.res-l .ch small,.coord b{display:block;margin-bottom:5px}
.res-l .ou,.res-l .ch small,.coord b,.villes{color:var(--sur-indigo-faible)}
.outil .role{color:var(--orange-txt);margin:var(--e-3) 0 var(--e-3)}
.outil.vedette .role{color:var(--orange-clair)}

/* Réveils, discrets, posés seulement si le script tourne */
.js [data-a]{opacity:0;transform:translateY(12px);
  transition:opacity .7s var(--out),transform .7s var(--out);transition-delay:var(--d,0ms)}
.js [data-a].vu{opacity:1;transform:none}

/* Jauge de lecture, un filet orange en haut de page */
.jauge{position:fixed;top:0;left:0;right:0;height:2px;z-index:90;transform:scaleX(0);
  transform-origin:left;background:var(--orange);will-change:transform}

/* Le titre d'ouverture se découvre du haut vers le bas */
.js .hero h1{clip-path:inset(0 0 100% 0);transition:clip-path .6s var(--out)}
.js .hero h1.vu{clip-path:inset(0 0 0 0)}

/* Filet qui se trace sous chaque titre de section */
.tete h2::after{content:"";display:block;width:64px;height:2px;background:var(--orange);
  margin-top:clamp(14px,1.6vw,22px)}
.js .tete h2::after{transform:scaleX(0);transform-origin:left;
  transition:transform var(--lent) var(--out) .25s}
.js .tete h2.vu::after{transform:scaleX(1)}

/* En-tête */
.entete,footer{
  padding-left:max(calc(var(--pad) + env(safe-area-inset-left, 0px)),
                   calc((100% - var(--max)) / 2 + var(--pad)));
  padding-right:max(calc(var(--pad) + env(safe-area-inset-right, 0px)),
                    calc((100% - var(--max)) / 2 + var(--pad)))}
.entete{position:fixed;inset:0 0 auto;z-index:80;display:flex;align-items:center;
  gap:clamp(14px,2.4vw,36px);padding-block:var(--e-4);border-bottom:1px solid transparent;
  padding-top:calc(var(--e-4) + env(safe-area-inset-top,0px));
  transition:padding var(--vite) var(--out),background var(--vite),border-color var(--vite)}
.entete.dense{padding-block:9px;padding-top:calc(9px + env(safe-area-inset-top,0px));
  background:var(--sable);border-bottom-color:var(--bordure-c)}
@supports (backdrop-filter:blur(1px)){
  @media (min-width:1001px){
    .entete.dense{background:rgba(240,231,216,.9);backdrop-filter:blur(12px)}
  }
}
.mot{font-family:var(--marque);font-size:var(--t-mot);line-height:1;text-decoration:none;flex:none}
.mot span{color:var(--orange)}

/* Le logo Atlas Consulting est posé en masque, comme celui du studio au pied :
   un seul fichier, il prend la couleur du texte, donc il reste lisible sur le
   sable comme sur le bandeau dense. Sans masque, l'en-tête garde le nom écrit. */
@supports ((mask-image:url(#a)) or (-webkit-mask-image:url(#a))){
  .mot{display:block;width:154px;height:34px;
    text-indent:100%;white-space:nowrap;overflow:hidden;
    background:currentColor;color:var(--indigo);
    -webkit-mask:url(/atlas-consulting.svg) no-repeat left center/contain;
            mask:url(/atlas-consulting.svg) no-repeat left center/contain}
  @media (max-width:600px){ .mot{width:127px;height:28px} }
}
.menu{flex:1;display:flex;gap:clamp(6px,1.1vw,18px);justify-content:center}
.menu a{position:relative;font-size:var(--t-12);color:var(--n700);text-decoration:none;
  padding:var(--e-2) 0;white-space:nowrap}
.menu a::after{content:"";position:absolute;left:0;right:100%;bottom:5px;height:1px;background:var(--orange);
  transition:right .4s var(--out)}
.menu a:hover::after,.menu a.actif::after{right:0}
.menu a.actif{color:var(--indigo)}

/* Bouton d'ouverture du menu, sous 1000 px */
.ouvre{display:none;flex:none;align-items:center;justify-content:center;gap:var(--e-2);
  width:auto;min-height:44px;padding:0 var(--e-3);cursor:pointer;
  background:transparent;border:1px solid var(--bordure-c);color:var(--indigo);
  font-family:var(--ui);font-size:var(--t-12);font-weight:500;letter-spacing:.03em}
.ouvre .barres{display:block;width:16px;height:10px;position:relative;flex:none}
.ouvre .barres::before,.ouvre .barres::after{content:"";position:absolute;left:0;right:0;
  height:1px;background:currentColor;transition:transform var(--vite) var(--out)}
.ouvre .barres::before{top:1px}
.ouvre .barres::after{bottom:1px}
.ouvre[aria-expanded="true"] .barres::before{transform:translateY(4px) rotate(45deg)}
.ouvre[aria-expanded="true"] .barres::after{transform:translateY(-4px) rotate(-45deg)}

.bt{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:9px;
  text-decoration:none;font-size:var(--t-12);font-weight:500;letter-spacing:.03em;
  min-height:44px;padding:var(--e-3) 20px;
  background:var(--indigo);color:var(--sur-indigo);border:1px solid var(--indigo);
  transition:background var(--vite),color var(--vite)}
.bt .fl{transition:transform .4s var(--out)}
.bt:hover .fl{transform:translateX(4px)}
.bt.vide{background:transparent;color:var(--indigo)}
.bt.vide:hover{background:var(--indigo);color:var(--sur-indigo)}
.bt:disabled,.bt:disabled:hover{opacity:.35;cursor:not-allowed;color:var(--sur-indigo);background:var(--indigo)}
.bt.blanc{background:var(--blanc);color:var(--indigo);border-color:var(--blanc)}
.bt.fin{background:transparent;color:var(--sur-indigo);border-color:var(--sur-indigo-faible)}
.menu a.bt-menu{display:none}
.bt.fin:hover{border-color:var(--sur-indigo)}
a:focus-visible,button:focus-visible,summary:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--orange);outline-offset:3px}
.sombre-bloc a:focus-visible,.final a:focus-visible,.final button:focus-visible,
.final input:focus-visible,.final textarea:focus-visible,footer a:focus-visible{
  outline-color:var(--orange-clair)}

/* Ouverture */
.hero{padding-block:clamp(120px,15vh,176px) clamp(40px,6vh,70px)}
.hero .duo{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  gap:clamp(26px,5vw,80px);align-items:start}
.hero .carte-qui{margin-top:clamp(0px,4.5vw,64px)}
.hero h1{margin:18px 0 0;max-width:19ch}
.hero .accroche{margin-top:var(--e-5);font-size:var(--t-17);color:var(--n700);max-width:52ch}
.actes{display:flex;gap:11px;flex-wrap:wrap;margin-top:var(--e-6)}
.carte-qui{border:1px solid var(--bordure-c);background:var(--creme);padding:24px 26px}
.carte-qui .tete{display:flex;align-items:center;gap:16px;margin-bottom:var(--e-3)}
.carte-qui .photo{width:76px;height:76px;object-fit:cover;object-position:top center;
  border:1px solid var(--bordure-c);flex:none}
.carte-qui .nom{font-family:var(--display);font-size:var(--t-19);font-weight:400;margin:4px 0 0}
.carte-qui p{font-size:var(--t-13);color:var(--n700)}

/* Preuves */
.preuves{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--bordure-c);
  margin-top:var(--e-section-i)}
.preuves div{padding:var(--e-5) clamp(14px,1.6vw,26px) 0 clamp(14px,1.6vw,26px);
  border-left:1px solid var(--bordure-c)}
.preuves div:first-child{border-left:0;padding-left:0}
.preuves b{display:block;font-family:var(--display);font-size:var(--t-preuve);line-height:1;
  font-variant-numeric:tabular-nums}
.preuves b.acc{color:var(--orange-txt)}
.preuves span{display:block;font-size:var(--t-12);color:var(--n500);margin-top:9px}

/* Sections */
section{padding-block:var(--e-section);border-top:1px solid var(--bordure-c)}
.tete{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:clamp(18px,4vw,64px);
  align-items:end;margin-bottom:var(--e-tete)}
.tete h2{margin-top:var(--e-3);max-width:22ch}
.tete .chapeau{color:var(--n700);max-width:48ch;font-size:var(--t-15)}
.sous-tt{border-bottom:1px solid var(--bordure-c);padding-bottom:10px;
  margin:var(--e-section-i) 0 var(--e-5)}

/* Carte de produit, un seul composant pour les offres, les terrains et les outils */
.offres{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,2vw,26px)}
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,22px)}
.offre,.outil{border:1px solid var(--bordure-c);background:var(--blanc);
  padding:var(--e-carte-l);display:flex;flex-direction:column;
  transition:transform var(--moyen) var(--out),border-color var(--moyen) var(--out)}
.offre:hover,.outil:hover{transform:translateY(-4px);border-color:var(--orange)}
.offre.sombre,.outil.vedette{background:var(--indigo);border-color:var(--indigo);color:var(--sur-indigo)}
.offre .num{font-family:var(--display);font-size:var(--t-13);color:var(--orange-txt);letter-spacing:.08em}
.offre.sombre .num{color:var(--orange-clair)}
.offre h3{margin:var(--e-3) 0 0}
.offre.sombre h3{color:var(--sur-indigo)}
.offre .pitch{margin-top:var(--e-3);color:var(--n700);font-size:var(--t-15)}
.offre.sombre .pitch,.outil.vedette p{color:var(--sur-indigo-fort)}
.offre ul{list-style:none;margin:var(--e-5) 0 0;padding:0}
.offre li{position:relative;padding:11px 0 11px var(--e-5);border-top:1px solid var(--bordure-c);
  font-size:var(--t-14);color:var(--n700)}
.offre.sombre li{border-top-color:var(--bordure-sombre);color:var(--sur-indigo-fort)}
.offre li::before{content:"";position:absolute;left:0;top:20px;width:11px;height:1px;background:var(--orange)}
.offre .pied{margin-top:auto;padding-top:var(--e-5);display:flex;gap:var(--e-5);flex-wrap:wrap;
  border-top:1px solid var(--bordure-c)}
.offre.sombre .pied{border-top-color:var(--bordure-sombre)}
.offre .pied div{min-width:120px}
.offre .pied b{display:block;font-family:var(--display);font-size:var(--t-17);font-weight:400;margin-top:6px}
.offre .bt{margin-top:24px;align-self:flex-start}
.outil{padding:clamp(22px,2.2vw,32px)}
.outil p{font-size:var(--t-14);color:var(--n700)}
.outil .qui-tient{margin-top:auto;padding-top:18px;border-top:1px solid var(--bordure-c);
  font-size:var(--t-12);color:var(--n500)}
.outil.vedette .qui-tient{border-top-color:var(--bordure-sombre);color:var(--sur-indigo-moyen)}
.outil.vedette .mq{color:var(--sur-indigo)}

/* Rangées */
.rangs{border-top:1px solid var(--bordure-c)}
.rang{display:grid;grid-template-columns:44px minmax(0,1.5fr) minmax(0,1fr);gap:clamp(12px,2.2vw,40px);
  padding:clamp(15px,1.8vw,24px) 0;border-bottom:1px solid var(--bordure-c);align-items:baseline;position:relative}
.rang::after{content:"";position:absolute;left:0;bottom:-1px;width:0;height:1px;background:var(--orange);
  transition:width .7s var(--out)}
.rang:hover::after{width:100%}
.rang .n{font-family:var(--display);font-size:var(--t-15);color:var(--orange-txt)}
.rang h3{max-width:44ch;font-family:var(--ui);font-size:var(--t-16);font-weight:500;line-height:1.4}
.rang p{margin:7px 0 0;font-size:var(--t-14);color:var(--n500);max-width:56ch}
.rang .aile{font-size:var(--t-13);color:var(--n500)}
.rang .aile b{color:var(--petrole-txt);font-size:var(--t-9)}

/* Garantie */
.garantie{background:var(--creme);border:1px solid var(--bordure-c);
  padding:clamp(26px,3vw,44px);display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);
  gap:clamp(20px,3vw,50px);align-items:center}
.garantie h3{max-width:26ch;margin-top:var(--e-3)}
.garantie p{font-size:var(--t-14);color:var(--n700);margin-top:var(--e-3)}

/* Bande sombre */
.sombre-bloc{background:var(--indigo);color:var(--sur-indigo);border-top-color:var(--bordure-sombre)}
.sombre-bloc h2,.sombre-bloc h3{color:var(--sur-indigo)}
.sombre-bloc .chapeau,.sombre-bloc .lab,
.offre.sombre .lab,.outil.vedette .lab,.final .lab{color:var(--sur-indigo-moyen)}
.sombre-bloc .lab.acc{color:var(--orange-clair)}
.res{border-top:1px solid var(--bordure-sombre)}
.res-l{display:grid;grid-template-columns:minmax(130px,.9fr) minmax(0,2fr) minmax(110px,.5fr);
  gap:clamp(14px,2.4vw,40px);padding:clamp(14px,1.7vw,22px) 0;
  border-bottom:1px solid var(--bordure-sombre);align-items:baseline}
.res-l .ou{letter-spacing:.16em}
.res-l .quoi{font-size:var(--t-15)}
.res-l .quoi span{display:block;font-size:var(--t-13);color:var(--sur-indigo-moyen);margin-top:5px}
.res-l .ch{font-family:var(--display);font-size:var(--t-chiffre);text-align:right;color:var(--orange);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.res-l .ch.pet{color:var(--petrole-clair)}
.res-l .ch small{letter-spacing:.18em;font-family:var(--ui)}

/* Compass */
.compass{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--e-col);align-items:start}
.mq{font-family:var(--marque);font-size:var(--t-marque);line-height:1;font-weight:400}
.mq span{color:var(--orange)}
.mq.petit{font-size:var(--t-marque-p)}

/* Au bas de l'accueil, la signature du cabinet est le logo, comme en en-tête.
   « Atlas Compass » reste écrit : c'est un nom d'outil, pas la marque. */
@supports ((mask-image:url(#a)) or (-webkit-mask-image:url(#a))){
  .final .mq{width:clamp(200px,19vw,290px);height:clamp(44px,4.2vw,64px);
    margin-inline:auto;text-indent:100%;white-space:nowrap;overflow:hidden;
    background:currentColor;
    -webkit-mask:url(/atlas-consulting.svg) no-repeat center/contain;
            mask:url(/atlas-consulting.svg) no-repeat center/contain}
}

/* Grille à filets d'un pixel, un seul composant pour cinq usages */
.etapes,.demarche,.bases,.matrice,.profils{display:grid;gap:1px;background:var(--bordure-c);
  border:1px solid var(--bordure-c)}
.etapes{grid-template-columns:repeat(3,1fr)}
.demarche{grid-template-columns:repeat(5,1fr)}
.bases,.matrice,.profils{grid-template-columns:repeat(2,1fr)}
.etapes>div,.demarche>div{background:var(--creme)}
.bases>div{background:var(--sable);transition:background var(--moyen) var(--out)}
.bases>div:hover{background:var(--creme)}
.etapes>div{padding:18px 18px 20px}
.demarche>div{padding:var(--e-bloc)}
.base{padding:var(--e-bloc)}
.base.large{grid-column:1 / -1}
.profils>div.large{grid-column:1 / -1;display:grid;grid-template-columns:repeat(2,1fr);
  column-gap:clamp(22px,2.6vw,34px);align-content:start}
.profils>div.large>.lab,.profils>div.large>h3{grid-column:1 / -1}
.etapes b{display:block;font-family:var(--display);font-size:var(--t-15);font-weight:400}
.etapes span{display:block;font-size:var(--t-12);color:var(--n500);margin-top:6px}
.demarche .rn{display:block;font-family:var(--display);font-size:var(--t-12);color:var(--orange-txt);letter-spacing:.1em}
.demarche b{display:block;font-family:var(--display);font-weight:400;
  font-size:var(--t-22);margin:10px 0 6px}
.demarche .s{font-size:var(--t-12);color:var(--n500);line-height:1.5}
.base h3{font-family:var(--display);font-weight:400;font-size:var(--t-22);margin:10px 0 6px}
.base p{font-size:var(--t-13);color:var(--n700)}

/* La matrice offre × terrain : le croisement montré, pas seulement décrit */
.matrice{margin-bottom:var(--e-tete)}
.matrice>div{background:var(--creme);padding:clamp(18px,2.2vw,30px);
  transition:background var(--moyen) var(--out)}
.matrice>div:hover{background:var(--blanc)}
.matrice .lab{display:block;margin-bottom:var(--e-2)}
.matrice p{font-size:var(--t-14);color:var(--n700)}

/* Profils : qui se reconnaît, pas un numéro de séquence */
.profils>div{background:var(--creme);padding:clamp(22px,2.6vw,34px);
  transition:background var(--moyen) var(--out)}
.profils>div:hover{background:var(--blanc)}
.profils .lab{display:block;margin-bottom:6px}
.profils h3{margin-bottom:var(--e-2);max-width:26ch}
.profils p{font-size:var(--t-14);color:var(--n700);max-width:44ch}

/* Repérage sommaire : outil autonome, composants déjà existants réutilisés */
.rep-outil{border:1px solid var(--bordure-c);background:var(--blanc);padding:var(--e-carte-l)}
.rep-piste{height:2px;background:var(--bordure-c);margin-bottom:var(--e-tete);position:relative}
.rep-piste i{position:absolute;left:0;top:0;bottom:0;background:var(--orange);width:0%;
  transition:width .5s var(--out)}
.rep-etape{display:block;font-size:var(--t-10);font-weight:500;letter-spacing:var(--cren-etiquette);
  text-transform:uppercase;color:var(--n500);margin-bottom:var(--e-2)}
.rep-pas{display:none}
.rep-pas.rep-actif{display:block;animation:rep-app .4s var(--out)}
@keyframes rep-app{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.rep-pas h3{margin-bottom:var(--e-5);max-width:32ch}

.rep-filtre{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--bordure-c);
  border:1px solid var(--bordure-c);margin-bottom:var(--e-5)}
.rep-fc{background:var(--creme);padding:20px 22px;cursor:pointer;display:flex;gap:14px;
  align-items:flex-start;transition:background var(--moyen) var(--out)}
.rep-fc:hover{background:var(--blanc)}
.rep-fc[aria-pressed="true"]{background:var(--blanc);box-shadow:inset 3px 0 0 var(--orange)}
.rep-co{width:18px;height:18px;border:1px solid var(--champ-bord);flex:none;margin-top:2px;position:relative}
.rep-fc[aria-pressed="true"] .rep-co{border-color:var(--orange);background:var(--orange)}
.rep-fc[aria-pressed="true"] .rep-co::after{content:"";position:absolute;left:5px;top:1px;
  width:5px;height:9px;border:solid var(--blanc);border-width:0 2px 2px 0;transform:rotate(45deg)}
.rep-fc b{display:block;font-weight:500;color:var(--indigo);margin-bottom:3px}
.rep-fc span{font-size:var(--t-13);color:var(--n500)}

.rep-q{border-top:1px solid var(--bordure-c);padding:var(--e-5) 0}
.rep-q:last-child{border-bottom:1px solid var(--bordure-c)}
.rep-q p{font-size:var(--t-15);color:var(--indigo);margin-bottom:var(--e-3);max-width:56ch}
.rep-toggle{display:flex;gap:10px}
.rep-tbtn{font-family:var(--ui);font-size:var(--t-13);font-weight:500;padding:9px 22px;
  min-width:96px;background:var(--blanc);color:var(--indigo);border:1px solid var(--champ-bord);
  cursor:pointer;transition:background .25s,color .25s,border-color .25s}
.rep-tbtn:hover{border-color:var(--indigo)}
.rep-tbtn[aria-pressed="true"]{background:var(--indigo);color:var(--sur-indigo);border-color:var(--indigo)}

.rep-nav{display:flex;justify-content:space-between;align-items:center;margin-top:var(--e-tete);gap:14px}
.rep-retour{background:none;border:0;color:var(--n500);font-family:var(--ui);font-size:var(--t-13);
  cursor:pointer;padding:12px 4px;text-decoration:underline;min-height:44px}

.rep-stat{border:1px solid var(--bordure-c);background:var(--creme);padding:clamp(24px,3vw,34px);
  margin-bottom:var(--e-5)}
.rep-stat b{display:block;font-family:var(--display);font-size:clamp(34px,5vw,48px);line-height:1;
  color:var(--orange-txt)}
.rep-stat span{display:block;font-size:var(--t-12);letter-spacing:.1em;text-transform:uppercase;
  color:var(--n500);margin-top:10px}
.rep-palier{font-size:var(--t-15);color:var(--n700);margin-bottom:var(--e-5);max-width:58ch}
.rep-signaux{list-style:none;margin:0 0 var(--e-tete);padding:0;border-top:1px solid var(--bordure-c)}
.rep-signaux li{position:relative;padding:12px 0 12px var(--e-5);border-bottom:1px solid var(--bordure-c);
  font-size:var(--t-14);color:var(--n700)}
.rep-signaux li::before{content:"";position:absolute;left:0;top:19px;width:11px;height:1px;background:var(--orange)}
.rep-signaux .rep-vide{padding-left:0;color:var(--n500)}
.rep-signaux .rep-vide::before{display:none}

.rep-recevoir{border:1px solid var(--bordure-c);background:var(--creme);padding:var(--e-carte);
  margin-top:var(--e-5);max-width:420px}
.rep-recevoir label{display:block;font-size:var(--t-13);color:var(--n700);margin-bottom:6px}
.rep-recevoir input{font-family:var(--ui);font-size:var(--t-14);color:var(--indigo);
  background:var(--blanc);border:1px solid var(--champ-bord);padding:11px var(--e-3);
  width:100%;min-height:44px;margin-bottom:10px}
.rep-recevoir input[aria-invalid="true"]{border-color:var(--erreur);border-width:2px}
.rep-recevoir .bt{width:100%}
.rep-refaire{background:none;border:0;padding:0;font:inherit;font-size:var(--t-12);color:var(--n500);
  text-decoration:underline;cursor:pointer;min-height:24px;margin-top:var(--e-3)}

/* Dossier de présentation */
.dossier{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--e-col);align-items:stretch}
.sommaire{list-style:none;margin:var(--e-4) 0 0;padding:0;display:grid;gap:var(--e-2)}
.sommaire li{padding-left:14px;position:relative;font-size:var(--t-14);color:var(--n700)}
.sommaire li::before{content:"";position:absolute;left:0;top:4px;bottom:4px;width:1px;background:var(--orange)}
.meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--e-3);
  margin-top:var(--e-4);padding-top:var(--e-4);border-top:1px solid var(--bordure-c)}
.meta b{display:block;font-family:var(--display);font-size:var(--t-16);font-weight:400;margin-top:6px}

/* Formulaires */
.form,.carte-dossier{border:1px solid var(--bordure-c);background:var(--blanc);padding:var(--e-carte)}
.form .titre{font-family:var(--display);font-size:var(--t-19);font-weight:400;margin:10px 0 var(--e-1)}
.form .intro{font-size:var(--t-13);color:var(--n500);margin-bottom:20px}
.champs{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.champ{display:flex;flex-direction:column;gap:6px}
.champ.large{grid-column:1 / -1}
.champ input,.champ select,.champ textarea{font-family:var(--ui);font-size:var(--t-14);
  color:var(--indigo);background:var(--creme);border:1px solid var(--champ-bord);
  padding:11px var(--e-3);width:100%;min-height:44px}
.champ textarea{resize:vertical;line-height:1.55}
.champ input:focus,.champ select:focus,.champ textarea:focus{border-color:var(--orange)}
.champ [aria-invalid="true"]{border-color:var(--erreur);border-width:2px}
.err-champ{font-size:var(--t-12);color:var(--erreur);min-height:0}
.err-champ:empty{display:none}
.accord{display:flex;gap:10px;align-items:flex-start;margin-top:18px;font-size:var(--t-12);color:var(--n500)}
.accord input{margin-top:2px;accent-color:var(--orange);flex:none;width:24px;height:24px}
.accord a{color:var(--n700)}
.form button{margin-top:20px;width:100%;font-family:var(--ui);cursor:pointer}
.form button[aria-busy="true"]{opacity:.7;cursor:progress}
.retour{margin-top:14px;font-size:var(--t-13);min-height:20px}
.retour.err{color:var(--erreur)}
.recu{border:1px solid var(--orange);background:var(--creme);padding:var(--e-carte)}
.recu:focus{outline:none}
.recu .titre{font-family:var(--display);font-size:var(--t-19);font-weight:400;margin:10px 0 var(--e-2)}
.recu p{font-size:var(--t-14);color:var(--n700)}
.recu .bt{margin-top:20px}
.recu .bt.vide{margin-top:var(--e-2)}
.recu .poids{font-size:var(--t-12);color:var(--n500);margin-top:var(--e-3)}
.recu .reprendre{margin-top:var(--e-3);font-size:var(--t-12);color:var(--n500)}
.recu .reprendre button{background:none;border:0;padding:0;font:inherit;color:var(--n700);
  text-decoration:underline;cursor:pointer;min-height:24px}
/* Le formulaire de la fin, posé sur l'indigo */
.form-echange,.recu-echange{max-width:620px;margin:var(--e-tete) auto 0;text-align:left}

/* La carte d'implantation */
.atlas{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:var(--e-col);align-items:start}
.carte-cadre{border:1px solid var(--bordure-c);background:var(--creme);padding:clamp(14px,2vw,28px);
  min-height:180px}
.carte{display:block;width:100%;height:auto;max-height:66vh;margin-inline:auto}
.carte .fond path{fill:var(--sable-fonce);stroke:var(--creme);stroke-width:1.4}
.carte .pays{fill:var(--indigo);stroke:var(--creme);stroke-width:1.4}
.carte .arc{fill:none;stroke:var(--orange);stroke-width:2.4;stroke-linecap:round}
.carte .point{fill:var(--orange)}
.carte .halo{fill:none;stroke:var(--orange);stroke-width:1.6;opacity:0;
  transform-origin:center;transform-box:fill-box}
.js .carte .fond path,.js .carte .pays,.js .carte .ville{opacity:0;
  transition:opacity var(--lent) var(--out);transition-delay:var(--d,0ms)}
.js .carte.vu .fond path,.js .carte.vu .pays,.js .carte.vu .ville{opacity:1}
.js .carte .arc{stroke-dasharray:600;stroke-dashoffset:600;
  transition:stroke-dashoffset 1.5s var(--out);transition-delay:var(--d,0ms)}
.js .carte.vu .arc{stroke-dashoffset:0}
.js .carte.vu .halo{animation:pulse 3.4s var(--out) infinite;animation-delay:var(--d,0ms)}
@keyframes pulse{0%{transform:scale(.5);opacity:.75}70%{transform:scale(2.4);opacity:0}100%{opacity:0}}
.carte text{font-family:var(--ui);font-size:21px /* unite du viewBox, pas de l interface */;letter-spacing:.02em;font-weight:500;fill:var(--indigo);
  text-transform:none;paint-order:stroke;stroke:var(--creme);stroke-width:5px;stroke-linejoin:round}

/* Colonnes de texte */
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:clamp(18px,3vw,48px)}
.cols h4{margin-bottom:var(--e-2)}
.cols p{font-size:var(--t-14);color:var(--n700)}

/* Questions */
.faq{border-top:1px solid var(--bordure-c)}
.faq details{border-bottom:1px solid var(--bordure-c)}
.faq h3{margin:0}
.faq summary{list-style:none;cursor:pointer;padding:18px 0;display:flex;align-items:baseline;
  transition:color var(--vite)}
.faq summary h3{flex:1;display:flex;gap:20px;align-items:baseline;
  font-family:var(--display);font-size:var(--t-faq);font-weight:400;line-height:1.35}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";margin-left:auto;color:var(--orange-txt);font-family:var(--ui);font-size:var(--t-19);
  transition:transform .35s var(--out)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq summary:hover{color:var(--petrole-txt)}
.faq .rep{padding:0 0 20px 40px;color:var(--n700);font-size:var(--t-14);max-width:74ch}
.js .faq details[open] .rep{animation:ouvrir var(--moyen) var(--out)}
@keyframes ouvrir{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.faq .q-n{font-family:var(--display);font-size:var(--t-13);color:var(--orange-txt);min-width:20px}

/* Parcours */
.postes{border-top:1px solid var(--bordure-c)}
.poste{display:grid;grid-template-columns:118px minmax(0,1.4fr) minmax(0,1.6fr);gap:clamp(12px,2.2vw,40px);
  padding:14px 0;border-bottom:1px solid var(--bordure-c);align-items:baseline}
.poste h3{font-family:var(--ui);font-size:var(--t-15);font-weight:500;line-height:1.4}
.poste p{font-size:var(--t-13);color:var(--n500)}

/* Final */
.final{background:var(--indigo);color:var(--sur-indigo);border-top:0;text-align:center;
  padding-block:clamp(60px,8vw,110px) calc(clamp(60px,8vw,110px) + env(safe-area-inset-bottom, 0px))}
.final .mq,.final h2{color:var(--sur-indigo)}
.final h2{margin:20px auto 0;max-width:20ch}
.final p{color:var(--sur-indigo-moyen);max-width:46ch;margin:var(--e-4) auto 0;font-size:var(--t-15)}
.final .actes{justify-content:center;margin-top:30px}
.final .form,.final .recu{text-align:left}
.coord{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1px;
  background:var(--bordure-sombre);border:1px solid var(--bordure-sombre);
  margin-top:var(--e-section-i);text-align:left}
.coord div{background:var(--indigo);padding:18px 20px}
.coord a{display:inline-block;min-height:24px;font-size:var(--t-14);text-decoration:none;
  word-break:break-word;border-bottom:1px solid transparent}
.coord a:hover{border-bottom-color:var(--orange)}
.villes{margin-top:var(--e-tete);letter-spacing:.22em}

/* Mentions */
.mentions{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(18px,3vw,48px)}
.mentions h3{margin-bottom:var(--e-3)}
.mentions p,.mentions li{font-size:var(--t-14);color:var(--n700)}
.mentions ul{margin:0 0 var(--e-3);padding-left:18px}
.mentions dl{margin:0;font-size:var(--t-14);color:var(--n700)}
.mentions dt{font-weight:500;color:var(--indigo);margin-top:var(--e-3)}
.mentions dd{margin:2px 0 0}
.mentions dd a{display:inline-block;min-height:24px;line-height:24px}

footer{background:var(--indigo);color:var(--sur-indigo-faible);font-size:var(--t-12);
  border-top:1px solid var(--bordure-sombre);
  padding-block:var(--e-5) calc(34px + env(safe-area-inset-bottom, 0px));
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;align-items:center}
footer a{display:inline-block;min-height:24px;line-height:24px;text-decoration:none;
  border-bottom:1px solid var(--sur-indigo-faible)}
footer a:hover{border-bottom-color:var(--orange-clair)}
footer nav{display:flex;gap:18px;flex-wrap:wrap;align-items:center}
/* Le blanc pur du logo serait plus clair que les liens voisins : à 0,55 il
   s'aligne presque sur --sur-indigo-faible, qui vaut 0,48 de blanc sur l'indigo. */
/* Le logo Atlas Studio est posé en masque : un seul fichier, et il prend la
   couleur du texte qui l'entoure, sans second fichier pour le fond sombre.
   Si le navigateur ne gère pas les masques, le lien reste le mot écrit. */
footer .logo-studio{border-bottom:0}
@supports ((mask-image:url(#a)) or (-webkit-mask-image:url(#a))){
  footer .logo-studio{display:block;width:74px;height:27px;min-height:0;
    text-indent:100%;white-space:nowrap;overflow:hidden;
    background:currentColor;color:var(--sur-indigo-faible);
    transition:color var(--vite) var(--out);
    -webkit-mask:url(/atlas-studio.svg) no-repeat left center/contain;
            mask:url(/atlas-studio.svg) no-repeat left center/contain}
  footer .logo-studio:hover,footer .logo-studio:focus-visible{color:var(--sur-indigo)}
}



/* ============================================== Points de rupture */
@media(max-width:1000px){
  html{scroll-padding-top:70px}
  .ouvre{display:inline-flex}
  .menu{position:fixed;inset:auto 0 auto 0;top:0;flex-direction:column;justify-content:flex-start;
    gap:0;background:var(--sable);border-bottom:1px solid var(--bordure-c);
    padding:calc(64px + env(safe-area-inset-top,0px)) var(--pad) var(--e-5);
    transform:translateY(-100%);visibility:hidden;
    transition:transform var(--vite) var(--out),visibility var(--vite);z-index:-1}
  .menu[data-ouvert="oui"]{transform:translateY(0);visibility:visible}
  .menu a{font-size:var(--t-15);padding:12px 0;border-bottom:1px solid var(--bordure-c);min-height:44px;
    display:flex;align-items:center}
  .menu a::after{display:none}
  .entete .bt{margin-left:auto}
  .demarche{grid-template-columns:repeat(2,1fr)}
  .trio{grid-template-columns:1fr}
  .hero .duo,.tete,.compass,.atlas,.dossier{grid-template-columns:1fr;align-items:start}
  .carte{max-height:none}
  .offres{grid-template-columns:1fr}
  .preuves{grid-template-columns:repeat(2,1fr)}
  .preuves div:nth-child(3),.preuves div:nth-child(4){margin-top:18px}
  .preuves div:nth-child(2n+1){border-left:0;padding-left:0}
  .garantie{grid-template-columns:1fr}
}
@media(max-width:680px){
  body{font-size:var(--t-15)}
  .entete>.bt{display:none}
  .ouvre{margin-left:auto}
  .menu a.bt-menu{display:inline-flex;margin-top:var(--e-4);width:100%;border-bottom:0;color:var(--sur-indigo)}
  .demarche,.bases,.etapes,.champs,.matrice,.profils,.profils>div.large,
  .rep-filtre{grid-template-columns:1fr}
  .rang,.res-l,.poste{grid-template-columns:1fr;gap:6px}
  .res-l .ch{text-align:left;margin-top:var(--e-1)}
  .faq .rep{padding-left:0}
  .form button{width:100%}
  .rep-nav{flex-direction:column-reverse;align-items:stretch}
  .rep-nav .bt{width:100%}
}
@media(max-width:480px){
  .preuves{grid-template-columns:1fr}
  .preuves div{border-left:0;padding-left:0;margin-top:0}
  .preuves div+div{border-top:1px solid var(--bordure-c)}
  .offre .pied{gap:var(--e-3)}
  footer{flex-direction:column;align-items:flex-start}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js [data-a]{opacity:1;transform:none}
  .js .hero h1{clip-path:none}
  .js .tete h2::after{transform:scaleX(1)}
  .js .carte .fond path,.js .carte .pays,.js .carte .ville{opacity:1}
  .js .carte .arc{stroke-dashoffset:0}
}
@media print{
  .entete,.ouvre,.menu,.jauge,.saut,.form,.actes,.bt,.carte-cadre{display:none!important}
  html{scroll-padding-top:0}
  body{background:#fff;color:#000;font-size:11pt}
  section{padding-block:14pt;border-top:1px solid #999;break-inside:avoid}
  .sombre-bloc,.final,.offre.sombre,.outil.vedette,footer,.coord div{
    background:#fff!important;color:#000!important}
  .sombre-bloc h2,.sombre-bloc h3,.final h2,.final .mq,.offre.sombre h3,
  .res-l .quoi span,.res-l .ou,.coord b,.coord a,.villes,footer{color:#000!important}
  .res-l .ch,.offre .num,.rang .n,em{color:#000!important}
  .faq details{display:block}
  .faq .rep{display:block!important;padding-left:0}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#555}
  .atlas,.dossier,.compass,.hero .duo,.tete{grid-template-columns:1fr}
  footer .logo-studio{-webkit-mask:none;mask:none;background:none;
    width:auto;height:auto;text-indent:0;overflow:visible}
  .mot,.final .mq{-webkit-mask:none;mask:none;background:none;
    width:auto;height:auto;text-indent:0;overflow:visible}
}