/* ═══════════════════════════════════════════════════════════════════════
   ROSA — DESIGN SYSTEM
   Charte : Obsidian #0B0C0E · Pure White #FFFFFF · Digital Coral #FF3B5C

   Ce fichier est chargé APRÈS la feuille de style historique d'index.html.
   Il ne la supprime pas : il redéfinit les variables de thème, puis
   restyle les composants. C'est volontaire — la refonte reste annulable
   en retirant une seule ligne du <head>, et le site d'avant est intact
   dans l'historique Git (tag avant-refonte-2026-09-11).

   Le corail est un ACCENT : il marque l'action, jamais le décor. Toute
   section qui vire au corail est une section ratée.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. Jetons ──────────────────────────────────────────────────────── */
:root{
  /* Marque */
  --obsidian:#0B0C0E;
  --coral:#FF3B5C;
  --coral-fonce:#E11D3C;      /* corail lisible sur blanc (contraste AA) */
  --coral-clair:#FF6B84;      /* corail lisible sur obsidian */
  --pure-white:#FFFFFF;

  /* Neutres — légèrement froids, pour ne pas jurer avec le corail */
  --ink:#0B0C0E;
  --ink-2:#33363C;
  --muted:#6A6F78;
  --line:#E3E5E9;
  --line-forte:#C9CDD4;
  --surface:#FFFFFF;
  --surface-2:#F5F6F8;

  /* Neutres sur fond sombre */
  --ink-inv:#FFFFFF;
  --ink-inv-2:#D4D7DC;
  --muted-inv:#959AA3;
  --line-inv:rgba(255,255,255,.14);
  --surface-nuit:#141619;
  --surface-nuit-2:#1B1E23;

  /* États */
  --succes:#0F7B4F;
  --alerte:#A56800;
  --danger:#C32218;

  /* ── Remappage du thème historique ────────────────────────────────
     Les variables ci-dessous sont celles qu'utilisent les 7 600 lignes
     déjà en place. Les réécrire ici bascule tout le site sur la
     nouvelle charte sans toucher une seule règle existante. */
  --principale:var(--coral-fonce);
  --principale-forte:#C0102E;
  --secondaire:var(--coral-fonce);
  --secondaire-lisible:#C0102E;
  --rouge:var(--coral-fonce);
  --rouge-fort:#C0102E;
  --grenat:var(--obsidian);
  --noir:var(--obsidian);
  --anthracite:var(--surface-nuit);
  --blanc:var(--pure-white);

  --fond:var(--pure-white);
  --fond-alt:var(--surface-2);
  --carte:var(--surface);
  --texte:var(--ink);
  --texte-doux:var(--muted);
  --trait:var(--line);

  --vif-cyan:var(--coral);
  --vif-cyan-fonce:var(--coral-fonce);
  --vif-violet:var(--obsidian);
  --vif-magenta:var(--coral-fonce);
  --vif-nuit:var(--obsidian);
  --vif-nuit-2:var(--surface-nuit);
  --accent-tech:var(--ink-2);
  --accent-nuit:var(--surface-nuit);

  --g-50:#FFF1F3;  --g-100:#FFE3E7;  --g-200:#FFC7D0;  --g-300:#FF93A5;
  --g-600:var(--coral-fonce);  --g-700:#C0102E;  --g-800:#8E0B22;
  --t-100:var(--surface-2); --t-200:#FFC7D0; --t-300:#FF93A5;
  --t-400:var(--coral); --t-600:var(--coral-fonce); --t-700:#8E0B22;
  --n-0:var(--pure-white); --n-50:var(--surface-2); --n-100:var(--surface-2);
  --n-200:var(--surface-2); --n-300:var(--line); --n-400:var(--line-forte);
  --n-600:var(--muted); --n-900:var(--ink);
  --gris-300:var(--line-forte);
  --erreur:var(--danger);

  /* Le dégradé du thème précédent servait de fond de bouton : on le
     neutralise en aplat. La charte n'utilise pas de dégradé. */
  --grad-vif:var(--coral-fonce);
  --grad-vif-btn:var(--coral-fonce);
  --glow-vif:0 8px 22px rgba(225,29,60,.26);

  /* Typographie : Poppins reprend la géométrie du mot ROSA du logo,
     Inter assure la lisibilité du texte courant. Les deux sont déjà
     chargées par la page — aucune requête supplémentaire. */
  --display:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;
  --serif:var(--display);
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;

  /* Géométrie : angles resserrés, plus techniques que l'arrondi précédent */
  --rayon:14px;
  --rayon-petit:9px;
  --rayon-pilule:999px;
  --max:1200px;

  /* Élévation : discrète sur blanc, inexistante sur noir (une bordure
     lumineuse y remplace l'ombre). */
  --ombre:0 1px 2px rgba(11,12,14,.05), 0 6px 20px rgba(11,12,14,.06);
  --ombre-forte:0 2px 6px rgba(11,12,14,.07), 0 18px 44px rgba(11,12,14,.10);
  --ombre-douce:0 1px 2px rgba(11,12,14,.04), 0 10px 30px rgba(11,12,14,.07);
  --transition:.2s cubic-bezier(.22,.8,.28,1);

  /* Icône « compte », posée en masque pour suivre la couleur du texte. */
  --icone-compte:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
}

/* ── 2. Base ────────────────────────────────────────────────────────── */
body{
  font-family:var(--sans);
  background:var(--pure-white);
  color:var(--ink);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

/* Le filet supérieur devient la signature corail de la marque. */
body::before{background:var(--coral)!important;height:3px!important}

h1,h2,h3,h4,.logo-mot{
  font-family:var(--display);
  letter-spacing:-.022em;
  line-height:1.08;
  text-wrap:balance;
}
h1{font-weight:800}
h2,h3,h4{font-weight:700}
h2{line-height:1.12;letter-spacing:-.025em}
h3{line-height:1.2;letter-spacing:-.015em}

/* Surtitres : capitales espacées, corail, le seul endroit où la couleur
   de marque touche du texte courant. */
.surtitre,.nh-eyebrow,.ds-eyebrow{
  font-family:var(--display);
  font-weight:700;
  font-size:.76rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--coral-fonce);
}

.contenu{max-width:var(--max)}

.chapeau{font-size:1.12rem;color:var(--ink-2);line-height:1.6}

/* Focus visible unifié : obligatoire pour la navigation au clavier. */
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible,summary:focus-visible,
[tabindex]:focus-visible,video:focus-visible,video:focus-within{
  outline:3px solid var(--coral);
  outline-offset:3px;
  border-radius:4px;
}
/* Boutons radio et cases natifs : « input:focus{outline:none} » (section Formulaires) ne leur laissait qu'une ombre
   à 14 % d'opacité, que WebKit ne dessine pas sur un contrôle natif. Anneau explicite au clavier. */
input[type=radio]:focus-visible,input[type=checkbox]:focus-visible{outline:3px solid var(--coral);outline-offset:2px}

/* ── 3. Boutons ─────────────────────────────────────────────────────── */
/* La feuille historique contient 235 déclarations !important, héritées de
   trois surcouches de thème successives. Les composants refaits ci-dessous
   les neutralisent explicitement : c'est le seul moyen de reprendre la main
   sans réécrire les 7 600 lignes existantes, et cela reste circonscrit aux
   composants que la refonte prend en charge. */
.btn{
  font-family:var(--display);
  font-weight:600;
  letter-spacing:-.005em;
  border-radius:var(--rayon-pilule);
  transition:transform var(--transition),background var(--transition),
             border-color var(--transition),color var(--transition);
}
.btn-plein{
  background:var(--obsidian)!important;
  color:var(--pure-white)!important;
  border:2px solid var(--obsidian)!important;
  box-shadow:none!important;
}
.btn-plein:hover{background:var(--coral-fonce)!important;border-color:var(--coral-fonce)!important;transform:translateY(-1px)}
.btn-vide{
  background:transparent!important;
  color:var(--ink)!important;
  border:2px solid var(--line-forte)!important;
}
.btn-vide:hover{border-color:var(--obsidian)!important;color:var(--obsidian)!important;transform:translateY(-1px)}

/* Sur fond sombre, les rôles s'inversent : le corail devient l'action. */
.sur-nuit .btn-plein,.nuit .btn-plein,.accueil-heros .btn-plein{
  background:var(--coral)!important;color:var(--obsidian)!important;border-color:var(--coral)!important;
}
.sur-nuit .btn-plein:hover,.nuit .btn-plein:hover,.accueil-heros .btn-plein:hover{background:var(--coral-clair)!important;border-color:var(--coral-clair)!important}
/* Toutes les sections a fond sombre du site : sans ces selecteurs, la
   regle .btn-vide ci-dessus peint le texte en Obsidian sur de l'Obsidian
   et le bouton apparait vide. */
.sur-nuit .btn-vide,.nuit .btn-vide,.accueil-heros .btn-vide,
.bande-message .btn-vide,.cta-final .btn-vide,.garanties .btn-vide,
.lab-outro-cta .btn-vide,.demo-lien .btn-vide{
  color:var(--pure-white)!important;
  border-color:rgba(255,255,255,.38)!important;
  background:rgba(255,255,255,.04)!important;
}
.sur-nuit .btn-vide:hover,.nuit .btn-vide:hover,.accueil-heros .btn-vide:hover,
.bande-message .btn-vide:hover,.cta-final .btn-vide:hover,.garanties .btn-vide:hover,
.lab-outro-cta .btn-vide:hover,.demo-lien .btn-vide:hover{
  background:var(--pure-white)!important;
  color:var(--obsidian)!important;
  border-color:var(--pure-white)!important;
}

/* ── 4. En-tête : voir la section 40 (refonte du 13/10/2026). ────────── */
.logo-grand .logo-marque{width:52px;height:52px;border-radius:0}

/* ── 5. Sections sombres ────────────────────────────────────────────── */
.nuit{
  background:var(--obsidian)!important;
  color:var(--ink-inv)!important;
  position:relative;
  isolation:isolate;
}
.nuit h1,.nuit h2,.nuit h3,.nuit h4,.nuit strong{color:var(--ink-inv)!important}
.nuit p,.nuit li{color:var(--ink-inv-2)!important}
.nuit .chapeau{color:var(--ink-inv-2)!important}
.nuit .surtitre{color:var(--coral)!important}
.nuit a:not(.btn){color:var(--coral-clair)}
/* La règle historique « .contenu a:not(.btn):not(.xlink) » (base.css, plus spécifique) repeignait ces liens
   en corail foncé sur obsidian : 4,13:1, sous le seuil AA. On garde l'aspect corail avec la teinte prévue pour
   le fond sombre (--coral-clair, « corail lisible sur obsidian »). */
.nuit .contenu a:not(.btn):not(.xlink),.pied .contenu a:not(.btn):not(.xlink){color:var(--coral-clair)}
.pied .contenu a:not(.btn):not(.xlink):hover{color:#fff}
/* Fond gris clair : corail foncé à 4,37:1 → rouge profond de la palette (--g-700), ≥ 4,5:1. */
.section-grise .contenu a:not(.btn):not(.xlink){color:var(--g-700)}
/* Contre-audit du 13/10/2026 (m2) : liens posés sur un fond sombre hors « .nuit » — bandeau de bienvenue
   (héros de l'accueil, tête de page Tarifs : 3,9:1), tête de page des prestations (« les sites 3D » : 4,14:1),
   vignettes 3D (texte blanc prévu, repeint en corail foncé : 4,14:1). Même teinte « corail lisible sur
   obsidian » que .nuit ; blanc pour les vignettes. */
.page-tete .contenu a:not(.btn):not(.xlink),.contenu .bienvenue a:not(.btn):not(.xlink){color:var(--coral-clair)}
.contenu a.xp-vignette:not(.btn):not(.xlink){color:#fff}
/* Carte de visite : couleur prévue par « .cv-infos a » (base.css), elle aussi écrasée par la règle historique. */
.contenu .cv-infos a:not(.btn):not(.xlink){color:var(--texte)}

/* ── 6. Héros de l'accueil : voir la section 40. ─────────────────────── */

/* ── 7. Aperçu d'interface (héros et section espace client) ─────────── */
.appercu{
  background:var(--surface-nuit);
  border:1px solid var(--line-inv);
  border-radius:var(--rayon);
  overflow:hidden;
  box-shadow:0 30px 70px rgba(0,0,0,.45);
}
.appercu-barre{
  display:flex;align-items:center;gap:8px;
  padding:11px 14px;border-bottom:1px solid var(--line-inv);
  background:var(--surface-nuit-2);
}
.appercu-barre i{width:9px;height:9px;border-radius:50%;background:#3A3F47;flex:0 0 auto}
.appercu-barre i:first-child{background:var(--coral)}
.appercu-titre{
  font-family:var(--sans);font-size:.78rem;color:var(--muted-inv);margin-left:6px;
}
.appercu-corps{padding:18px}
.appercu-etiquette{
  display:inline-block;font-family:var(--display);font-weight:600;
  font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted-inv);border:1px solid var(--line-inv);
  border-radius:var(--rayon-pilule);padding:3px 10px;margin-bottom:14px;
}
.demande{
  display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:center;
  padding:13px 0;border-bottom:1px solid var(--line-inv);
}
.demande:last-child{border-bottom:0}
.demande b{
  font-family:var(--sans);font-weight:600;font-size:.95rem;color:var(--pure-white);
}
.demande small{grid-column:1;font-size:.8rem;color:var(--muted-inv)}
.statut{
  grid-row:span 2;font-family:var(--display);font-weight:600;font-size:.72rem;
  letter-spacing:.04em;padding:5px 11px;border-radius:var(--rayon-pilule);
  white-space:nowrap;
}
.statut-cours{background:rgba(255,59,92,.16);color:var(--coral-clair)}
.statut-devis{background:rgba(255,255,255,.09);color:var(--ink-inv-2)}
.statut-livre{background:rgba(15,123,79,.22);color:#63C79B}
.appercu-note{
  margin:14px 0 0;font-size:.76rem;color:var(--muted-inv);
  padding-top:12px;border-top:1px solid var(--line-inv);
}

/* ── 8. Pôles de services ───────────────────────────────────────────── */
.poles{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
  gap:18px;
  margin-top:38px;
}
.pole{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--rayon);
  padding:26px 24px 24px;
  display:flex;flex-direction:column;
  transition:border-color var(--transition),transform var(--transition),box-shadow var(--transition);
}
.pole:hover{border-color:var(--line-forte);transform:translateY(-3px);box-shadow:var(--ombre)}
/* Le premier pôle est l'offre principale : il porte l'accent. */
.pole-principal{border-color:var(--obsidian);border-width:2px}
.pole-num{
  font-family:var(--display);font-weight:700;font-size:.72rem;letter-spacing:.14em;
  color:var(--coral-fonce);margin:0 0 12px;
}
.pole h3{font-size:1.28rem;margin:0 0 10px}
.pole-probleme{
  font-size:.95rem;color:var(--muted);margin:0 0 14px;font-style:italic;
  padding-left:13px;border-left:2px solid var(--line-forte);
}
.pole-solution{font-size:1rem;color:var(--ink-2);margin:0 0 16px}
.pole-liste{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-wrap:wrap;gap:7px}
.pole-liste li{
  font-size:.83rem;color:var(--ink-2);background:var(--surface-2);
  border-radius:var(--rayon-pilule);padding:4px 11px;
}
.pole-benefice{
  margin:auto 0 0;padding-top:16px;border-top:1px solid var(--line);
  font-size:.93rem;color:var(--ink);font-weight:500;
}
.pole-benefice b{color:var(--coral-fonce);font-weight:600}

/* ── 9. Étapes « comment ça marche » ────────────────────────────────── */
.etapes{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:1px;background:var(--line-inv);border:1px solid var(--line-inv);
  border-radius:var(--rayon);overflow:hidden;margin-top:38px;
}
/* Portee limitee a .etapes : la classe .etape existe deja dans la section
   « scene par scene », qu'on ne veut pas repeindre. */
.etapes .etape{background:var(--obsidian);padding:26px 24px}
.etapes .etape-num{
  font-family:var(--display);font-weight:800;font-size:2.1rem;line-height:1;
  color:var(--coral);margin:0 0 14px;letter-spacing:-.03em;
}
.etapes .etape h3{font-size:1.08rem;margin:0 0 9px;color:var(--pure-white)}
.etapes .etape p{font-size:.93rem;color:var(--ink-inv-2);margin:0}

/* ── 10. Formulaires ────────────────────────────────────────────────── */
form{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--rayon);box-shadow:var(--ombre);padding:clamp(22px,4vw,34px);
}
label{font-family:var(--sans);font-weight:600;font-size:.92rem;color:var(--ink)}
input,select,textarea{
  font-family:var(--sans);font-size:1rem;
  border:1.5px solid var(--line-forte);border-radius:var(--rayon-petit);
  background:var(--surface);color:var(--ink);
  transition:border-color var(--transition),box-shadow var(--transition);
}
input:hover,select:hover,textarea:hover{border-color:var(--muted)}
input:focus,select:focus,textarea:focus{
  border-color:var(--coral-fonce);
  box-shadow:0 0 0 4px rgba(255,59,92,.14);
  outline:none;
}
.erreur{color:var(--danger);font-size:.86rem}

/* ── 11. Cartes et surfaces héritées ────────────────────────────────── */
.tarif,.engagement,.secteur,.demo-carte,.bloc-paiement,.point-securite,
.question,.service,.abonnement{
  border-radius:var(--rayon);
}
.fond-alt{background:var(--surface-2)}

/* ── 12. Micro-interactions ─────────────────────────────────────────── */
.apparait{transition:opacity .5s ease,transform .5s cubic-bezier(.22,.8,.28,1)}

/* Sans JavaScript, rien ne doit rester invisible : l'animation
   d'apparition est purement décorative. */
.sans-js .apparait,.apparition-secours .apparait{opacity:1!important;transform:none!important}

@media (prefers-reduced-motion:reduce){
  .btn:hover,.pole:hover{transform:none}
}

/* ── 13. Responsive ─────────────────────────────────────────────────── */
@media (max-width:560px){
  body{font-size:16px}
  .poles{grid-template-columns:1fr}
  .appercu-corps{padding:14px}
}
@media (max-width:400px){
  .etapes .etape{padding:22px 18px}
  .pole{padding:22px 20px 20px}
}

/* ── 14. Neutralisation des dégradés hérités ────────────────────────────
   Le thème précédent empilait des dégradés rouges codés en dur. La charte
   ROSA n'utilise pas de dégradé : un aplat Obsidian, un accent corail. */
.bande-message{
  background:var(--obsidian)!important;
  color:var(--ink-inv-2)!important;
  border-top:1px solid var(--line-inv);
  border-bottom:1px solid var(--line-inv);
}
.bande-message h2{color:var(--pure-white)!important}
.bande-message h2 em{color:var(--coral)!important;font-style:normal!important}
.bande-message p{color:var(--ink-inv-2)!important}
.bande-message .surtitre{color:var(--coral)!important}
.bande-message .btn-plein{background:var(--coral)!important;color:var(--obsidian)!important;border-color:var(--coral)!important}
.bande-message .btn-plein:hover{background:var(--coral-clair)!important;color:var(--obsidian)!important}

.bande{background:var(--obsidian)!important}
.cta-final{background:var(--obsidian)!important}
.cta-final h2{color:var(--pure-white)!important}
.cta-final p{color:var(--ink-inv-2)!important}

/* Pastilles d'icônes : aplat neutre, dessin corail. */
.icone,.secteur-ic{
  background:var(--surface-2)!important;
  color:var(--coral-fonce)!important;
  border:1px solid var(--line);
  border-radius:var(--rayon-petit)!important;
}
.nuit .icone,.nuit .secteur-ic{
  background:rgba(255,255,255,.06)!important;border-color:var(--line-inv);
  color:var(--coral)!important;
}
.carte:hover::after{background:none!important}

/* ── 15. Sections ajoutées par la refonte ───────────────────────────── */
.section-offre{padding-block:clamp(56px,8vw,92px)}
.tete-large{max-width:780px}
.tete-large h2{font-size:clamp(1.9rem,4.2vw,2.9rem);margin:10px 0 14px}

.section-etapes{padding-block:clamp(56px,8vw,92px)}

.espace-client-grille{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(28px,5vw,64px);align-items:center;margin-top:34px;
}
.espace-client-liste{list-style:none;margin:22px 0 26px;padding:0;display:grid;gap:11px}
.espace-client-liste li{
  display:flex;gap:11px;align-items:flex-start;font-size:1rem;color:var(--ink-2);
}
.nuit .espace-client-liste li{color:var(--ink-inv-2)}
.espace-client-liste li::before{
  content:"";flex:0 0 auto;width:18px;height:18px;margin-top:3px;border-radius:50%;
  background:rgba(255,59,92,.16);
  box-shadow:inset 0 0 0 1.5px var(--coral);
}
@media (max-width:900px){
  .espace-client-grille{grid-template-columns:1fr}
}

/* ── 16. Correctifs hérités ─────────────────────────────────────────── */
/* Les étapes sont une vraie liste ordonnée (l'ordre porte du sens), mais
   la numérotation est déjà rendue par .etape-num : on masque celle du
   navigateur plutôt que de dégrader le HTML en <div>. */
.etapes{list-style:none;padding:0;margin-top:38px}
.etapes>li{margin:0}

/* Le surtitre historique portait un pétale et un point médian décoratifs,
   hérités de l'ancienne identité. */
.surtitre::before,.surtitre::after{content:none!important}
.tete-section .surtitre{display:block;margin-bottom:10px}

/* ── 17. Confort mobile ─────────────────────────────────────────────── */
/* La barre d'appel à l'action fixe en bas d'écran masquait la fin du
   contenu : on réserve sa hauteur. */
@media (max-width:900px){
  body{padding-bottom:82px}
}

/* ── 18. Défilement vers les ancres ─────────────────────────────────────
   La page mesure plus de 40 000 px. Le scroll-behavior:smooth natif du
   navigateur avance à vitesse constante : un clic sur « Échange
   découverte gratuit », qui vise le formulaire tout en bas, mettait
   plusieurs dizaines de secondes à arriver. Le défilement est donc repris
   en JavaScript, à durée constante quelle que soit la distance (voir
   index.html). Ici, on rend la main au navigateur. */
html{scroll-behavior:auto!important}
/* Décalage sous l'en-tête collant, pour que le titre visé ne passe pas
   dessous quand le navigateur gère lui-même le saut (JS désactivé). */

/* ── 19. Badge de marque, réutilisable ──────────────────────────────────
   Même composant que le badge du héros. Une classe dédiée plutôt que
   .surtitre, dont les pseudo-éléments décoratifs (pétale, point médian)
   viennent de l'ancienne identité et ressortent par-dessus les
   surcharges. */
.rosa-badge{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--display);font-weight:600;
  font-size:.72rem;letter-spacing:.17em;text-transform:uppercase;
  color:var(--ink-inv-2)!important;
  background:rgba(255,255,255,.05);
  border:1px solid var(--line-inv);
  border-radius:var(--rayon-pilule);
  padding:7px 15px 7px 12px;
  margin:0 0 clamp(18px,2.6vw,26px);
}
.rosa-badge::before{
  content:"";width:7px;height:7px;border-radius:50%;
  background:var(--coral);flex:0 0 auto;
}
.rosa-badge::after{content:none}

/* ── 20. Section « La promesse ROSA » ───────────────────────────────── */
.promesse{padding-block:clamp(56px,8vw,92px)!important}
.promesse .contenu{max-width:var(--max)!important;text-align:left!important}
.promesse-grille{
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  gap:clamp(32px,5vw,68px);
  align-items:center;
}
.promesse h2{
  font-family:var(--display);
  font-size:clamp(2rem,4.4vw,3.1rem)!important;
  font-weight:800;line-height:1.04;letter-spacing:-.035em;
  color:var(--pure-white)!important;
  margin:0 0 18px!important;
  max-width:16ch;
}
/* La deuxième phrase passe à la ligne et prend l'accent : la promesse
   se lit en deux temps, comme elle s'énonce. */
.promesse h2 em{
  display:block;font-style:normal!important;
  color:var(--coral)!important;-webkit-text-fill-color:var(--coral)!important;
}
.promesse-chapeau{
  font-size:1.06rem!important;line-height:1.6;
  color:var(--ink-inv-2)!important;
  max-width:52ch;margin:0 0 clamp(24px,3.2vw,32px)!important;
}
.promesse-btns{display:flex;flex-wrap:wrap;gap:13px}
.promesse-cta{
  flex:0 0 auto;white-space:nowrap;
  padding:15px 26px!important;font-size:.98rem!important;font-weight:600!important;
}
.promesse .btn-plein{
  background:var(--coral)!important;color:var(--obsidian)!important;
  border:2px solid var(--coral)!important;box-shadow:none!important;
}
.promesse .btn-plein:hover{background:var(--coral-clair)!important;border-color:var(--coral-clair)!important}

/* Carte de réassurance : elle dit ce qu'on obtient en cliquant. */
.promesse-carte{
  background:rgba(255,255,255,.045);
  border:1px solid var(--line-inv);
  border-left:3px solid var(--coral);
  border-radius:var(--rayon);
  padding:26px 24px;
}
.promesse-carte-ic{
  display:grid;place-items:center;
  width:42px;height:42px;margin-bottom:16px;
  border-radius:var(--rayon-petit);
  background:rgba(255,59,92,.14);
  color:var(--coral);
}
.promesse-carte-ic svg{width:21px;height:21px}
.promesse-carte h3{
  font-family:var(--display);font-size:1.14rem;font-weight:700;
  color:var(--pure-white)!important;margin:0 0 14px;letter-spacing:-.015em;
}
.promesse-liste{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.promesse-liste li{
  position:relative;padding-left:24px;
  font-size:.94rem;line-height:1.5;color:var(--ink-inv-2)!important;
}
.promesse-liste li::before{
  content:"";position:absolute;left:0;top:.42em;
  width:13px;height:13px;border-radius:50%;
  background:rgba(255,59,92,.18);
  box-shadow:inset 0 0 0 1.5px var(--coral);
}

@media (max-width:900px){
  .promesse-grille{grid-template-columns:1fr;gap:34px}
  .promesse h2{max-width:none}
}
@media (max-width:560px){
  .promesse-cta{width:100%;text-align:center;justify-content:center}
  .promesse-carte{padding:22px 20px}
}

/* Dernier bouton à dégradé du thème précédent : aplat Obsidian. */
.btn-nuit{
  background:var(--obsidian)!important;
  color:var(--pure-white)!important;
  border:2px solid var(--obsidian)!important;
}
.btn-nuit:hover{background:var(--coral-fonce)!important;border-color:var(--coral-fonce)!important}

/* ── 21. Formulaire de contact en deux étapes ───────────────────────────
   Le projet d'abord, l'identité ensuite : le visiteur s'engage sur ce qui
   l'intéresse avant qu'on lui demande qui il est. */
.visuellement-masque{
  position:absolute!important;width:1px!important;height:1px!important;
  overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important;
  border:0!important;padding:0!important;margin:-1px!important;
}
.form-projet{padding:clamp(22px,3.6vw,34px)!important;position:relative}
.form-etape{border:0;margin:0;padding:0;min-inline-size:0}
.form-etape legend{
  font-family:var(--display);font-weight:700;font-size:1.32rem;letter-spacing:-.02em;
  color:var(--ink);padding:0;margin:0 0 4px;
}
.form-aide{margin:0 0 20px;color:var(--muted);font-size:.93rem}

/* Sans JavaScript, les deux étapes restent visibles ; avec, une seule. */
.form-par-etapes .form-etape{display:none}
.form-par-etapes .form-etape.etape-courante{display:block}
.form-projet:not(.form-par-etapes) .form-etape + .form-etape{margin-top:28px;padding-top:24px;border-top:1px solid var(--line)}
.form-projet:not(.form-par-etapes) button[data-form-vers]{display:none}

.form-progression{
  list-style:none;margin:0 0 22px;padding:0;display:flex;gap:8px;
}
.form-progression li{
  flex:1;font-family:var(--display);font-size:.72rem;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
  padding-top:10px;border-top:3px solid var(--line);
}
.form-progression li.actif{color:var(--ink);border-top-color:var(--coral)}
.form-projet:not(.form-par-etapes) .form-progression{display:none}

.champ-lib{display:block;font-weight:600;font-size:.92rem;margin:0 0 10px;color:var(--ink)}
.puces-choix{display:flex;flex-wrap:wrap;gap:8px}
.puce{position:relative;cursor:pointer;margin:0}
.puce input{position:absolute;opacity:0;width:1px;height:1px}
.puce span{
  display:inline-block;font-size:.9rem;font-weight:500;color:var(--ink-2);
  background:var(--surface);border:1.5px solid var(--line-forte);
  border-radius:var(--rayon-pilule);padding:8px 14px;line-height:1.2;
  transition:border-color var(--transition),background var(--transition),color var(--transition);
}
.puce:hover span{border-color:var(--obsidian);color:var(--ink)}
.puce input:checked + span{background:var(--obsidian);border-color:var(--obsidian);color:var(--pure-white)}
.puce input:focus-visible + span{outline:3px solid var(--coral);outline-offset:2px}

.form-projet textarea{min-height:120px}
.form-cta{width:100%;padding:15px 24px!important;font-size:1rem!important;margin-top:6px}
.form-actions{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:4px}
.form-retour{
  background:none;border:0;padding:4px;cursor:pointer;font:inherit;font-size:.9rem;
  color:var(--muted);text-decoration:underline;text-underline-offset:3px;
}
.form-retour:hover{color:var(--ink)}

.parrainage{margin:2px 0 16px}
.parrainage summary{
  cursor:pointer;font-size:.9rem;font-weight:600;color:var(--ink-2);
  list-style:none;display:inline-flex;align-items:center;gap:7px;
}
.parrainage summary::-webkit-details-marker{display:none}
.parrainage summary::before{content:"+";font-weight:700;color:var(--coral-fonce)}
.parrainage[open] summary::before{content:"–"}
.parrainage .champ{margin-top:12px}

.form-projet .rgpd{font-size:.86rem;line-height:1.5;color:var(--ink-2);font-weight:400}

/* ── 22. Barre d'appel à l'action mobile ────────────────────────────── */
.cta-sticky{
  background:var(--obsidian)!important;
  border-top:1px solid var(--line-inv)!important;
  box-shadow:0 -10px 30px rgba(0,0,0,.25)!important;
}
.cta-sticky .txt{color:var(--ink-inv-2)!important}
.cta-sticky .txt strong{color:var(--pure-white)!important;font-family:var(--display)!important}
.cta-sticky .btn,.cta-sticky .btn-plein{
  background:var(--coral)!important;color:var(--obsidian)!important;border-color:var(--coral)!important;
}

@media (max-width:560px){
  .form-progression li{font-size:.66rem;letter-spacing:.05em}
  .puce span{font-size:.86rem;padding:8px 12px}
}

/* ── 23. Décors hérités de l'ancien thème ───────────────────────────────
   - .marqueur-eco : petite « constellation » animée, injectée par script
     dans chaque surtitre. Elle parasitait tous les badges du site.
   - Halo rouge sous les pastilles d'icône : box-shadow en quatre couches,
     rose flou et relief intérieur. C'est la « carte à icône mal intégrée ».
   - Reflet balayant les boutons pleins au survol : effet décoratif. */
.marqueur-eco{display:none!important}
.icone,.secteur-ic,.besoin .b-ic{box-shadow:none!important;filter:none!important}
.coordonnees .icone{
  width:44px!important;height:44px!important;border-radius:var(--rayon-petit)!important;
  background:var(--surface-2)!important;border:1px solid var(--line)!important;
  color:var(--coral-fonce)!important;
}
.btn-plein::after{background:none!important;animation:none!important}

/* ── 24. Sommaire « Pour aller plus loin » ──────────────────────────────
   Frontière entre le parcours d'achat (au-dessus, jusqu'au formulaire)
   et le détail (en dessous). */
.approfondir{
  background:var(--surface-2);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding-block:clamp(44px,6vw,64px);
}
.approfondir h2{
  font-size:clamp(1.5rem,3vw,2rem);margin:0 0 22px;color:var(--ink);
}
.rosa-badge-clair{
  color:var(--ink-2)!important;background:var(--surface)!important;
  border-color:var(--line)!important;
}
.approfondir-liens{display:flex;flex-wrap:wrap;gap:9px}
.approfondir-liens a{
  font-size:.92rem;font-weight:500;color:var(--ink-2)!important;text-decoration:none;
  background:var(--surface);border:1px solid var(--line-forte);
  border-radius:var(--rayon-pilule);padding:9px 15px;
  transition:border-color var(--transition),color var(--transition),background var(--transition);
}
.approfondir-liens a:hover{border-color:var(--obsidian);color:var(--ink)!important}

/* Séparateurs « pétale » de l'ancienne identité : dégradé rouge décoratif. */
.sep-petale{display:none!important}

/* ── 25. Rythme des fonds le long du parcours d'achat ───────────────────
   Après le réordonnancement, les classes .fond-alt d'origine ne tombaient
   plus en alternance : quatre sections blanches se suivaient. Le rythme
   est désormais fixé section par section : Obsidian pour les temps forts,
   blanc et gris très clair en alternance pour le reste. */
#besoins,#offre,#realisations,#calculateur,#zone,#contact,
#probleme-solution{background:var(--pure-white)!important}
#tarifs,#espace-client,#faq,#parcours{background:var(--surface-2)!important}
#secteurs{background:var(--pure-white)!important}

/* ── 26. Cartes de tarifs ───────────────────────────────────────────────
   Le montant porte la carte ; « à partir de » l'annonce sans l'écraser.
   Chaque carte se termine par une action : un prix sans bouton est une
   impasse. */
.tarif{display:flex!important;flex-direction:column}
.tarif .montant{
  font-family:var(--display)!important;font-weight:800!important;
  font-size:clamp(1.9rem,3vw,2.3rem)!important;line-height:1.05!important;
  letter-spacing:-.03em;color:var(--ink)!important;margin:6px 0 4px;
  -webkit-text-fill-color:currentColor!important;background:none!important;
}
.tarif .montant small{
  display:block;font-family:var(--sans);font-size:.8rem;font-weight:600;
  letter-spacing:0;color:var(--muted);margin-bottom:2px;text-transform:none;
}
.tarif.mis-en-avant .montant{color:var(--coral-fonce)!important}
.tarif ul{margin-bottom:18px}
.tarif-cta{
  margin-top:auto;display:flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--display);font-weight:600;font-size:.92rem;
  padding:11px 16px;border-radius:var(--rayon-pilule);text-decoration:none!important;
  color:var(--ink)!important;border:2px solid var(--line-forte);background:var(--surface);
  transition:background var(--transition),border-color var(--transition),color var(--transition);
}
.tarif-cta::after{content:"→";transition:transform var(--transition)}
.tarif-cta:hover{background:var(--obsidian);border-color:var(--obsidian);color:var(--pure-white)!important}
.tarif-cta:hover::after{transform:translateX(3px)}
.tarif.mis-en-avant .tarif-cta{background:var(--obsidian);border-color:var(--obsidian);color:var(--pure-white)!important}
.tarif.mis-en-avant .tarif-cta:hover{background:var(--coral-fonce);border-color:var(--coral-fonce)}

/* Formules détaillées, repliées sous les six prix de départ. */
.toutes-formules{margin-top:30px}
.toutes-formules > summary{
  list-style:none;cursor:pointer;display:flex;flex-wrap:wrap;align-items:baseline;
  gap:4px 12px;justify-content:center;text-align:center;
  font-family:var(--display);font-weight:600;font-size:1rem;color:var(--ink);
  background:var(--surface);border:1.5px solid var(--line-forte);
  border-radius:var(--rayon);padding:16px 20px;
  transition:border-color var(--transition);
}
.toutes-formules > summary::-webkit-details-marker{display:none}
.toutes-formules > summary::before{content:"+";color:var(--coral-fonce);font-weight:700;margin-right:2px}
.toutes-formules[open] > summary::before{content:"–"}
.toutes-formules > summary span{font-family:var(--sans);font-weight:400;font-size:.88rem;color:var(--muted)}
.toutes-formules > summary:hover{border-color:var(--obsidian)}
.toutes-formules[open] > summary{margin-bottom:28px}

/* Six prix de départ : 3 + 3 plutôt que 4 + 2 (deux cartes orphelines). */
#tarifs > .contenu > .grille-tarifs{grid-template-columns:repeat(3,minmax(0,1fr))!important}
@media (max-width:900px){
  #tarifs > .contenu > .grille-tarifs{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media (max-width:560px){
  /* Meme specificite que la regle tablette, sinon celle-ci l'emporte
     et laisse deux colonnes de 154 px sur telephone. */
  #tarifs > .contenu > .grille-tarifs,#tarifs .grille-tarifs{grid-template-columns:1fr!important}
}

/* ── 27. En-têtes des pages intérieures ─────────────────────────────────
   Plus compact que le héros de l'accueil : fil d'Ariane, un H1 unique,
   une phrase, deux actions. */
.page-tete{
  background:var(--obsidian)!important;color:var(--ink-inv)!important;
  padding-block:clamp(40px,6vw,72px);position:relative;overflow:hidden;isolation:isolate;
  border-bottom:1px solid var(--line-inv);
}
.page-tete::after{
  content:"";position:absolute;z-index:-1;width:min(640px,90vw);aspect-ratio:1;
  right:-12%;top:-60%;
  background:radial-gradient(circle,rgba(255,59,92,.12),transparent 62%);pointer-events:none;
}
.fil-ariane ol{list-style:none;margin:0 0 20px;padding:0;display:flex;flex-wrap:wrap;gap:6px;font-size:.86rem}
.fil-ariane li{color:var(--muted-inv)}
.fil-ariane li + li::before{content:"/";margin-right:6px;color:var(--line-inv)}
.fil-ariane a{color:var(--ink-inv-2)!important;text-decoration:none}
.fil-ariane a:hover{color:var(--pure-white)!important;text-decoration:underline}
.page-tete h1{
  font-family:var(--display);font-weight:800;
  font-size:clamp(2.1rem,5.2vw,3.5rem)!important;line-height:1.02;letter-spacing:-.035em;
  color:var(--pure-white)!important;margin:0 0 16px;max-width:20ch;
}
.page-tete-lead{
  font-size:clamp(1.02rem,1.5vw,1.15rem)!important;line-height:1.6;
  color:var(--ink-inv-2)!important;max-width:58ch;margin:0 0 28px;
}
.page-tete-btns{display:flex;flex-wrap:wrap;gap:12px}
.page-tete .btn{flex:0 0 auto;white-space:nowrap;padding:14px 24px!important}
.page-tete .btn-plein{background:var(--coral)!important;color:var(--obsidian)!important;border-color:var(--coral)!important}
.page-tete .btn-plein:hover{background:var(--coral-clair)!important;border-color:var(--coral-clair)!important}
.page-tete .btn-vide{color:var(--pure-white)!important;border-color:rgba(255,255,255,.38)!important;background:rgba(255,255,255,.04)!important}
.page-tete .btn-vide:hover{background:var(--pure-white)!important;color:var(--obsidian)!important;border-color:var(--pure-white)!important}
@media (max-width:560px){
  .page-tete .btn{width:100%}
}


/* ── 28. Liens vers les pages détaillées (accueil) ──────────────────── */
.pages-liens{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}
.pages-liens a{
  display:flex;flex-direction:column;gap:5px;text-decoration:none!important;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--rayon);
  padding:18px 18px 16px;transition:border-color var(--transition),transform var(--transition);
}
.pages-liens a:hover{border-color:var(--obsidian);transform:translateY(-2px)}
.pages-liens b{font-family:var(--display);font-weight:700;font-size:1rem;color:var(--ink)}
.pages-liens b::after{content:" →";color:var(--coral-fonce)}
.pages-liens span{font-size:.87rem;line-height:1.45;color:var(--muted)}

.apercu-suite{text-align:center;margin:30px 0 0}
#apercu-realisations{background:var(--pure-white)!important}
@media (prefers-reduced-motion:reduce){.pages-liens a:hover{transform:none}}

/* ═══════════════════════════════════════════════════════════════════════
   30. REFONTE COMMERCIALE — composants
   Problème → solution → preuve → projection → offre → réassurance → action.
   ═══════════════════════════════════════════════════════════════════════ */

.section{padding-block:clamp(56px,8vw,96px)}
.section-claire{background:var(--pure-white)!important}
.section-grise{background:var(--surface-2)!important}
.tete{max-width:760px;margin:0 0 clamp(28px,4vw,44px)}
.tete h2{font-size:clamp(1.8rem,4vw,2.7rem);margin:12px 0 14px;color:var(--ink)}
.tete p{font-size:1.08rem;color:var(--ink-2);margin:0;max-width:62ch;line-height:1.6}
.nuit .tete h2{color:var(--pure-white)!important}
.nuit .tete p{color:var(--ink-inv-2)!important}
.tete-centree{margin-inline:auto;text-align:center}
.tete-centree p{margin-inline:auto}

/* ── Problèmes ──────────────────────────────────────────────────────── */
.problemes{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px}
.probleme{
  display:flex;flex-direction:column;gap:14px;text-decoration:none!important;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--rayon);padding:20px 20px 18px;
  transition:border-color var(--transition),transform var(--transition),box-shadow var(--transition);
}
.probleme:hover{border-color:var(--obsidian);transform:translateY(-3px);box-shadow:var(--ombre)}
.probleme q{font-family:var(--display);font-weight:600;font-size:1.06rem;line-height:1.3;color:var(--ink)}
.probleme span{margin-top:auto;font-size:.88rem;font-weight:600;color:var(--coral-fonce)}
.probleme span::after{content:" →"}

/* ── Solutions ──────────────────────────────────────────────────────── */
.solutions{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}
.solution{
  display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--rayon);padding:24px 22px 22px;text-decoration:none!important;color:inherit;
  transition:border-color var(--transition),transform var(--transition),box-shadow var(--transition);
}
.solution:hover{border-color:var(--obsidian);transform:translateY(-3px);box-shadow:var(--ombre)}
.solution-num{font-family:var(--display);font-weight:700;font-size:.72rem;letter-spacing:.14em;color:var(--coral-fonce);margin:0 0 10px}
.solution h3{font-size:1.3rem;margin:0 0 10px;color:var(--ink)}
.solution p{font-size:.97rem;color:var(--ink-2);margin:0 0 16px}
.solution-exemples{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.solution-exemples li{font-size:.8rem;color:var(--ink-2);background:var(--surface-2);border-radius:999px;padding:4px 10px}
.solution-pied{margin-top:auto;display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding-top:14px;border-top:1px solid var(--line)}
.solution-pied small{display:block;font-size:.76rem;color:var(--muted)}
.solution-pied b{font-family:var(--display);font-size:1.05rem;color:var(--ink)}
.solution-pied span{font-size:.88rem;font-weight:600;color:var(--coral-fonce);white-space:nowrap}

/* ── Preuves ────────────────────────────────────────────────────────── */
.preuves{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1px;background:var(--line-inv);border:1px solid var(--line-inv);border-radius:var(--rayon);overflow:hidden}
.preuve{background:var(--obsidian);padding:24px 22px}
.preuve-type{font-family:var(--display);font-weight:600;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--coral)!important;margin:0 0 10px}
.preuve h3{font-size:1.08rem;margin:0 0 8px;color:var(--pure-white)!important}
.preuve p{font-size:.92rem;margin:0;color:var(--ink-inv-2)!important}
.note-honnete{
  margin:22px 0 0;font-size:.9rem;padding:14px 16px;border-radius:var(--rayon-petit);
  border:1px solid var(--line-inv);color:var(--ink-inv-2)!important;background:rgba(255,255,255,.03);
}
.section-claire .note-honnete,.section-grise .note-honnete{border-color:var(--line);color:var(--ink-2)!important;background:var(--surface)}

/* ── Démonstrations (accès au lab) ──────────────────────────────────── */
.demos-choix{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}
.demo-choix{
  display:flex;flex-direction:column;gap:6px;text-decoration:none!important;padding:16px;
  border-radius:var(--rayon);border:1px solid var(--line);background:var(--surface);
  transition:border-color var(--transition),transform var(--transition);
}
.demo-choix:hover{border-color:var(--obsidian);transform:translateY(-2px)}
.demo-choix b{font-family:var(--display);font-size:.98rem;color:var(--ink)}
.demo-choix span{font-size:.85rem;color:var(--muted);line-height:1.45}

/* ── Méthode en six étapes ──────────────────────────────────────────── */
.methode{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line-inv);border:1px solid var(--line-inv);border-radius:var(--rayon);overflow:hidden}
.methode li{background:var(--obsidian);padding:24px 22px}
.methode-num{font-family:var(--display);font-weight:800;font-size:1.9rem;line-height:1;color:var(--coral)!important;margin:0 0 12px;letter-spacing:-.03em}
.methode h3{font-size:1.08rem;margin:0 0 8px;color:var(--pure-white)!important}
.methode p{font-size:.92rem;margin:0;color:var(--ink-inv-2)!important}

/* ── Comparateur ────────────────────────────────────────────────────── */
.comparateur-conteneur{overflow-x:auto;border:1px solid var(--line);border-radius:var(--rayon);background:var(--surface)}
.comparateur{width:100%;min-width:680px;border-collapse:collapse;font-size:.93rem}
.comparateur th,.comparateur td{padding:13px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.comparateur thead th{font-family:var(--display);font-size:1rem;color:var(--ink);background:var(--surface-2)}
.comparateur thead th small{display:block;font-family:var(--sans);font-weight:400;font-size:.8rem;color:var(--muted)}
.comparateur tbody th{font-weight:600;color:var(--ink-2);width:18%}
.comparateur td{color:var(--ink-2)}
.comparateur tr.ligne-prix td{font-family:var(--display);font-weight:800;font-size:1.25rem;color:var(--ink)}
.comparateur tr.ligne-prix td small{display:block;font-family:var(--sans);font-weight:500;font-size:.75rem;color:var(--muted)}
.comparateur tbody tr:last-child th,.comparateur tbody tr:last-child td{border-bottom:0}
.oui::before{content:"✓ ";color:var(--succes);font-weight:700}
.non{color:var(--muted)!important}

/* ── Fiches d'offre ─────────────────────────────────────────────────── */
.offres{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:16px;align-items:stretch}
.offre{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--rayon);padding:24px 22px 22px}
.offre h3{font-size:1.2rem;margin:0 0 6px;color:var(--ink)}
.offre-accroche{font-size:.95rem;color:var(--ink-2);margin:0 0 16px}
.offre-prix{font-family:var(--display);font-weight:800;font-size:1.9rem;line-height:1;color:var(--ink);letter-spacing:-.03em;margin:0 0 4px}
.offre-prix small{display:block;font-family:var(--sans);font-weight:600;font-size:.78rem;letter-spacing:0;color:var(--muted);margin-bottom:4px}
.offre-rythme{font-size:.82rem;color:var(--muted);margin:0 0 6px}
.offre-titre-liste{font-family:var(--display);font-weight:600;font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);margin:16px 0 8px}
.liste-coche,.liste-croix{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.liste-coche li,.liste-croix li{position:relative;padding-left:24px;font-size:.92rem;line-height:1.45;color:var(--ink-2)}
.liste-coche li::before{content:"✓";position:absolute;left:0;top:0;color:var(--succes);font-weight:700}
.liste-croix li::before{content:"–";position:absolute;left:4px;top:0;color:var(--muted);font-weight:700}
.offre-infos{margin:16px 0 18px;display:grid;gap:8px;padding:14px;border-radius:var(--rayon-petit);background:var(--surface-2);font-size:.88rem;color:var(--ink-2)}
.offre-infos p{margin:0}
.offre-infos b{color:var(--ink)}
.offre .tarif-cta{margin-top:auto}

/* ── FAQ ────────────────────────────────────────────────────────────── */
.faq-liste{display:grid;gap:10px;max-width:880px}
.faq-liste details{background:var(--surface);border:1px solid var(--line);border-radius:var(--rayon)}
.faq-liste details[open]{border-color:var(--line-forte)}
.faq-liste summary{
  list-style:none;cursor:pointer;padding:18px 20px;display:flex;justify-content:space-between;gap:16px;
  font-family:var(--display);font-weight:600;font-size:1.02rem;color:var(--ink);
}
.faq-liste summary::-webkit-details-marker{display:none}
.faq-liste summary::after{content:"+";flex:0 0 auto;font-size:1.3rem;line-height:1;color:var(--coral-fonce)}
.faq-liste details[open] summary::after{content:"–"}
.faq-liste .reponse{padding:0 20px 18px;color:var(--ink-2);font-size:.97rem;line-height:1.65}
.faq-liste .reponse p{margin:0 0 10px}
.faq-liste .reponse p:last-child{margin:0}

/* ── Engagements et zone ────────────────────────────────────────────── */
.engagements{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.engagement-carte{background:var(--surface);border:1px solid var(--line);border-radius:var(--rayon);padding:20px}
.engagement-carte h3{font-size:1rem;margin:0 0 6px;color:var(--ink)}
.engagement-carte p{font-size:.9rem;margin:0;color:var(--ink-2)}
.zone-bloc{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;margin-top:22px}
.zone-carte{border-radius:var(--rayon);padding:22px;border:1px solid var(--line);background:var(--surface)}
.zone-carte h3{font-size:1.05rem;margin:0 0 8px;color:var(--ink)}
.zone-carte p{margin:0;font-size:.93rem;color:var(--ink-2)}

/* ── Pages de service ───────────────────────────────────────────────── */
.deux-colonnes{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(20px,4vw,44px);align-items:start}
.encadre{background:var(--surface);border:1px solid var(--line);border-radius:var(--rayon);padding:22px}
.encadre h3{font-size:1.05rem;margin:0 0 12px;color:var(--ink)}
.situations{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.situations li{
  padding:14px 16px 14px 18px;border-left:3px solid var(--coral);background:var(--surface);
  border-radius:0 var(--rayon-petit) var(--rayon-petit) 0;font-size:.98rem;color:var(--ink-2);
}
.demo-lien{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;
  padding:22px;border-radius:var(--rayon);background:var(--obsidian);
}
.demo-lien p{margin:0;max-width:60ch;color:var(--ink-inv-2)!important}
.demo-lien b{color:var(--pure-white)}
.demo-lien .btn-plein{background:var(--coral)!important;color:var(--obsidian)!important;border-color:var(--coral)!important}

.badge-bientot{
  display:inline-block;font-family:var(--display);font-weight:600;font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase;color:#5A3B00;background:#FBF0DC;border-radius:999px;padding:3px 10px;vertical-align:middle;
}

@media (max-width:900px){
  .methode{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .methode{grid-template-columns:1fr}
  .hero-demo-panneau{min-height:0;padding:14px}
  .mq-kpis{grid-template-columns:1fr 1fr}
  .mq-kpi:last-child{display:none}
}
@media (prefers-reduced-motion:reduce){
  .hero-demo.en-lecture .hero-demo-progression span{animation:none;width:100%}
  .probleme:hover,.solution:hover,.demo-choix:hover{transform:none}
  .mq-graph i{transition:none}
}


/* Tarifs sur l'accueil : autres solutions */
.tarifs-cta{display:flex;flex-wrap:wrap;gap:12px;margin:22px 0 0}
.tarifs-autres-titre{font-size:1.15rem;margin:44px 0 14px;color:var(--ink)}
.tarifs-autres{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--rayon);overflow:hidden}
.tarifs-autres a{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:15px 18px;background:var(--surface);text-decoration:none!important;height:100%;transition:background var(--transition)}
.tarifs-autres a:hover{background:var(--surface-2)}
.tarifs-autres span{color:var(--ink-2);font-size:.95rem}
.tarifs-autres b{font-family:var(--display);color:var(--ink);white-space:nowrap}
.tarifs-autres b small{font-family:var(--sans);font-weight:500;font-size:.75rem;color:var(--muted)}
.form-projet .champ-lib .facultatif{font-weight:400}

.probleme q{quotes:"«\00a0" "\00a0»"}
.preuves{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){.preuves{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.preuves{grid-template-columns:1fr}}
[hidden]{display:none!important}
.tarifs-autres{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.tarifs-autres a{flex-wrap:wrap}
.engagements{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){.engagements{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.engagements{grid-template-columns:1fr}}

/* ── Listes de tarifs (prestations, tarifs) ─────────────────────────── */
.liste-tarifs{list-style:none;margin:0;padding:0;display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--rayon);overflow:hidden}
.liste-tarifs li{display:grid;grid-template-columns:minmax(0,2.2fr) minmax(0,1.3fr) minmax(0,.9fr) auto;gap:18px;align-items:center;padding:16px 20px;background:var(--surface)}
.lt-nom b{display:block;font-family:var(--display);font-size:1.02rem;color:var(--ink)}
.lt-nom span{display:block;font-size:.88rem;color:var(--muted);line-height:1.45;margin-top:2px}
.lt-delai{font-size:.86rem;color:var(--ink-2);line-height:1.4}
.lt-delai small,.lt-prix small{display:block;font-size:.72rem;color:var(--muted);font-family:var(--sans);font-weight:500}
.lt-prix{font-family:var(--display);font-weight:800;font-size:1.12rem;color:var(--ink);white-space:nowrap}
.lt-lien{font-size:.88rem;font-weight:600;color:var(--coral-fonce)!important;text-decoration:none!important;white-space:nowrap}
.lt-lien:hover{text-decoration:underline!important}
@media (max-width:760px){
  .liste-tarifs li{grid-template-columns:1fr auto;gap:8px 16px}
  .lt-nom{grid-column:1 / -1}
  .lt-delai{grid-column:1 / -1}
  .lt-prix{grid-column:1}
  .lt-lien{grid-column:2;justify-self:end}
}
.tarifs-famille{font-size:1.2rem;margin:40px 0 14px}
.tarifs-famille:first-of-type{margin-top:0}
.tarifs-famille a{color:var(--ink)!important;text-decoration:none!important}
.tarifs-famille a::after{content:" →";color:var(--coral-fonce)}
.familles{display:grid;gap:18px}
.famille{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,2fr);gap:clamp(18px,3vw,36px);align-items:start;background:var(--surface);border:1px solid var(--line);border-radius:var(--rayon);padding:clamp(20px,3vw,30px)}
.famille-tete h3{font-size:1.35rem;margin:0 0 8px;color:var(--ink)}
.famille-tete p{color:var(--ink-2);margin:0 0 16px;font-size:.96rem}
.famille .liste-tarifs li{grid-template-columns:minmax(0,1.8fr) minmax(0,.9fr) auto}
.famille .lt-delai{display:none}
@media (max-width:900px){.famille{grid-template-columns:1fr}}
@media (max-width:760px){.famille .liste-tarifs li{grid-template-columns:1fr auto}}
.comparateur-frais{min-width:560px}
.comparateur-frais tbody th{width:22%}

/* ── Chaîne de production avec IA (à propos) ────────────────────────── */
.chaine-ia{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;counter-reset:ia}
.chaine-ia li{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--rayon);padding:16px 14px;counter-increment:ia}
.chaine-ia li::before{content:counter(ia,decimal-leading-zero);display:block;font-family:var(--display);font-weight:800;color:var(--coral-fonce);font-size:.85rem;margin-bottom:6px}
.chaine-ia b{display:block;font-family:var(--display);color:var(--ink);margin-bottom:4px}
.chaine-ia span{display:block;font-size:.84rem;color:var(--muted);line-height:1.45}
@media (max-width:900px){.chaine-ia{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:560px){.chaine-ia{grid-template-columns:1fr 1fr}}

/* ═══════════════════════════════════════════════════════════════════════
   31. CATALOGUE ÉLARGI — parcours par intention, échelle d'entrée,
       catalogue filtrable. Le visiteur part de son besoin, pas du jargon.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Parcours « je veux… » (accueil) ────────────────────────────────── */
.parcours{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.parcours-carte{
  display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--rayon);padding:22px 22px 12px;
  transition:border-color var(--transition),box-shadow var(--transition);
}
.parcours-carte:hover{border-color:var(--line-forte);box-shadow:var(--ombre)}
.parcours-carte h3{font-size:1.18rem;margin:0 0 8px;color:var(--ink)}
.parcours-carte > p{font-size:.93rem;color:var(--ink-2);margin:0 0 14px}
.parcours-liens{list-style:none;margin:auto 0 0;padding:0;display:grid}
.parcours-liens a{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:11px 0;border-top:1px solid var(--line);text-decoration:none!important;
}
.parcours-liens span{font-size:.93rem;font-weight:500;color:var(--ink-2)}
.parcours-liens b{font-family:var(--display);font-size:.85rem;color:var(--coral-fonce);white-space:nowrap}
.parcours-liens a:hover span{color:var(--ink)}
.parcours-liens a:hover b{text-decoration:underline}
@media (max-width:900px){.parcours{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.parcours{grid-template-columns:1fr}}

/* ── Familles groupées par intention ───────────────────────────────── */
.solutions-univers{grid-template-columns:repeat(3,minmax(0,1fr))}
.univers{grid-column:1 / -1;margin-top:14px}
.univers:first-child{margin-top:0}
.univers-titre{
  font-family:var(--display);font-weight:600;font-size:.74rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);margin:0;padding-bottom:6px;border-bottom:1px solid var(--line);
}
@media (max-width:900px){.solutions-univers{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.solutions-univers{grid-template-columns:1fr}}

/* ── Échelle d'entrée ──────────────────────────────────────────────── */
.echelle{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;counter-reset:ech}
.echelle li{display:flex;gap:14px;background:var(--surface);border:1px solid var(--line);border-radius:var(--rayon);padding:18px}
.echelle-rang{
  flex:0 0 auto;font-family:var(--display);font-weight:800;font-size:.82rem;
  color:var(--coral-fonce);border:1px solid var(--line-forte);border-radius:50%;
  width:34px;height:34px;display:grid;place-items:center;
}
.echelle li b{display:block;font-family:var(--display);font-size:1.02rem;color:var(--ink);margin-bottom:4px}
.echelle-texte{display:block;font-size:.9rem;color:var(--ink-2);margin-bottom:8px}
.echelle li a{font-size:.86rem;font-weight:600;color:var(--coral-fonce)!important;text-decoration:none!important}
.echelle li a:hover{text-decoration:underline!important}
@media (max-width:900px){.echelle{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.echelle{grid-template-columns:1fr}}

/* ── Catalogue filtrable (page Prestations) ────────────────────────── */
.filtres{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.filtre-puce{
  cursor:pointer;font:inherit;font-size:.89rem;font-weight:500;color:var(--ink-2);
  background:var(--surface);border:1.5px solid var(--line-forte);border-radius:var(--rayon-pilule);
  padding:9px 16px;transition:border-color var(--transition),background var(--transition),color var(--transition);
}
.filtre-puce:hover{border-color:var(--obsidian);color:var(--ink)}
.filtre-puce.actif{background:var(--obsidian);border-color:var(--obsidian);color:var(--pure-white)}
.filtre-puce:focus-visible{outline:3px solid var(--coral);outline-offset:2px}
.recherche-services{margin:0 0 24px;max-width:520px}
.recherche-services label{display:block;font-weight:600;font-size:.92rem;margin-bottom:8px;color:var(--ink)}
.recherche-services input{
  width:100%;font:inherit;padding:13px 16px;border-radius:var(--rayon-petit);
  border:1.5px solid var(--line-forte);background:var(--surface);color:var(--ink);
}
.recherche-services input:focus{border-color:var(--obsidian);outline:none}
.recherche-etat{margin:8px 0 0;font-size:.86rem;color:var(--muted);min-height:1.2em}
.recherche-vide{margin:22px 0 0;font-size:.98rem;color:var(--ink-2)}
.services-grille{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.service-carte{
  display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--rayon);padding:18px 18px 16px;
  transition:border-color var(--transition),transform var(--transition),box-shadow var(--transition);
}
.service-carte:hover{border-color:var(--obsidian);transform:translateY(-2px);box-shadow:var(--ombre)}
.service-famille{
  font-family:var(--display);font-weight:600;font-size:.68rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);margin:0 0 8px;
}
.service-carte h3{font-size:1.05rem;margin:0 0 6px;line-height:1.25}
.service-carte h3 a{color:var(--ink)!important;text-decoration:none!important}
.service-carte h3 a::after{content:"";position:absolute;inset:0}
.service-carte{position:relative}
.service-accroche{font-size:.9rem;color:var(--ink-2);margin:0 0 14px;line-height:1.45}
.service-prix{margin:auto 0 10px;font-family:var(--display);font-weight:800;font-size:1.15rem;color:var(--ink)}
.service-prix small{display:block;font-family:var(--sans);font-weight:500;font-size:.72rem;color:var(--muted)}
.service-lien{font-size:.86rem;font-weight:600;color:var(--coral-fonce)!important;text-decoration:none!important}
.service-carte:hover .service-lien{text-decoration:underline!important}
@media (max-width:900px){.services-grille{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.services-grille{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.service-carte:hover{transform:none}}

/* ═══════════════════════════════════════════════════════════════════════
   32. MOUVEMENT — profondeur, rythme, micro-interactions.
   Règle de base : aucune animation ne doit retarder la lecture. Tout ce qui
   suit est décoratif, se neutralise sous prefers-reduced-motion, et n'anime
   que des propriétés composées (opacity, transform) pour rester fluide.
   ═══════════════════════════════════════════════════════════════════════ */

/* Transition douce entre les pages, là où le navigateur la gère. */
@view-transition{navigation:auto}

/* ── Barre de progression de lecture ────────────────────────────────── */
.progression-lecture{
  position:fixed;top:0;left:0;height:2px;width:100%;z-index:60;
  transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--coral),var(--coral-clair));
  pointer-events:none;
}

/* ── Révélations échelonnées dans une même grille ───────────────────── */
.parcours .apparait:nth-child(2),.solutions .apparait:nth-child(2),
.services-grille .apparait:nth-child(2),.echelle li:nth-child(2),
.engagements .apparait:nth-child(2),.preuves .apparait:nth-child(2){transition-delay:.06s}
.parcours .apparait:nth-child(3),.solutions .apparait:nth-child(3),
.services-grille .apparait:nth-child(3),.echelle li:nth-child(3),
.engagements .apparait:nth-child(3),.preuves .apparait:nth-child(3){transition-delay:.12s}
.parcours .apparait:nth-child(n+4),.solutions .apparait:nth-child(n+4),
.services-grille .apparait:nth-child(n+4),.echelle li:nth-child(n+4),
.engagements .apparait:nth-child(n+4),.preuves .apparait:nth-child(n+4){transition-delay:.18s}

/* ── Micro-interactions ─────────────────────────────────────────────── */
.btn{transition:transform var(--transition),background var(--transition),border-color var(--transition),color var(--transition),box-shadow var(--transition)}
.btn-plein:hover{transform:translateY(-1px)}
.btn-plein:active,.btn-vide:active{transform:translateY(0)}
.solution-pied span,.service-lien,.lt-lien,.probleme span{transition:letter-spacing var(--transition)}
.solution:hover .solution-pied span,.service-carte:hover .service-lien{letter-spacing:.012em}
.filtre-puce{transition:transform var(--transition),border-color var(--transition),background var(--transition),color var(--transition)}
.filtre-puce:active{transform:scale(.97)}

@media (prefers-reduced-motion:reduce){
  .progression-lecture{display:none}
  .btn-plein:hover{transform:none}
  .apparait{transition-delay:0s!important}
}

/* Film de présentation posé dans une page */
.film-rosa{display:block;width:100%;height:auto;margin:28px 0 14px;border-radius:18px;background:#0B0C0E;
  box-shadow:0 30px 70px -30px rgba(11,12,14,.5)}
.film-note{font-size:.9rem;color:var(--encre-3,#6D7480);margin:0}


/* ── Taille minimale des cibles ────────────────────────────────────────────
   WCAG 2.2 exige 24 px pour une cible qui n'est pas un lien de texte en
   ligne. Ces liens-ci sont l'action de leur carte : ils mesuraient 23 px,
   il en manquait un seul. Le lien « Espace client » de l'en-tête tombait
   à 16 px sur téléphone.
   Mesuré par outils-site/audit_navigateur.py. */
.lt-lien,.offre-lien,.carte-lien,.service-lien,.apercu-suite a{display:inline-flex;align-items:center;min-height:24px}
.lien-client,.lien-menu-client{display:inline-flex;align-items:center;min-height:24px;min-width:24px}


/* ── Mentions légales : ce qui attend encore une décision humaine ──────
   Volontairement visible. Un placeholder discret finit en ligne sans que
   personne ne le voie, et une mention légale fausse coûte plus cher qu'une
   mention manquante. */
.action-requise{
  display:inline-block;background:#fff4e5;color:#7a4100;
  border:1px solid #f0b37e;border-radius:6px;
  padding:2px 8px;font-size:.88em;font-weight:600;
}
.encadre-action{
  background:#fff4e5;border-left:4px solid #f0b37e;
  padding:12px 16px;border-radius:8px;margin:16px 0;
}
@media (prefers-color-scheme:dark){
  .action-requise{background:#3a2a10;color:#ffce8a;border-color:#8a6321}
  .encadre-action{background:#3a2a10;border-left-color:#8a6321}
}


/* ── Positionnement commercial ────────────────────────────────────────
   Une promesse verifiable : « parmi les plus competitifs », jamais « le
   moins cher ». La seconde affirmation demanderait un releve complet du
   marche francais, que personne ne possede. */
.positionnement-rosa{
  margin:14px 0 0;padding:14px 18px;border-radius:12px;
  background:color-mix(in srgb, var(--accent, #b3005e) 7%, transparent);
  border-left:3px solid var(--accent, #b3005e);
  font-size:.98rem;line-height:1.55;max-width:62ch;
}
.positionnement-rosa strong{font-family:var(--display);font-size:1.06rem}


/* ── Le travail derrière le prix ──────────────────────────────────────
   Un visiteur qui lit « 1 300 € » ne sait pas s'il paie cher. Le même qui
   lit « environ 18 heures de travail » peut diviser lui-même. On donne le
   fait, pas un argument. */
.prix-pourquoi{
  margin:2px 0 0;font-size:.82rem;line-height:1.3;
  color:var(--ink-2);opacity:.85;font-variant-numeric:tabular-nums;
}
.prix-pourquoi:empty{display:none}
.lt-prix .prix-pourquoi,.offre-prix .prix-pourquoi{margin-top:4px}

/* Slogan officiel (D13) : sous le titre de l'accueil et dans le pied de toutes les pages. */
.nh-slogan{margin:-6px 0 22px;font-size:clamp(1.02rem,1.5vw,1.2rem);font-weight:600;letter-spacing:-.01em;color:inherit;opacity:.94}
.nh-slogan strong{color:var(--coral,#FF3B5C);font-weight:700}

/* Offre de bienvenue (D3, D9, D16) : un seul composant, affiché seulement si ROSA Gestion publie une offre éligible. */
.bienvenue{margin:18px 0 0}
.bienvenue a{display:inline-flex;flex-direction:column;align-items:flex-start;gap:4px;padding:14px 20px;border-radius:14px;border:1px solid rgba(255,59,92,.45);background:rgba(255,59,92,.08);color:inherit;text-decoration:none;transition:border-color .2s,background .2s}
.bienvenue a:hover,.bienvenue a:focus-visible{border-color:var(--coral,#FF3B5C);background:rgba(255,59,92,.14)}
.bienvenue strong{font-weight:700}
.bienvenue span{font-size:.9em;opacity:.8}
.abo-grille{display:grid;gap:22px}
.abo-carte{border:1px solid var(--trait,#E3E5E9);border-radius:18px;padding:24px;background:#fff}
.abo-nom{margin:0 0 4px;font-size:1.25rem}
.abo-desc{margin:0 0 6px;color:var(--ink-2,#33363C)}
.abo-mensualite{margin:0 0 16px;font-weight:700;font-variant-numeric:tabular-nums}
.abo-durees{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
.abo-duree{border:1px solid var(--trait,#E3E5E9);border-radius:14px;padding:18px;display:flex;flex-direction:column;gap:6px}
.abo-duree-titre{margin:0;font-weight:700}
.abo-offert{margin:0;color:var(--coral-fonce,#E11D3C);font-weight:700}
.abo-suite{margin:0;color:var(--ink-2,#33363C);font-variant-numeric:tabular-nums}
.abo-total{margin:6px 0 10px;display:flex;justify-content:space-between;gap:12px;border-top:1px solid var(--trait,#E3E5E9);padding-top:10px;font-variant-numeric:tabular-nums}
.abo-choisir{align-self:flex-start}
.abo-note{margin:18px 0 0;font-size:.88rem;color:var(--ink-2,#33363C)}

/* Les ancres ne doivent pas passer sous l'en-tête collant. */
section,details.bloc-legal,#principal,:target{scroll-margin-top:calc(var(--h-entete) + 24px)}

/* ── Un seul appel à l'action principal ───────────────────────────────────
   Sur petit écran, la barre d'accès rapide n'apparaît qu'après le premier
   écran : elle ne double pas le bouton principal du héros. Sans JavaScript,
   elle reste visible. */
@media (max-width:720px){
  html:not(.sans-js) .cta-sticky{transition:transform .3s ease,visibility .3s}
  html:not(.sans-js) .cta-sticky:not(.cta-visible){transform:translateY(120%);visibility:hidden}
}

/* ── D21 : les prix vivent sur la page Tarifs ─────────────────────────────
   Lien discret, sous le bouton de devis de chaque offre. */
.offre-lien-tarif{
  display:block;margin-top:4px;padding:11px 0;min-height:44px;text-align:center;font-size:.9rem;font-weight:600;
  color:var(--coral-fonce)!important;text-decoration:underline;text-underline-offset:3px;
}
.offre-lien-tarif:hover{color:var(--ink)!important}
/* Bénéfice court à la place d'un montant, dans les listes de services. */
.parcours-liens b.atout,.tarifs-autres b.atout{white-space:normal;text-align:right;font-weight:600}
.tarifs-autres b.atout{font-family:var(--sans);font-size:.85rem;color:var(--muted)}
.service-atout{margin:auto 0 10px;font-size:.88rem;font-weight:600;color:var(--ink-2)}
.solution-pied .atout{font-family:var(--sans);font-size:.85rem;font-weight:600;color:var(--ink-2)}
/* Orientation de l'accueil (remplace l'ancienne estimation chiffrée). */
.calc-detail a{color:var(--coral-fonce);font-weight:600}
.orientation-liste{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:10px}
.orientation-liste li{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;padding:10px 0;border-bottom:1px solid var(--line)}
.orientation-liste a{color:var(--coral-fonce);font-weight:600;white-space:nowrap}
.offre-offert{font-family:var(--display);font-weight:800;font-size:1.5rem;line-height:1;color:var(--coral-fonce);margin:0 0 6px}
/* Bouton du résultat d'orientation (fond obsidian) : même CTA plein corail que dans le héros. */
.calc-sortie .btn-plein{background:var(--coral)!important;color:var(--obsidian)!important;border:2px solid var(--coral)!important}
.calc-sortie .btn-plein:hover{background:var(--coral-clair)!important;border-color:var(--coral-clair)!important}
/* Le parcours guidé est l'unique enfant de la grille .calc : une seule colonne, qui ne déborde jamais
   (auparavant : moitié gauche sur ordinateur, 34 px hors cadre à 375 px). */
.calc.calc-guide{grid-template-columns:minmax(0,1fr)}
.calc-guide .config{min-width:0}
/* Barre mobile : le libellé « Demander un devis » tient dans le bouton dès 320 px. */
@media (max-width:720px){
  .cta-sticky .btn{padding:11px 14px!important;font-size:.88rem!important}
  .cta-sticky .txt{font-size:.78rem}
}


/* ── Pages juridiques en projet (confidentialite.html, conditions-utilisation.html) ──────────────
   Bandeau « Projet » visible et non masquable, champs à compléter surlignés (contraste AA en clair),
   tableaux lisibles sur mobile : chaque tableau défile dans sa propre région focalisable, la page
   elle-même ne défile jamais horizontalement. */
.bandeau-projet{
  background:#fff4e5;color:#5c3100;border:1px solid #f0b37e;border-left:6px solid #b35c00;
  border-radius:10px;padding:14px 18px;margin:0 0 22px;font-size:.98rem;line-height:1.55;
}
.bandeau-projet strong{color:#5c3100}
mark.a-completer{background:#fff1b8;color:#3d2c00;border-bottom:2px dashed #8a5f00;padding:0 3px;border-radius:3px}
.page-juridique .version{font-weight:600;color:var(--texte)}
.page-juridique nav ol,.page-juridique ol{list-style:decimal;padding-left:22px;margin-bottom:14px}
.page-juridique ol li{font-size:.95rem;color:var(--texte-doux);margin-bottom:6px}
.page-juridique h2{margin-top:38px}
.tableau-defilant{overflow-x:auto;margin:14px 0 22px;border-radius:8px;max-width:100%}
.tableau-defilant:focus-visible{outline:3px solid var(--principale);outline-offset:2px}
.tableau-defilant table{width:100%;border-collapse:collapse;margin:0;font-size:.9rem;background:var(--carte)}
.tableau-large table{min-width:760px}
.tableau-defilant caption{text-align:left;font-weight:600;color:var(--texte);padding:0 0 8px;font-size:.92rem;caption-side:top}
.tableau-defilant th,.tableau-defilant td{border:1px solid var(--trait);padding:8px 10px;text-align:left;vertical-align:top;color:var(--texte);overflow-wrap:anywhere}
.tableau-defilant thead th{background:#f3f3f4}
.tableau-defilant code{font-size:.92em;overflow-wrap:anywhere}

/* Clause des conditions générales de vente en cours de révision juridique : signalée, pas réécrite. */
.clause-revision{
  background:#fff4e5;border:1px solid #f0b37e;border-left:4px solid #b35c00;border-radius:8px;
  padding:12px 16px;margin:10px 0 18px;color:#4a2800;
}
.clause-revision strong{color:#4a2800}

/* Piège à robots du formulaire de contact : hors de l'écran sans display:none (certains robots
   ignorent les champs non affichés), retiré de la tabulation et de l'arbre d'accessibilité. */
.piege-robots{
  position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;
  clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;white-space:nowrap!important;
  border:0!important;padding:0!important;margin:-1px!important;
}

/* Films : le cadre est réservé avant le chargement (pas de décalage de mise en page). */
video.film-rosa{aspect-ratio:16/9;height:auto;background:#0B0C0E}

/* ── Polices de repli à métriques ajustées (CLS) ──────────────────────────────────────────────
   Tant que Inter ou Poppins ne sont pas arrivées (font-display:swap), le texte s'affiche dans une
   police locale (Arial) recalée sur leurs proportions : au remplacement, les lignes ne bougent
   presque pas. Aucune requête réseau : local() lit une police déjà installée sur l'appareil. */
@font-face{font-family:'Inter repli';src:local('Arial'),local('ArialMT'),local('Helvetica');font-weight:100 900;
  size-adjust:107.12%;ascent-override:90.44%;descent-override:22.52%;line-gap-override:0%}
@font-face{font-family:'Poppins repli';src:local('Arial'),local('ArialMT'),local('Helvetica');font-weight:100 900;
  size-adjust:112.16%;ascent-override:93.62%;descent-override:31.21%;line-gap-override:8.92%}
:root{
  --display:'Poppins','Poppins repli',system-ui,-apple-system,'Segoe UI',sans-serif;
  --sans:'Inter','Inter repli',system-ui,-apple-system,'Segoe UI',sans-serif;
}

/* ═══════════════════════════════════════════════════════════════════════
   40. SYSTÈME DE MISE EN PAGE — refonte du 13/10/2026 (mission D22)
   Une seule grille et une seule échelle d'espacement, des composants
   réutilisables : section (.section + .tete), carte, boutons principal
   (.btn-plein, « Demander un devis » seulement) et secondaire (.btn-vide),
   badge (.rosa-badge). Remplace la barre d'onglets, le menu burger, le
   bandeau de slogan séparé et l'ancien héros (règles retirées plus haut).
   ═══════════════════════════════════════════════════════════════════════ */
:root{
  /* Échelle d'espacement unique (base 4 px) */
  --esp-1:4px;--esp-2:8px;--esp-3:12px;--esp-4:16px;--esp-5:24px;
  --esp-6:32px;--esp-7:48px;--esp-8:64px;--esp-9:96px;
  /* Grille */
  --gouttiere:clamp(16px,4vw,32px);          /* marges latérales : 16 px sur téléphone */
  --ecart-grille:clamp(16px,2.2vw,24px);
  --rythme-section:clamp(56px,8vw,104px);
  --rayon-carte:18px;
  /* En-tête */
  --h-entete:76px;
  --logo-taille:38px;
  --logo-ecart:10px;
  --logo-texte:1.56rem;
}
@media (max-width:640px){
  :root{--h-entete:88px;--logo-taille:32px;--logo-ecart:9px;--logo-texte:1.36rem}
}

/* ── Grille et sections ─────────────────────────────────────────────── */
.contenu{padding-inline:var(--gouttiere)}
.section{padding-block:var(--rythme-section)}
.tete{margin:0 0 var(--esp-7)}
.tete h2{margin:var(--esp-3) 0 var(--esp-3)}
.apercu-suite{margin:var(--esp-6) 0 0}
.grille{display:grid;gap:var(--ecart-grille);list-style:none;margin:0;padding:0}
.grille > li{margin:0}
.grille-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:960px){.grille-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.grille-3{grid-template-columns:minmax(0,1fr)}}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--esp-3) var(--esp-5)}
.lien-discret{font-weight:600;color:inherit;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.lien-discret:hover{text-decoration-thickness:2px}
.accueil-heros .contenu a.lien-discret:not(.btn),.nuit .contenu a.lien-discret:not(.btn){color:var(--pure-white)}
.accueil-heros .contenu a.lien-discret:not(.btn):hover,.nuit .contenu a.lien-discret:not(.btn):hover{color:var(--coral-clair)}

/* ── En-tête ────────────────────────────────────────────────────────── */
.entete{
  position:sticky;top:0;z-index:100;
  background:var(--pure-white);
  backdrop-filter:none;-webkit-backdrop-filter:none;
  border-bottom:1px solid var(--line);box-shadow:none;
}
.entete.collee{box-shadow:0 6px 24px -12px rgba(11,12,14,.18)}
.entete .barre{
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;
  column-gap:var(--esp-4);height:auto;min-height:var(--h-entete);padding-block:var(--esp-3);
}

/* Bloc marque : monogramme et « ROSA. » sur la même ligne (centres alignés sur la hauteur des
   capitales), slogan directement sous ROSA, aligné sur le R. */
.marque-bloc{min-width:0;display:flex;flex-direction:column;align-items:flex-start}
.logo{display:inline-flex;align-items:center;gap:var(--logo-ecart);text-decoration:none;color:var(--ink);min-width:max-content}
.logo-marque{width:var(--logo-taille);height:var(--logo-taille);flex:0 0 auto;border-radius:0}
.logo-mot{
  display:inline-block;padding:0;gap:0;
  font-family:var(--display);font-weight:700;font-size:var(--logo-texte);
  line-height:1;letter-spacing:.03em;color:var(--ink);white-space:nowrap;
}
/* Point corail COLLÉ à la dernière lettre : l'espacement de lettre qui suit le A (.03em) et son
   approche droite (mesurée dans Poppins 700) sont repris par une marge négative en em, donc
   identique à toutes les tailles. Il repose sur la ligne de base, comme un point typographique. */
.logo-point{
  display:inline-block;width:.2em;height:.2em;border-radius:50%;
  background:var(--coral);vertical-align:baseline;
  margin-left:calc(-.03em - var(--approche-a, .028em));
}
.entete-slogan{
  margin:var(--esp-1) 0 0 calc(var(--logo-taille) + var(--logo-ecart));
  font-family:var(--sans);font-size:clamp(.72rem,.66rem + .28vw,.82rem);font-weight:500;
  line-height:1.3;letter-spacing:.005em;color:var(--ink-2);text-wrap:balance;
}
.entete-slogan strong{font-family:var(--display);font-weight:700;color:var(--g-700);white-space:nowrap}

.nav-actions{display:flex;align-items:center;gap:var(--esp-2);margin:0}
.lien-client{
  display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 var(--esp-3);
  border-radius:999px;font-family:var(--sans);font-size:.92rem;font-weight:600;
  color:var(--ink-2);text-decoration:none;white-space:nowrap;
}
.lien-client::before{
  content:"";width:18px;height:18px;flex:0 0 auto;background:currentColor;
  -webkit-mask:var(--icone-compte) center/contain no-repeat;mask:var(--icone-compte) center/contain no-repeat;
}
.entete .contenu a.lien-client:not(.btn){color:var(--ink-2)}
.entete .contenu a.lien-client:not(.btn):hover{color:var(--g-700);background:var(--surface-2)}
.btn-entete{display:none;padding:10px 18px;font-size:.9rem;white-space:nowrap}
@media (min-width:1100px){.btn-entete{display:inline-flex}}

.bouton-menu{
  display:inline-flex;align-items:center;gap:var(--esp-2);min-height:44px;padding:0 var(--esp-4);
  border:1.5px solid var(--line-forte);border-radius:999px;background:var(--pure-white);
  font-family:var(--display);font-size:.92rem;font-weight:600;line-height:1;color:var(--ink);
  cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:border-color var(--transition),background var(--transition);
}
.bouton-menu:hover,.bouton-menu[aria-expanded="true"]{border-color:var(--obsidian)}
.bouton-menu-icone{position:relative;display:inline-block;width:16px;height:2px;background:currentColor;border-radius:2px;transition:background .2s}
.bouton-menu-icone::before,.bouton-menu-icone::after{
  content:"";position:absolute;left:0;width:16px;height:2px;border-radius:2px;background:currentColor;transition:transform .2s ease;
}
.bouton-menu-icone::before{top:-5px}
.bouton-menu-icone::after{top:5px}
.bouton-menu[aria-expanded="true"] .bouton-menu-icone{background:transparent}
.bouton-menu[aria-expanded="true"] .bouton-menu-icone::before{transform:translateY(5px) rotate(45deg)}
.bouton-menu[aria-expanded="true"] .bouton-menu-icone::after{transform:translateY(-5px) rotate(-45deg)}
/* Sans JavaScript : le lien « Menu » remplace le bouton. */
html:not(.sans-js) .bouton-menu-sans-js{display:none}
.sans-js #bouton-menu{display:none}

/* Téléphone : le slogan court sous ROSA sur toute la largeur de l'en-tête ; « Espace client » garde
   son icône (nom accessible conservé). */
@media (max-width:640px){
  .entete .barre{grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;row-gap:0}
  .marque-bloc{grid-column:1 / -1;grid-row:1 / 3}
  .nav-actions{grid-column:2;grid-row:1;align-self:start;min-height:var(--logo-taille)}
  .marque-bloc .logo{min-height:44px}
}
@media (max-width:480px){
  .lien-client{padding:0;width:44px;justify-content:center}
  .lien-client span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;margin:-1px}
  .bouton-menu{padding:0 var(--esp-3)}
}

/* ── Menu à la demande ──────────────────────────────────────────────── */
.menu-panneau{
  display:none;position:absolute;left:0;right:0;top:100%;z-index:99;
  background:var(--pure-white);border-bottom:1px solid var(--line);
  box-shadow:0 30px 60px -20px rgba(11,12,14,.28);
  max-height:calc(100vh - var(--h-entete));max-height:calc(100dvh - var(--h-entete));
  overflow-y:auto;overscroll-behavior:contain;
}
.menu-panneau.ouvert,.sans-js .menu-panneau:target{display:block}
.menu-panneau.ouvert{animation:menuEntree .22s cubic-bezier(.22,.8,.28,1)}
@keyframes menuEntree{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.menu-grille{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--esp-6);padding-block:var(--esp-6) var(--esp-7)}
@media (max-width:760px){.menu-grille{grid-template-columns:minmax(0,1fr);gap:var(--esp-5);padding-block:var(--esp-5) var(--esp-6)}}
.menu-titre{
  margin:0 0 var(--esp-2);font-family:var(--display);font-size:.72rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
}
.menu-groupe ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.menu-panneau .menu-groupe a:not(.btn){
  display:flex;align-items:center;min-height:44px;padding:var(--esp-2) var(--esp-3);margin-inline:calc(-1 * var(--esp-3));
  border-radius:10px;font-family:var(--sans);font-size:1rem;font-weight:500;color:var(--ink);text-decoration:none;
}
.menu-panneau .menu-groupe a:not(.btn):hover{background:var(--surface-2);color:var(--ink)}
.menu-panneau .menu-groupe a[aria-current="page"]:not(.btn){color:var(--g-700);font-weight:700}
.menu-panneau .menu-groupe a[aria-current="page"]:not(.btn)::before{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--coral);margin-right:var(--esp-2);flex:0 0 auto;
}
.menu-devis{margin-top:var(--esp-5)}
.menu-fermer-sans-js{display:none}
.sans-js .menu-fermer-sans-js{display:block;padding:0 var(--gouttiere) var(--esp-5);font-weight:600;color:var(--g-700)}
@media (prefers-reduced-motion:reduce){.menu-panneau.ouvert{animation:none}}

/* ── Pied de page ───────────────────────────────────────────────────── */
.pied{background:var(--obsidian);color:var(--ink-inv-2);padding:var(--esp-8) 0 var(--esp-6);font-size:.92rem}
.pied-grille{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:var(--esp-6);margin:0 0 var(--esp-7)}
@media (max-width:960px){.pied-grille{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.pied-grille{grid-template-columns:minmax(0,1fr);gap:var(--esp-5)}}
.pied .logo{margin:0 0 var(--esp-3);color:var(--pure-white)}
.pied .logo-mot{color:var(--pure-white)}
.pied p{color:var(--muted-inv);max-width:40ch;margin:0 0 var(--esp-3)}
.pied .pied-slogan{color:var(--ink-inv-2);font-weight:600}
.pied .pied-slogan strong{color:var(--coral);font-family:var(--display);white-space:nowrap}
.pied h2{margin:0 0 var(--esp-3);font-family:var(--display);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--pure-white)}
.pied ul{list-style:none;margin:0;padding:0}
.pied li{margin:0 0 var(--esp-2);color:var(--muted-inv)}
.pied .contenu a:not(.btn):not(.xlink){color:var(--ink-inv-2);text-decoration:none}
.pied .contenu a:not(.btn):not(.xlink):hover{color:var(--pure-white);text-decoration:underline;text-underline-offset:3px}
.pied-bas{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--esp-3) var(--esp-6);
  border-top:1px solid var(--line-inv);padding-top:var(--esp-5);
}
.pied-legal{display:flex;flex-wrap:wrap;gap:var(--esp-1) var(--esp-5)}
.pied-legal li{margin:0}
.pied-legal a{display:inline-flex;align-items:center;min-height:32px;font-size:.86rem}
.pied .pied-mentions{margin:0;font-size:.84rem;max-width:none}

/* ── Accueil — A. Héros ─────────────────────────────────────────────── */
.accueil-heros{
  position:relative;isolation:isolate;overflow:hidden;
  background:var(--obsidian);color:var(--pure-white);
  padding-block:clamp(40px,6vw,88px) clamp(56px,8vw,112px);
}
.accueil-heros::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  width:min(900px,120vw);aspect-ratio:1;right:-22%;top:-38%;
  background:radial-gradient(circle,rgba(255,59,92,.16),transparent 62%);
}
.accueil-heros-grille{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(32px,5vw,72px);align-items:center}
@media (max-width:960px){.accueil-heros-grille{grid-template-columns:minmax(0,1fr)}}
.accueil-heros .rosa-badge{margin-bottom:var(--esp-5)}
.accueil-heros h1{
  margin:0 0 var(--esp-4);max-width:15ch;
  font-family:var(--display);font-weight:800;font-size:clamp(2.15rem,1.25rem + 3.5vw,3.9rem);
  line-height:1.03;letter-spacing:-.035em;color:var(--pure-white);
}
.accueil-heros h1 em{font-style:normal;font-weight:800;color:var(--coral)!important;-webkit-text-fill-color:var(--coral)!important}
.accueil-heros .nh-slogan{margin:0 0 var(--esp-4)}
.accueil-heros-lead{margin:0 0 var(--esp-6);max-width:44ch;font-size:clamp(1.02rem,.96rem + .3vw,1.17rem);line-height:1.6;color:var(--ink-inv-2)}
.accueil-heros .btn-plein{padding:15px 28px;font-size:1rem}
.accueil-preuves{display:flex;flex-wrap:wrap;gap:var(--esp-2) var(--esp-5);list-style:none;margin:var(--esp-6) 0 0;padding:var(--esp-5) 0 0;border-top:1px solid var(--line-inv)}
.accueil-preuves li{display:flex;align-items:center;gap:var(--esp-2);font-size:.9rem;color:var(--ink-inv-2)}
.accueil-preuves li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--coral);flex:0 0 auto}

.accueil-heros-visuel{position:relative;padding:0 0 var(--esp-6) 0}
.cadre-navigateur{
  position:relative;margin:0;border-radius:16px;overflow:hidden;background:var(--surface-nuit);
  border:1px solid rgba(255,255,255,.12);box-shadow:0 44px 90px -36px rgba(0,0,0,.8);
}
.cadre-barre{display:flex;align-items:center;gap:6px;height:34px;padding:0 var(--esp-4);background:var(--surface-nuit-2);border-bottom:1px solid var(--line-inv)}
.cadre-barre i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.22)}
.cadre-barre span{margin-left:var(--esp-3);font-size:.72rem;color:var(--muted-inv)}
.cadre-ecran{position:relative;aspect-ratio:16/10;overflow:hidden}
.cadre-ecran img{display:block;width:100%;height:100%;object-fit:cover}
.cadre-site{
  position:absolute;left:0;right:0;bottom:0;display:grid;justify-items:start;gap:6px;
  padding:clamp(16px,3vw,28px);background:linear-gradient(180deg,transparent,rgba(11,12,14,.9) 70%);color:var(--pure-white);
}
.cadre-site b{font-family:var(--display);font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#E8B64C}
.cadre-site strong{font-family:var(--display);font-size:clamp(1rem,.8rem + .9vw,1.45rem);font-weight:700;line-height:1.15;max-width:24ch;color:var(--pure-white)!important}
.cadre-site span{margin-top:var(--esp-1);padding:7px 14px;border-radius:999px;background:#B4542A;font-size:.78rem;font-weight:600}
.cadre-navigateur figcaption,.vignette-3d figcaption,.carte-univers-etiquette{
  position:absolute;display:inline-flex;align-items:center;padding:5px 11px;border-radius:999px;
  background:rgba(11,12,14,.82);color:var(--pure-white);font-family:var(--display);font-size:.66rem;font-weight:600;letter-spacing:.06em;
}
.cadre-navigateur figcaption{top:46px;right:12px}
.vignette-3d{
  display:none;position:absolute;right:-28px;bottom:0;width:40%;margin:0;border-radius:14px;overflow:hidden;
  border:4px solid var(--obsidian);box-shadow:0 30px 60px -20px rgba(0,0,0,.85);aspect-ratio:16/10;background:var(--surface-nuit);
}
.vignette-3d img{display:block;width:100%;height:100%;object-fit:cover}
.vignette-3d figcaption{left:10px;bottom:10px}
.cadre-site{padding-right:44%}
@media (max-width:1099px){.cadre-site{padding-right:clamp(16px,3vw,28px)}}
@media (min-width:1100px){.vignette-3d{display:block;animation:flotte 7s ease-in-out infinite}}
@keyframes flotte{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@media (max-width:960px){.accueil-heros-visuel{padding:0}}

/* ── Accueil — B. Cartes immersives ─────────────────────────────────── */
.carte-univers{
  display:flex;flex-direction:column;height:100%;overflow:hidden;background:var(--pure-white);
  border:1px solid var(--line);border-radius:var(--rayon-carte);
  transition:transform .35s cubic-bezier(.22,.8,.28,1),box-shadow .35s ease,border-color .35s ease;
}
.carte-univers:hover{transform:translateY(-4px);box-shadow:var(--ombre-forte);border-color:var(--line-forte)}
.carte-univers-visuel{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--obsidian)}
.carte-univers-visuel img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.carte-univers:hover .carte-univers-visuel img,.carte-univers:focus-within .carte-univers-visuel img{transform:scale(1.05)}
.carte-univers-etiquette{left:12px;bottom:12px}
.carte-univers-visuel img.cadrage-gauche{object-position:12% 50%}
.carte-univers-corps{display:flex;flex-direction:column;flex:1;padding:var(--esp-5)}
.carte-univers-corps h3{margin:0 0 var(--esp-2);font-size:1.4rem}
.carte-univers-corps p{flex:1;margin:0 0 var(--esp-5);color:var(--ink-2);font-size:1rem;line-height:1.55}
.carte-univers-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--esp-3) var(--esp-5);margin-top:auto}
.carte-univers-actions .btn{padding:11px 20px;font-size:.92rem}
.contenu a.lien-fleche:not(.btn){font-weight:600;color:var(--g-700);text-decoration:none;white-space:nowrap}
.contenu a.lien-fleche:not(.btn)::after{content:"→";margin-left:.35em;display:inline-block;transition:transform var(--transition)}
.contenu a.lien-fleche:not(.btn):hover{text-decoration:underline;text-underline-offset:3px}
.contenu a.lien-fleche:not(.btn):hover::after{transform:translateX(3px)}
/* Tablette : trois cartes empilées, image à gauche (pas de carte orpheline sur deux colonnes). */
@media (min-width:641px) and (max-width:960px){
  .grille-univers{grid-template-columns:minmax(0,1fr)}
  .grille-univers .carte-univers{flex-direction:row}
  .grille-univers .carte-univers-visuel{flex:0 0 42%;aspect-ratio:auto;min-height:220px}
}

/* Bandeau compact « Configurez votre projet. » sous les trois cartes */
.bandeau-configurateur{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--esp-4) var(--esp-6);
  margin-top:var(--esp-6);padding:var(--esp-6) clamp(20px,4vw,40px);border-radius:var(--rayon-carte);
  background:var(--obsidian);color:var(--pure-white);position:relative;overflow:hidden;isolation:isolate;
}
.bandeau-configurateur::before{
  content:"";position:absolute;z-index:-1;inset:auto -10% -60% auto;width:420px;aspect-ratio:1;
  background:radial-gradient(circle,rgba(255,59,92,.22),transparent 65%);pointer-events:none;
}
.bandeau-configurateur h2{margin:0 0 var(--esp-2);font-size:clamp(1.4rem,1.1rem + 1.2vw,2rem);color:var(--pure-white)!important}
.bandeau-configurateur p{margin:0;max-width:52ch;color:var(--ink-inv-2)}
.bandeau-configurateur .btn{flex:0 0 auto}

/* ── Accueil — C. Demande de devis ──────────────────────────────────── */
.contact-intro h2{margin:var(--esp-3) 0 var(--esp-3)}
.section .contact-grille{margin-top:var(--esp-8)}
.contact-coordonnees{margin-top:var(--esp-5);padding-top:var(--esp-5);border-top:1px solid var(--line)}
.contact-coordonnees .coordonnees-ligne{flex-direction:column;gap:var(--esp-3)}
.contact-coordonnees .coordonnees-ligne .lib{color:var(--muted)!important}
.etapes-devis{list-style:none;counter-reset:etape;margin:var(--esp-5) 0;padding:0;display:grid;gap:var(--esp-3)}
.etapes-devis li{counter-increment:etape;display:grid;grid-template-columns:32px minmax(0,1fr);gap:var(--esp-3);align-items:start;color:var(--ink-2)}
.etapes-devis li::before{
  content:counter(etape);display:grid;place-items:center;width:32px;height:32px;border-radius:50%;
  background:var(--obsidian);color:var(--pure-white);font-family:var(--display);font-weight:700;font-size:.85rem;
}
.etapes-devis b{color:var(--ink)}
.contact-note{font-size:.92rem;color:var(--muted);margin:0}

/* ── Accueil — D. Possibilités ──────────────────────────────────────── */
.grille-possibilites{grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr))}
.contenu a.tuile:not(.btn){
  display:flex;flex-direction:column;gap:var(--esp-1);height:100%;padding:var(--esp-4) var(--esp-5);
  border:1px solid var(--line);border-radius:14px;background:var(--pure-white);color:var(--ink);text-decoration:none;
  transition:border-color var(--transition),transform var(--transition),box-shadow var(--transition);
}
.contenu a.tuile:not(.btn):hover{border-color:var(--obsidian);transform:translateY(-2px);box-shadow:var(--ombre);color:var(--ink)}
.tuile b{font-family:var(--display);font-size:1.02rem;font-weight:700;color:var(--ink)}
.tuile span{font-size:.9rem;line-height:1.45;color:var(--muted)}

/* ── Accueil — E. Confiance et contact ──────────────────────────────── */
.carte-engagement{height:100%;padding:var(--esp-5);border:1px solid var(--line-inv);border-radius:var(--rayon-carte);background:var(--surface-nuit)}
.carte-engagement h3{margin:0 0 var(--esp-2);font-size:1.08rem}
.carte-engagement p{margin:0;font-size:.95rem;line-height:1.55}
.confiance-contact{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--esp-5);
  margin-top:var(--esp-7);padding-top:var(--esp-6);border-top:1px solid var(--line-inv);
}
.coordonnees-ligne{display:flex;flex-wrap:wrap;gap:var(--esp-4) var(--esp-6);list-style:none;margin:0;padding:0}
.coordonnees-ligne li{display:flex;flex-direction:column;gap:2px;font-size:.95rem}
.coordonnees-ligne .lib{font-family:var(--display);font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-inv)!important}
.confiance-cta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--esp-3) var(--esp-5)}

/* ── Pages provisoires (configurateur, ROSA Pub) ────────────────────── */
.page-provisoire{min-height:min(60vh,560px)}
.carte-engagement-clair{height:100%;padding:var(--esp-5);border:1px solid var(--line);border-radius:var(--rayon-carte);background:var(--pure-white)}
.carte-engagement-clair h3{margin:0 0 var(--esp-2);font-size:1.15rem}
.carte-engagement-clair p{margin:0;color:var(--ink-2)}
[id^="famille="]{scroll-margin-top:calc(var(--h-entete) + 24px)}

/* ── Mouvement : tout se fige si le système le demande ──────────────── */
@media (prefers-reduced-motion:reduce){
  .vignette-3d{animation:none!important}
  .carte-univers,.carte-univers-visuel img,.contenu a.tuile:not(.btn){transition:none}
  .carte-univers:hover,.contenu a.tuile:not(.btn):hover{transform:none}
  .carte-univers:hover .carte-univers-visuel img,.carte-univers:focus-within .carte-univers-visuel img{transform:none}
}

/* Accueil : « Comment ça marche », démonstrations, objections (17/10/2026) */
.etapes-accueil{list-style:none;padding:0;counter-reset:none}
.etapes-accueil .etape-num{display:inline-grid;place-items:center;width:2.2rem;height:2.2rem;border-radius:50%;background:var(--coral);color:#fff;font-weight:700;margin-bottom:var(--esp-2)}
.demos-accueil{margin-top:var(--esp-7,3rem)}
.demos-accueil ul{list-style:none;padding:0}
.carte-demo{display:block;height:100%;padding:var(--esp-5);border:1px solid var(--line);border-radius:var(--rayon-carte);background:var(--pure-white);color:inherit;text-decoration:none;transition:border-color .2s,transform .2s}
.carte-demo:hover,.carte-demo:focus-visible{border-color:var(--coral);transform:translateY(-2px)}
.carte-demo strong{display:block;font-size:1.1rem;margin-bottom:var(--esp-2)}
.carte-demo span{color:var(--ink-2,#55595F)}
.objections-accueil{margin-top:var(--esp-7,3rem);max-width:52rem}
.objections-accueil details{border-bottom:1px solid var(--line);padding:var(--esp-3) 0}
.objections-accueil summary{cursor:pointer;font-weight:600}
.objections-accueil details p{margin:var(--esp-2) 0 0}
@media (prefers-reduced-motion:reduce){.carte-demo{transition:none}.carte-demo:hover{transform:none}}
.objections-accueil .apercu-suite{text-align:left;display:flex;flex-wrap:wrap;align-items:center;gap:var(--esp-4,1rem)}
.demos-accueil > .discret{margin-top:var(--esp-3,.75rem)}

/* ── Lisibilité (audit WCAG du 17/10/2026 : toutes les pages, bureau et mobile) ── */
/* Encadrés des mentions légales : couleur explicite (le texte blanc hérité était invisible sur fond crème). */
.encadre-action{color:#3A2A10}
.encadre-action a{color:#9E1530}
#informations-legales .a-remplir,.avis-a-completer{color:#3F444C}
.avis-a-completer a,#informations-legales .a-remplir a{color:#9E1530}
@media (prefers-color-scheme:dark){.encadre-action{color:#FFE7C2}.encadre-action a{color:#FFB3C0}}
/* Taille minimale 13 px pour tous les petits textes repérés (pied de page, badges, étiquettes, mentions). */
.pied h2,main small,.service-famille,.rosa-badge,.entete-slogan,.entete-slogan strong,.pub-etiquette,.etude-secteur,
.badge-demo,.lib,.carte-univers-etiquette,.accueil-heros figcaption,.xp-mention,.badge-bientot,.appercu-etiquette,.statut,
main small,.comparateur small,.offre-prix small,.solution-pied small,.demande small,.crm-kpi small,.cf-etiquette{
  font-size:max(.8125rem,1em)!important}
.pied h2,.rosa-badge{letter-spacing:.1em}
main .avis-a-completer,main .avis-a-completer strong,main .avis-a-completer p,#informations-legales .a-remplir{color:#3F444C}
main .avis-a-completer a,main .encadre-action a,#informations-legales .a-remplir a{color:#9E1530}
main p.avis-a-completer a,main p.avis-a-completer a:visited{color:#9E1530}
#informations-legales .avis-a-completer a,#informations-legales .encadre-action a{color:#9E1530}
.contenu a:not(.btn):not(.xlink){color:#C2163A}

/* Projets types : couverture photo, lien vers la démonstration, badge sur une ligne (17/10/2026) */
.etude-couverture{position:relative;margin:calc(-1 * var(--esp-5,1.5rem)) calc(-1 * var(--esp-5,1.5rem)) var(--esp-4,1rem);overflow:hidden;border-radius:var(--rayon-carte) var(--rayon-carte) 0 0;aspect-ratio:16/9}
.etude-couverture img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.etude:hover .etude-couverture img{transform:scale(1.04)}
.etude-couverture figcaption{position:absolute;left:12px;bottom:10px;padding:4px 10px;border-radius:999px;background:rgba(11,12,14,.78);color:#fff;font-size:.8125rem}
.etude-lien{margin:var(--esp-3,.75rem) 0}
.badge-demo{white-space:nowrap;letter-spacing:.06em}
@media (prefers-reduced-motion:reduce){.etude-couverture img{transition:none}.etude:hover .etude-couverture img{transform:none}}
.etude-tete{flex-wrap:wrap;gap:8px 12px}.etude-tete .badge-demo{letter-spacing:.04em;padding:4px 10px;align-self:flex-start}

/* Configurateur : formules d'acquisition d'un site (18/10/2026) */
.cf-formules{border:1px solid var(--ligne,#E3E5EA);border-radius:14px;padding:16px 18px;margin:0 0 18px}
.cf-formules .cf-legende{font-weight:700;padding:0 6px}
.cf-formule{display:flex;gap:12px;align-items:flex-start;padding:12px;border-radius:10px;cursor:pointer}
.cf-formule:hover{background:rgba(255,59,92,.06)}
.cf-formule input{margin-top:.25em;accent-color:#C2163A;flex:0 0 auto}
.cf-formule-texte{display:flex;flex-direction:column;gap:2px;font-size:.9375rem}
.cf-formule-detail{display:grid;grid-template-columns:minmax(120px,auto) 1fr;gap:6px 14px;margin:10px 0 0;font-size:.9375rem}
.cf-formule-detail dt{font-weight:600}
.cf-formule-detail dd{margin:0}
@media (max-width:560px){.cf-formule-detail{grid-template-columns:1fr}.cf-formule-detail dd{margin-bottom:6px}}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════
   RETOUCHE DESIGN DU 20/10/2026 — couche de finition (profondeur, mouvement discret, pictogrammes).
   Entièrement réversible : supprimer ce bloc. Respecte prefers-reduced-motion.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════ */
/* Héros : trame lumineuse et halo qui respire */
.accueil-heros::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(640px 420px at 12% 112%,rgba(255,59,92,.13),transparent 70%),
    linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px) 0 0/56px 56px,
    linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px) 0 0/56px 56px;
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 68% 42%,#000 25%,transparent 78%);
          mask-image:radial-gradient(ellipse 80% 70% at 68% 42%,#000 25%,transparent 78%);
}
.accueil-heros::before{animation:rosa-halo 16s ease-in-out infinite alternate}
@keyframes rosa-halo{from{transform:translate(0,0) scale(1)}to{transform:translate(-7%,9%) scale(1.14)}}
/* Bouton principal : lueur */
.accueil-heros .btn-plein{box-shadow:0 12px 32px -12px rgba(255,59,92,.75)}
.accueil-heros .btn-plein:hover{box-shadow:0 16px 40px -12px rgba(255,59,92,.9)}
/* Démonstration : légère perspective qui se redresse au survol, liseré lumineux */
.cadre-navigateur{
  box-shadow:0 0 0 1px rgba(255,59,92,.16),0 44px 90px -36px rgba(0,0,0,.85),0 0 90px -24px rgba(255,59,92,.38);
  transform:perspective(1500px) rotateY(-6deg) rotateX(2deg);transform-origin:60% 50%;
  transition:transform .7s cubic-bezier(.22,.8,.28,1),box-shadow .7s ease;
}
.accueil-heros-visuel:hover .cadre-navigateur{transform:perspective(1500px) rotateY(0) rotateX(0)}
.vignette-3d{right:-10px;border-color:#141519;box-shadow:0 0 0 1px rgba(255,59,92,.32),0 30px 60px -20px rgba(0,0,0,.9)}
@media (max-width:960px){.cadre-navigateur{transform:none}}
/* Preuves : pastilles avec coche */
.accueil-preuves{gap:10px;border-top:0;padding-top:0}
.accueil-preuves li{padding:7px 14px 7px 9px;border:1px solid var(--line-inv);border-radius:999px;background:rgba(255,255,255,.045)}
.accueil-preuves li::before{
  content:"\2713";width:18px;height:18px;display:inline-grid;place-items:center;
  font-size:.66rem;font-weight:800;color:var(--obsidian);background:var(--coral);
}
/* Tuiles « Tout ce que ROSA peut faire » : pictogramme, liseré et flèche au survol */
.contenu a.tuile:not(.btn){position:relative;overflow:hidden}
.grille-possibilites .tuile::before{
  content:"";display:block;width:34px;height:34px;margin-bottom:6px;border-radius:10px;
  background:var(--coral);-webkit-mask-size:22px 22px;mask-size:22px 22px;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;
}
.grille-possibilites .tuile::after{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--coral);
  transform:scaleY(0);transform-origin:bottom;transition:transform .35s cubic-bezier(.22,.8,.28,1);
}
.contenu .grille-possibilites a.tuile:not(.btn):hover{border-color:var(--line-forte);box-shadow:var(--ombre-forte);transform:translateY(-3px)}
.grille-possibilites .tuile:hover::after,.grille-possibilites .tuile:focus-visible::after{transform:scaleY(1)}
.grille-possibilites .tuile b::after{content:"\2192";display:inline-block;margin-left:.3em;opacity:0;transform:translateX(-4px);transition:opacity .3s,transform .3s;color:var(--coral-fonce)}
.grille-possibilites .tuile:hover b::after,.grille-possibilites .tuile:focus-visible b::after{opacity:1;transform:none}
.grille-possibilites li:nth-child(1) .tuile::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18'/%3E%3C/svg%3E")}
.grille-possibilites li:nth-child(2) .tuile::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h2l2.4 11.2a2 2 0 0 0 2 1.6h7.7a2 2 0 0 0 1.9-1.4L21 8H6'/%3E%3Ccircle cx='10' cy='20' r='1'/%3E%3Ccircle cx='17' cy='20' r='1'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h2l2.4 11.2a2 2 0 0 0 2 1.6h7.7a2 2 0 0 0 1.9-1.4L21 8H6'/%3E%3Ccircle cx='10' cy='20' r='1'/%3E%3Ccircle cx='17' cy='20' r='1'/%3E%3C/svg%3E")}
.grille-possibilites li:nth-child(3) .tuile::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2l9 5v10l-9 5-9-5V7z'/%3E%3Cpath d='M12 22V12M3 7l9 5 9-5'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2l9 5v10l-9 5-9-5V7z'/%3E%3Cpath d='M12 22V12M3 7l9 5 9-5'/%3E%3C/svg%3E")}
.grille-possibilites li:nth-child(4) .tuile::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1.5'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1.5'/%3E%3C/svg%3E")}
.grille-possibilites li:nth-child(5) .tuile::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2L4 14h7l-1 8 9-12h-7z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2L4 14h7l-1 8 9-12h-7z'/%3E%3C/svg%3E")}
.grille-possibilites li:nth-child(6) .tuile::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l1.8 5.2L19 10l-5.2 1.8L12 17l-1.8-5.2L5 10l5.2-1.8z'/%3E%3Cpath d='M19 16l.8 2.2L22 19l-2.2.8L19 22l-.8-2.2L16 19l2.2-.8z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l1.8 5.2L19 10l-5.2 1.8L12 17l-1.8-5.2L5 10l5.2-1.8z'/%3E%3Cpath d='M19 16l.8 2.2L22 19l-2.2.8L19 22l-.8-2.2L16 19l2.2-.8z'/%3E%3C/svg%3E")}
.grille-possibilites li:nth-child(7) .tuile::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z'/%3E%3C/svg%3E")}
.grille-possibilites li:nth-child(8) .tuile::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11v2a1 1 0 0 0 1 1h2l5 4V6L6 10H4a1 1 0 0 0-1 1z'/%3E%3Cpath d='M16 8a5 5 0 0 1 0 8M19 5a9 9 0 0 1 0 14'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11v2a1 1 0 0 0 1 1h2l5 4V6L6 10H4a1 1 0 0 0-1 1z'/%3E%3Cpath d='M16 8a5 5 0 0 1 0 8M19 5a9 9 0 0 1 0 14'/%3E%3C/svg%3E")}
.grille-possibilites li:nth-child(9) .tuile::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M10 9l5 3-5 3z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M10 9l5 3-5 3z'/%3E%3C/svg%3E")}
.grille-possibilites li:nth-child(10) .tuile::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a4 4 0 0 0-5.4 5.2L4 16.8V20h3.2l5.3-5.3a4 4 0 0 0 5.2-5.4l-2.6 2.6-2.1-.6-.6-2.1z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a4 4 0 0 0-5.4 5.2L4 16.8V20h3.2l5.3-5.3a4 4 0 0 0 5.2-5.4l-2.6 2.6-2.1-.6-.6-2.1z'/%3E%3C/svg%3E")}
.grille-possibilites li:nth-child(11) .tuile::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8v8M8 12h8'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8v8M8 12h8'/%3E%3C/svg%3E")}
/* Étapes : pastilles en dégradé */
.etapes-accueil .etape-num{background:linear-gradient(135deg,var(--coral),#FF7E96);box-shadow:0 8px 20px -8px rgba(255,59,92,.85)}
/* Engagements : filet corail et relief au survol */
.carte-engagement-clair{border-top:3px solid var(--line);transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease}
.carte-engagement-clair:hover{transform:translateY(-3px);box-shadow:var(--ombre-forte);border-top-color:var(--coral)}
.carte-demo:hover{box-shadow:var(--ombre-forte)}
@media (prefers-reduced-motion:reduce){
  .accueil-heros::before{animation:none}
  .cadre-navigateur,.accueil-heros-visuel:hover .cadre-navigateur{transform:none;transition:none}
  .carte-engagement-clair,.grille-possibilites .tuile::after,.grille-possibilites .tuile b::after{transition:none}
  .carte-engagement-clair:hover,.contenu .grille-possibilites a.tuile:not(.btn):hover{transform:none}
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════
   RETOUCHE DESIGN N° 2 DU 20/10/2026 — composants communs (haut de page, douleurs, offres, comparatif,
   appel final). But : plus de relief, un seul geste évident (« Demander un devis »), lecture facile.
   Réversible : supprimer ce bloc. Respecte prefers-reduced-motion.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════ */
/* Haut des pages : même trame lumineuse que l'accueil */
.page-tete::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px) 0 0/56px 56px,
    linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px) 0 0/56px 56px;
  -webkit-mask-image:radial-gradient(ellipse 70% 90% at 80% 20%,#000 20%,transparent 75%);
          mask-image:radial-gradient(ellipse 70% 90% at 80% 20%,#000 20%,transparent 75%);
}
.page-tete::after{animation:rosa-halo 16s ease-in-out infinite alternate}
.page-tete .btn-plein{box-shadow:0 12px 32px -12px rgba(255,59,92,.75)}
.page-tete .btn-plein:hover{box-shadow:0 16px 40px -12px rgba(255,59,92,.9)}

/* « Vous vous reconnaissez ? » : cartes avec pastille, sur deux colonnes */
.situations{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:14px}
.situations li{
  position:relative;display:flex;align-items:flex-start;gap:14px;
  padding:18px 20px;border:1px solid var(--line);border-left:1px solid var(--line);border-radius:var(--rayon);
  background:var(--surface);box-shadow:0 1px 2px rgba(11,12,14,.04);line-height:1.5;
  transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;
}
.situations li::before{
  content:"";flex:0 0 22px;height:22px;margin-top:1px;background:var(--coral);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E") center/16px 16px no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E") center/16px 16px no-repeat;
}
.situations li:hover{transform:translateY(-2px);box-shadow:var(--ombre);border-color:var(--line-forte)}

/* Offres : relief, filet corail au survol, bouton principal plein et lumineux */
.offre{position:relative;transition:transform .35s cubic-bezier(.22,.8,.28,1),box-shadow .35s ease,border-color .35s ease}
.offre::before{
  content:"";position:absolute;left:22px;right:22px;top:-1px;height:3px;border-radius:0 0 3px 3px;
  background:var(--coral);transform:scaleX(0);transition:transform .35s cubic-bezier(.22,.8,.28,1);
}
.offre:hover{transform:translateY(-4px);box-shadow:var(--ombre-forte);border-color:var(--line-forte)}
.offre:hover::before,.offre:focus-within::before{transform:scaleX(1)}
.offre .tarif-cta{
  background:var(--coral);border-color:var(--coral);color:var(--obsidian)!important;font-weight:700;
  padding:13px 18px;box-shadow:0 10px 26px -12px rgba(255,59,92,.8);
}
.offre .tarif-cta:hover{background:var(--obsidian);border-color:var(--obsidian);color:var(--pure-white)!important;box-shadow:0 12px 30px -12px rgba(11,12,14,.6)}
.offre h3{font-size:1.28rem;letter-spacing:-.01em}

/* Comparatif : lecture plus facile (lignes alternées, colonne survolée) */
.comparateur tbody tr:nth-child(even) td,.comparateur tbody tr:nth-child(even) th{background:rgba(11,12,14,.018)}
.comparateur tbody tr:hover td,.comparateur tbody tr:hover th{background:rgba(255,59,92,.045)}
.comparateur thead th{position:sticky;top:0;z-index:1}
.comparateur tbody th{font-weight:700;color:var(--ink)}

/* Appel final : plus d'ampleur, halo, bouton principal lumineux */
.cta-final{padding-block:clamp(64px,9vw,112px)!important}
.cta-final h2{font-size:clamp(2rem,1.3rem + 2.6vw,3.2rem)!important;letter-spacing:-.03em}
.cta-final .btn-plein{box-shadow:0 14px 36px -12px rgba(255,59,92,.85);padding:16px 30px}
.cta-final .btn-plein:hover{box-shadow:0 18px 44px -12px rgba(255,59,92,.95)}
.cta-final::after{
  content:"";position:absolute;left:50%;top:50%;width:min(760px,110vw);aspect-ratio:1;transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(255,59,92,.16),transparent 60%);pointer-events:none;
  animation:rosa-pulse 9s ease-in-out infinite;
}
@keyframes rosa-pulse{0%,100%{opacity:.7;transform:translate(-50%,-50%) scale(1)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}}

/* Boutons pleins partout : réaction nette au survol et au clavier */
.btn-plein:focus-visible,.tarif-cta:focus-visible{outline:3px solid var(--coral-clair);outline-offset:3px}

@media (prefers-reduced-motion:reduce){
  .page-tete::after,.cta-final::after{animation:none}
  .offre,.offre::before,.situations li{transition:none}
  .offre:hover,.situations li:hover{transform:none}
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════
   RETOUCHE N° 3 DU 20/10/2026 — alignement : aucune carte orpheline, lignes complètes, lecture confortable.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════ */
/* « Vous vous reconnaissez ? » : 2 × 2 dès la tablette */
@media (min-width:720px){.situations{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Offres : grille sur 6 pistes. 3 par ligne par défaut ; 2, 4 et 8 offres : 2 par ligne ;
   5 offres : 3 puis 2 qui occupent toute la ligne. Aucune ligne à moitié vide. */
@media (min-width:980px){
  .offres{grid-template-columns:repeat(6,minmax(0,1fr));gap:20px}
  .offres > *{grid-column:span 2}
  .offres:has(> :nth-child(2):last-child) > *,
  .offres:has(> :nth-child(4):last-child) > *,
  .offres:has(> :nth-child(8):last-child) > *{grid-column:span 3}
  .offres:has(> :nth-child(5):last-child) > :nth-child(n+4){grid-column:span 3}
  .offres:has(> :nth-child(7):last-child) > :nth-child(7){grid-column:2 / span 4}
}
@media (min-width:640px) and (max-width:979px){
  .offres{grid-template-columns:repeat(2,minmax(0,1fr))}
  .offres > :last-child:nth-child(odd){grid-column:1 / -1}
}
/* Dans chaque offre : le bouton toujours en bas, aligné d'une carte à l'autre */
.offre .offre-infos{margin-top:auto;margin-bottom:18px}
.offre .offre-infos ~ .tarif-cta{margin-top:0}
.offre .tarif-cta{margin-top:auto}

/* Lisibilité : largeur de ligne confortable et interlignage régulier pour les textes courants */
.section .chapeau{max-width:62ch;line-height:1.6}
.liste-coche li,.liste-croix li{line-height:1.5}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════
   RETOUCHE N° 4 DU 20/10/2026 — la dernière carte d'une grille ne reste jamais seule dans un coin.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════ */
/* Grilles à 3 colonnes au-dessus de 900 px, 2 colonnes entre 561 et 900 px */
@media (min-width:901px){
  .preuves > :last-child:nth-child(3n+1),
  .parcours > :last-child:nth-child(3n+1),
  .services-grille > :last-child:nth-child(3n+1){grid-column:1 / -1}
}
@media (min-width:561px) and (max-width:900px){
  .preuves > :last-child:nth-child(odd),
  .services-grille > :last-child:nth-child(odd){grid-column:1 / -1}
}
@media (min-width:621px) and (max-width:900px){.parcours > :last-child:nth-child(odd){grid-column:1 / -1}}
/* Options du calculateur (2 colonnes) */
.calc-options > :last-child:nth-child(odd){grid-column:1 / -1}
/* Conditions (page Offres) : 3 par ligne sur grand écran, pour 6 conditions = 2 lignes pleines */
@media (min-width:980px){.conditions-claires.conditions-claires{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Comparatifs : colonnes régulières (critère étroit, formules à parts égales) */
@media (min-width:761px){
  .comparateur{table-layout:fixed}
  .comparateur th:first-child,.comparateur td:first-child{width:19%}
}
/* Tarifs : l'encadré de positionnement ne colle plus aux boutons */
.positionnement-rosa{margin-bottom:24px!important}

/* 20/10/2026 : « Ce qui n'est pas compris dans les prix » */
.non-compris{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.non-compris li{display:grid;gap:4px;padding:16px 18px;border:1px solid var(--line);border-radius:var(--rayon);background:var(--surface)}
.non-compris b{font-family:var(--display);font-size:1rem;color:var(--ink)}
.non-compris span{font-size:.93rem;line-height:1.5;color:var(--ink-2)}
@media (min-width:980px){.non-compris{grid-template-columns:repeat(3,minmax(0,1fr))}}
.certifications{border:1px solid var(--line);border-radius:var(--rayon);background:var(--surface-2);padding:14px 18px}
.certifications summary{cursor:pointer;font-family:var(--display);font-weight:700;color:var(--ink)}
.certifications ul{margin:12px 0 8px;padding-left:20px;line-height:1.55}
.certifications p{margin:0;font-size:.93rem;color:var(--ink-2)}
.rappel-non-compris{margin:18px 0 0;font-size:.93rem;color:var(--ink-2)}

/* 20/10/2026 : note sous un titre de famille de la page Tarifs */
.tarifs-note{margin:-6px 0 14px;font-size:.93rem;color:var(--ink-2)}

/* 24/10/2026 (étude de marché) : prix de ROSA face au marché, sous la promesse de l'accueil. */
.accueil-marche{margin:calc(-1*var(--esp-4)) 0 var(--esp-6);max-width:52ch;font-size:.95rem;line-height:1.55;color:var(--ink-inv-2)}
.accueil-marche a,.contenu .accueil-marche a:not(.btn):not(.xlink){color:inherit;text-decoration:underline;text-underline-offset:2px}
.accueil-heros-lead .prix-liste,.accueil-marche .prix-liste{white-space:nowrap}

/* 29/10/2026 : menu par besoins, « Configurer mon projet » en évidence */
.menu-groupe .menu-devis{display:block;text-align:center}
.menu-espace{margin-top:var(--esp-4)}
.menu-espace a{font-weight:600}