/* =========================================================
   MS DESIGNERS — Styles des pages services (sous-pages)
   Hérite de styles.css · Direction « Carbone & Lumière »
   ========================================================= */

/* ---------- Fil d'Ariane ---------- */
/* Pose au-dessus de la grille, donc au meme niveau que le haut du cadre
   de l'image : il ouvre la page au lieu d'ouvrir seulement la colonne. */
.subhero__top{position:relative;z-index:1;margin-bottom:1.6rem}
.crumb{display:flex;width:fit-content;align-items:center;gap:.6rem;color:var(--text);
  font-size:1.18rem;font-weight:600;padding-block:.2rem;transition:color .25s}
.crumb:hover{color:var(--gold)}
.crumb svg{width:19px;height:19px}

/* ---------- Sous-hero ---------- */
.subhero{position:relative;overflow:hidden;
  padding:calc(var(--nav-h) + clamp(2.4rem,7vh,4.5rem)) 0 clamp(2.6rem,7vh,4.5rem)}
/* Halos en filter:blur(80px) remplacés par le fond mesh global (js/mesh-bg.js),
   qui couvre déjà cette zone : plus de banding. */
.subhero__glow{display:none}
.subhero__grid{position:relative;z-index:1;display:grid;
  grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4rem);align-items:start}
/* Titres dores agrandis, demandes sur les quatre pages. */
.subhero .eyebrow{font-size:1.24rem}
.subhero__title{font-size:clamp(2.3rem,5.4vw,4rem);margin:.9rem 0 1.3rem}
.subhero__title em{font-style:normal;
  background:linear-gradient(180deg,var(--gold-bright),var(--gold));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.subhero__sub{font-size:1.14rem;margin-bottom:1.9rem;max-width:54ch}
.subhero__cta{display:flex;gap:1rem;flex-wrap:wrap}
.subhero__media{position:relative;aspect-ratio:4/5;border-radius:var(--radius-lg);overflow:hidden;
  border:1px solid var(--line-strong);box-shadow:0 40px 90px -40px rgba(0,0,0,.85)}
.subhero__media img{width:100%;height:100%;object-fit:cover}
.subhero__media::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 40%,rgba(8,9,12,.55))}

/* ---------- Bloc texte + liste ---------- */
.prose p{margin-bottom:1.1rem;font-size:1.07rem}
.prose p:last-child{margin-bottom:0}

/* ---------- Cartes de features ---------- */
.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.2rem;margin-top:.5rem}
.fcard{padding:1.7rem 1.6rem;border-radius:var(--radius);transition:transform .4s var(--ease),border-color .4s}
.fcard:hover{transform:translateY(-6px);border-color:rgba(62,134,255,.32)}
.fcard__ico{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;margin-bottom:1.1rem;
  color:var(--blue-glow);background:rgba(62,134,255,.1);border:1px solid rgba(62,134,255,.28)}
.fcard__ico svg{width:22px;height:22px}
.fcard h3{font-size:1.12rem;margin-bottom:.45rem}
.fcard p{font-size:.96rem}

/* ---------- Liste à puces (check) ---------- */
.checklist{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:.9rem 2.2rem;margin-top:.4rem}
.checklist li{display:flex;gap:.8rem;align-items:flex-start}
.checklist svg{flex:none;width:21px;height:21px;color:var(--gold);margin-top:3px}
.checklist span{font-size:1rem}
.checklist b{color:var(--white);font-weight:600}

/* ---------- FAQ ---------- */
.faq{max-width:800px;display:flex;flex-direction:column;gap:.8rem;margin-top:.5rem}
.faq__item{border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--glass-bg);overflow:hidden}
.faq__item summary{list-style:none;cursor:pointer;padding:1.15rem 1.35rem;
  font-family:var(--font-display);color:var(--white);font-weight:600;font-size:1.04rem;
  display:flex;justify-content:space-between;align-items:center;gap:1rem}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{content:"+";color:var(--gold);font-size:1.4rem;line-height:1;transition:transform .3s var(--ease)}
.faq__item[open] summary::after{transform:rotate(45deg)}
.faq__item p{padding:0 1.35rem 1.25rem;font-size:.98rem;max-width:70ch}

/* ---------- Bande CTA finale ---------- */
.cta-band{position:relative;overflow:hidden;text-align:center;padding:clamp(3.2rem,8vh,5.5rem) 0}
/* Dégradé à 12 arrêts, sans filter:blur : même douceur, sans paliers. */
.cta-band__glow{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:96vw;max-width:1040px;height:56vw;max-height:580px;border-radius:50%;pointer-events:none;
  background:radial-gradient(ellipse,
    rgba(62,134,255,.220) 0%,  rgba(62,134,255,.208) 9%,  rgba(62,134,255,.180) 18%,
    rgba(62,134,255,.145) 27%, rgba(62,134,255,.108) 36%, rgba(62,134,255,.075) 45%,
    rgba(62,134,255,.047) 54%, rgba(62,134,255,.026) 63%, rgba(62,134,255,.013) 72%,
    rgba(62,134,255,.005) 81%, rgba(62,134,255,.001) 90%, rgba(62,134,255,0) 100%)}
.cta-band__inner{position:relative;z-index:1;max-width:660px;margin-inline:auto}
.cta-band h2{font-size:clamp(1.9rem,4.4vw,3.1rem);margin-bottom:1rem}
.cta-band p{margin:0 auto 1.9rem}
.cta-band .subhero__cta{justify-content:center}

/* ---------- Bandeau engagements ---------- */
/* Translucide, comme les sections carbone de styles.css : le fond mesh reste visible. */
.trustbar{border-block:1px solid var(--line);background:rgba(255,255,255,.035)}
.trustbar__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1.4rem 2rem;padding:1.7rem 0}
.trustbar__item{display:flex;gap:.85rem;align-items:flex-start}
.trustbar__item svg{flex:none;width:23px;height:23px;color:var(--gold);margin-top:1px}
.trustbar__item b{display:block;color:var(--white);font-family:var(--font-display);font-weight:600;font-size:.97rem;margin-bottom:.1rem}
.trustbar__item span{font-size:.86rem;color:var(--text);line-height:1.45}

/* ---------- Responsive ---------- */
@media (max-width:860px){
  .subhero__grid{grid-template-columns:1fr}
  .subhero__media{max-width:440px;aspect-ratio:16/11;order:-1}
}

/* Zone cliquable portee au seuil de 24 px sans changer l'apparence du lien. */
.fcard a,.prose a{display:inline-block;padding-block:.2rem}

/* =========================================================
   Blocs propres a la page « Creation de site vitrine »
   ========================================================= */

/* ---------- Le calendrier reel ---------- */
/* Remplace le bloc d'etapes numerotees, present cinq fois sur le site.
   Ici on ne raconte plus la methode mais les durees, et surtout ce que
   le client doit fournir a chaque etape. */
.jalons{display:flex;flex-direction:column;gap:0;margin-top:.6rem;
  border-left:1px solid var(--line-strong);padding-left:0}
.jalon{position:relative;display:grid;grid-template-columns:minmax(140px,180px) 1fr;
  gap:clamp(1rem,3vw,2.4rem);padding:1.7rem 0 1.7rem 2rem}
.jalon+.jalon{border-top:1px solid var(--line)}
.jalon::before{content:"";position:absolute;left:-5px;top:2.3rem;
  width:9px;height:9px;border-radius:50%;background:var(--gold);
  box-shadow:0 0 0 4px var(--obsidian),0 0 18px -2px rgba(201,168,106,.9)}
.jalon__quand{font-family:var(--font-display);font-weight:600;font-size:1.02rem;
  color:var(--gold-bright);letter-spacing:.01em;padding-top:.1rem}
.jalon__corps h3{font-size:1.32rem;margin-bottom:.5rem;color:var(--white)}
.jalon__corps p{font-size:1.02rem;margin-bottom:.5rem}
.jalon__vous{font-size:.96rem;color:var(--muted)}
.jalon__vous b{color:var(--gold);font-weight:600}
@media (max-width:720px){
  .jalon{grid-template-columns:1fr;gap:.5rem;padding-left:1.5rem}
  .jalon::before{top:2rem}
}

/* ---------- En toute franchise ---------- */
/* Chaque « non » ouvre une porte : c'est le seul bloc du site qui annonce
   des limites, et c'est precisement ce qui le rend credible. */
.francs{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
  gap:1.2rem;margin-top:.6rem}
.franc{position:relative;display:flex;flex-direction:column;justify-content:center;
  padding:1.6rem;border-radius:var(--radius);
  background:var(--glass-bg);border:1px solid var(--line-strong)}
/* Le tiret repère appartient désormais au titre et non plus à la carte.
   Posé en absolu dans le coin, il restait en haut pendant que le texte
   se centrait, et les deux se retrouvaient désaccordés. */
.franc h3{position:relative;padding-left:1.6rem;font-size:1.1rem;
  margin-bottom:.45rem;color:var(--white)}
.franc h3::before{content:"";position:absolute;left:0;top:.62em;
  width:14px;height:1.5px;background:var(--gold);border-radius:2px}
.franc p{padding-left:1.6rem;font-size:.98rem}

/* Corps de metiers : le nom en blanc, la precision en dessous */
.checklist span b{display:block;margin-bottom:.15rem}

/* ---------- Secteurs desservis ---------- */
/* Les tuiles et l'aperçu vivent désormais dans css/secteurs.css : elles
   pilotent le sélecteur de métier et non plus une simple liste. Les règles
   qui se trouvaient ici entraient en concurrence avec elles. */


/* ---------- « En toute franchise » : deux zones ----------
   L'hébergement porte le texte le plus long des cinq. Le laisser dans une
   grille régulière créait une carte deux fois plus haute que ses voisines,
   et une rangée bancale. Il occupe désormais seul la colonne de droite,
   sur toute la hauteur, tandis que les quatre autres se rangent en 2 × 2
   à sa gauche. Les deux zones se terminent alors au même niveau. */
@media (min-width:900px){
  .francs{grid-template-columns:1fr 1fr 1.05fr;align-items:stretch}
  .franc:nth-child(1){grid-column:1;grid-row:1}
  .franc:nth-child(2){grid-column:2;grid-row:1}
  .franc:nth-child(4){grid-column:1;grid-row:2}
  .franc:nth-child(5){grid-column:2;grid-row:2}
  /* L'hébergement : colonne de droite, les deux rangées */
  /* Pas de centrage vertical : le tiret repere est place en absolu en haut
     de la carte, centrer le texte le desaccordait du titre. Le contenu
     demarre donc en haut, comme sur les quatre autres. */
  .franc:nth-child(3){grid-column:3;grid-row:1 / span 2}
}

/* ============ AVANT / APRÈS — page Refonte ============ */
.ba{position:relative;max-width:1000px;margin:2.6rem auto 0;aspect-ratio:16/10;border-radius:var(--radius-lg);
  overflow:hidden;border:1px solid var(--line-strong);box-shadow:var(--shadow-elevate-lg);
  container-type:inline-size;touch-action:pan-y;cursor:ew-resize;isolation:isolate}
.ba__pane{position:absolute;inset:0;overflow:hidden}
.ba__after{z-index:1}
.ba__before{z-index:2;clip-path:inset(0 48% 0 0);will-change:clip-path}
.ba__pane .resto,.ba__pane .vieux{position:absolute;inset:0}

/* ===== APRÈS : restaurant chic — FOND BORDEAUX, crème & or, grande photo, animé ===== */
.ba__after{background:radial-gradient(125% 115% at 10% -14%,#5C1327 0%,#3B0B18 60%,#2A0710 100%)}
.ba__after::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(44% 54% at 6% 4%,rgba(217,180,94,.12),transparent 60%),
            radial-gradient(52% 62% at 97% 100%,rgba(0,0,0,.30),transparent 60%);
  animation:restoDrift 16s ease-in-out infinite alternate}
@keyframes restoDrift{0%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(2%,-2%,0) scale(1.12)}}
/* Hero plein cadre : photo de fond + voile bordeaux + texte, comme un vrai site */
.resto{z-index:1;display:flex;flex-direction:column;justify-content:space-between;
  padding:3.4cqw 6cqw 3.6cqw;font-family:"Playfair Display",Georgia,serif;color:#F4E9DA;overflow:hidden}
.resto__bg{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;object-position:62% 45%;
  animation:restoZoom 22s ease-in-out infinite alternate}
@keyframes restoZoom{0%{transform:scale(1.06)}100%{transform:scale(1.15)}}
.resto__veil{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(96deg,rgba(26,4,13,.95) 0%,rgba(45,9,21,.9) 34%,rgba(45,9,21,.55) 62%,rgba(26,4,13,.62) 100%),
            linear-gradient(180deg,rgba(20,3,10,.62) 0%,transparent 26%,transparent 62%,rgba(20,3,10,.6) 100%)}
.resto__glow{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(38% 46% at 8% 8%,rgba(224,190,110,.16),transparent 62%);
  animation:restoDrift 16s ease-in-out infinite alternate}
.resto>*:not(.resto__bg):not(.resto__veil):not(.resto__glow){position:relative;z-index:3}

/* Barre de navigation */
.resto__nav{display:flex;align-items:center;justify-content:space-between;gap:2.4cqw}
.resto__brand{font-family:"Playfair Display",Georgia,serif;font-weight:700;font-size:2.5cqw;line-height:1;
  color:#F8F0E2;white-space:nowrap}
.resto__links{display:flex;gap:2.6cqw;font-family:Georgia,serif;font-size:1.25cqw;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(244,233,218,.66)}
.resto__navcta{font-family:Georgia,serif;font-size:1.2cqw;letter-spacing:.14em;text-transform:uppercase;
  color:#EAD4A4;border:1px solid rgba(224,190,110,.5);padding:.85cqw 2.2cqw;white-space:nowrap}

/* Bloc hero */
.resto__hero{display:flex;flex-direction:column;align-items:flex-start;gap:1.9cqw;max-width:66%;padding:1cqw 0}
.resto__eyebrow{font-family:Georgia,serif;font-size:1.25cqw;letter-spacing:.36em;text-transform:uppercase;
  color:#E0BE6E;display:flex;align-items:center;gap:1.3cqw}
.resto__eyebrow::before{content:"";width:4.4cqw;height:1px;background:#E0BE6E;opacity:.7}
.resto__title{font-family:"Playfair Display",Georgia,serif;font-weight:700;font-size:5.6cqw;line-height:1.06;
  color:#FBF4E7;text-shadow:0 2px 24px rgba(0,0,0,.4)}
.resto__title em{font-style:italic;color:#E9C97F}
.resto__sub{font-family:Georgia,serif;font-size:1.65cqw;line-height:1.62;color:rgba(247,238,224,.76);max-width:82%}
.resto__cta{display:flex;align-items:center;gap:1.6cqw;margin-top:.5cqw}
.resto__btn{font-family:Georgia,serif;font-size:1.4cqw;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  background:#F6EBD8;color:#4A0F1F;padding:1.5cqw 3.2cqw;white-space:nowrap;
  box-shadow:0 18px 38px -18px rgba(0,0,0,.8)}
.resto__btn--ghost{background:transparent;color:#F1E4CE;border:1px solid rgba(241,228,206,.42);box-shadow:none}

/* Ligne de bas */
.resto__foot{display:flex;align-items:center;gap:1.5cqw;font-family:Georgia,serif;font-size:1.2cqw;
  letter-spacing:.06em;color:rgba(244,233,218,.62)}
.resto__stars{color:#E9C97F;letter-spacing:.22em;font-size:1.35cqw}

/* ===== AVANT : template générique daté (crédible, pas caricatural) ===== */
.ba__before{background:#E4E1D8}
.vieux{font-family:Arial,Helvetica,sans-serif;color:#3a3a3a;background:#E4E1D8;
  display:flex;flex-direction:column;padding:1.6cqw 2.6cqw 0}
.vieux__topbar{display:flex;justify-content:space-between;font-size:1.05cqw;color:#6c6c6c;padding-bottom:1cqw}
.vieux__header{display:flex;align-items:flex-end;justify-content:space-between;gap:2cqw;
  background:#fff;border:1px solid #c8c4ba;border-bottom:none;padding:1.7cqw 2.2cqw 1.5cqw}
.vieux__logo{font-family:Georgia,serif;font-weight:700;font-size:2.7cqw;line-height:1;color:#7A4A4A}
.vieux__tagline{font-size:1.1cqw;color:#8a8a8a;font-style:italic}
.vieux__nav{display:flex;gap:0;background:#5E5750;border:1px solid #4a443e}
.vieux__nav span{font-size:1.2cqw;color:#efece6;padding:1.1cqw 2.2cqw;border-right:1px solid #6f675f}
.vieux__nav span.is-on{background:#7A4A4A;color:#fff}
.vieux__main{flex:1;display:grid;grid-template-columns:1fr .33fr;gap:2cqw;
  background:#fff;border:1px solid #c8c4ba;border-top:none;padding:2.2cqw;overflow:hidden}
.vieux__h{font-family:Georgia,serif;font-size:1.95cqw;font-weight:700;color:#7A4A4A;margin-bottom:1.4cqw;
  border-bottom:1px solid #ddd8ce;padding-bottom:.8cqw}
.vieux__photo{float:left;width:38%;margin:0 2cqw 1.2cqw 0;border:1px solid #bdb8ae;padding:3px;background:#fff;
  filter:saturate(.72) contrast(.94) brightness(.98)}
.vieux__p{font-size:1.22cqw;line-height:1.62;color:#4a4a4a;margin-bottom:1cqw;text-align:justify}
.vieux__btn{display:inline-block;font-size:1.15cqw;color:#fff;background:#7A4A4A;padding:.85cqw 2cqw;margin-top:.4cqw}
.vieux__side{display:flex;flex-direction:column;gap:1.4cqw;min-width:0}
.vieux__box{border:1px solid #d5d0c6}
.vieux__boxh{background:#EFEBE2;border-bottom:1px solid #d5d0c6;padding:.8cqw 1.1cqw;
  font-size:1.15cqw;font-weight:700;color:#5E5750}
.vieux__boxb{padding:1.1cqw;font-size:1.08cqw;line-height:1.55;color:#6a6a6a}
.vieux__footer{font-size:1.02cqw;color:#7d7d7d;text-align:center;padding:1.2cqw 0 1.6cqw}

@media (prefers-reduced-motion:reduce){
  .ba__after::before,.resto__media img{animation:none}
}

/* --- Poignee, etiquettes, indice --- */
.ba__handle{position:absolute;top:0;bottom:0;left:52%;width:3px;background:#fff;transform:translateX(-50%);
  z-index:4;box-shadow:0 0 0 1px rgba(0,0,0,.22),0 0 16px rgba(0,0,0,.5)}
.ba__grip{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:46px;height:46px;border-radius:50%;
  background:#fff;color:#111;display:grid;place-items:center;box-shadow:0 6px 20px -4px rgba(0,0,0,.55);cursor:ew-resize}
.ba__grip svg{width:22px;height:22px}
.ba__handle:focus-visible{outline:none}
.ba__handle:focus-visible .ba__grip{box-shadow:0 0 0 4px rgba(62,134,255,.55)}
.ba__tag{position:absolute;top:14px;z-index:3;font-size:.72rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;padding:.4rem .75rem;border-radius:100px;color:#fff;pointer-events:none}
.ba__tag--before{left:14px;background:rgba(20,20,20,.6)}
.ba__tag--after{right:14px;background:rgba(123,20,45,.92)}
.ba__hint{text-align:center;margin-top:1.1rem;font-size:.9rem;color:var(--muted)}

/* ============ TABLEAU DE BORD — page Maintenance ============ */
.board{max-width:980px;margin:2.6rem auto 0;border-radius:var(--radius-lg);overflow:hidden;
  background:linear-gradient(158deg,rgba(255,255,255,.07),rgba(255,255,255,.02) 55%);
  -webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 30px 64px -30px rgba(0,0,0,.7)}

/* En-tête : nom du site + statut */
.board__head{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  padding:1.15rem 1.5rem;border-bottom:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03)}
.board__site{display:inline-flex;align-items:center;gap:.7rem;font-size:1rem;color:var(--white);letter-spacing:.01em}
.board__dot{width:9px;height:9px;border-radius:50%;background:#5BBD7A;flex:none;
  box-shadow:0 0 0 0 rgba(91,189,122,.6);animation:boardPulse 2.4s ease-out infinite}
@keyframes boardPulse{0%{box-shadow:0 0 0 0 rgba(91,189,122,.55)}70%{box-shadow:0 0 0 9px rgba(91,189,122,0)}100%{box-shadow:0 0 0 0 rgba(91,189,122,0)}}
.board__state{font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#8FDCA6;
  background:rgba(91,189,122,.14);border:1px solid rgba(91,189,122,.36);padding:.34rem .8rem;border-radius:100px}

/* Les 4 indicateurs */
.board__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.08)}
.board__kpi{position:relative;display:flex;flex-direction:column;gap:.45rem;padding:1.5rem 1.4rem;
  background:rgba(12,16,24,.28);min-width:0}
.board__label{font-size:.68rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.board__value{font-family:var(--font-display);font-weight:700;font-size:2.1rem;line-height:1;color:var(--white);letter-spacing:-.02em}
.board__value em{font-style:normal;font-size:1.05rem;color:var(--gold)}
.board__value--sm{font-size:1.35rem;letter-spacing:0}
.board__value--ok{color:#8FDCA6}
.board__sub{font-size:.78rem;color:var(--muted);line-height:1.4}
.board__spark{width:100%;height:30px;margin-top:.2rem;display:block}

/* Journal d'activité */
.board__log{padding:1.5rem}
.board__lines{display:flex;flex-direction:column;gap:.1rem;margin-top:.9rem}
.board__lines li{display:grid;grid-template-columns:5.5rem 1fr auto;align-items:center;gap:1rem;
  padding:.8rem .2rem;border-top:1px solid rgba(255,255,255,.06);font-size:.95rem}
.board__lines li:first-child{border-top:none}
.board__lines b{font-weight:600;color:var(--muted);font-size:.85rem}
.board__lines span{color:var(--text);min-width:0}
.board__lines i{font-style:normal;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:#8FDCA6;background:rgba(91,189,122,.12);border:1px solid rgba(91,189,122,.3);
  padding:.24rem .6rem;border-radius:100px;white-space:nowrap}
.board__note{text-align:center;margin-top:1.1rem;font-size:.88rem;color:var(--muted)}

@media (max-width:860px){
  .board__grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .board__grid{grid-template-columns:1fr}
  .board__lines li{grid-template-columns:1fr auto;gap:.5rem}
  .board__lines b{grid-column:1/-1}
}
@media (prefers-reduced-motion:reduce){.board__dot{animation:none}}

/* ===== PLUIE DE CODE — fond de page entiere (Maintenance) ===== */
/* Calque fixe derriere tout le contenu : les colonnes descendent en
   permanence, la page defile par-dessus. Meme plan que .mesh-bg. */
.codefall{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.codefall__col{position:absolute;top:0;white-space:pre;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Courier New",monospace;
  font-size:11px;line-height:2.5;letter-spacing:.02em;
  color:rgba(62,134,255,.075);
  animation-name:codeFall;animation-timing-function:linear;animation-iteration-count:infinite;
  will-change:transform}
.codefall__col--or{color:rgba(201,168,106,.07)}
@keyframes codeFall{from{transform:translate3d(0,-50%,0)}to{transform:translate3d(0,0,0)}}
@media (max-width:820px){.codefall__col{font-size:10px}}
@media (prefers-reduced-motion:reduce){.codefall{display:none}}

/* ===== TERMINAL DE SURVEILLANCE — visuel du hero (Maintenance) ===== */
/* Remplace la photo stock (code multicolore) qui jurait avec la palette :
   ce panneau parle le meme langage que la pluie de code et le tableau de bord. */
.subhero__media--term{aspect-ratio:auto;background:none;border:none;box-shadow:none}
.subhero__media--term::after{display:none}
.term{display:flex;flex-direction:column;border-radius:var(--radius-lg);overflow:hidden;
  background:linear-gradient(168deg,rgba(24,30,44,.92),rgba(10,13,20,.96));
  border:1px solid var(--line-strong);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 40px 90px -40px rgba(0,0,0,.9)}
.term__bar{display:flex;align-items:center;gap:.9rem;padding:.85rem 1.1rem;
  border-bottom:1px solid var(--line);background:rgba(255,255,255,.03)}
.term__dots{display:flex;gap:.4rem;flex:none}
.term__dots i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.18)}
.term__file{flex:1;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.82rem;color:var(--muted);letter-spacing:.02em}
.term__live{flex:none;display:inline-flex;align-items:center;gap:.45rem;font-size:.68rem;font-weight:700;
  letter-spacing:.14em;color:#5BBD7A;background:rgba(91,189,122,.12);
  border:1px solid rgba(91,189,122,.32);padding:.3rem .6rem;border-radius:100px}
.term__live i{width:6px;height:6px;border-radius:50%;background:#5BBD7A;animation:termPulse 2.2s ease-in-out infinite}
@keyframes termPulse{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(91,189,122,.55)}50%{opacity:.55;box-shadow:0 0 0 5px rgba(91,189,122,0)}}
.term__lines{display:flex;flex-direction:column;padding:.9rem .3rem;margin:0;list-style:none;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.8rem}
.term__lines li{display:flex;align-items:center;gap:.8rem;padding:.52rem 1.1rem;
  opacity:0;animation:termIn .5s var(--ease) forwards}
.term__lines li:nth-child(1){animation-delay:.15s}
.term__lines li:nth-child(2){animation-delay:.45s}
.term__lines li:nth-child(3){animation-delay:.75s}
.term__lines li:nth-child(4){animation-delay:1.05s}
.term__lines li:nth-child(5){animation-delay:1.35s}
.term__lines li:nth-child(6){animation-delay:1.65s}
.term__lines li:nth-child(7){animation-delay:1.95s}
.term__lines li:nth-child(8){animation-delay:2.25s}
.term__lines li:nth-child(9){animation-delay:2.55s}
@keyframes termIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.term__lines b{flex:none;width:3.4rem;color:var(--gold);font-weight:600}
.term__lines span{flex:1;color:var(--text);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.term__lines em{flex:none;font-style:normal;font-size:.7rem;font-weight:700;letter-spacing:.06em;
  color:#5BBD7A;text-transform:uppercase}
.term__now b{color:var(--blue-glow)}
.term__now span{color:var(--white)}
.term__now span::after{content:"";display:inline-block;width:7px;height:1em;margin-left:.35rem;
  background:var(--gold-bright);vertical-align:-.15em;animation:termCaret 1.05s steps(1) infinite}
@keyframes termCaret{0%,49%{opacity:1}50%,100%{opacity:0}}
.term__foot{display:flex;gap:1.4rem;flex-wrap:wrap;padding:.9rem 1.1rem;
  border-top:1px solid var(--line);background:rgba(255,255,255,.02);
  font-size:.78rem;color:var(--muted)}
.term__foot b{color:var(--white);font-weight:600}
@media (prefers-reduced-motion:reduce){
  .term__lines li{opacity:1;animation:none}
  .term__live i,.term__now span::after{animation:none}
}

/* ===== Grilles equilibrees — page Maintenance ===== */
/* « Pourquoi ? » : 4 arguments. En auto-fit le 4e tombait seul sur une 2e
   ligne (orphelin). En 2x2 la lecture est symetrique. */
.section--why .checklist{grid-template-columns:repeat(2,1fr);gap:1.4rem 3rem;max-width:940px}
/* « Inclus » : 6 cartes. En auto-fit on obtenait 4 + 2 orphelines ; 3x2 tombe juste. */
.section--six .fgrid{grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){
  .section--why .checklist{grid-template-columns:1fr}
  .section--six .fgrid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:600px){.section--six .fgrid{grid-template-columns:1fr}}
/* FAQ alignee sur le titre de section (elle etait decalee vers la droite). */
.faq{margin-inline:0}

/* ===== LE RYTHME DE LA VEILLE — « Comment ça marche » (Maintenance) ===== */
/* Remplace le deroule numerote 01-04, employe sur les quatre pages services
   et sur l'accueil : cette page merite son propre format. Surtout, la
   maintenance n'est pas une ligne qui se termine mais un cycle — on presente
   donc par FREQUENCE (ce qui se passe, et quand) plutot que par etape. */
.demarrage{display:flex;flex-wrap:wrap;align-items:center;gap:1.1rem 1.6rem;
  padding:1.5rem 1.7rem;border-radius:var(--radius);border:1px solid var(--line-strong);
  background:var(--panneau);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 24px 54px -34px rgba(0,0,0,.8)}
.demarrage__tag{flex:none;align-self:flex-start;font-size:.7rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--obsidian);padding:.42rem .85rem;border-radius:100px;
  background:linear-gradient(180deg,var(--gold-bright),var(--gold))}
.demarrage__items{flex:1;display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap;min-width:0}
.demarrage__item{flex:1;min-width:210px}
.demarrage__item b{display:block;font-family:var(--font-display);font-weight:600;color:var(--white);
  font-size:1.04rem;margin-bottom:.22rem}
.demarrage__item span{font-size:.95rem;color:var(--text)}
.demarrage__fleche{flex:none;color:var(--gold);display:grid;place-items:center}
.demarrage__fleche svg{width:22px;height:22px}

/* Panneau opaque : sans lui les lignes flottaient sur la pluie de code
   et la lecture devenait penible. */
.rythme{margin-top:2.4rem;border:1px solid var(--line-strong);border-radius:var(--radius-lg);
  overflow:hidden;
  background:var(--panneau);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 34px 76px -44px rgba(0,0,0,.85)}
.rythme__ligne{position:relative;display:grid;grid-template-columns:minmax(160px,205px) 1fr;
  gap:clamp(1rem,4vw,2.8rem);padding:1.75rem 1.9rem;border-bottom:1px solid var(--line);
  transition:background .35s var(--ease)}
.rythme__ligne:last-child{border-bottom:none}
/* Le filet doré se trace de haut en bas au survol : rappel du trait de la Méthode,
   sans en reprendre les pastilles numérotées. */
.rythme__ligne::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:linear-gradient(var(--gold-bright),var(--gold));
  transform:scaleY(0);transform-origin:top;transition:transform .45s var(--ease)}
.rythme__ligne:hover{background:rgba(255,255,255,.025)}
.rythme__ligne:hover::before{transform:scaleY(1)}
.rythme__quand{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;align-content:flex-start;
  font-family:var(--font-display);font-weight:600;font-size:1.06rem;color:var(--gold-bright)}
.rythme__quand em{font-style:normal;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.78rem;color:var(--muted);border:1px solid var(--line-strong);
  border-radius:100px;padding:.14rem .55rem}
.rythme__pouls{flex:none;width:8px;height:8px;border-radius:50%;background:#5BBD7A;
  animation:poulsVeille 2.2s ease-in-out infinite}
@keyframes poulsVeille{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(91,189,122,.5)}
  50%{opacity:.55;box-shadow:0 0 0 6px rgba(91,189,122,0)}}
.rythme__quoi b{display:block;font-family:var(--font-display);font-weight:600;color:var(--white);
  font-size:1.12rem;margin-bottom:.3rem}
.rythme__quoi span{display:block;font-size:1rem;color:var(--text);max-width:64ch}
@media (max-width:720px){
  .rythme__ligne{grid-template-columns:1fr;gap:.55rem;padding:1.4rem 1rem}
  .demarrage__fleche{transform:rotate(90deg)}
}
@media (prefers-reduced-motion:reduce){.rythme__pouls{animation:none}}


/* ===== Surfaces lisibles au-dessus de la pluie de code =====
   La nappe de code couvrant desormais toute la page, tout bloc de texte pose
   dessus devient penible a lire. Une seule teinte de panneau pour les quatre
   blocs concernes : la page reste homogene. */
:root{--panneau:linear-gradient(168deg,rgba(21,26,37,.80),rgba(11,14,21,.86))}

/* « Pourquoi ? » — les quatre arguments dans un panneau unique */
.section--why .checklist{padding:2rem 2.3rem;border:1px solid var(--line-strong);
  border-radius:var(--radius-lg);background:var(--panneau);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 34px 76px -44px rgba(0,0,0,.85)}

/* « Questions frequentes » — chaque volet devient opaque */
.faq__item{background:var(--panneau);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  border-color:var(--line-strong);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 22px 48px -32px rgba(0,0,0,.8)}
.faq__item[open]{border-color:rgba(201,168,106,.4)}

/* ===== Petites surfaces par texte (pages avec pluie de code) =====
   On abandonne le grand panneau unique : chaque texte porte son propre fond,
   plus leger visuellement et plus efficace pour la lecture. Portee limitee
   aux pages qui ont la nappe de code, via :has(.codefall). */

/* Voile doux derriere chaque titre de section : pas d'encadre, juste
   assez d'ombre pour detacher le texte du code qui defile. */
body:has(.codefall) .section__head{position:relative}
body:has(.codefall) .section__head::before{content:"";position:absolute;
  inset:-.9rem -1.2rem;z-index:0;pointer-events:none;
  background:radial-gradient(62% 104% at 2% 50%,rgba(8,10,15,.62) 0%,rgba(8,10,15,.34) 40%,rgba(8,10,15,0) 76%)}
body:has(.codefall) .section__head>*{position:relative;z-index:1}

/* « Pourquoi ? » : chaque argument porte sa propre carte. */
.section--why .checklist{padding:0;border:none;background:none;box-shadow:none;
  -webkit-backdrop-filter:none;backdrop-filter:none;gap:1rem 1.2rem}
.section--why .checklist li{align-items:flex-start;padding:1.15rem 1.35rem;
  border:1px solid var(--line);border-radius:var(--radius);background:var(--panneau);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 18px 40px -30px rgba(0,0,0,.8);
  transition:border-color .35s var(--ease),transform .35s var(--ease)}
.section--why .checklist li:hover{border-color:rgba(201,168,106,.4);transform:translateY(-3px)}

/* Rythme : chaque ligne devient une carte autonome. */
.rythme{border:none;background:none;box-shadow:none;overflow:visible;border-radius:0;
  -webkit-backdrop-filter:none;backdrop-filter:none;
  display:flex;flex-direction:column;gap:.85rem}
.rythme__ligne{border:1px solid var(--line);border-bottom:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;background:var(--panneau);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 18px 40px -30px rgba(0,0,0,.8);
  padding:1.5rem 1.7rem;transition:border-color .35s var(--ease),transform .35s var(--ease)}
.rythme__ligne:hover{border-color:rgba(201,168,106,.4);transform:translateY(-3px);background:var(--panneau)}

/* Le bandeau de demarrage : ses deux items portent aussi leur fond. */
.demarrage{background:none;border:none;box-shadow:none;padding:0;
  -webkit-backdrop-filter:none;backdrop-filter:none;align-items:stretch}
.demarrage__item{padding:1.15rem 1.35rem;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--panneau);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 18px 40px -30px rgba(0,0,0,.8)}

/* ===== PAGE REFERENCEMENT — accent « croissance » =====
   Le carbone et l'or de la marque restent ; seul l'accent de DONNEES passe au
   vert : c'est la couleur universelle de la progression, et cela donne a la
   page sa signature (bleu technique pour Maintenance, vert ici). */
.page-seo{--seo:#4FBE85;--seo-clair:#7BD8A6;--seo-sourd:rgba(79,190,133,.14)}

/* --- SERP animee du hero : fenetre BLANCHE, codes de la vraie page Google --- */
/* Une interface claire posee sur la page sombre : le contraste fait qu'on
   identifie une recherche Google au premier coup d'oeil. */
.subhero__media--serp{aspect-ratio:auto;background:none;border:none;box-shadow:none;overflow:visible}
.subhero__media--serp::after{display:none}
.serp{border-radius:14px;overflow:hidden;background:#fff;border:1px solid rgba(0,0,0,.08);
  box-shadow:0 40px 90px -40px rgba(0,0,0,.9),0 2px 10px rgba(0,0,0,.35)}
.serp__bar{display:flex;align-items:center;gap:.75rem;margin:1.1rem 1.1rem .9rem;padding:.7rem 1.1rem;
  border-radius:100px;background:#fff;border:1px solid #dfe1e5;
  box-shadow:0 1px 6px rgba(32,33,36,.16)}
.serp__bar svg{width:17px;height:17px;color:#9aa0a6;flex:none}
.serp__q{font-size:.92rem;color:#202124}
/* Onglets Tous / Maps / Images */
.serp__tabs{display:flex;gap:1.5rem;padding:0 1.4rem;border-bottom:1px solid #ebedef;
  font-size:.8rem;color:#5f6368}
.serp__tabs span{padding-bottom:.6rem;border-bottom:3px solid transparent}
.serp__tabs .is-on{color:#1a73e8;border-bottom-color:#1a73e8;font-weight:500}
.serp__count{padding:.75rem 1.4rem .2rem;font-size:.72rem;color:#70757a}
.serp__list{position:relative;margin:0 .8rem .4rem}
.serp__row{position:absolute;left:0;right:0;top:0;height:52px;display:flex;align-items:center;gap:.85rem;
  padding:0 .7rem;border-radius:9px;border:1px solid transparent;
  transition:transform .62s cubic-bezier(.5,0,.2,1),background .4s,border-color .4s;will-change:transform}
.serp__rank{flex:none;width:25px;height:25px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--font-display);font-weight:700;font-size:.78rem;
  color:#5f6368;background:#f1f3f4;border:1px solid #e4e6e9}
.serp__txt{min-width:0;display:flex;flex-direction:column;line-height:1.3}
/* Titre en bleu lien et URL en vert : la signature visuelle d'un resultat Google. */
.serp__txt b{font-size:.9rem;font-weight:400;color:#1a0dab;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.serp__txt i{font-style:normal;font-size:.74rem;color:#0f7b3f}
/* La ligne du client : c'est elle qu'on suit du regard. */
.serp__row--vous{background:rgba(79,190,133,.12);border-color:rgba(79,190,133,.5)}
.serp__row--vous .serp__txt b{font-weight:600;color:#0b5cd5}
.serp__row--vous .serp__rank{color:#fff;background:linear-gradient(180deg,var(--seo-clair),var(--seo));border-color:transparent}
.serp__vous{margin-left:auto;flex:none;font-size:.62rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:#0b6b3a;background:rgba(79,190,133,.18);border:1px solid rgba(79,190,133,.45);
  padding:.2rem .5rem;border-radius:100px}
.serp__row--top.serp__row--vous{box-shadow:0 4px 18px -4px rgba(79,190,133,.55)}
.serp__foot{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.8rem 1.4rem;border-top:1px solid #ebedef;background:#f8f9fa;font-size:.8rem;color:#5f6368}
.serp__prog b{font-family:var(--font-display);font-size:1.12rem;color:#202124;margin-right:.25rem}
.serp__prog sup{font-size:.6em}
.serp__gain{font-weight:700;font-size:.74rem;letter-spacing:.04em;color:#0b6b3a;transition:color .4s}
.serp__gain.is-top{color:#0b6b3a;text-shadow:none}

/* --- « Le deroule » en courbe de progression (page Referencement) ---
   Le deroule 01-04 vertical existe sur les autres pages : ici on le trace
   comme une courbe qui monte, ce qui est exactement le sujet du SEO. */
.grimpe{margin-top:.6rem}
.grimpe__graphe{position:relative;height:190px;margin:0 0 .2rem;
  border-bottom:1px solid var(--line-strong)}
.grimpe__graphe svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.grimpe__pt{position:absolute;transform:translate(-50%,50%);z-index:1;
  width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--font-display);font-weight:700;font-size:.85rem;color:var(--obsidian);
  background:linear-gradient(180deg,var(--seo-clair,#7BD8A6),var(--seo,#4FBE85));
  box-shadow:0 0 0 6px var(--obsidian),0 0 24px -4px rgba(79,190,133,.85)}
.grimpe__etapes{display:grid;grid-template-columns:repeat(4,1fr);gap:1.6rem;
  list-style:none;margin:0;padding:1.6rem 0 0}
.grimpe__etapes li{position:relative;padding-right:.6rem}
.grimpe__quand{display:block;font-size:.78rem;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--seo-clair,#7BD8A6);margin-bottom:.45rem}
.grimpe__etapes h3{font-size:1.1rem;margin-bottom:.4rem}
.grimpe__etapes p{font-size:.95rem;max-width:34ch}
@media (max-width:900px){
  .grimpe__etapes{grid-template-columns:repeat(2,1fr);gap:1.8rem 1.4rem}
  .grimpe__graphe{height:150px}
}
@media (max-width:560px){
  .grimpe__etapes{grid-template-columns:1fr}
  .grimpe__graphe{display:none}
}

/* --- « Le deroule » en bascule (page Refonte) ---
   Le deroule 01-04 vertical sert deja ailleurs. Ici le rail passe du gris
   (site actuel) a l'or (nouveau site) et les etapes alternent de part et
   d'autre : la forme raconte la transformation, sujet meme de la page. */
.bascule{margin-top:.4rem}
.bascule__bornes{display:flex;justify-content:space-between;gap:1rem;margin-bottom:1.2rem;
  font-size:.76rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.bascule__borne--av{color:var(--muted)}
.bascule__borne--ap{color:var(--gold-bright)}
.bascule__etapes{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:1fr 54px 1fr;
  column-gap:1.5rem;list-style:none;margin:0;padding:0}
.bascule__etapes::before{content:"";grid-row:2;grid-column:1 / -1;align-self:center;
  height:2px;border-radius:2px;
  background:linear-gradient(90deg,rgba(255,255,255,.14) 0%,rgba(201,168,106,.45) 58%,var(--gold-bright) 100%)}
.bascule__etape{display:contents}
.bascule__etape:nth-child(1)>*{grid-column:1}
.bascule__etape:nth-child(2)>*{grid-column:2}
.bascule__etape:nth-child(3)>*{grid-column:3}
.bascule__etape:nth-child(4)>*{grid-column:4}
.bascule__etape:nth-child(odd) .bascule__carte{grid-row:1;align-self:end;margin-bottom:.95rem}
.bascule__etape:nth-child(even) .bascule__carte{grid-row:3;align-self:start;margin-top:.95rem}
.bascule__pastille{grid-row:2;align-self:center;justify-self:center;
  width:15px;height:15px;border-radius:50%;background:var(--gold);
  box-shadow:0 0 0 5px var(--obsidian),0 0 20px -2px rgba(201,168,106,.9)}
/* Chaque carte rejoint le rail par un filet. */
.bascule__etape:nth-child(odd) .bascule__carte::after,
.bascule__etape:nth-child(even) .bascule__carte::before{content:"";position:absolute;left:50%;
  width:1px;height:.95rem;background:rgba(201,168,106,.45)}
.bascule__etape:nth-child(odd) .bascule__carte::after{top:100%}
.bascule__etape:nth-child(even) .bascule__carte::before{bottom:100%}
.bascule__carte{position:relative;padding:1.3rem 1.4rem;border-radius:var(--radius);
  border:1px solid var(--line);background:var(--glass-bg);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  transition:border-color .35s var(--ease),transform .35s var(--ease)}
.bascule__carte:hover{border-color:rgba(201,168,106,.45);transform:translateY(-4px)}
.bascule__num{display:block;font-family:var(--font-display);font-weight:700;font-size:.88rem;
  letter-spacing:.06em;color:var(--gold-bright);margin-bottom:.4rem}
.bascule__carte h3{font-size:1.06rem;margin-bottom:.35rem}
.bascule__carte p{font-size:.93rem;max-width:none}
@media (max-width:900px){
  .bascule__bornes{display:none}
  .bascule__etapes{grid-template-columns:1fr;grid-template-rows:none;row-gap:1rem}
  .bascule__etapes::before,.bascule__pastille{display:none}
  .bascule__etape>*{grid-column:1}
  .bascule__etape .bascule__carte{grid-row:auto;align-self:auto;margin:0}
  .bascule__carte::after,.bascule__carte::before{display:none}
}

/* --- « Le deroule » en paliers de chantier (page Refonte) ---
   Chaque etape affiche l'avancement reel du chantier : la jauge se remplit
   de 25 a 100 %. Le client voit ou il en est, ce qui est exactement la
   promesse de la section (« une transition maitrisee »). */
.paliers{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;list-style:none;margin:.6rem 0 0;padding:0}
.palier{position:relative;display:flex;flex-direction:column;overflow:hidden;
  padding:1.5rem 1.5rem 1.3rem;border-radius:var(--radius);
  border:1px solid var(--line);background:var(--glass-bg);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  transition:border-color .35s var(--ease),transform .35s var(--ease)}
.palier:hover{border-color:rgba(201,168,106,.45);transform:translateY(-5px)}
/* Jauge d'avancement, collee au bord haut de la carte */
.palier__jauge{position:absolute;top:0;left:0;right:0;height:3px;background:rgba(255,255,255,.07)}
.palier__jauge i{display:block;height:100%;width:var(--p,0%);
  background:linear-gradient(90deg,var(--gold),var(--gold-bright));
  box-shadow:0 0 14px -2px rgba(201,168,106,.85)}
/* Numero en filigrane */
.palier__num{position:absolute;top:-.4rem;right:.4rem;z-index:0;pointer-events:none;
  font-family:var(--font-display);font-weight:700;font-size:4.6rem;line-height:1;
  color:transparent;-webkit-text-stroke:1px rgba(201,168,106,.28)}
.palier__corps{position:relative;z-index:1;flex:1}
.palier__corps h3{font-size:1.1rem;margin-bottom:.4rem}
.palier__corps p{font-size:.93rem;max-width:none}
.palier__pct{position:relative;z-index:1;margin-top:1.1rem;font-size:.74rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--gold-bright)}
@media (max-width:960px){.paliers{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.paliers{grid-template-columns:1fr}}

/* --- Diagnostic du hero (page Refonte) ---
   Remplace la photo stock : les scores du site actuel passent du rouge au
   vert, ce qui est exactement la promesse de la page. */
.subhero__media--diag{aspect-ratio:auto;background:none;border:none;box-shadow:none;overflow:visible}
.subhero__media--diag::after{display:none}
.diag{border-radius:var(--radius-lg);overflow:hidden;
  background:linear-gradient(168deg,rgba(24,30,44,.92),rgba(10,13,20,.96));
  border:1px solid var(--line-strong);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 40px 90px -40px rgba(0,0,0,.9)}
.diag__bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.9rem 1.2rem;border-bottom:1px solid var(--line);background:rgba(255,255,255,.03)}
.diag__url{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.84rem;color:var(--muted)}
.diag__tag{font-size:.66rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-bright);background:rgba(201,168,106,.12);border:1px solid rgba(201,168,106,.38);
  padding:.28rem .6rem;border-radius:100px}
.diag__lignes{list-style:none;margin:0;padding:1.1rem 1.2rem;display:flex;flex-direction:column;gap:1.15rem}
.diag__ligne{display:grid;grid-template-columns:1fr auto;gap:.45rem .9rem;align-items:center}
.diag__nom{font-size:.9rem;color:var(--text)}
.diag__val{font-family:var(--font-display);font-weight:700;font-size:.9rem;display:flex;align-items:center;gap:.45rem}
.diag__val b{color:#D07A5C;font-weight:700}
.diag__val em{font-style:normal;color:#7BD8A6;position:relative;padding-left:.9rem}
.diag__val em::before{content:"→";position:absolute;left:-.05rem;color:var(--muted);font-size:.8rem}
.diag__piste{grid-column:1 / -1;height:6px;border-radius:6px;background:rgba(255,255,255,.06);overflow:hidden}
.diag__piste i{display:block;height:100%;border-radius:6px;width:var(--av);
  animation:diagFill 6.5s ease-in-out infinite}
.diag__ligne:nth-child(2) .diag__piste i{animation-delay:.25s}
.diag__ligne:nth-child(3) .diag__piste i{animation-delay:.5s}
.diag__ligne:nth-child(4) .diag__piste i{animation-delay:.75s}
@keyframes diagFill{
  0%,14%{width:var(--av);background:linear-gradient(90deg,#B8503A,#D9814E)}
  46%,84%{width:var(--ap);background:linear-gradient(90deg,#4FBE85,#7BD8A6)}
  100%{width:var(--av);background:linear-gradient(90deg,#B8503A,#D9814E)}
}
.diag__pied{display:flex;justify-content:space-between;padding:.85rem 1.2rem;
  border-top:1px solid var(--line);background:rgba(255,255,255,.02);
  font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.diag__apres{color:#7BD8A6}
@media (prefers-reduced-motion:reduce){.diag__piste i{animation:none;width:var(--ap);background:linear-gradient(90deg,#4FBE85,#7BD8A6)}}

/* --- Les demandes entrantes, hero de « Creation de site vitrine » ---
   La fenetre montrant un mini-site faisait doublon avec le selecteur de
   metier juste en dessous. On montre donc le RESULTAT d'une vitrine
   reussie — les demandes qui arrivent — et non le produit lui-meme. */
.subhero__media--dem{aspect-ratio:auto;background:none;border:none;box-shadow:none;overflow:visible}
.subhero__media--dem::after{display:none}
.dem{border-radius:var(--radius-lg);overflow:hidden;
  background:linear-gradient(168deg,rgba(24,30,44,.92),rgba(10,13,20,.96));
  border:1px solid var(--line-strong);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 40px 90px -40px rgba(0,0,0,.9)}
.dem__bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.95rem 1.2rem;border-bottom:1px solid var(--line);background:rgba(255,255,255,.03)}
.dem__titre{font-family:var(--font-display);font-weight:600;font-size:1rem;color:var(--white)}
.dem__cpt{display:inline-flex;align-items:center;gap:.45rem;font-size:.68rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--gold-bright);
  background:rgba(201,168,106,.12);border:1px solid rgba(201,168,106,.38);
  padding:.28rem .65rem;border-radius:100px}
.dem__cpt i{width:6px;height:6px;border-radius:50%;background:var(--gold-bright);
  animation:demPouls 2.4s ease-in-out infinite}
@keyframes demPouls{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(201,168,106,.5)}
  50%{opacity:.5;box-shadow:0 0 0 5px rgba(201,168,106,0)}}
.dem__liste{list-style:none;margin:0;padding:.5rem .6rem}
.dem__item{display:flex;align-items:flex-start;gap:.8rem;padding:.8rem .7rem;border-radius:var(--radius-sm);
  opacity:0;animation:demIn .55s var(--ease) forwards}
.dem__item+.dem__item{border-top:1px solid var(--line)}
.dem__item:nth-child(1){animation-delay:.2s}
.dem__item:nth-child(2){animation-delay:.55s}
.dem__item:nth-child(3){animation-delay:.9s}
.dem__item:nth-child(4){animation-delay:1.25s}
@keyframes demIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.dem__av{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--font-display);font-weight:700;font-size:.8rem;color:var(--obsidian);
  background:linear-gradient(180deg,var(--gold-bright),var(--gold))}
.dem__item:nth-child(2) .dem__av,.dem__item:nth-child(4) .dem__av{
  background:linear-gradient(180deg,#6BA8FF,#2f6fe0);color:#fff}
.dem__txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:.2rem}
.dem__txt b{font-size:.85rem;font-weight:600;color:var(--white)}
.dem__txt i{font-style:normal;font-size:.78rem;color:var(--muted);line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.dem__quand{flex:none;font-size:.7rem;color:var(--muted);padding-top:.15rem}
.dem__pied{padding:.85rem 1.2rem;border-top:1px solid var(--line);background:rgba(255,255,255,.02);
  font-size:.74rem;color:var(--muted);text-align:center}
@media (prefers-reduced-motion:reduce){
  .dem__item{opacity:1;animation:none}
  .dem__cpt i{animation:none}
}
/* =========================================================
   FONDS ANIMES — un par page, discrets
   La pluie de code (Maintenance) s'est revelee dense : il a fallu poser
   des panneaux opaques pour rattraper la lisibilite. Les trois fonds
   ci-dessous sont volontairement bien plus legers (opacites 0.03 a 0.07),
   lents, et n'exigent aucun panneau. Ils passent SOUS le contenu (z-index
   -1) et se desactivent en mouvement reduit.
   ========================================================= */
.fond-anime{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}

/* --- Site vitrine : faisceaux de lumiere, comme les spots d'une vitrine --- */
.fond-faisceaux i{position:absolute;top:-30%;height:170%;width:26vw;transform-origin:top center;
  background:linear-gradient(180deg,rgba(201,168,106,.24) 0%,rgba(201,168,106,.10) 38%,transparent 78%);
  filter:blur(20px);opacity:.5;animation:faisceau 19s ease-in-out infinite alternate}
.fond-faisceaux i:nth-child(1){left:4%;transform:rotate(9deg)}
.fond-faisceaux i:nth-child(2){left:34%;width:20vw;animation-duration:24s;animation-delay:-6s;
  background:linear-gradient(180deg,rgba(255,255,255,.15) 0%,rgba(255,255,255,.06) 40%,transparent 78%)}
.fond-faisceaux i:nth-child(3){left:62%;width:30vw;animation-duration:27s;animation-delay:-12s;transform:rotate(-7deg)}
@keyframes faisceau{0%{opacity:.5;transform:rotate(7deg) translateX(-2vw)}
  100%{opacity:1;transform:rotate(-6deg) translateX(3vw)}}

/* --- Refonte : un balayage lumineux traverse la page (l'ancien devient neuf) --- */
.fond-balayage::before{content:"";position:absolute;top:-40%;left:0;width:38%;height:180%;
  background:linear-gradient(90deg,transparent,rgba(201,168,106,.06) 42%,rgba(255,255,255,.045) 50%,rgba(201,168,106,.06) 58%,transparent);
  animation:balaye 18s ease-in-out infinite}
@keyframes balaye{0%{transform:translateX(-120%) rotate(14deg)}100%{transform:translateX(360%) rotate(14deg)}}

/* --- Referencement : un maillage de points, la toile et les liens --- */
.fond-maille::before{content:"";position:absolute;inset:-25%;
  background-image:radial-gradient(rgba(79,190,133,.42) 1px,transparent 1.7px);
  background-size:54px 54px;opacity:.55;
  animation:mailleDerive 90s linear infinite}
@keyframes mailleDerive{from{transform:translate3d(0,0,0)}to{transform:translate3d(54px,-54px,0)}}
/* Quelques noeuds plus vifs qui respirent */
.fond-maille i{position:absolute;width:7px;height:7px;border-radius:50%;
  background:rgba(79,190,133,.5);box-shadow:0 0 16px 3px rgba(79,190,133,.35);
  animation:noeud 7s ease-in-out infinite}
.fond-maille i:nth-child(1){left:14%;top:22%}
.fond-maille i:nth-child(2){left:71%;top:16%;animation-delay:-1.8s}
.fond-maille i:nth-child(3){left:38%;top:64%;animation-delay:-3.6s}
.fond-maille i:nth-child(4){left:86%;top:73%;animation-delay:-5.4s}
@keyframes noeud{0%,100%{opacity:.25;transform:scale(.8)}50%{opacity:.9;transform:scale(1.25)}}

@media (prefers-reduced-motion:reduce){.fond-anime{display:none}}

/* --- Constellation interactive (fond de page) --- */
.fond-toile{position:fixed;inset:0;z-index:-1;pointer-events:none;display:block}






/* --- Fleches qui montent (fond, page Referencement) ---
   Montee verticale, longue trainee qui se dissout derriere la pointe.
   La progression est le sujet de la page ; le fond la met en mouvement.
   Seule la transformation est animee : cout GPU negligeable. */
.fond-fleches{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.fond-fleches i{position:absolute;bottom:-12vh;display:block;opacity:0;
  animation-name:flecheMonte;animation-timing-function:linear;
  animation-iteration-count:infinite;will-change:transform}
/* Trainee longue, qui s'estompe progressivement vers le bas. */
.fond-fleches i b{position:relative;display:block;width:2px;height:calc(var(--t,18px)*8);
  background:linear-gradient(
    rgba(79,190,133,.58) 0%,
    rgba(79,190,133,.42) 12%,
    rgba(79,190,133,.28) 26%,
    rgba(79,190,133,.17) 42%,
    rgba(79,190,133,.10) 58%,
    rgba(79,190,133,.05) 74%,
    rgba(79,190,133,.02) 88%,
    rgba(79,190,133,0) 100%)}
/* La pointe */
.fond-fleches i b::before{content:"";position:absolute;top:0;left:50%;
  width:calc(var(--t,18px)*.78);height:calc(var(--t,18px)*.78);
  border-left:2px solid rgba(79,190,133,.65);border-top:2px solid rgba(79,190,133,.65);
  transform:translate(-50%,1px) rotate(45deg)}
/* Tout droit vers le haut. */
@keyframes flecheMonte{
  0%{transform:translate3d(0,0,0);opacity:0}
  8%{opacity:.9}
  92%{opacity:.9}
  100%{transform:translate3d(0,-122vh,0);opacity:0}
}
@media (prefers-reduced-motion:reduce){.fond-fleches{display:none}}
.fond-fleches i:nth-child(1){left:4%;--t:19px;animation-duration:5.0s;animation-delay:-0s}
.fond-fleches i:nth-child(2){left:12%;--t:14px;animation-duration:6.8s;animation-delay:-1.1s}
.fond-fleches i:nth-child(3){left:20%;--t:22px;animation-duration:4.4s;animation-delay:-2.2s}
.fond-fleches i:nth-child(4){left:29%;--t:16px;animation-duration:7.4s;animation-delay:-3.3s}
.fond-fleches i:nth-child(5){left:37%;--t:20px;animation-duration:5.6s;animation-delay:-0.5s}
.fond-fleches i:nth-child(6){left:45%;--t:13px;animation-duration:6.2s;animation-delay:-1.6s}
.fond-fleches i:nth-child(7){left:54%;--t:23px;animation-duration:4.8s;animation-delay:-2.7s}
.fond-fleches i:nth-child(8){left:62%;--t:15px;animation-duration:7.0s;animation-delay:-3.8s}
.fond-fleches i:nth-child(9){left:70%;--t:18px;animation-duration:5.2s;animation-delay:-0.9s}
.fond-fleches i:nth-child(10){left:79%;--t:21px;animation-duration:6.5s;animation-delay:-2.0s}
.fond-fleches i:nth-child(11){left:87%;--t:14px;animation-duration:4.6s;animation-delay:-3.1s}
.fond-fleches i:nth-child(12){left:94%;--t:17px;animation-duration:7.2s;animation-delay:-1.4s}

/* Legende des visuels chiffres : ils illustrent un principe, pas un resultat
   promis. La mention evite qu'un chiffre de demonstration soit lu comme un
   engagement contractuel. */
.visuel-note{margin-top:.85rem;font-size:.8rem;line-height:1.5;color:var(--muted);
  text-align:center;max-width:42ch;margin-inline:auto}