/* ═══════════════════════════════════════════════════════════════════
   ROSA — feuille de style historique, extraite d'index.html.
   Partagée par toutes les pages. La charte actuelle est appliquée
   par-dessus, dans assets/rosa.css, chargée juste après.
   ═══════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════
   CHARTE ROSA — 1. SYSTÈME DE COULEURS
   ───────────────────────────────────────────────────────────────────
   Le nom ROSA appelle une gamme rosée. Plutôt qu'un rose évident,
   la marque repose sur un « bois de rose » profond (grenade) associé
   à une terre cuite chaude, posés sur des neutres sableux. C'est la
   palette d'un atelier, pas celle d'une salle de bain.

   Chaque couleur existe en dix nuances numérotées de 50 (la plus
   claire) à 900 (la plus sombre), comme dans une boîte de peinture.
   Vous ne devriez avoir besoin de modifier que les « rôles » en bas
   du bloc : changez --principale et tout le site suit.

   ⚠️ Si vous changez ces couleurs, vérifiez le contraste sur
   webaim.org/resources/contrastchecker : il faut au minimum 4,5 pour
   du texte courant. Les valeurs livrées sont toutes conformes.
   ═══════════════════════════════════════════════════════════════════ */
:root{
  /* ── Grenade — couleur principale (bois de rose profond) ────────── */
  --g-50:#141B36;   /* voiles/survols -> teinte nuit (thème sombre)   */
  --g-100:#1A2244;  /* fonds d'icônes/pastilles -> nuit               */
  --g-200:#E9BDB9;  /* filets décoratifs                              */
  --g-300:#D8938E;  /* texte de marque sur fond sombre                */
  --g-400:#C06B69;
  --g-500:#A94E52;  /* liens sur fond sombre                          */
  --g-600:#93373F;  /* ★ COULEUR PRINCIPALE — boutons, liens, titres  */
  --g-700:#7A2B34;  /* survol des boutons                             */
  --g-800:#5C2028;
  --g-900:#3D161B;  /* encre de marque                                */

  /* ── Terre — couleur secondaire (terre cuite) ───────────────────── */
  --t-100:#122238;
  --t-200:#F3CDB8;
  --t-300:#E6A98C;
  --t-400:#D4805F;
  --t-500:#C0653F;  /* ★ SECONDAIRE — aplats, pétales, illustrations  */
  --t-600:#A2512F;  /* ★ version lisible en petit texte               */
  --t-700:#7E3E24;

  /* ── Neutres — THÈME NUIT FUTURISTE (bascule complète du site) ──── */
  --n-0:#161E3A;    /* cartes (verre nuit)                            */
  --n-50:#0A0E1F;   /* fond général (nuit profonde)                  */
  --n-100:#0F1430;  /* fond des sections alternées                    */
  --n-200:#26262A;  /* fonds de blocs à l'intérieur des cartes        */
  --n-300:#29335A;  /* bordures et filets                             */
  --n-400:#3C477A;  /* bordures marquées, icônes désactivées          */
  --n-600:#AEB9D8;  /* ★ texte secondaire (clair)                     */
  --n-800:#D2DAF2;
  --n-900:#EEF2FF;  /* ★ texte principal (quasi blanc)                */

  /* ── États ──────────────────────────────────────────────────────── */
  --ok:#2F6B4F;
  --attention:#8A5A00;
  --erreur:#A32017;
  --erreur-fond:#2A1420;
  --info:#2C5A78;

  /* ── Rôles : c'est ici qu'on change le site d'un coup ───────────── */
  --principale:#CE1B2C;         /* violet vif lisible sur nuit ET sur blanc */
  --principale-forte:#B0121F;
  --secondaire:#CE1B2C;         /* cyan vif */
  --secondaire-lisible:#B0121F;
  --fond:var(--n-50);
  --fond-alt:var(--n-100);
  --carte:var(--n-0);
  --texte:var(--n-900);
  --texte-doux:var(--n-600);
  --trait:var(--n-300);

  /* ═══════════════════════════════════════════════════════════════
     CHARTE ROSA — 2. TYPOGRAPHIE
     Deux polices, deux rôles nettement séparés. Fraunces, une serif
     à fort caractère, pour tout ce qui se lit d'un coup d'œil.
     Inter, neutre et sobre, pour tout ce qui se lit vraiment.
     Le contraste entre les deux EST l'identité : ne les mélangez pas.
     ═══════════════════════════════════════════════════════════════ */
  --serif:'Fraunces',Georgia,'Times New Roman',serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;

  /* ═══════════════════════════════════════════════════════════════
     CHARTE ROSA — 3. FORMES
     Le pétale est la signature graphique du site : c'est le contre-
     poinçon du R du logo, repris en puce de liste, en séparateur,
     en angle de carte et en fond d'icône. Une seule forme, répétée
     partout : c'est ce qui fait qu'on reconnaît ROSA sans lire le nom.
     ═══════════════════════════════════════════════════════════════ */
  --petale:62% 0 62% 0;        /* la forme signature                  */
  --petale-doux:70% 12% 70% 12%;
  --rayon:18px;                /* cartes                              */
  --rayon-petit:11px;          /* champs, petits blocs                */
  --max:1140px;
  --ombre:0 1px 2px rgba(61,22,27,.05),0 10px 30px rgba(61,22,27,.06);
  --ombre-forte:0 2px 5px rgba(61,22,27,.07),0 22px 50px rgba(61,22,27,.12);
  --transition:.24s cubic-bezier(.22,.8,.28,1);
}

/* ═══════════════════════════════════════════════════════════════════
   4. BASE
   ═══════════════════════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--sans);
  font-size:17px;
  line-height:1.72;
  color:var(--texte);
  background:
    radial-gradient(900px 700px at 88% -5%, rgba(122,43,52,.22), transparent 60%),
    radial-gradient(800px 640px at 2% 12%, rgba(206,27,44,.16), transparent 60%),
    radial-gradient(760px 620px at 100% 100%, rgba(74,20,24,.16), transparent 60%),
    var(--fond);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{max-width:100%;height:auto;display:block}
a{color:var(--principale);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--principale-forte)}

h1,h2,h3,h4{
  font-family:var(--serif);font-weight:600;
  color:var(--texte);margin:0 0 .5em;
}
h1{font-size:clamp(2.4rem,6.2vw,4.4rem);line-height:1.03;letter-spacing:-.028em}
h2{font-size:clamp(1.9rem,4.4vw,2.95rem);line-height:1.08;letter-spacing:-.022em}
h3{font-size:clamp(1.18rem,1.8vw,1.36rem);line-height:1.28;letter-spacing:-.008em}
h4{font-size:1.04rem;line-height:1.3;letter-spacing:-.005em}
h1 em,h2 em{font-style:italic;font-weight:600;color:var(--principale)}
p{margin:0 0 1em}
ul,ol{margin:0;padding:0}
strong{font-weight:600}

.contenu{width:100%;max-width:var(--max);margin:0 auto;padding:0 22px}
section{padding:92px 0}
@media(max-width:640px){section{padding:64px 0}}
section,details.bloc-legal,#principal{scroll-margin-top:88px}
#principal:focus{outline:none}

/* ── Surtitre : petite étiquette au-dessus des titres, avec pétale ── */
.surtitre{
  font-family:var(--sans);font-size:.75rem;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--secondaire-lisible);
  margin:0 0 16px;display:flex;align-items:center;gap:10px;
}
.surtitre::before{
  content:"";width:11px;height:11px;flex:0 0 auto;
  background:var(--secondaire);border-radius:var(--petale);
}
.chapeau{font-size:1.12rem;color:var(--texte-doux);max-width:62ch}
.tete-section{max-width:68ch;margin-bottom:52px}

/* Accès rapide au clavier */
.saut-contenu{
  position:absolute;left:-9999px;top:0;background:var(--principale);color:#fff;
  padding:12px 18px;z-index:200;border-radius:0 0 var(--rayon-petit) 0;font-weight:600;
}
.saut-contenu:focus{left:0}

/* Anneau de focus visible partout (accessibilité clavier) */
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible,summary:focus-visible,video:focus-visible{
  outline:3px solid var(--secondaire-lisible);
  outline-offset:3px;
  border-radius:4px;
}

/* ═══════════════════════════════════════════════════════════════════
   5. BOUTONS
   ═══════════════════════════════════════════════════════════════════ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--sans);font-size:1rem;font-weight:600;
  padding:15px 28px;border-radius:999px;border:1.5px solid transparent;
  cursor:pointer;text-decoration:none;line-height:1.2;
  transition:transform var(--transition),background var(--transition),box-shadow var(--transition),color var(--transition),border-color var(--transition);
}
.btn svg{width:18px;height:18px;flex:0 0 auto}
.btn-plein{background:var(--principale);color:#fff;box-shadow:0 6px 18px rgba(147,55,63,.24)}
.btn-plein:hover{background:var(--principale-forte);color:#fff;transform:translateY(-2px);box-shadow:0 12px 26px rgba(147,55,63,.3)}
.btn-vide{background:transparent;color:var(--principale);border-color:var(--trait)}
.btn-vide:hover{border-color:var(--principale);background:var(--g-50);transform:translateY(-2px)}
.btn-terre{background:var(--t-700);color:#fff}
.btn-terre:hover{background:var(--t-600);color:#fff;transform:translateY(-2px)}
.btn-petit{padding:11px 20px;font-size:.94rem}
@media(max-width:420px){.btn{width:100%}}

/* ═══════════════════════════════════════════════════════════════════
   6. LOGO — monogramme « R au bol en pétale » + mot ROSA
   ═══════════════════════════════════════════════════════════════════ */
.logo{
  display:inline-flex;align-items:center;gap:12px;
  text-decoration:none;color:var(--texte);
}
.logo-marque{width:38px;height:38px;flex:0 0 auto;border-radius:11px}
.logo-mot{
  font-family:var(--serif);font-size:1.5rem;font-weight:700;
  letter-spacing:.2em;line-height:1;display:inline-flex;align-items:center;gap:8px;
  padding-left:.06em;color:var(--texte);
}
.logo-grand .logo-marque{width:54px;height:54px;border-radius:15px}
.logo-grand .logo-mot{font-size:1.9rem}

/* ═══════════════════════════════════════════════════════════════════
   7. EN-TÊTE ET NAVIGATION
   ═══════════════════════════════════════════════════════════════════ */
.entete{
  position:sticky;top:0;z-index:100;
  background:rgba(246,244,240,.88);
  backdrop-filter:saturate(140%) blur(12px);
  -webkit-backdrop-filter:saturate(140%) blur(12px);
  border-bottom:1px solid var(--trait);
  transition:border-color var(--transition),box-shadow var(--transition);
}
.entete.collee{border-bottom-color:var(--trait);box-shadow:0 4px 20px rgba(61,22,27,.05)}
.barre{display:flex;align-items:center;justify-content:space-between;gap:18px;height:74px}
.nav-actions{display:flex;align-items:center;gap:12px}
/* Barre d'onglets et menu burger : remplacés par le menu à la demande (rosa.css, section 40). */

/* ═══════════════════════════════════════════════════════════════════
   8. HÉROS
   ═══════════════════════════════════════════════════════════════════ */
.heros{position:relative;padding:104px 0 88px;overflow:hidden;
  background:
    radial-gradient(720px 560px at 86% -8%, rgba(122,43,52,.42), transparent 62%),
    radial-gradient(660px 560px at 2% 6%, rgba(206,27,44,.30), transparent 60%),
    radial-gradient(600px 480px at 60% 118%, rgba(74,20,24,.30), transparent 60%),
    linear-gradient(180deg,#0C1126 0%, var(--fond) 70%)}
.heros::before{
  content:"";position:absolute;top:-280px;right:-200px;width:680px;height:680px;
  border-radius:var(--petale-doux);
  background:radial-gradient(circle at 38% 38%,rgba(122,43,52,.32),rgba(206,27,44,.14) 55%,transparent 72%);
  filter:blur(6px);pointer-events:none;
}
.heros::after{
  content:"";position:absolute;bottom:-300px;left:-240px;width:600px;height:600px;
  border-radius:var(--petale-doux);
  background:radial-gradient(circle at 60% 40%,rgba(206,27,44,.30),rgba(74,20,24,.14) 55%,transparent 72%);
  filter:blur(6px);pointer-events:none;
}
.heros .contenu{position:relative;z-index:1}
@media(max-width:960px){
  .heros{padding:66px 0 58px}
  .heros-grille{grid-template-columns:1fr;gap:42px}
}
.heros h1{margin-bottom:24px}
.heros-boutons{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:34px}
@media(max-width:860px){.grille-services{grid-template-columns:1fr}}
.carte{
  position:relative;overflow:hidden;
  background:var(--carte);border:1px solid var(--trait);border-radius:var(--rayon);
  padding:36px 32px;box-shadow:var(--ombre);
  transition:transform var(--transition),box-shadow var(--transition),border-color var(--transition);
  display:flex;flex-direction:column;
}
.carte::after{
  content:"";position:absolute;top:-26px;right:-26px;width:88px;height:88px;
  background:var(--g-50);border-radius:var(--petale);
  transition:transform var(--transition),background var(--transition);
  pointer-events:none;
}
.carte:hover{transform:translateY(-4px);box-shadow:var(--ombre-forte);border-color:var(--n-400)}
.carte:hover::after{transform:scale(1.14) rotate(-8deg);background:var(--t-100)}
.carte>*{position:relative;z-index:1}
@media(max-width:520px){.carte{padding:28px 22px}}

.icone{
  width:52px;height:52px;border-radius:16px 5px 16px 5px;background:var(--g-100);
  display:flex;align-items:center;justify-content:center;margin-bottom:22px;color:var(--principale);
}
.icone svg{width:25px;height:25px}
.carte h3{margin-bottom:10px}
.pour-qui{font-size:.87rem;color:var(--texte-doux);margin-bottom:16px;font-style:italic}
@media(max-width:960px){.grille-etapes{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.grille-etapes{grid-template-columns:1fr}}
.etape{position:relative;padding-top:6px}
.etape h3{font-size:1.12rem;margin-bottom:8px}
.etape p{font-size:.95rem;color:var(--texte-doux);margin:0}
.etape::after{
  content:"";position:absolute;top:22px;right:-14px;width:26px;height:1px;
  background:linear-gradient(90deg,var(--trait),transparent);
}
.etape:last-child::after{display:none}
@media(max-width:960px){.etape::after{display:none}}
.tarif{
  position:relative;background:var(--carte);border:1px solid var(--trait);border-radius:var(--rayon);
  padding:30px 26px;text-align:left;display:flex;flex-direction:column;
  transition:transform var(--transition),box-shadow var(--transition);
}
.tarif:hover{transform:translateY(-3px);box-shadow:var(--ombre)}
.tarif.mis-en-avant{border-color:var(--principale);box-shadow:0 10px 34px rgba(147,55,63,.13)}
.etiquette{
  align-self:flex-start;background:var(--principale);color:#fff;
  font-size:.72rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  padding:5px 13px;border-radius:999px;margin-bottom:16px;
  box-shadow:0 4px 12px rgba(206,27,44,.22);
}
.tarif h3{font-size:1.06rem;margin-bottom:14px}
.montant{font-family:var(--serif);font-size:2.2rem;font-weight:700;color:var(--principale);line-height:1;display:block}
.tarif ul{list-style:none;font-size:.93rem;color:var(--texte-doux)}
.tarif ul li{padding:7px 0;border-bottom:1px dashed var(--trait)}
.tarif ul li:last-child{border-bottom:none}
@media(max-width:900px){.grille-cercle{grid-template-columns:1fr}}
.avantage{
  position:relative;overflow:hidden;
  background:var(--carte);border:1px solid var(--trait);border-radius:var(--rayon);
  padding:30px 28px;display:flex;flex-direction:column;
  transition:transform var(--transition),box-shadow var(--transition);
}
.avantage:hover{transform:translateY(-3px);box-shadow:var(--ombre)}
.avantage::after{
  content:"";position:absolute;top:-30px;right:-30px;width:96px;height:96px;
  background:var(--t-100);border-radius:var(--petale);pointer-events:none;
}
.avantage>*{position:relative;z-index:1}
.avantage h3{margin-bottom:12px}
.avantage p{font-size:.96rem;color:var(--texte-doux)}
@media(max-width:820px){.bloc-code{grid-template-columns:1fr;padding:28px 22px}}

/* ═══════════════════════════════════════════════════════════════════
   14. CARTE DE VISITE NUMÉRIQUE
   Pensée pour être montrée sur un écran de téléphone, en démarchage.
   ═══════════════════════════════════════════════════════════════════ */
.grille-visite{display:grid;grid-template-columns:.95fr 1.05fr;gap:34px;align-items:start}
@media(max-width:900px){.grille-visite{grid-template-columns:1fr;gap:26px}}
.carte-visite{
  background:var(--carte);border:1px solid var(--trait);border-radius:24px;
  box-shadow:var(--ombre-forte);padding:0;overflow:hidden;max-width:420px;width:100%;margin:0 auto;
}
/* Dégradé volontairement assombri vers la terre cuite foncée : c'est ce
   qui permet au texte blanc de rester lisible sur toute sa longueur
   (contraste supérieur à 5:1 même au point le plus clair). */
.cv-entete{
  background:linear-gradient(140deg,var(--g-700),var(--g-600) 46%,var(--t-600));
  color:#fff;padding:30px 26px 26px;position:relative;overflow:hidden;
}
.cv-entete::after{
  content:"";position:absolute;right:-40px;bottom:-56px;width:150px;height:150px;
  background:rgba(255,255,255,.10);border-radius:var(--petale);
}
.cv-entete .logo{color:#fff}
.cv-entete .logo-mot{color:#fff}
.cv-nom{font-family:var(--serif);font-size:1.5rem;font-weight:600;margin:18px 0 4px;color:#fff;position:relative;z-index:1}
.cv-role{font-size:.94rem;color:#FDFAF7;margin:0;position:relative;z-index:1}
.cv-corps{padding:24px 26px 28px}
.cv-infos{list-style:none;margin:0 0 22px}
.cv-infos li{display:flex;gap:13px;align-items:flex-start;padding:11px 0;border-bottom:1px solid var(--n-200)}
.cv-infos li:last-child{border-bottom:none}
.cv-infos .icone{width:38px;height:38px;border-radius:12px 4px 12px 4px;margin:0;flex:0 0 auto}
.cv-infos .icone svg{width:18px;height:18px}
.cv-infos .lib{font-size:.72rem;text-transform:uppercase;letter-spacing:.14em;color:var(--texte-doux);display:block}
.cv-infos a,.cv-infos span.val{font-size:1rem;font-weight:600;color:var(--texte);text-decoration:none;word-break:break-word}
.cv-infos a:hover{color:var(--principale)}
.cv-actions{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.cv-actions .btn{width:100%;padding:13px 14px;font-size:.92rem;gap:7px}
@media(max-width:380px){.cv-actions{grid-template-columns:1fr}}

.bloc-qr{
  background:var(--carte);border:1px solid var(--trait);border-radius:var(--rayon);
  padding:30px 28px;text-align:center;
}
.qr-cadre{
  display:inline-block;background:#fff;padding:16px;border-radius:var(--rayon-petit);
  border:1px solid var(--n-200);
}
.qr-cadre svg{width:190px;height:190px;display:block}
.qr-message{font-size:.9rem;color:var(--texte-doux);margin:18px 0 0}
.bloc-qr h3{margin-bottom:8px}
.astuce{
  background:var(--n-100);border-left:3px solid var(--secondaire);
  border-radius:0 var(--rayon-petit) var(--rayon-petit) 0;
  padding:16px 20px;font-size:.93rem;color:var(--texte-doux);margin-top:24px;
}
.astuce strong{color:var(--texte)}
@media(max-width:880px){.grille-paiement{grid-template-columns:1fr}}
@media(max-width:520px){.bloc-paiement{padding:24px 20px}}
@media(max-width:700px){.grille-securite{grid-template-columns:1fr}}
@media(max-width:900px){.grille-confiance{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.grille-confiance{grid-template-columns:1fr}}
.engagement{
  background:var(--carte);border:1px solid var(--trait);border-radius:var(--rayon);padding:28px 26px;
  transition:border-color var(--transition),transform var(--transition);
}
.engagement:hover{border-color:var(--n-400);transform:translateY(-2px)}
.engagement h3{font-size:1.05rem;margin-bottom:8px}
.engagement p{font-size:.94rem;color:var(--texte-doux);margin:0}
.engagement .icone{width:44px;height:44px;border-radius:14px 4px 14px 4px;margin-bottom:18px}
.engagement .icone svg{width:21px;height:21px}
details.question{
  background:var(--carte);border:1px solid var(--trait);border-radius:var(--rayon);
  margin-bottom:14px;overflow:hidden;transition:border-color var(--transition);
}
details.question[open]{border-color:var(--n-400)}
details.question>summary{
  cursor:pointer;padding:22px 24px;font-family:var(--serif);font-size:1.1rem;font-weight:600;
  list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;color:var(--texte);
  line-height:1.35;
}
details.question>summary::-webkit-details-marker{display:none}
details.question>summary::after{
  content:"";flex:0 0 auto;width:13px;height:13px;background:var(--g-300);
  border-radius:var(--petale);transition:transform var(--transition),background var(--transition);
}
details.question[open]>summary::after{transform:rotate(135deg);background:var(--secondaire)}
.reponse{padding:0 24px 24px;color:var(--texte-doux);font-size:.98rem}
.reponse p:last-child{margin-bottom:0}
.reponse ul{list-style:none;margin-top:8px}
.reponse ul li{position:relative;padding-left:22px;margin-bottom:7px}
.reponse ul li::before{
  content:"";position:absolute;left:0;top:.62em;width:9px;height:9px;
  background:var(--g-300);border-radius:var(--petale);
}
@media(max-width:860px){.grille-zone{grid-template-columns:1fr;gap:28px}}
/* Quand la liste porte encore le marqueur « à remplir », on lui donne un
   peu d'air pour que le surlignage reste lisible. */
.liste-communes.a-remplir{padding:12px 14px;border-radius:var(--rayon-petit)}

/* ═══════════════════════════════════════════════════════════════════
   19. CONTACT ET FORMULAIRE
   ═══════════════════════════════════════════════════════════════════ */
.contact-grille{display:grid;grid-template-columns:.85fr 1.15fr;gap:48px;align-items:start}
@media(max-width:900px){.contact-grille{grid-template-columns:1fr;gap:36px}}
.coordonnees{list-style:none;margin-top:26px}
.coordonnees li{display:flex;gap:14px;align-items:flex-start;margin-bottom:20px}
.coordonnees .icone{width:44px;height:44px;border-radius:14px 4px 14px 4px;margin:0;flex:0 0 auto}
.coordonnees .icone svg{width:20px;height:20px}
.coordonnees .lib{font-size:.75rem;text-transform:uppercase;letter-spacing:.14em;color:var(--texte-doux);display:block}
.coordonnees a,.coordonnees span.val{font-size:1.05rem;font-weight:600;color:var(--texte);text-decoration:none;word-break:break-word}
.coordonnees a:hover{color:var(--principale)}

/* Marqueur visuel des informations à remplacer par Alexis.
   ⚠️ DERNIÈRE ÉTAPE AVANT PUBLICATION : une fois toutes les informations
   renseignées, remplacez le contenu de cette règle par « .a-remplir{} »
   pour faire disparaître le surlignage du site public. */
.a-remplir{
  background:rgba(192,101,63,.15);
  border-bottom:2px dashed var(--secondaire);
  padding:0 3px;border-radius:3px;
}
/* Avertissement affiché en tête des blocs légaux tant que les
   informations obligatoires ne sont pas confirmées. */
.avis-a-completer{
  background:rgba(192,101,63,.12);
  border:1px solid var(--secondaire);
  border-left:4px solid var(--secondaire);
  border-radius:6px;padding:14px 16px;margin:0 0 22px;
  font-size:.92rem;line-height:1.6;
}

form{background:var(--carte);border:1px solid var(--trait);border-radius:var(--rayon);padding:32px;box-shadow:var(--ombre)}
@media(max-width:520px){form{padding:22px 18px}}
.rangee{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:620px){.rangee{grid-template-columns:1fr}}
.champ{margin-bottom:16px;display:flex;flex-direction:column}
.champ label{font-size:.9rem;font-weight:600;margin-bottom:7px}
.champ .facultatif{font-weight:400;color:var(--texte-doux);font-size:.84rem}
.champ input,.champ select,.champ textarea{
  font-family:var(--sans);font-size:1rem;color:var(--texte);
  padding:13px 15px;border:1.5px solid var(--trait);border-radius:var(--rayon-petit);
  background:var(--fond);transition:border-color var(--transition),background var(--transition);width:100%;
}
.champ textarea{resize:vertical;min-height:120px}
.champ input:focus,.champ select:focus,.champ textarea:focus{border-color:var(--principale);background:var(--carte)}
.champ input[aria-invalid="true"],.champ select[aria-invalid="true"],.champ textarea[aria-invalid="true"]{border-color:var(--erreur);background:var(--erreur-fond)}
.aide-champ{font-size:.83rem;color:var(--texte-doux);margin:6px 0 0}
.erreur{color:var(--erreur);font-size:.85rem;margin-top:6px;min-height:0;font-weight:500}
.rgpd{display:flex;gap:11px;align-items:flex-start;font-size:.88rem;color:var(--texte-doux);margin:6px 0 20px}
.rgpd input{width:19px;height:19px;flex:0 0 auto;margin-top:2px;accent-color:var(--principale)}
/* Origine du lien d'arrivée (utm_*) jointe à une demande : mention discrète, case « Ne pas la joindre ». */
.origine-mention{font-size:.85rem;color:var(--texte-doux);margin:6px 0 14px;overflow-wrap:anywhere}
.origine-mention label{display:inline-flex;gap:6px;align-items:center;white-space:nowrap}
.origine-mention input{width:16px;height:16px;accent-color:var(--principale)}
.message-envoi{
  margin-top:16px;padding:14px 16px;border-radius:var(--rayon-petit);font-size:.94rem;
  background:var(--g-50);border:1px solid var(--g-200);color:var(--texte);
}
.message-envoi[hidden]{display:none}

/* ═══════════════════════════════════════════════════════════════════
   20. PIED DE PAGE ET PAGES LÉGALES
   ═══════════════════════════════════════════════════════════════════ */
.pied{background:var(--n-900);color:#D6C8BF;padding:60px 0 28px;font-size:.94rem}
.pied-grille{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:36px;margin-bottom:38px}
@media(max-width:760px){.pied-grille{grid-template-columns:1fr;gap:28px}}
.pied .logo{color:#fff;margin-bottom:14px}
.pied .logo-mot{color:#fff}
.pied p{color:#B3A298;max-width:42ch}
.pied h2{font-family:var(--sans);font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:#fff;margin-bottom:14px}
.pied ul{list-style:none}
.pied li{margin-bottom:9px}
.pied a{color:#D6C8BF;text-decoration:none}
.pied a:hover{color:#fff;text-decoration:underline}
.pied-bas{
  border-top:1px solid rgba(255,255,255,.13);padding-top:22px;
  display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;color:#9C8B81;font-size:.86rem;
}

.legal{background:var(--fond);border-top:1px solid var(--trait)}
.legal .contenu{max-width:840px}
.legal h2{font-size:clamp(1.7rem,3.4vw,2.2rem)}
.legal h3{font-size:1.05rem;margin-top:28px}
.legal p,.legal li{font-size:.95rem;color:var(--texte-doux)}
.legal ul{list-style:disc;padding-left:22px;margin-bottom:14px}
.legal li{margin-bottom:6px}
details.bloc-legal{
  background:var(--carte);border:1px solid var(--trait);border-radius:var(--rayon);
  padding:0;margin-bottom:18px;overflow:hidden;
}
details.bloc-legal>summary{
  cursor:pointer;padding:22px 24px;font-family:var(--serif);font-size:1.15rem;font-weight:600;
  list-style:none;display:flex;justify-content:space-between;align-items:center;gap:14px;color:var(--texte);
}
details.bloc-legal>summary::-webkit-details-marker{display:none}
details.bloc-legal>summary::after{
  content:"";flex:0 0 auto;width:13px;height:13px;background:var(--g-300);
  border-radius:var(--petale);transition:transform var(--transition),background var(--transition);
}
details.bloc-legal[open]>summary::after{transform:rotate(135deg);background:var(--secondaire)}
.corps-legal{padding:0 24px 24px;border-top:1px solid var(--trait);padding-top:20px}

/* ═══════════════════════════════════════════════════════════════════
   21. ANIMATIONS AU DÉFILEMENT (discrètes et cohérentes)
   ═══════════════════════════════════════════════════════════════════ */
.apparait{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.8,.3,1)}
.apparait.visible{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .apparait{opacity:1;transform:none;transition:none}
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* Impression : le site reste lisible si quelqu'un l'imprime depuis son
   navigateur. ROSA ne produit aucun support papier, mais un visiteur
   peut toujours vouloir garder une trace. */
@media print{
  .entete,.saut-contenu,.heros::before,.heros::after,.cta-sticky,.heros-aurora{display:none!important}
  body{background:#fff;font-size:12pt}
  .carte,.tarif,.avantage,.engagement{box-shadow:none;break-inside:avoid}
}
.secteur{background:var(--carte);border:1px solid var(--trait);border-radius:var(--rayon);
  padding:22px 22px 20px;box-shadow:var(--ombre);
  transition:transform .25s cubic-bezier(.2,.8,.3,1),box-shadow .25s}
.secteur:hover{transform:translateY(-3px);box-shadow:var(--ombre-forte)}
.secteur h3{font-family:var(--serif);font-size:1.06rem;color:var(--texte);margin:0 0 6px}
.secteur p{color:var(--texte-doux);font-size:.94rem;line-height:1.5;margin:0}
.badge-demo{display:inline-block;font-family:var(--sans);font-size:.7rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--secondaire-lisible);
  background:var(--t-100);border:1px solid var(--t-200);border-radius:999px;
  padding:3px 11px;margin-bottom:12px}

/* ═══════════════════════════════════════════════════════════════════
   TRANSFORMATION — bandeau « architecture des services », processus
   en 8 étapes, blocs de confiance étendus, bande d'appel final,
   lien « espace client ». Tout reste dans la charte existante
   (mêmes tokens de couleur, forme pétale, polices, classe .apparait).
   ═══════════════════════════════════════════════════════════════════ */

/* Bandeau des 6 verbes — petites tuiles cliquables */
.archi{margin:8px 0 40px}
@media(max-width:900px){.archi-grille{grid-template-columns:repeat(3,1fr)}}
@media(max-width:520px){.archi-grille{grid-template-columns:repeat(2,1fr)}}
@media(max-width:960px){.grille-process{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.grille-process{grid-template-columns:1fr}}

/* Bande d'appel à l'action final */
.cta-final{background:var(--n-900);color:#F2E7DF;padding:66px 0;text-align:center}
.cta-final h2{color:#fff}
.cta-final p{color:#E4D6CC;max-width:56ch;margin:0 auto 26px}
.cta-final .btn-vide{color:#fff;border-color:rgba(255,255,255,.5)}
.cta-final .btn-vide:hover{color:#fff;border-color:#fff}

/* Lien discret « Espace client » dans l'en-tête */
.lien-client{font-size:.86rem;color:var(--texte-doux);text-decoration:none;white-space:nowrap}
.lien-client:hover{color:var(--principale)}
@media(max-width:860px){.lien-client{display:none}}
.bande-message .contenu{max-width:900px;text-align:center}
.bande-message .surtitre{color:var(--t-200)}
.bande-message .btn-plein{background:#fff;color:var(--principale)}
.bande-message .btn-plein:hover{background:var(--t-100);color:var(--principale-forte)}
.bande-message .btn-vide{color:#fff;border-color:rgba(255,255,255,.55)}
.bande-message .btn-vide:hover{color:#fff;border-color:#fff;background:rgba(255,255,255,.08)}

/* Cartes « univers » coaching / audit : titre + Pour qui + Ce que ça change */
.carte .carte-role{font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--secondaire-lisible);margin:0 0 10px}
.carte .changement{margin-top:auto;background:var(--g-50);border-left:3px solid var(--principale);padding:14px 17px;border-radius:0 var(--rayon-petit) var(--rayon-petit) 0;font-size:.94rem;color:var(--texte)}
.carte .changement strong{color:var(--principale)}

/* Cartouche « Pour qui / ce que ça change » compact utilisé hors carte */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:14px 0}
@media(max-width:520px){.duo{grid-template-columns:1fr}}
.duo>div{background:var(--n-100);border-radius:var(--rayon-petit);padding:14px 16px;font-size:.92rem}
.duo dt{font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--secondaire-lisible);margin-bottom:6px}
.duo dd{margin:0;color:var(--texte-doux)}

/* Calculateur de projet */
.calc{background:var(--carte);border:1px solid var(--trait);border-radius:var(--rayon);padding:30px 30px;box-shadow:var(--ombre);display:grid;grid-template-columns:1.05fr .95fr;gap:34px;align-items:start}
@media(max-width:820px){.calc{grid-template-columns:1fr;padding:26px 22px}}
.calc fieldset{border:none;padding:0;margin:0 0 20px}
.calc legend{font-size:.9rem;font-weight:600;margin-bottom:10px;padding:0}
.calc-options{display:grid;grid-template-columns:1fr 1fr;gap:8px 16px}
@media(max-width:520px){.calc-options{grid-template-columns:1fr}}
.calc-choix{display:flex;align-items:flex-start;gap:9px;font-size:.93rem;color:var(--texte);cursor:pointer;padding:4px 0}
.calc-choix input{margin-top:.2em;accent-color:var(--principale);flex:0 0 auto}
.calc-sortie{background:var(--n-900);color:#F2E7DF;border-radius:var(--rayon);padding:26px 26px;position:sticky;top:96px}
.calc-sortie h3{color:#fff;font-size:1.05rem;margin-bottom:6px}
.calc-sousligne{font-size:.84rem;color:#D8C6BB;margin-bottom:18px}
.calc-total{font-family:var(--serif);font-weight:700;color:#fff;line-height:1.05;font-size:clamp(1.7rem,4.4vw,2.35rem);display:block;margin-bottom:4px}
.calc-total .unite{font-size:.9rem;font-family:var(--sans);font-weight:500;color:#E4D6CC}
.calc-detail{list-style:none;margin:16px 0 0;border-top:1px solid rgba(255,255,255,.14);padding-top:14px}
.calc-detail li{display:flex;justify-content:space-between;gap:12px;font-size:.86rem;color:#E4D6CC;padding:5px 0}
.calc-detail li span:last-child{color:#fff;white-space:nowrap}
.calc-vide{font-size:.9rem;color:#D8C6BB}
.calc-avert{font-size:.8rem;color:#C9B6AB;margin-top:16px;line-height:1.5}
.calc-sortie .btn{width:100%;margin-top:18px}
.calc-sortie .btn-plein{background:#fff;color:var(--principale)}
.calc-sortie .btn-plein:hover{background:var(--t-100);color:var(--principale-forte)}

/* ═══════════════════════════════════════════════════════════════════
   PREMIUM 2026 — ADDITIF
   Accent « tech » froid (bleu-nuit / cyan désaturé) déclaré en variables,
   utilisé UNIQUEMENT en appoint dans les dégradés et effets. L'identité
   reste chaleureuse et premium : le froid ne fait que donner de la
   profondeur, jamais du néon « jeu vidéo ».
   Toutes les animations n'utilisent que transform / opacity (perf),
   et sont neutralisées par prefers-reduced-motion (règle globale plus haut).
   ═══════════════════════════════════════════════════════════════════ */
:root{
  --accent-tech:#3E5C6E;        /* bleu ardoise froid, appoint            */
  --accent-tech-clair:#6FA5B8;  /* cyan désaturé, halos                   */
  --accent-nuit:#1B2530;        /* bleu-nuit profond, fonds tech          */
  --verre:rgba(255,255,255,.72);
  --verre-bord:rgba(255,255,255,.55);
  --ombre-douce:0 1px 2px rgba(27,37,48,.05),0 14px 40px rgba(27,37,48,.09);
}
.heros-aurora .a1{width:520px;height:520px;top:-140px;left:-90px;
  background:radial-gradient(circle at 40% 40%,rgba(147,55,63,.42),transparent 65%);
  animation:aurora1 20s ease-in-out infinite}
.heros-aurora .a2{width:560px;height:560px;top:-60px;right:-120px;
  background:radial-gradient(circle at 55% 45%,rgba(192,101,63,.38),transparent 66%);
  animation:aurora2 26s ease-in-out infinite}
.heros-aurora .a3{width:460px;height:460px;bottom:-180px;left:32%;
  background:radial-gradient(circle at 50% 50%,rgba(62,92,110,.30),transparent 68%);
  animation:aurora3 30s ease-in-out infinite}
@keyframes aurora1{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(40px,30px,0) scale(1.12)}}
@keyframes aurora2{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-46px,26px,0) scale(1.08)}}
@keyframes aurora3{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(30px,-34px,0) scale(1.14)}}
.heros .heros-grille{position:relative;z-index:1}

/* ── Boutons premium : léger reflet au survol (transform/opacity) ──── */
.btn-plein{position:relative;overflow:hidden}
.btn-plein::after{content:"";position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.32) 50%,transparent 70%);
  transform:translateX(-130%);transition:transform .6s ease}
.btn-plein:hover::after{transform:translateX(130%)}
.btn-plein>*{position:relative;z-index:1}
@media(max-width:820px){.demos-exemple{grid-template-columns:1fr}}
.demo-legende{font-size:.84rem;color:var(--texte-doux);margin:12px 2px 0}
.faux-nav .url{flex:1;height:16px;margin-left:8px;border-radius:8px;background:var(--n-100);
  display:flex;align-items:center;padding:0 10px;font-size:.66rem;color:var(--texte-doux)}
@keyframes flotte{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-14px) rotate(8deg)}}
@keyframes pulse{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.08)}}
.demo-video .barre{position:absolute;left:14px;right:14px;bottom:14px;height:6px;border-radius:999px;
  background:rgba(255,255,255,.28);overflow:hidden}
.demo-video .barre::after{content:"";position:absolute;inset:0;transform-origin:left;
  background:linear-gradient(90deg,var(--t-300),#fff);animation:progresse 7s linear infinite}
@keyframes progresse{0%{transform:scaleX(0)}100%{transform:scaleX(1)}}
@media(max-width:940px){.grille-abos{grid-template-columns:1fr;max-width:460px;margin:0 auto}}
@media(min-width:941px){.abo-populaire{transform:translateY(-10px)}.abo-populaire:hover{transform:translateY(-14px)}}
.abo-prix .val{font-family:var(--serif);font-size:2.3rem;font-weight:700;color:var(--principale);line-height:1}
.abo-prix .unite{font-size:.86rem;color:var(--texte-doux)}
.abo ul li.moins{color:var(--texte-doux)}
.abo ul li.moins::before{background:var(--n-400)}
.abo .btn{width:100%}
.garanties .sous{color:#D8C9BF;text-align:center;max-width:60ch;margin:0 auto 28px;font-size:.96rem}
@media(max-width:900px){.grille-garanties{grid-template-columns:repeat(2,1fr)}}
@media(max-width:460px){.grille-garanties{grid-template-columns:1fr}}
.garantie{display:flex;gap:12px;align-items:flex-start;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);border-radius:var(--rayon-petit);padding:16px 16px}
.garantie svg{width:22px;height:22px;flex:0 0 auto;color:var(--t-300);margin-top:2px}
.garantie span{font-size:.9rem;line-height:1.45;color:#F1E7DF}

/* ── Barre CTA sticky mobile (discrète, honnête) ───────────────────── */
.cta-sticky{position:fixed;left:0;right:0;bottom:0;z-index:90;display:none;
  gap:10px;align-items:center;justify-content:space-between;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px));
  background:rgba(253,250,247,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-top:1px solid var(--trait);box-shadow:0 -6px 20px rgba(61,22,27,.08)}
.cta-sticky .txt{font-size:.82rem;line-height:1.25;color:var(--texte)}
.cta-sticky .txt strong{color:var(--principale);display:block;font-family:var(--serif);font-size:.98rem}
.cta-sticky .btn{white-space:nowrap;padding:12px 18px;width:auto}
@media(max-width:720px){.cta-sticky{display:flex}
  body{padding-bottom:74px}
}

/* ═══════════════════════════════════════════════════════════════════
   SYSTÈME D'ACCENTS VIFS — LOOK FUTURISTE ÉPURÉ (ajout)
   La charte bois-de-rose reste la base ; on introduit ici un jeu
   d'accents lumineux (cyan → violet → magenta) utilisés dans les
   dégradés, halos, boutons, titres accentués et bandes sombres.
   Fond global gardé clair et aéré. Contraste AA préservé : les tons
   servant de fond à du texte blanc (violet/magenta profonds) sont
   assez foncés ; le cyan est réservé aux halos, bords et accents.
   Toutes les animations n'utilisent que transform/opacity et sont
   déjà neutralisées par la règle globale prefers-reduced-motion.
   ═══════════════════════════════════════════════════════════════════ */
:root{
  --vif-cyan:#CE1B2C;          /* halos, bords lumineux, accents        */
  --vif-cyan-fonce:#B0121F;    /* cyan lisible en petit                 */
  --vif-violet:#7A2B34;        /* fond de texte blanc OK (contraste)    */
  --vif-magenta:#7A2B34;       /* neutralisé -> grenat (thème B&W+rouge) */
  --vif-nuit:#0B0B0C;          /* neutralisé -> noir premium            */
  --vif-nuit-2:#141417;        /* neutralisé -> anthracite              */
  --grad-vif:linear-gradient(120deg,var(--vif-cyan),var(--vif-violet) 50%,var(--vif-magenta));
  --grad-vif-btn:linear-gradient(120deg,var(--vif-violet),var(--vif-magenta) 92%);
  --glow-vif:0 0 0 1px rgba(206,27,44,.35),0 12px 30px rgba(122,43,52,.34),0 0 26px rgba(74,20,24,.24);
}

/* ── Titres accentués : le mot en italique passe au dégradé vif ────── */
h1 em,h2 em{color:var(--vif-violet)}
@supports((-webkit-background-clip:text) or (background-clip:text)){
  h1 em,h2 em{background:var(--grad-vif);-webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;color:transparent}
}
/* Sur fond sombre, on garde le texte clair et lisible (pas de dégradé). */
.cta-final h2 em,.garanties h2 em,.bande-nuit h2 em,.cta-final h2 em *{color:#fff;
  -webkit-text-fill-color:#fff;background:none}

/* ── Boutons primaires : dégradé vif lumineux + glow au survol ─────── */
/* Barre lumineuse en haut de page — signal « futuriste » immédiat. */
body::before{content:"";position:fixed;top:0;left:0;right:0;height:4px;z-index:2000;
  background:var(--grad-vif);box-shadow:0 0 14px rgba(122,43,52,.5)}
/* Surtitres et titres de section nettement accentués (clairs sur nuit). */
.surtitre{color:#B0121F!important;font-weight:700}
.tete-section h2::after{content:"";display:block;width:64px;height:4px;margin-top:14px;
  border-radius:99px;background:var(--grad-vif)}
/* Liens de contenu en violet clair lisible sur fond nuit. */
.contenu a:not(.btn):not(.xlink){color:#B0121F}
.contenu a:not(.btn):not(.xlink):hover{color:#D14150}
/* Pastilles d'icônes / puces claires -> verre nuit à liseré vif (thème sombre). */
.icone,.secteur-ic{background:linear-gradient(135deg,rgba(206,27,44,.22),rgba(206,27,44,.14))!important;
  border:1px solid rgba(206,27,44,.35);color:#EAF0FF}
.badge-demo{background:rgba(206,27,44,.12)!important;border-color:rgba(206,27,44,.4)!important;
  color:#E5919A!important}
/* Cartes verre nuit : léger halo de bord. */
.carte,.tarif,.engagement,.secteur,.abo-carte{box-shadow:0 1px 2px rgba(0,0,0,.3),0 14px 40px rgba(0,0,0,.35)}
.btn-plein{background:var(--grad-vif-btn);border-color:transparent;
  box-shadow:0 6px 20px rgba(122,43,52,.30),0 2px 8px rgba(74,20,24,.22)}
.btn-plein:hover{background:var(--grad-vif-btn);color:#fff;transform:translateY(-2px);
  box-shadow:var(--glow-vif)}
/* Le reflet balayant (::after) défini plus haut reste actif. */

/* ── Surtitres, puces et filets : pastille au dégradé vif ──────────── */
.surtitre::before,.filet i,.heros-preuves li::before,.bande-liste li::before{
  background:var(--grad-vif)}
.heros-aurora .a1{background:radial-gradient(circle at 40% 40%,rgba(206,27,44,.55),transparent 66%)}
.heros-aurora .a2{background:radial-gradient(circle at 55% 45%,rgba(74,20,24,.46),transparent 66%)}
.heros-aurora .a3{background:radial-gradient(circle at 50% 50%,rgba(122,43,52,.50),transparent 68%)}

/* ── Cartes « verre clair » à bord lumineux subtil ─────────────────── */
.carte::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;z-index:2;
  background:var(--grad-vif);opacity:0;transition:opacity var(--transition);pointer-events:none}
.carte:hover{border-color:rgba(122,43,52,.28);
  box-shadow:var(--ombre-forte),0 0 0 1px rgba(206,27,44,.14)}
.carte:hover::before{opacity:.9}
.carte:hover::after{background:linear-gradient(135deg,rgba(206,27,44,.18),rgba(74,20,24,.14))}
.icone{background:linear-gradient(135deg,rgba(206,27,44,.16),rgba(122,43,52,.16));
  color:var(--vif-violet)}

/* ── Emplacements PHOTO : conteneur média SVG-en-fond + <img> par-dessus
   Le visuel SVG dégradé est TOUJOURS visible en fond. Dès qu'un fichier
   images/xxx.jpg existe, l'<img> le recouvre ; s'il manque, onerror la
   masque et le SVG reste. Superbe maintenant, mieux avec les photos. ── */
.media{position:relative;overflow:hidden;border-radius:var(--rayon);
  border:1px solid var(--trait);box-shadow:var(--ombre-douce);background:var(--vif-nuit);
  isolation:isolate}
.media::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(206,27,44,.18)}
/* Cadres d'exemple : SVG de repli en absolu (comme à l'origine) + hauteur
   GARANTIE par un ratio par défaut, pour que le visuel s'affiche toujours,
   même si la vraie photo images/… est absente. */
.media{aspect-ratio:16/10}
.media .media-svg{position:absolute;inset:0;width:100%;height:100%;z-index:1}
.media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2;display:block}

/* Chips « Que voulez-vous améliorer » — version plus premium (barre rouge,
   plus d'air, survol net). */
.besoin{position:relative!important;padding:18px 20px 18px 22px!important;
  border-radius:16px!important;overflow:hidden}
.besoin::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
  background:var(--rouge);opacity:0;transition:opacity .16s}
.besoin:hover::before{opacity:1}
/* Icônes de carte : tuile claire à bord fin + icône ROUGE en trait (fini les
   « carrés rouges pleins » jugés pas beaux). Au survol, la tuile s'anime. */
.besoin .b-ic{width:42px!important;height:42px!important;flex:0 0 42px!important;
  border-radius:12px!important;display:grid;place-items:center;
  background:#fff!important;border:1.5px solid var(--gris-300,#D3D0C9)!important;
  color:var(--rouge)!important;transition:border-color .16s,background .16s}
.besoin .b-ic svg{width:21px!important;height:21px!important;
  fill:none!important;stroke:var(--rouge)!important;stroke-width:1.9!important;
  stroke-linecap:round;stroke-linejoin:round}
.besoin:hover .b-ic{border-color:var(--rouge)!important;background:rgba(206,27,44,.06)!important}
.besoin .b-fl{color:var(--gris-300,#D3D0C9)!important;transition:transform .16s,color .16s}
.besoin:hover .b-fl{color:var(--rouge)!important;transform:translateX(4px)}

/* ═══ EN-TÊTE : menu propre, jamais de retour à la ligne, plus aéré ═══════ */
.nav-actions .lien-client,.nav-actions .btn,.btn-entete{white-space:nowrap}
.btn-entete{padding-left:16px;padding-right:16px}
/* Badges « LE PLUS CHOISI / POUR DÉMARRER » : un peu plus d'air, non rognés. */
.etiquette,.abo-badge{padding:5px 13px!important;overflow:visible}
.tarif,.abo,.abo-carte,.engagement{overflow:visible}
.media .etiq-exemple{z-index:4}
@media(max-width:820px){.grille-medias{grid-template-columns:1fr;max-width:460px;margin-inline:auto}}

/* ═══════════════════════════════════════════════════════════════════
   BANDES SOMBRES « NUIT PROFONDE » à dégradé vif (contraste futuriste)
   Texte clair lisible ; halos vifs cantonnés au décor, pas au texte.
   ═══════════════════════════════════════════════════════════════════ */
.cta-final{position:relative;overflow:hidden;
  background:linear-gradient(135deg,var(--vif-nuit),var(--vif-nuit-2) 60%,#141417)}
.cta-final::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:
   radial-gradient(60% 90% at 12% 0%,rgba(206,27,44,.20),transparent 60%),
   radial-gradient(60% 90% at 88% 100%,rgba(74,20,24,.22),transparent 60%)}
.cta-final .contenu{position:relative;z-index:1}
.cta-final .btn-vide{color:#fff;border-color:rgba(255,255,255,.55);background:rgba(255,255,255,.04)}
.cta-final .btn-vide:hover{border-color:var(--vif-cyan);background:rgba(206,27,44,.10)}
.garanties .contenu{position:relative;z-index:1}
.garantie{background:rgba(255,255,255,.06);border-color:rgba(206,27,44,.20)}
.abo-prix .val{color:var(--vif-violet)}

/* ═══════════════════════════════════════════════════════════════════
   REFONTE EXPÉRIENCE — 5 SIGNATURES (ajout purement additif)
   Toutes les animations n'utilisent que transform/opacity et sont
   neutralisées par la règle globale prefers-reduced-motion plus haut
   (*{animation-duration:.001ms}). Aucune ressource externe.
   ═══════════════════════════════════════════════════════════════════ */

/* Échelle typographique plus affirmée pour les grands titres de section */
.tete-section{position:relative}
.tete-section h2{font-size:clamp(2.05rem,4.8vw,3.25rem)}
.eco-node.n2{animation-delay:-1.4s}
.eco-ring.n2{animation-delay:-1.4s}
.eco-etat.s2{animation:ecoS2 18s linear infinite}
@keyframes ecoPulse{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:1;transform:scale(1.16)}}
@keyframes ecoHub{0%,100%{opacity:.9;transform:scale(1)}50%{opacity:1;transform:scale(1.05)}}
@keyframes ecoGlow{0%,100%{opacity:.16}50%{opacity:.6}}
@keyframes ecoS1{0%,17%{opacity:1}20%,96%{opacity:0}100%{opacity:1}}
@keyframes ecoS2{0%,20%{opacity:0}23%,37%{opacity:1}40%,100%{opacity:0}}
@keyframes ecoS3{0%,40%{opacity:0}43%,57%{opacity:1}60%,100%{opacity:0}}
@keyframes ecoS4{0%,60%{opacity:0}63%,77%{opacity:1}80%,100%{opacity:0}}
@keyframes ecoS5{0%,80%{opacity:0}83%,96%{opacity:1}100%{opacity:0}}

/* Petit repère de section réutilisant le motif (injecté en JS, discret) */
.marqueur-eco{width:30px;height:12px;flex:0 0 auto;overflow:visible;margin-left:2px}
.marqueur-eco circle{transform-box:fill-box;transform-origin:center;
  animation:ecoPulse 5s ease-in-out infinite}
.marqueur-eco circle:nth-of-type(2){animation-delay:-1.6s}
.marqueur-eco circle:nth-of-type(3){animation-delay:-3.2s}
.marqueur-eco line{stroke:var(--vif-cyan);stroke-width:1;opacity:.4}
@media(max-width:820px){.besoins-grille{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.besoins-grille{grid-template-columns:1fr}}
.besoin{display:flex;align-items:center;gap:13px;width:100%;text-align:left;
  background:var(--carte);border:1px solid var(--trait);border-radius:var(--rayon-petit);
  padding:15px 17px;color:var(--texte);text-decoration:none;font-weight:600;font-size:.98rem;
  line-height:1.3;transition:transform var(--transition),border-color var(--transition),box-shadow var(--transition)}
.besoin:hover,.besoin:focus-visible{transform:translateY(-3px);border-color:rgba(206,27,44,.5);
  box-shadow:var(--ombre),0 0 0 1px rgba(206,27,44,.14);color:var(--texte)}
.besoin .b-ic{flex:0 0 auto;width:36px;height:36px;border-radius:var(--petale);
  background:var(--grad-vif);display:grid;place-items:center;color:#fff}
.besoin .b-ic svg{width:19px;height:19px;stroke:#fff;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.besoin .b-fl{margin-left:auto;flex:0 0 auto;color:var(--secondaire-lisible);
  font-weight:700;transition:transform var(--transition)}
.besoin:hover .b-fl{transform:translateX(4px)}
@media(max-width:860px){.probsol-grille{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.probsol-grille{grid-template-columns:1fr}}
@media(max-width:640px){.scene-item{grid-template-columns:1fr;gap:10px;padding:22px}}
@media(max-width:560px){.avap{grid-template-columns:1fr;gap:12px}}
@media(max-width:560px){.avap-fl{transform:rotate(90deg)}}

/* ═══════════════════════════════════════════════════════════════════
   VAGUE 2 — ÉTUDES DE CAS IMMERSIVES (#realisations)
   Disclosure accessible : bouton « Voir l'étude de cas » (aria-expanded),
   panneau déplié piloté en JS, focus géré, Échap pour refermer.
   ═══════════════════════════════════════════════════════════════════ */
.etudes-cas{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;margin-top:34px}
@media(max-width:860px){.etudes-cas{grid-template-columns:1fr}}
.etude{position:relative;background:var(--carte);border:1px solid var(--trait);
  border-radius:var(--rayon);padding:26px 26px 24px;overflow:hidden;
  box-shadow:0 1px 2px rgba(0,0,0,.3),0 14px 40px rgba(0,0,0,.35)}
.etude::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--grad-vif);opacity:.85}
.etude-tete{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.etude-secteur{font-family:var(--sans);font-size:.72rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--secondaire-lisible);margin:6px 0 2px}
.etude h3{margin:0 0 8px}
.etude-resume{margin:0 0 16px;color:var(--texte-doux);font-size:.95rem}
.etude-toggle{display:inline-flex;align-items:center;gap:10px;cursor:pointer;
  font-family:var(--sans);font-weight:600;font-size:.95rem;color:#B0121F;
  background:rgba(206,27,44,.10);border:1px solid rgba(206,27,44,.35);
  border-radius:99px;padding:9px 18px;transition:background var(--transition),transform var(--transition)}
.etude-toggle:hover{background:rgba(206,27,44,.18);transform:translateY(-1px)}
.etude-toggle .chev{width:10px;height:10px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg);transition:transform var(--transition)}
.etude-toggle[aria-expanded="true"] .chev{transform:rotate(-135deg)}
.etude-panneau{margin-top:20px;border-top:1px solid var(--trait);padding-top:20px}
.etude-panneau[hidden]{display:none}
.etude-panneau:focus{outline:none}
.etude-etapes{display:grid;gap:14px;margin:0}
.etude-bloc{background:var(--n-200);border:1px solid var(--trait);border-radius:var(--rayon-petit);
  padding:14px 16px}
.etude-bloc h4{margin:0 0 5px;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--secondaire-lisible)}
.etude-bloc p{margin:0;color:var(--texte-doux);font-size:.93rem}
.etude-bloc.resultat{border-color:rgba(206,27,44,.35);box-shadow:0 0 0 1px rgba(206,27,44,.10)}
.etude-tech{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 4px}
.etude-tech .puce{font-family:var(--sans);font-size:.76rem;font-weight:600;color:#E5919A;
  background:rgba(206,27,44,.10);border:1px solid rgba(206,27,44,.32);border-radius:99px;padding:5px 12px}
.etude-demo{margin-top:16px;position:relative;border-radius:var(--rayon-petit);overflow:hidden;
  border:1px solid var(--trait)}
.etude-demo svg{display:block;width:100%;height:auto}
.etude-demo .demo-legende{margin:0;padding:10px 14px;font-size:.82rem;color:var(--texte-doux);
  background:var(--n-100)}
@media(max-width:880px){.lab-grille{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.lab-grille{grid-template-columns:1fr}}
.lab-tags .puce{font-family:var(--sans);font-size:.72rem;font-weight:600;color:var(--texte-doux);
  background:var(--n-200);border:1px solid var(--trait);border-radius:99px;padding:4px 10px}

/* ═══════════════════════════════════════════════════════════════════
   VAGUE 2 — CONFIGURATEUR GUIDÉ PAR ÉTAPES (#calculateur)
   Parcours en scènes : une question à la fois, progression, Préc./Suiv.
   Réutilise les entrées .calc-in et la logique de fourchettes existante.
   ═══════════════════════════════════════════════════════════════════ */
.config{max-width:760px;margin:0 auto}
.config-barre-cadre{height:8px;border-radius:99px;background:var(--n-200);
  border:1px solid var(--trait);overflow:hidden}
.config-barre{height:100%;border-radius:99px;background:var(--grad-vif);
  transform-origin:left center;transform:scaleX(0);transition:transform .5s cubic-bezier(.2,.8,.3,1)}
@media(prefers-reduced-motion:reduce){.config-barre{transition:none}}
.config-pas{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  margin:10px 2px 22px;font-family:var(--sans);font-size:.82rem;color:var(--texte-doux)}
.config-pas .num{color:var(--secondaire-lisible);font-weight:700}
.config-etape[hidden]{display:none}
.config-etape{border:0;margin:0;padding:0;min-inline-size:0}
.config-etape legend,.config-etape .config-titre{font-family:var(--serif);font-size:1.5rem;
  line-height:1.2;color:var(--texte);margin:0 0 6px;padding:0;float:none}
.config-etape .config-aide{margin:0 0 18px;color:var(--texte-doux);font-size:.95rem}
.config-etape .calc-options{margin:0}
.config-nav{display:flex;justify-content:space-between;gap:14px;margin-top:26px}
.config-nav .btn{min-width:130px}
.config-prec[hidden]{visibility:hidden;display:inline-flex}
.config-etape-resultat .calc-sortie{margin:0}
.config-note{margin:14px 2px 0;font-size:.82rem;color:var(--texte-doux);text-align:center}

/* ═══════════════════════════════════════════════════════════════════
   REFONTE 2026 — IDENTITÉ NOIR & BLANC + ROUGE PREMIUM (ÉDITORIAL)
   Bloc FINAL : remappe tous les tokens de rôle et de couleur pour
   basculer TOUT le site vers un langage minimaliste noir/blanc + rouge.
   Plus AUCUN cyan/violet/magenta. Un seul accent : le rouge premium,
   aligné sur le grenat de marque (#7A2B34 / logo #93373F).
   Transform/opacity uniquement ; prefers-reduced-motion déjà global.
   ═══════════════════════════════════════════════════════════════════ */
:root{
  /* Accent unique — rouge premium confiant */
  --rouge:#CE1B2C; --rouge-fort:#B0121F; --grenat:#7A2B34;
  --noir:#0B0B0C; --anthracite:#141417; --blanc:#F6F4F0;
  --gris-100:#ECEAE5; --gris-300:#CFCCC5; --gris-500:#8A8880; --gris-700:#3A3A3E;

  /* NEUTRES remappés — thème clair éditorial */
  --n-0:#FFFFFF; --n-50:#F6F4F0; --n-100:#ECEAE5; --n-200:#F1EFEA;
  --n-300:#DCD9D2; --n-400:#B9B6AE; --n-600:#54524D; --n-800:#26262A; --n-900:#111114;

  /* RÔLES */
  --principale:#CE1B2C; --principale-forte:#B0121F;
  --secondaire:#CE1B2C; --secondaire-lisible:#B0121F;
  --fond:#F6F4F0; --fond-alt:#ECEAE5; --carte:#FFFFFF;
  --texte:#111114; --texte-doux:#54524D; --trait:#DCD9D2;

  /* Rampes grenade/terre neutralisées vers rouge/gris */
  --g-50:#F7ECEC; --g-100:#F3E2E3; --g-200:#E6C6C9;
  --t-100:#F1EFEA; --t-200:#EAC9CC; --t-300:#D98A92;
  --t-400:#CE1B2C; --t-500:#CE1B2C; --t-600:#B0121F; --t-700:#7A2B34;

  /* Tokens « nuit » → noir premium (bandes feature) */
  --vif-nuit:#0B0B0C; --vif-nuit-2:#141417;
  --accent-nuit:#141417; --accent-tech:#3A3A3E; --accent-tech-clair:#8A8880;

  /* Gradients rouges très sobres (plus d'arc-en-ciel) */
  --grad-vif:linear-gradient(120deg,var(--rouge),var(--grenat));
  --grad-vif-btn:var(--rouge);
  --glow-vif:0 10px 26px rgba(206,27,44,.28);

  /* Ombres éditoriales douces */
  --ombre:0 1px 2px rgba(17,17,20,.05),0 8px 24px rgba(17,17,20,.06);
  --ombre-forte:0 2px 6px rgba(17,17,20,.07),0 18px 44px rgba(17,17,20,.10);
  --ombre-douce:0 1px 2px rgba(17,17,20,.05),0 12px 34px rgba(17,17,20,.07);

  --display:clamp(2.9rem,7.4vw,4.9rem);
}

/* ── Base claire éditoriale ──────────────────────────────────────── */
body{
  background:
    radial-gradient(1100px 720px at 94% -10%, rgba(206,27,44,.05), transparent 60%),
    var(--blanc) !important;
  color:var(--texte);
}
/* Filet supérieur : rouge sobre au lieu du néon */
body::before{background:var(--rouge)!important;height:3px!important;box-shadow:none!important}
img,svg{max-width:100%}
a{color:var(--rouge)} a:hover{color:var(--rouge-fort)}
.contenu a:not(.btn):not(.xlink){color:var(--rouge)}
.contenu a:not(.btn):not(.xlink):hover{color:var(--rouge-fort)}

/* ── Typographie éditoriale affirmée ─────────────────────────────── */
h1{font-size:var(--display);line-height:.98;letter-spacing:-.03em;font-weight:600}
h2{font-size:clamp(2rem,4.6vw,3.1rem);line-height:1.05;letter-spacing:-.022em}
.tete-section{max-width:70ch;margin-bottom:56px}
.tete-section h2{font-size:clamp(2.1rem,5vw,3.35rem)}
h1 em,h2 em{color:var(--rouge)!important;-webkit-text-fill-color:var(--rouge)!important;
  background:none!important;font-style:italic;font-weight:600}
.surtitre{color:var(--rouge-fort)!important;font-weight:700}
.surtitre::before{background:var(--rouge)!important}
.tete-section h2::after{background:var(--rouge)!important;height:3px}

/* ── Boutons — rouge plein confiant ──────────────────────────────── */
.btn-plein{background:var(--rouge)!important;color:#fff!important;border-color:transparent;
  box-shadow:0 6px 18px rgba(206,27,44,.22)!important}
.btn-plein:hover{background:var(--rouge-fort)!important;color:#fff!important;
  box-shadow:0 12px 26px rgba(206,27,44,.28)!important}
.btn-vide{color:var(--texte);border-color:var(--gris-300)}
.btn-vide:hover{border-color:var(--rouge);background:#fff;color:var(--rouge)}

/* ── Cartes — filet fin + ombre douce (fin du look sombre lourd) ─── */
.carte,.tarif,.engagement,.secteur,.abo,.abo-carte,.etude,.lab-carte,.besoin,.probsol,
.scene-item,.demo-carte,.media{
  box-shadow:var(--ombre)!important;background:var(--carte);border-color:var(--gris-300)}
.carte:hover,.probsol:hover,.besoin:hover,.besoin:focus-visible,.abo:hover{
  box-shadow:var(--ombre-forte)!important;border-color:var(--rouge)}
.carte:hover::after{background:linear-gradient(135deg,rgba(206,27,44,.10),rgba(122,43,52,.08))!important}

/* Pastilles d'icônes — aplat rouge léger */
.icone,.secteur-ic{background:linear-gradient(135deg,rgba(206,27,44,.10),rgba(122,43,52,.08))!important;
  border:1px solid rgba(206,27,44,.22)!important;color:var(--rouge)!important}
.besoin .b-ic{background:#fff!important;border:1.5px solid var(--gris-300,#D3D0C9)!important;
  border-radius:12px!important;color:var(--rouge)!important}
.besoin .b-ic svg{stroke:var(--rouge)!important;fill:none!important}
.besoin:hover .b-ic{border-color:var(--rouge)!important;background:rgba(206,27,44,.06)!important}
.besoin .b-fl,.probsol .ps-lien{color:var(--rouge-fort)!important}
.scene-eyebrow,.etude-secteur,.probsol .ps-fleche,.config-pas .num,
.avap-col.apres h4,.duo dt,.carte .carte-role,.tarif .role,.parcours-eyebrow{color:var(--rouge-fort)!important}

/* Puces / tags sur cartes claires */
.etude-tech .puce,.badge-demo,.etude-toggle{color:var(--rouge-fort)!important;
  background:rgba(206,27,44,.07)!important;border-color:rgba(206,27,44,.28)!important}
.etude-toggle:hover{background:rgba(206,27,44,.13)!important}
.etude-bloc.resultat{border-color:rgba(206,27,44,.30)!important;box-shadow:0 0 0 1px rgba(206,27,44,.10)!important}
.abo-prix .val,.montant{color:var(--rouge)!important}

/* ── SECTIONS FEATURE EN NOIR PLEIN (alternance éditoriale) ──────── */
.cta-final,.garanties,.bande{background:var(--noir)!important}
.cta-final::before,.garanties::before{background:
  radial-gradient(60% 90% at 12% 0%,rgba(206,27,44,.16),transparent 60%),
  radial-gradient(60% 90% at 88% 100%,rgba(122,43,52,.20),transparent 60%)!important}
.cta-final h2,.cta-final p{color:#F6F4F0}
.cta-final .surtitre,.garanties .surtitre{color:#E5919A!important}
.garantie{background:rgba(255,255,255,.05)!important;border-color:rgba(255,255,255,.12)!important}

/* ── HÉROS éditorial clair ───────────────────────────────────────── */
.heros{background:
  radial-gradient(900px 640px at 96% -12%, rgba(206,27,44,.06), transparent 60%),
  var(--blanc)!important}
.heros::before,.heros::after,.heros-aurora{display:none!important}
.heros h1{font-size:clamp(3rem,7.6vw,5rem);margin-bottom:26px}
.vignette,.media,.demo-video,.lab-visuel{box-shadow:var(--ombre-douce)!important}
.marqueur-eco line{stroke:var(--rouge)!important}

/* Sticky CTA (fond clair) */
.cta-sticky .txt strong{color:var(--rouge)!important}

/* Sur les sections noires, les liens de contenu restent clairs */
.cta-final .contenu a:not(.btn),.garanties .contenu a:not(.btn){color:#E5919A}
.bande-message .btn-plein{background:#fff!important;color:var(--rouge)!important;box-shadow:0 6px 18px rgba(0,0,0,.18)!important}
.bande-message .btn-plein:hover{background:#F6F4F0!important;color:var(--rouge-fort)!important}
.bande-message .surtitre{color:#F3D7DA!important}

/* ═══ FILET DE SÉCURITÉ ANTI-DÉBORDEMENT (« hors cadre ») ═══════════════
   Corrige les causes classiques : enfants de grille/flex qui ne rétrécissent
   pas (min-width:auto), titres géants qui débordent, décors qui dépassent. */
html,body{overflow-x:hidden;max-width:100%}
*{min-width:0}                              /* enfants de grille/flex : autorise le shrink */
img,svg,video,canvas,iframe,table{max-width:100%}
h1,h2,h3,h4{overflow-wrap:break-word;word-break:normal;hyphens:auto}
.contenu,section,.heros,.heros-grille,.grille-services,.grille-etapes,
.grille-tarifs,.grille-cercle{max-width:100%;min-width:0}
/* Les cartes portent des pétales/halo décoratifs en absolu : on les contient. */
.carte,.tarif,.secteur,.abo-carte,.etude,.engagement,.bande-message,
.cta-final,.garanties,.scene,.lab-carte{overflow:hidden}
/* Tables de détails (calculateur/forfaits) : jamais de débordement horizontal. */
.calc-detail,.abo-carte ul,.tarif ul{max-width:100%}
@media(max-width:640px){
  .heros h1{font-size:clamp(2.1rem,9vw,3rem)}   /* titre héros plus sûr sur mobile */
  h1{font-size:clamp(2rem,8vw,3rem)}
}

/* ═══ NOUVEAU HERO ÉDITORIAL (propre, cadré, N&B + rouge) ═══════════════ */
.nh-hero{padding:76px 0 58px;position:relative;overflow:hidden;background:var(--blanc)}
.nh-hero::before,.nh-hero::after{content:none!important;display:none!important}
.nh-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center;max-width:100%}
@media(max-width:900px){.nh-grid{grid-template-columns:1fr;gap:38px}}
.nh-col{min-width:0}
.nh-h1{font-family:var(--serif);font-weight:600;font-size:clamp(2.3rem,5.8vw,4.2rem);line-height:1.03;letter-spacing:-.02em;margin:0 0 20px;overflow-wrap:break-word}
.nh-h1 em{font-style:italic;color:var(--rouge)}
.nh-lead{font-size:clamp(1.02rem,1.4vw,1.16rem);color:var(--texte-doux);max-width:56ch;margin:0 0 28px}
.nh-btns{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:24px}
.nh-proofs{display:flex;flex-wrap:wrap;gap:8px 22px;list-style:none;padding:0;margin:0;color:var(--gris-500,#6E6D68);font-size:.9rem}
.nh-proofs li{display:flex;align-items:center;gap:7px}
.nh-proofs li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--rouge)}
.besoin{display:flex;align-items:center;gap:12px;min-width:0;
  padding:16px 18px;border:1px solid var(--trait);border-radius:14px;background:var(--carte);
  text-decoration:none;color:var(--texte);font-weight:600;
  transition:border-color .15s,transform .15s,box-shadow .15s}
.besoin:hover{border-color:var(--rouge);transform:translateY(-2px);box-shadow:0 12px 30px -18px rgba(0,0,0,.25)}
.besoin .b-ic{flex:0 0 34px;width:34px;height:34px;border-radius:9px;display:grid;place-items:center;
  background:rgba(206,27,44,.10);color:var(--rouge)}
.besoin .b-ic svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.besoin .b-fl{margin-left:auto;color:var(--trait);font-weight:700}
.besoin:hover .b-fl{color:var(--rouge)}

/* Rythme de section homogène + titres éditoriaux cadrés */
.tete-section{max-width:64ch}
.tete-section .chapeau{color:var(--texte-doux)}

/* ═══ COHÉSION GLOBALE — style propre & net sur tout le site ═══════════════ */
/* Cartes claires unifiées : bord fin, coins doux, survol rouge, ombre légère. */
.carte,.tarif,.secteur,.etude,.engagement,.lab-carte,.abo-carte,
.coaching-carte,.audit-carte,.mkt-carte,.scene{
  border:1px solid var(--trait);border-radius:16px;min-width:0;
  box-shadow:0 1px 2px rgba(0,0,0,.04),0 14px 34px -22px rgba(0,0,0,.18);
  transition:border-color .16s,transform .16s,box-shadow .16s}
.carte:hover,.tarif:hover,.secteur:hover,.etude:hover,.lab-carte:hover,
.coaching-carte:hover,.audit-carte:hover,.mkt-carte:hover{
  border-color:var(--rouge);transform:translateY(-3px);
  box-shadow:0 18px 44px -22px rgba(0,0,0,.30)}
/* On calme les décors « pétale/halo » du thème d'origine (plus épuré). */
.carte::after,.secteur::after,.tete-section h2::before{display:none!important}
.icone,.secteur-ic{background:rgba(206,27,44,.10)!important;border:1px solid rgba(206,27,44,.22)!important;color:var(--rouge)!important}
.icone svg,.secteur-ic svg{stroke:var(--rouge)}
/* Grilles : jamais de débordement, gouttières homogènes. */
.grille-services,.grille-tarifs,.grille-cercle,.grille-etapes,.grille-secteurs,
.etudes-cas,.probsol-grille,.besoins-grille,.chips,.grille-lab{min-width:0}
/* Boutons homogènes, accent rouge. */
.btn-plein{background:var(--rouge)!important;color:#fff!important;border:1px solid var(--rouge)!important}
.btn-plein:hover{background:var(--rouge-fort)!important;border-color:var(--rouge-fort)!important}
.btn-vide{border:1.5px solid var(--trait)!important;color:var(--texte)!important;background:transparent!important}
.btn-vide:hover{border-color:var(--texte)!important}
/* Filet rouge sous les titres de section (signature discrète, cadrée). */
.tete-section h2::after{content:"";display:block;width:56px;height:3px;margin-top:14px;
  border-radius:99px;background:var(--rouge)}
/* Titres de section : taille éditoriale maîtrisée, jamais hors cadre. */
.tete-section h2{font-size:clamp(1.7rem,3.6vw,2.6rem);line-height:1.08;letter-spacing:-.02em;overflow-wrap:break-word}

/* ═══ PASTILLES D'ICÔNES — PREMIUM ═════════════════════════════════════
   Fini le carré plat. Pastilles RONDES en dégradé rouge→grenat, picto
   blanc, halo lumineux rouge et fin reflet en haut : effet « app haut de
   gamme », qui attire l'œil sans faire cheap. Fin de feuille = prime. */
.icone,.secteur-ic,.besoin .b-ic{
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  width:56px!important;height:56px!important;min-width:56px!important;flex:0 0 56px!important;
  padding:0!important;border:none!important;border-radius:50%!important;color:#fff!important;
  background:radial-gradient(120% 120% at 30% 22%,#E23444 0%,#CE1B2C 42%,#7A2B34 100%)!important;
  box-shadow:0 10px 24px -8px rgba(206,27,44,.55),0 2px 6px rgba(17,17,20,.14),inset 0 1.5px 0 rgba(255,255,255,.35),inset 0 -6px 12px rgba(122,43,52,.4)!important;
  transition:transform .2s cubic-bezier(.2,.7,.2,1),box-shadow .2s!important}
.besoin .b-ic{width:48px!important;height:48px!important;min-width:48px!important;flex:0 0 48px!important;border-radius:16px!important}
.icone svg,.secteur-ic svg,.besoin .b-ic svg{
  stroke:#fff!important;fill:none!important;color:#fff!important;stroke-width:2!important;
  width:25px!important;height:25px!important;filter:drop-shadow(0 1px 1px rgba(0,0,0,.18))!important}
.carte:hover .icone,.secteur:hover .secteur-ic,.engagement:hover .icone,.besoin:hover .b-ic{
  transform:translateY(-4px) scale(1.05)!important;
  box-shadow:0 18px 34px -8px rgba(206,27,44,.65),0 3px 8px rgba(17,17,20,.18),inset 0 1.5px 0 rgba(255,255,255,.4),inset 0 -6px 12px rgba(122,43,52,.4)!important}
.etape:hover .etape-num,.parcours-etape:hover .parcours-num{
  transform:translateY(-3px) scale(1.04)!important;transition:transform .2s!important}

/* ═══ BOUTONS — PREMIUM ════════════════════════════════════════════════
   Dégradé rouge→grenat, halo lumineux, reflet de brillance qui balaie au
   survol, léger soulèvement. Version contour : bord rouge + voile au survol. */
.btn{
  border-radius:999px!important;font-weight:700!important;letter-spacing:.01em!important;
  text-transform:none!important;position:relative!important;overflow:hidden!important;
  transition:transform .18s cubic-bezier(.2,.7,.2,1),box-shadow .2s,background .2s,border-color .2s!important}
.btn-plein{
  background:linear-gradient(135deg,#E23444 0%,#CE1B2C 45%,#A9142A 100%)!important;color:#fff!important;border:none!important;
  box-shadow:0 10px 24px -6px rgba(206,27,44,.5),0 2px 6px rgba(17,17,20,.12),inset 0 1px 0 rgba(255,255,255,.28)!important}
.btn-plein:hover{
  transform:translateY(-2px)!important;color:#fff!important;
  box-shadow:0 16px 32px -6px rgba(206,27,44,.62),0 4px 10px rgba(17,17,20,.16),inset 0 1px 0 rgba(255,255,255,.32)!important}
.btn-plein:active{transform:translateY(0)!important}
/* Reflet de brillance qui balaie le bouton au survol. */
.btn-plein::after{content:""!important;position:absolute!important;top:0!important;left:-60%!important;
  width:45%!important;height:100%!important;transform:skewX(-20deg)!important;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent)!important;
  transition:left .55s ease!important;pointer-events:none!important;border-radius:0!important}
.btn-plein:hover::after{left:130%!important}
.btn-vide{
  background:rgba(255,255,255,.6)!important;color:var(--rouge)!important;
  border:1.5px solid rgba(206,27,44,.55)!important;backdrop-filter:blur(2px)!important;box-shadow:none!important}
.btn-vide:hover{
  background:rgba(206,27,44,.07)!important;color:var(--rouge-fort)!important;
  border-color:var(--rouge)!important;transform:translateY(-2px)!important;
  box-shadow:0 8px 20px -8px rgba(206,27,44,.4)!important}
.btn-vide:active{transform:translateY(0)!important}
@media(max-width:520px){.demo-res-num{font-size:1.4rem}.demo-res-lab{font-size:.72rem}}
.demo-video .scene,.demo-video .astre,.demo-video .barre{display:none!important}
@keyframes vsc1{0%{opacity:1;transform:scale(1.04)}27%{opacity:1;transform:scale(1)}33%{opacity:0}100%{opacity:0}}
@keyframes vsc2{0%,28%{opacity:0}34%{opacity:1;transform:scale(1)}60%{opacity:1;transform:scale(1.04)}66%{opacity:0}100%{opacity:0}}
@keyframes vsc3{0%,61%{opacity:0}67%{opacity:1;transform:scale(1.04)}94%{opacity:1;transform:scale(1)}100%{opacity:0}}
@keyframes vbars{0%{transform:scaleY(.2)}20%{transform:scaleY(1)}33%,100%{transform:scaleY(1)}}
@keyframes vprogfill{0%{width:0}100%{width:100%}}
@media(prefers-reduced-motion:reduce){.vs1,.vs2,.vs3,.vs-chart b,.vprog span{animation:none!important}.vs1{opacity:1!important}.vs2,.vs3{opacity:0!important}}
@media(max-width:760px){.demo-galerie{grid-template-columns:1fr}}

/* ── Modale ── */
.ddemo-modal[hidden]{display:none}
.ddemo-modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:2.2vh 2vw}
.ddemo-backdrop{position:absolute;inset:0;background:rgba(8,8,10,.62);backdrop-filter:blur(4px)}
.ddemo-dialog{position:relative;width:min(1120px,96vw);height:95vh;background:#fff;border-radius:16px;overflow:hidden;
  display:flex;flex-direction:column;box-shadow:0 40px 90px -24px rgba(0,0,0,.6);animation:ddemoIn .26s cubic-bezier(.2,.7,.2,1)}
@keyframes ddemoIn{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
.ddemo-bar{flex:0 0 auto;display:flex;align-items:center;gap:12px;padding:11px 14px;background:#F1EFEA;border-bottom:1px solid #E1DED7}
.ddemo-dots{display:flex;gap:6px}.ddemo-dots i{width:11px;height:11px;border-radius:50%;background:#CFCCC5}.ddemo-dots i:first-child{background:#CE1B2C}
.ddemo-url{flex:1;background:#fff;border:1px solid #E1DED7;border-radius:8px;padding:6px 12px;font-family:var(--sans);font-size:.8rem;color:#8A8880;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ddemo-x{flex:0 0 auto;width:34px;height:34px;border:none;background:#fff;border:1px solid #E1DED7;border-radius:9px;color:#54524D;font-size:1rem;cursor:pointer;transition:background .16s,color .16s}
.ddemo-x:hover{background:#CE1B2C;color:#fff;border-color:#CE1B2C}
.ddemo-scroll{flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;background:#fff}
body.ddemo-open{overflow:hidden}
@container (max-width:820px){
  .dsite .ds-wrap{padding:0 26px}
  .ds-nav,.ds-head .ds-cta{display:none}
  .ds-hero{padding:52px 0 46px}.ds-hero .ds-wrap{grid-template-columns:1fr;gap:30px}
  .ds-h1{font-size:2.3rem}
  .ds-grid4{grid-template-columns:repeat(2,1fr)}
  .ds-stats .ds-wrap{grid-template-columns:repeat(2,1fr)}
  .ds-gal{grid-template-columns:1fr 1fr}
  .ds-tgrid{grid-template-columns:1fr}
  .ds-foot .ds-wrap{grid-template-columns:1fr;gap:18px}
  .ds-h2{font-size:1.8rem}
}
@container (max-width:520px){
  .ds-grid4{grid-template-columns:1fr}.ds-gal{grid-template-columns:1fr}
  .ds-foot-bot{flex-direction:column}
}
@media(prefers-reduced-motion:reduce){
  .dcard,.dcard-btn,.ds-card,.ds-btn1,.ddemo-dialog{transition:none!important;animation:none!important}
}
@media(max-width:600px){
  .ddemo-modal{padding:0}
  .ddemo-dialog{width:100vw;height:100vh;border-radius:0}
}
@media(max-width:960px){.labx-grid{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.labx-grid{grid-template-columns:1fr}}
@keyframes labxIn{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
@media(max-width:600px){.labx-modal{padding:0}.labx-dialog{width:100vw;height:100vh;border-radius:0}.labx-stage{padding:0}}

/* ── Base commune des mini-apps ── */
.la{container-type:inline-size;width:100%;text-align:left;font-family:var(--sans);color:#14161B;background:#F7F8FA;
  --line:#E7E9EE;--mut:#6B7280;--card:#fff;--r:12px;line-height:1.5;font-size:15px}
.la *{box-sizing:border-box}
.la .mut{color:var(--mut)}
.la h4{margin:2px 0 0;font-family:var(--serif);font-weight:700;font-size:1.15rem;color:#14161B}
.la h5{margin:0;font-size:.95rem;font-weight:600}

/* ── Responsive interne (container queries) ── */
@container (max-width:900px){
  .la-dash{grid-template-columns:1fr}.la-side{flex-direction:row;align-items:center;overflow:auto;border-right:none;border-bottom:1px solid var(--line)}.la-side nav{flex-direction:row}.la-side-foot{display:none}
  .la-kpis{grid-template-columns:repeat(2,1fr)}.la-cols{grid-template-columns:1fr}
  .la-writer{grid-template-columns:1fr}
  .la-prod-grid{grid-template-columns:1fr 1fr}
  .la-kanban{grid-template-columns:1fr 1fr}
  .la-cal{grid-template-columns:repeat(3,1fr)}
  .la-mob{grid-template-columns:1fr;text-align:center}.la-mob-side p{margin:8px auto 0}
}
@container (max-width:560px){
  .la-kpis{grid-template-columns:1fr 1fr}.la-prod-grid{grid-template-columns:1fr}.la-kanban{grid-template-columns:1fr}.la-cal{grid-template-columns:1fr 1fr}.la-w-actions{gap:6px}
}
@media(prefers-reduced-motion:reduce){
  .labx-card,.labx-btn,.la-prod,.la-cta,.la-bars span,.labx-dialog,.la-step{transition:none!important;animation:none!important}
}
.lab-outro-cta .btn-vide{color:#fff;border-color:rgba(255,255,255,.4);background:transparent}
.lab-outro-cta .btn-vide:hover{border-color:#fff;background:rgba(255,255,255,.08);color:#fff}