/* ============================================================
   BIBLIOTHEQUE DE BLOCS DE LA DA 2026
   Chargee par TOUTES les pages refaites, apres /da-2026.css et
   /motion-2026.css. Une page ne contient plus que l'ORDRE de ses blocs
   et ses rares specificites ; le vocabulaire visuel vit ici.

   ⛔ REGLE A NE JAMAIS CASSER
   .hp-texture, .hp-orb et .glow-grid sont en position:absolute;inset:0.
   Sans ancetre POSITIONNE ils se calent sur le document entier et
   recouvrent toute la page. Toute coquille qui en accueille une est
   donc relative, et son contenu passe au-dessus.

   ⛔ DEUXIEME REGLE
   Une media query n'ajoute AUCUNE specificite. Une regle nue ecrite ici
   ecrase donc la version telephone de /da-2026.css. Tout override d'un
   selecteur que la DA redefinit en @media doit etre enferme dans
   @media(min-width:901px).
   ============================================================ */

/* --- Socle -------------------------------------------------------- */
/* skeleton.css passe p, li, blockquote... en Lora sur tout le site */
body p,body li,body blockquote,body figcaption,body dd{font-family:var(--ui)}

.hero,.bloc,.shift,.closing,.story-block,.preuve,.faq,.biblio,.evidence,
.chiffres-deborde,.tarifs,.bandeau,.suite{position:relative}
.bloc,.shift,.closing,.story-block,.preuve,.tarifs{overflow:hidden}
.hp-texture,.hp-orb,.glow-grid{z-index:0}
.hero>*,.bloc>.wrap,.shift>.wrap,.closing>.wrap,.story-block>.wrap,.preuve>.wrap,
.faq>.wrap,.biblio>.wrap,.tarifs>.wrap,.bandeau>.wrap,.suite>.wrap{position:relative;z-index:2}

/* --- Coquille de section ------------------------------------------ */
.bloc{padding:96px 0}
.bloc--serre{padding:64px 0}
.bloc--fond{background:var(--surface)}
.bloc h2,.pourqui h2{font-size:32px;line-height:1.1;margin:16px 0 0;color:var(--ink);font-weight:800}
@media(min-width:900px){.bloc h2,.pourqui h2{font-size:36px}}
.bloc h2 em,.pourqui h2 em{font-family:var(--serif);font-weight:400;color:var(--violet)}
@media(max-width:600px){.bloc{padding:64px 0}}

/* --- Scene du hero -------------------------------------------------
   .hero de la DA vaut 45% + 55% + une gouttiere : la somme depasse le
   conteneur. Chaque page ramene ses colonnes dans la grille, SOUS
   @media(min-width:901px) pour ne pas casser le telephone. */
.hero-stage{height:auto;display:flex;align-items:center}
.hero-stage>.screen{width:100%;position:relative;z-index:2}
.hero-stage .ec-pied{padding:16px 24px}
.hero-stage .glow-grid{inset:-64px -48px -64px -40px;
  mask-image:radial-gradient(120% 100% at 60% 40%,black 0%,transparent 74%)}
@media(max-width:900px){.hero-stage{width:min(680px,94%);margin:auto}}

/* --- Cloture sombre, un seul bloc ---------------------------------- */
.closing--simple .closing-grid{grid-template-columns:1fr 340px}
.closing--simple h2 em{font-family:var(--serif);font-weight:400;color:#d8bdff}
.closing--simple .actions{margin-top:32px}
.closing--simple .fin-note{font-family:var(--mono);font-size:13px;line-height:1.8;color:#bdb2cb;
  border-left:1px solid #403152;padding-left:24px;margin:0}
.closing--simple .fin-note a{color:#c9a6ff}
@media(max-width:900px){.closing--simple .closing-grid{grid-template-columns:1fr}}

/* --- Contraste des petits libelles ---------------------------------
   var(--light) donne 4,12:1 sur fond clair, sous le seuil de 4,5 exige
   a 13px. ⛔ jamais applique sur fond sombre, ou --muted tombe a 3,45. */
.bloc .mini,.faq-grid .mini,.surface .mini,.negatif .mini,.encart-clair .mini,
.suite .mini,.gardes .mini,.output-grid .mini,.metric span,.chaine .ec-lib,
.al-note,.aparte{color:var(--muted)}
.encart-sombre .mini,.tarifs .mini,.price-card .mini{color:#c9a6ff}

/* ============ BLOCS ============ */

/* skeleton.css passe tout le texte courant en Lora : on rend l'Archivo. */

/* Appel de note vers la bibliographie */
.note-ref{font-family:var(--mono);font-size:13px;color:var(--violet);text-decoration:none;
  vertical-align:super;line-height:0;padding:0 2px;border:0}
.note-ref:hover{color:var(--magenta)}
.shift .note-ref{color:#c9a6ff}

/* Cartes courtes : le gabarit .surface vise des blocs plus hauts */
.surface--court{min-height:auto}
.surface-grid--2{grid-template-columns:repeat(2,1fr)}
.surface-grid--4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.surface-grid--4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.surface-grid--2,.surface-grid--4{grid-template-columns:1fr}}

/* Les trois chiffres de la bande sombre debordent sur le bloc suivant */
.chiffres-deborde{margin-top:-64px;position:relative;z-index:3;margin-bottom:96px}
.chiffres-deborde .ec-val{color:var(--violet)}
@media(max-width:600px){.chiffres-deborde{margin-top:-48px;margin-bottom:64px}}

/* Index des outils : douze lignes, pas des tuiles */
.index-outils{margin-top:64px;border-top:1px solid var(--line)}
.index-outils a{display:grid;grid-template-columns:300px 1fr auto;gap:24px;align-items:baseline;
  padding:24px 0;border-bottom:1px solid var(--line);text-decoration:none;position:relative;
  transition:background .25s,padding-left .25s}
.index-outils a:before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;
  background:linear-gradient(180deg,var(--violet),var(--magenta));transform:scaleY(0);
  transform-origin:center;transition:transform .25s}
.index-outils a:hover{background:rgba(240,238,245,.6);padding-left:16px}
.index-outils a:hover:before{transform:scaleY(1)}
.index-outils h3{font-size:18px;color:var(--ink);margin:0;font-weight:700;transition:color .25s}
.index-outils p{margin:0;font-size:13px;line-height:1.6;color:var(--muted);max-width:520px}
.index-outils span{font-size:13px;font-weight:700;color:var(--ink);white-space:nowrap;transition:color .25s}
.index-outils a:hover h3,.index-outils a:hover span{color:var(--violet)}
@media(max-width:900px){.index-outils a{grid-template-columns:1fr auto}.index-outils p{grid-column:1/-1}}

/* Bibliographie */
.biblio{background:#fff;border-top:1px solid var(--line);padding:96px 0}
.biblio h2{font-size:32px;line-height:1.1;color:var(--ink);margin:0;font-weight:800}
.biblio>.wrap>p{font-size:16px;line-height:1.6;color:var(--muted);margin:24px 0 0;max-width:640px}
.biblio ol{list-style:none;counter-reset:s;padding:0;margin:48px 0 0;border-top:1px solid var(--line)}
.biblio li{counter-increment:s;position:relative;padding:24px 0 24px 48px;border-bottom:1px solid var(--line);
  font-family:var(--mono);font-size:13px;line-height:1.6;color:var(--muted);max-width:840px}
.biblio li:before{content:counter(s);position:absolute;left:0;top:24px;font-family:var(--mono);
  font-size:16px;color:var(--violet)}
.biblio a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.biblio a:hover{color:var(--violet)}
@media(max-width:600px){.biblio{padding:64px 0}}


/* Le panneau « en bref » : deux colonnes, la ligne et son etat */
.ec-liste--2 .ec-ligne{grid-template-columns:1fr auto}
.ec-liste--2 .ec-jauge{max-width:320px}

/* La bande sombre porte ici un texte long : deux colonnes egales */
.shift-grid--large{grid-template-columns:1fr 1fr;gap:96px;align-items:start}
.shift-grid--large .shift-texte p{font-size:16px;line-height:1.6;color:#c7bfd2;margin:0 0 24px}
.shift-grid--large .shift-texte p:last-child{margin-bottom:0}
@media(max-width:900px){.shift-grid--large{grid-template-columns:1fr;gap:32px}}

/* Le chiffre du cas client doit dominer sa carte */
.evidence-head strong{font-size:48px;line-height:1}
@media(max-width:600px){.evidence-head strong{font-size:36px}}
/* Le pied de carte : le libelle reste sur une ligne, la note passe a la ligne */
.metric{flex-wrap:wrap}
.metric b{white-space:nowrap}
.metric span{flex:1 1 120px}
/* Le pied du panneau se range a droite : la carte flottante mord le coin gauche */
.hero-stage .ec-pied{justify-content:flex-end;gap:24px;min-height:56px}

/* --- Chaine du panneau « en bref » : depart, milieu, arrivee ------- */
.chaine{display:grid;grid-template-columns:1fr 24px 1fr;gap:16px 8px;align-items:stretch}
.chaine-noeud{grid-column:1/-1;background:var(--paper);border:1px solid var(--line);border-radius:9px;padding:16px}
.chaine-noeud b{display:block;font-size:16px;color:var(--ink);margin:8px 0 4px;font-weight:700}
.chaine-noeud .ec-note-ligne{margin:0}
.chaine-noeud--actif{background:#f6f1ff;border-color:#ddd0f7;position:relative;overflow:hidden}
.chaine-noeud--actif:before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--violet),var(--magenta))}
.chaine-noeud--actif b{color:var(--violet)}
.chaine-fleche{grid-column:1/-1;text-align:center;color:var(--light);font-size:18px;
  transform:rotate(90deg);line-height:1}
.ec-tags{margin-top:24px;padding-top:16px;border-top:1px solid var(--line)}

/* --- « Ce que vous gardez » : blocs a barre d'accent a gauche ------
   Volontairement PAS des cartes : le geste « carte » sert deja pour les
   expertises, et les colonnes a filets pour les exemples. */
.gardes{display:grid;grid-template-columns:repeat(2,1fr);gap:32px 48px;margin-top:64px}
.garde{position:relative;padding:8px 0 8px 24px}
.garde:before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:#ddd7e6}
.garde:after{content:'';position:absolute;left:0;top:0;width:2px;height:100%;
  background:linear-gradient(180deg,var(--violet),var(--magenta));
  transform:scaleY(0);transform-origin:top;transition:transform .6s cubic-bezier(.22,.7,.25,1)}
.garde.is-visible:after{transform:scaleY(1)}
.garde .mini{margin:0 0 8px}
.garde h3{font-size:18px;color:var(--ink);margin:0 0 8px;font-weight:700}
.garde>p:not(.mini){margin:0;font-size:16px;line-height:1.6;color:var(--muted);max-width:520px}
.garde .metric{position:static;margin-top:16px;border-top:1px solid var(--line);padding-top:16px}
@media(max-width:900px){.gardes{grid-template-columns:1fr;gap:32px}}

/* La bande sombre : les deux colonnes se centrent, plus de vide en bas */
.shift-grid--large{align-items:center}
.shift{padding-bottom:96px}

/* --- Contraste des petits libelles --------------------------------
   var(--light) donne 4,12:1 sur le fond clair : sous le seuil de 4,5
   exige pour du texte de 13px. Sur cette page les libelles passent en
   var(--muted), qui tient 5,5:1. */
.bloc .mini,.gardes .mini,.faq-grid .mini,.output-grid .mini,
.metric span,.chaine .ec-lib,.al-note{color:var(--muted)}

/* --- La carte flottante se range sous le panneau en dessous de 1120px */
@media(max-width:1119px){
  .hero-stage{display:block}
  .hero-stage .float-left{position:static;margin-top:24px;width:auto;display:inline-block}
}

/* --- 2. Bandeau de reperes ---------------------------------------- */
.bandeau{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.reperes{display:grid;grid-template-columns:repeat(5,1fr)}
.reperes>div{padding:32px 24px;border-left:1px solid var(--line)}
.reperes>div:first-child{border-left:0;padding-left:0}
.reperes b{display:block;font-family:var(--mono);font-size:24px;color:var(--violet);
  line-height:1;letter-spacing:-.02em}
.reperes span{display:block;font-size:13px;line-height:1.6;color:var(--muted);margin-top:8px}
@media(max-width:900px){.reperes{grid-template-columns:repeat(2,1fr)}
  .reperes>div{border-left:0;border-top:1px solid var(--line);padding:24px 0}
  .reperes>div:nth-child(2n){padding-left:24px;border-left:1px solid var(--line)}}
@media(max-width:600px){.reperes{grid-template-columns:1fr}
  .reperes>div:nth-child(2n){padding-left:0;border-left:0}}

/* --- 3. La these, puis le deroule en quatre colonnes --------------- */
.these{display:grid;grid-template-columns:1fr 1fr;gap:96px;align-items:start}
.these-texte p{font-size:16px;line-height:1.6;color:var(--muted);margin:0 0 24px;max-width:640px}
.these-texte p:last-child{margin-bottom:0}
@media(max-width:900px){.these{grid-template-columns:1fr;gap:24px}}

.etape-tete{display:flex;align-items:baseline;gap:24px;flex-wrap:wrap;
  margin-top:64px;padding-top:24px;border-top:1px solid var(--line)}
.etape-tete .mini{color:var(--violet);margin:0}
.etape-tete>p:not(.mini){margin:0;font-size:13px;line-height:1.6;color:var(--muted)}

.deroule{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;margin-top:32px}
.deroule article{position:relative;padding-top:24px;border-top:2px solid var(--line)}
.deroule article:after{content:'';position:absolute;left:0;top:-2px;height:2px;width:100%;
  background:linear-gradient(90deg,var(--violet),var(--magenta));
  transform:scaleX(0);transform-origin:left;transition:transform .7s cubic-bezier(.22,.7,.25,1)}
.deroule article.is-visible:after{transform:scaleX(1)}
.pastille{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;
  border-radius:50%;background:var(--violet);color:#fff;font-family:var(--mono);font-size:13px;
  font-weight:700;margin-bottom:16px}
.deroule h3{font-size:18px;line-height:1.35;color:var(--ink);margin:0 0 8px;font-weight:700}
.deroule p{margin:0;font-size:13px;line-height:1.6;color:var(--muted)}
@media(max-width:900px){.deroule{grid-template-columns:1fr 1fr;gap:24px}}
@media(max-width:600px){.deroule{grid-template-columns:1fr}}

/* --- 4. La journee, heure par heure ------------------------------- */
.horaire{margin-top:32px;border-top:1px solid #ddd7e6}
.horaire article{display:grid;grid-template-columns:120px 1fr;gap:48px;
  padding:32px 0;border-bottom:1px solid #ddd7e6}
.heure{font-family:var(--mono);font-size:24px;color:var(--violet);line-height:1.1;
  letter-spacing:-.02em;position:relative}
.heure:before{content:'';position:absolute;left:-24px;top:8px;width:8px;height:8px;
  border-radius:50%;background:var(--violet);opacity:0;transition:opacity .4s ease .2s}
.horaire article.is-visible .heure:before{opacity:1}
.horaire h3{font-size:24px;line-height:1.2;color:var(--ink);margin:0 0 8px;font-weight:800;
  letter-spacing:-.015em}
.horaire p{margin:0;font-size:16px;line-height:1.6;color:var(--muted);max-width:640px}
.aparte{margin-top:16px!important;padding-left:16px;position:relative;
  font-size:13px!important;max-width:520px}
.aparte:before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;
  background:linear-gradient(180deg,var(--violet),var(--magenta));
  transform:scaleY(0);transform-origin:top;transition:transform .6s cubic-bezier(.22,.7,.25,1) .2s}
.horaire article.is-visible .aparte:before{transform:scaleY(1)}
@media(max-width:900px){.horaire article{grid-template-columns:1fr;gap:8px}
  .heure:before{display:none}}

/* --- 5. Les deux encarts jumeaux ---------------------------------- */
.paire{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:stretch}
.encart-sombre,.encart-clair{border-radius:13px;padding:32px}
.encart-sombre{background:var(--ink);color:#fff;
  box-shadow:0 4px 8px rgba(36,18,76,.08),0 24px 48px rgba(36,18,76,.16)}
.encart-sombre .mini{color:#c9a6ff;margin:0}
.encart-sombre h3{font-size:24px;line-height:1.2;color:#fff;margin:16px 0 16px;font-weight:800}
.encart-sombre p{font-size:16px;line-height:1.6;color:#c7bfd2;margin:0 0 16px;max-width:520px}
.encart-sombre p:last-child{margin-bottom:0}
.encart-sombre .under-link{color:#fff;border-color:#5b4a78}
.encart-sombre .under-link:hover{color:#c9a6ff;border-color:#c9a6ff}
.encart-clair{background:var(--card);border:1px solid var(--line);
  box-shadow:0 1px 2px rgba(37,17,74,.04),0 12px 28px rgba(37,17,74,.07)}
.encart-clair .mini{margin:0}
.encart-clair h3{font-size:24px;line-height:1.2;color:var(--ink);margin:16px 0 16px;font-weight:800}
.encart-clair p{margin:0;font-size:16px;line-height:1.6;color:var(--muted);max-width:520px}
@media(max-width:900px){.paire{grid-template-columns:1fr}}
@media(max-width:600px){.encart-sombre,.encart-clair{padding:24px}}

/* --- 6. Les tarifs, sur fond sombre ------------------------------- */
.tarifs{background:var(--ink);color:#fff;padding:96px 0}
.tarifs h2{font-size:36px;line-height:1.05;color:#fff;margin:16px 0 0;font-weight:800}
.tarifs .eyebrow{color:#c9a6ff}
.tarifs .eyebrow i{background:#c9a6ff}
.price-card ul{margin-top:0}
.price-card li b{color:#fff}
.price-card.featured li b{color:#fff}
@media(max-width:600px){.tarifs{padding:64px 0}.tarifs h2{font-size:32px}}

/* --- 7. Compris dans tous les formats : quatre colonnes a filets --- */
.compris{display:grid;grid-template-columns:repeat(4,1fr);margin-top:32px;
  border-top:1px solid var(--line)}
.compris article{padding:24px 24px 24px 0;border-right:1px solid var(--line)}
.compris article+article{padding-left:24px}
.compris article:last-child{border-right:0}
.compris h3{font-size:18px;line-height:1.35;color:var(--ink);margin:0 0 8px;font-weight:700}
.compris p{margin:0;font-size:13px;line-height:1.6;color:var(--muted)}
@media(max-width:900px){.compris{grid-template-columns:1fr 1fr}
  .compris article:nth-child(2n){border-right:0}}
@media(max-width:600px){.compris{grid-template-columns:1fr}
  .compris article{border-right:0;border-bottom:1px solid var(--line);padding:24px 0}
  .compris article+article{padding-left:0}}

/* --- 8. Pour qui, et la liste en negatif -------------------------- */
.pourqui{display:grid;grid-template-columns:1fr 420px;gap:96px;align-items:center}
.pourqui .intro{font-size:16px;line-height:1.6;color:var(--muted);margin:24px 0 0;max-width:520px}
.negatif{background:var(--card);border:1px solid var(--line);border-radius:13px;padding:32px;
  box-shadow:0 1px 2px rgba(37,17,74,.04),0 12px 28px rgba(37,17,74,.07)}
.negatif .mini{margin:0 0 16px}
.negatif ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.negatif li{position:relative;padding:16px 0 16px 32px;border-bottom:1px solid var(--line);
  font-size:13px;line-height:1.6;color:var(--muted)}
.negatif li:last-child{border-bottom:0}
.negatif li i{position:absolute;left:0;top:16px;font-style:normal;font-family:var(--mono);
  font-size:16px;color:var(--magenta)}
@media(max-width:900px){.pourqui{grid-template-columns:1fr;gap:32px}}
@media(max-width:600px){.negatif{padding:24px}}

/* --- 10. FAQ ------------------------------------------------------ */
.faq{padding:96px 0}
@media(max-width:600px){.faq{padding:64px 0}}


/* --- 12. Aller plus loin ------------------------------------------ */
.suite{padding:48px 0 96px}
.suite .mini{margin:0 0 8px}
.suite p:not(.mini){margin:0;font-size:16px;line-height:1.6;color:var(--muted);max-width:640px}
.suite a{color:var(--violet)}

/* --- Contraste des petits libelles --------------------------------
   var(--light) donne 4,12:1 sur fond clair, sous le seuil de 4,5 exige
   pour du 13px. Les libelles de cette page passent en var(--muted). */
.bloc .mini,.faq-grid .mini,.surface .mini,.negatif .mini,
.encart-clair .mini,.suite .mini,.aparte{color:var(--muted)}
/* ⛔ jamais sur fond sombre : --muted y tombe a 3,45:1 */
.encart-sombre .mini{color:#c9a6ff}

/* --- Cartes de tarifs : le prix et sa precision sur deux lignes ----
   .price est un flex dans la DA : ici la precision est longue (« la
   demi-journee · 1'700 CHF la journee entiere »), elle se chevauchait
   avec le montant. */
.price{display:block}
.price strong{display:block;font-size:36px;letter-spacing:-.02em}
.price span{display:block;margin-top:8px;line-height:1.6;font-family:var(--ui)}
.price-card{min-height:auto}
.price-card .price-desc{min-height:auto;margin:16px 0 24px}
.price-card ul{margin-bottom:24px}
.price-card li{padding:16px 0 16px 16px;line-height:1.6}
/* le bouton de la carte mise en avant se detache du violet plein */
.price-card.featured .price-button{background:#fff;color:var(--violet)}
.price-card.featured .price-button:hover{background:#f0e7ff}
@media(max-width:600px){.price strong{font-size:32px}}

/* --- Tableau de comparaison ----------------------------------------
   Trois colonnes, la derniere mise en avant. Sert des qu'une page
   oppose deux facons de faire. */
.compara{margin-top:48px;border-top:1px solid var(--line)}
.compara-ligne{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0;border-bottom:1px solid var(--line)}
.compara-ligne>div{padding:24px}
.compara-ligne>div:first-child{padding-left:0;font-weight:700;color:var(--ink);font-size:16px}
.compara-ligne>div:nth-child(2){color:var(--muted);font-size:16px;line-height:1.6}
.compara-ligne>div:last-child{background:#f6f1ff;color:var(--ink);font-size:16px;line-height:1.6;
  font-weight:600;position:relative}
.compara-ligne>div:last-child:before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;
  background:linear-gradient(180deg,var(--violet),var(--magenta));
  transform:scaleY(0);transform-origin:top;transition:transform .6s cubic-bezier(.22,.7,.25,1)}
.compara-ligne.is-visible>div:last-child:before{transform:scaleY(1)}
.compara-tete>div{padding:16px 24px;font-family:var(--mono);font-size:13px;letter-spacing:.085em;
  text-transform:uppercase;color:var(--muted);font-weight:600}
.compara-tete>div:first-child{padding-left:0}
.compara-tete>div:last-child{background:#f6f1ff;color:var(--violet)}
@media(max-width:900px){
  .compara-ligne{grid-template-columns:1fr}
  .compara-ligne>div{padding:16px 0}
  .compara-ligne>div:last-child{padding:16px;margin-bottom:8px}
  .compara-tete{display:none}
  /* sur telephone l'entete disparait : chaque cellule porte son libelle */
  .compara-ligne>div[data-libelle]:before{content:attr(data-libelle) ' : ';font-family:var(--mono);
    font-size:13px;color:var(--muted);display:block;margin-bottom:4px}
}

/* --- Ouverture pleine largeur (page sans panneau au hero) ---------- */
.ouverture{max-width:840px}
.ouverture h1{font-size:36px;line-height:1.05;letter-spacing:0;margin:16px 0 0;color:var(--ink);font-weight:800}
@media(min-width:600px){.ouverture h1{font-size:48px}}
@media(min-width:1120px){.ouverture h1{font-size:64px}}
.ouverture h1 em{font-family:var(--serif);font-weight:400;color:var(--violet)}
.ouverture-texte{font-size:16px;line-height:1.6;color:var(--muted);margin:24px 0 0;max-width:640px}

/* Note de pied d'encart */
.encart-note{font-family:var(--mono);font-size:13px;color:var(--muted);margin:16px 0 0!important}
.encart-clair .actions{margin-top:24px}

/* Cloture sans colonne de droite */
.closing-grid--seul{grid-template-columns:1fr!important}

/* Lien secondaire d'une carte de service */
.offer-lien{display:inline-block;margin-top:16px;font-size:13px;font-weight:700;
  color:#c9a6ff;text-decoration:none;border-bottom:1px solid transparent;transition:border-color .2s}
.offer-lien:hover{border-color:#c9a6ff}
.price-card.featured .offer-lien{color:#fff}
.price-card ul a{color:#c9a6ff}
.price-card.featured ul a{color:#fff}

/* Accroche d'une carte d'offre, entre le sous-titre et la liste */
/* Accroche d'une carte d'offre : meme traitement que .hp-point sur
   la page d'accueil, qui est la reference. */
.offre-accroche{font-family:var(--serif);font-size:16px;line-height:1.45;color:#fff;
  margin:16px 0 24px;padding-left:16px;border-left:2px solid #c9a6ff}
.price-card.featured .offre-accroche{border-left-color:#fff}

/* Bandeau de reperes a trois colonnes */
.reperes--3{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.reperes--3{grid-template-columns:1fr}
  .reperes--3>div{border-left:0;border-top:1px solid var(--line);padding:24px 0}}

/* Mention legale a droite d'une ligne de carnet */
.carnet-loi{font-family:var(--mono);font-size:13px;line-height:1.6;color:var(--violet);
  text-align:right;white-space:normal}
@media(max-width:600px){.carnet-loi{text-align:left}}

/* ============================================================
   ⛔ COLLISIONS AVEC LES FEUILLES HISTORIQUES DES PAGES
   Chaque page du site embarque encore sa vieille feuille interne, qui
   definit des noms generiques : .hero, .section-title, .under-link,
   .intro… Ces regles s'appliquent AUSSI a nos blocs et changent leur
   rendu d'une page a l'autre. Tout bloc 2026 qui porte un nom
   generique doit donc etre redefini ici, avec assez de specificite.
   ============================================================ */
.section-title p.intro,.preuve-tete p.intro,p.intro{
  font-family:var(--ui);font-size:16px;line-height:1.6;font-weight:400;
  color:var(--muted);margin:24px 0 0;max-width:640px}
.section-title{max-width:840px}
.section-title h2{font-weight:800;letter-spacing:-.01em}
.section-title p.eyebrow{margin:0}


/* ============================================================
   BLOC AVIS GOOGLE, DA 2026
   Repris a l'identique de la page d'accueil pour que le bloc soit le
   MEME partout. ⛔ le nombre d'avis et la note viennent de
   /avis-google/avis.json : ne jamais les ecrire a la main.
   ============================================================ */
.hp-avis-head{display:flex;align-items:flex-end;gap:32px;flex-wrap:wrap;margin-top:32px; border-bottom:1px solid var(--line);padding-bottom:24px}
.hp-score{display:flex;align-items:baseline;gap:8px}
.hp-score strong{font-family:var(--mono);font-size:48px;line-height:1;color:var(--ink)}
.hp-score span{font-family:var(--mono);font-size:13px;color:var(--muted)}
.hp-stars{display:inline-flex;gap:4px;align-items:center}
.hp-stars svg{display:block}
.hp-avis-head .under-link{margin-left:auto}
.hp-avis{background:#fff;border:1px solid var(--line);border-radius:9px;padding:24px;display:flex;flex-direction:column; box-shadow:0 1px 2px rgba(37,17,74,.04),0 10px 24px rgba(37,17,74,.06);transition:transform .25s,box-shadow .25s}
.hp-avis:hover{transform:translateY(-4px);box-shadow:0 4px 8px rgba(37,17,74,.06),0 22px 44px rgba(37,17,74,.1)}
.hp-avis .hp-stars{margin-bottom:16px}
.hp-avis p{margin:0 0 24px;font-size:16px;line-height:1.6;color:var(--text);flex:1}
.hp-avis--lead p{font-family:var(--serif);font-size:24px;line-height:1.45;color:var(--ink)}
.hp-av{width:32px;height:32px;border-radius:50%;background:var(--surface);border:1px solid var(--line); display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:13px;color:var(--violet);flex:0 0 auto;color:var(--muted)}
.hp-avis-more{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:24px}
@media(prefers-reduced-motion:reduce){.hp-offer,.hp-avis,.hp-pillar,.hp-nav-cta,.hp-wa{transition:none}}
@media(max-width:1100px){.hp-avis-more{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.hp-lead,.hp-avis-more{grid-template-columns:1fr}}
@media(max-width:600px){.hp-avis-head .under-link{margin-left:0}}
.hp-avis,.hp-offer,.hp-feature,.hp-panel{position:relative}
.hp-avis:before,.hp-feature:before{content:'';position:absolute;left:0;top:0;width:4px;height:100%; background:var(--violet);transform:scaleY(0);transform-origin:bottom;transition:transform .35s cubic-bezier(.22,.7,.25,1); border-radius:9px 0 0 9px}
.hp-avis:hover:before,.hp-feature:hover:before{transform:scaleY(1);transform-origin:top}
.hp-stars svg{opacity:0;transform:scale(.5) rotate(-25deg);transition:opacity .3s ease,transform .45s cubic-bezier(.3,1.5,.5,1)}
.is-visible .hp-stars svg,.hp-stars.is-visible svg{opacity:1;transform:none}
.hp-stars svg:nth-child(1){transition-delay:.05s}
.hp-stars svg:nth-child(2){transition-delay:.11s}
.hp-stars svg:nth-child(3){transition-delay:.17s}
.hp-stars svg:nth-child(4){transition-delay:.23s}
.hp-stars svg:nth-child(5){transition-delay:.29s}
@media(prefers-reduced-motion:reduce){.hp-reveal,.hp-screen,.hp-rows div,.hp-stars svg,.eyebrow i, .hp-timeline:before,.hp-timeline article:before,.hp-timeline article:after, .under-link:after,.hp-avis:before,.hp-feature:before,.hp-minor>div:before{ transition:none!important;transform:none!important;opacity:1!important}}
.hp-lead,.hp-avis-more{display:none}
.hp-reviews{columns:3;column-gap:24px;margin-top:32px;display:block;border-top:0}
.hp-avis{display:block;break-inside:avoid;-webkit-column-break-inside:avoid;page-break-inside:avoid; width:100%;margin:0 0 24px;padding:24px;background:#fff;border:1px solid var(--line);border-radius:9px; box-shadow:0 1px 2px rgba(37,17,74,.04),0 10px 24px rgba(37,17,74,.06)}
.hp-avis p{font-family:var(--ui);font-size:16px;line-height:1.6;color:var(--text);margin:16px 0 24px}
.hp-avis--lead p{font-family:var(--ui);font-size:16px;line-height:1.6;color:var(--text)}
.hp-avis .hp-stars{margin:0}
@media(max-width:1100px){.hp-reviews{columns:2}}
@media(max-width:600px){.hp-reviews{columns:1}}
.hero-copy>p:not(.eyebrow), .hp-rowlist p, .hp-timeline p, .hp-trustlist p, .hp-data-layout>div>p, .hp-offers-intro>p, .hp-feature p, .hp-avis p, .hp-faq .hp-answer p, .section-title>p:not(.eyebrow){max-width:640px}
.hp-reviews--plus{margin-top:0}
.hp-reviews--plus[hidden]{display:none}
.hp-plus{background:transparent;border:1px solid var(--line);color:var(--ink)}
.hp-plus:hover{background:var(--surface);border-color:#c8c1d1;color:var(--violet);box-shadow:none}
.hp-plus b{transition:transform .3s cubic-bezier(.22,.7,.25,1)}
.hp-plus[aria-expanded="true"] b{transform:rotate(180deg)}

/* ============================================================
   FAQ EN ACCORDEON
   ⛔ REGLE DE DAVID : une FAQ se replie TOUJOURS. Jamais une grille ouverte.
   ⛔ Le prefixe tk- est OBLIGATOIRE ici : .faq-item existe deja dans la
   feuille historique de plusieurs pages, et son marqueur « + » se
   superposait au notre.
   Balisage natif <details>/<summary> : accessible, sans JavaScript.
   ============================================================ */
/* ⛔ la feuille historique de certaines pages ecrase la regle du
   navigateur qui replie un <details> ferme : le contenu restait visible
   et toutes les reponses se superposaient. On la retablit ici. */
details.tk-faq-item:not([open])>*:not(summary){display:none}
.tk-faq-liste{margin-top:48px;border-top:1px solid var(--line)}
.tk-faq-item{border-bottom:1px solid var(--line)}
.tk-faq-item summary{list-style:none;cursor:pointer;display:grid;
  grid-template-columns:1fr 24px;gap:24px;align-items:center;padding:24px 0;
  font-size:18px;line-height:1.35;font-weight:700;color:var(--ink);
  transition:color .2s;position:relative}
.tk-faq-item summary::-webkit-details-marker{display:none}
.tk-faq-item summary:hover{color:var(--violet)}
.tk-faq-item summary:focus-visible{outline:2px solid var(--violet);outline-offset:4px}
.tk-faq-item summary i{width:24px;height:24px;border-radius:50%;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;font-style:normal;
  font-family:var(--mono);font-size:16px;color:var(--violet);
  transition:transform .3s cubic-bezier(.22,.7,.25,1),background .2s,border-color .2s}
.tk-faq-item[open] summary i{transform:rotate(45deg);background:var(--violet);
  color:#fff;border-color:var(--violet)}
.tk-faq-item summary:hover i{border-color:var(--violet)}
.tk-faq-reponse{overflow:hidden}
.tk-faq-reponse p{margin:0 0 24px;padding-right:48px;font-size:16px;line-height:1.65;
  color:var(--muted);max-width:840px}
.tk-faq-reponse a{color:var(--violet)}
.tk-faq-item[open] .tk-faq-reponse{animation:tk-faq-ouvre .35s cubic-bezier(.22,.7,.25,1)}
@keyframes tk-faq-ouvre{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  .tk-faq-item summary i{transition:none}
  .tk-faq-item[open] .tk-faq-reponse{animation:none}}
@media(max-width:600px){.tk-faq-item summary{font-size:16px}.tk-faq-reponse p{padding-right:0}}

/* Pied d une carte d avis : photo et nom */
.hp-who{display:flex;align-items:center;gap:8px;margin-top:auto}
.hp-who b{font-size:13px;color:var(--ink);font-weight:700}
.hp-who span{display:block;font-family:var(--mono);font-size:13px;color:var(--light)}
.hp-who{display:flex;align-items:center;gap:16px;margin:0}
.hp-who b{font-size:16px;color:var(--ink);font-weight:700}

/* Initiales des avis sans photo.
   ⛔ valeur en dur : les feuilles historiques de certaines pages
   redefinissent --muted, et la couleur retombait a 4,12:1. */
.hp-who .hp-av{color:#6b6380}   /* .hp-who span (0,1,1) battait .hp-av (0,1,0) */

/* Variantes de colonnes des blocs deja definis */
.deroule--3{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.deroule--3{grid-template-columns:1fr}}
.compris--8 article:nth-child(4n){border-right:0}
.compris--8 article:nth-child(n+5){border-top:1px solid var(--line)}

/* Ligne de contexte d'une carte de cas : le client ou l'adresse */
.cas-client{font-family:var(--mono);font-size:13px;color:var(--violet);margin:0 0 16px!important}
.surface .ec-tags{margin:16px 0 0}
/* Lien secondaire d'une carte sur fond clair */
.offer-lien--clair{color:var(--ink)}
.offer-lien--clair:hover{color:var(--violet);border-color:var(--violet)}

/* Le bloc « preuve » quand il vit a l'interieur d'une section deja
   ouverte : on lui retire son propre rythme vertical. */
.evidence--dans-bloc{padding:0;margin:48px 0 64px}
.evidence--dans-bloc .evidence-copy h2{font-size:32px;line-height:1.1;margin:16px 0 0;color:var(--ink);font-weight:800}
@media(min-width:900px){.evidence--dans-bloc .evidence-copy h2{font-size:36px}}
.evidence--dans-bloc .evidence-copy h2 em{font-family:var(--serif);font-weight:400;color:var(--violet)}
.evidence--dans-bloc .ec-tags{margin-top:24px}

/* --- Portrait dans la scene du hero -------------------------------- */
.portrait{position:relative;width:100%}
.portrait img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;
  border-radius:13px;box-shadow:0 4px 8px rgba(36,18,76,.08),0 24px 56px rgba(36,18,76,.18)}
.portrait-pastilles{position:absolute;left:-16px;bottom:24px;display:flex;flex-direction:column;
  align-items:flex-start;gap:8px}
.portrait-pastilles span{background:rgba(255,255,255,.96);border:1px solid var(--line);
  border-radius:999px;padding:8px 16px;font-family:var(--mono);font-size:13px;color:var(--ink);
  box-shadow:0 8px 20px rgba(37,21,71,.12);backdrop-filter:blur(8px)}
@media(max-width:600px){.portrait-pastilles{left:-8px;bottom:16px}}

/* Lieu sous le nom, dans le hero */
.lieu{font-family:var(--mono);font-size:13px;letter-spacing:.085em;text-transform:uppercase;
  color:var(--violet);margin:16px 0 0!important}

/* Citation mise en avant sur bande sombre */
.citation{font-family:var(--serif);font-size:24px;line-height:1.45;color:#fff;
  margin:32px 0 0;padding-left:24px;border-left:2px solid #c9a6ff;max-width:520px}
@media(max-width:600px){.citation{font-size:18px;padding-left:16px}}

/* Carte de temoignage, hors du mur d'avis Google */
.temoin{background:var(--card);border:1px solid var(--line);border-radius:13px;padding:32px;
  box-shadow:0 1px 2px rgba(37,17,74,.04),0 12px 28px rgba(37,17,74,.07)}
.temoin p{margin:16px 0 24px;font-size:16px;line-height:1.6;color:var(--text)}
.temoin .hp-who span{font-family:var(--mono);font-size:13px;color:#6b6380}
@media(max-width:600px){.temoin{padding:24px}}

/* Bandeau de reperes a quatre colonnes */
.reperes--4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.reperes--4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.reperes--4{grid-template-columns:1fr}
  .reperes--4>div{border-left:0;border-top:1px solid var(--line);padding:24px 0}}

/* La pastille du deroule accepte un mot court, pas seulement un chiffre */
.pastille{width:auto;min-width:32px;padding:0 8px;border-radius:999px}

/* ============================================================
   CLOTURE CLAIRE
   ⛔ Le pied de page est sombre. Une cloture sombre juste avant lui
   colle deux aplats de meme valeur et la frontiere disparait. Le
   DERNIER bloc avant le pied de page est donc clair ; la bande sombre
   de la page se place plus haut.
   ============================================================ */
.closing--clair{background:var(--paper);color:var(--ink);border-top:1px solid var(--line)}
.closing--clair .eyebrow{color:var(--violet)}
.closing--clair .eyebrow i{background:var(--violet)}
.closing--clair h2{color:var(--ink)}
.closing--clair h2 em{font-family:var(--serif);font-weight:400;color:var(--violet)}
.closing--clair .closing-grid>div>p:not(.eyebrow){color:var(--muted)}
.closing--clair .under-link{color:var(--text)!important;border-color:#c8c1d1!important}
.closing--clair .under-link:hover{color:var(--violet)!important;border-color:var(--violet)!important}
.closing--clair .fin-note{color:var(--muted);border-left-color:var(--line)}
.closing--clair .fin-note a{color:var(--violet)}