/* ── Déroulé d'usage des pages publiques (27/10/2026, refonte du site — plan
   docs/superpowers/plans/2026-10-27-refonte-accueil-pro.md). Chapitres et étapes rendus par
   View/partials/deroule.php, écrans redessinés dans View/partials/ecrans/ (HTML et CSS seuls, aucune capture).
   Préfixe .dr- partout : la feuille cohabite avec landing.css (nav, pied de page). ── */

.dr {
    --encre: #0e1726; --encre2: #1c2940; --bleu: #2a5fe6; --bleu-fonce: #2448b8; --bleu-pale: #e8efff; --bleu-clair: #8fb2ff;
    --papier: #f4f6f9; --trait: #dfe4ec; --trait2: #e8edf4; --trait3: #eef1f5; --gris: #3d4a5c; --gris2: #5b6779; --gris-nuit: #c3cee0;
    --vert: #1f6b45; --vert-pale: #e3f5ea; --ambre: #8a4b00; --ambre-pale: #fff1dc;
    --lagon: #0f7c8c; --lagon-texte: #0c6e7d; --sable: #fff4e4; --soleil: #ffb547;
    color: var(--encre); font-family: Montserrat, system-ui, sans-serif;
}
.dr *, .dr *::before, .dr *::after { box-sizing: border-box; }
.dr .disp { font-family: 'Bricolage Grotesque', Montserrat, sans-serif; letter-spacing: -0.02em; }
.dr .mono { font-family: 'IBM Plex Mono', ui-monospace, monospace; }
.dr-in { max-width: 1180px; margin: 0 auto; padding: 0 20px; }
.dr .dr-eb { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; font-weight: 500; color: var(--bleu); margin: 0; line-height: 1.4; }

/* Boutons */
.dr-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 24px; border-radius: 999px; font-weight: 700; font-size: 15px; line-height: 1.2; text-decoration: none; }
.dr-btn-plein { background: var(--bleu); color: #fff; }
.dr-btn-plein:hover { background: var(--bleu-fonce); color: #fff; }
.dr-btn-ligne { background: #fff; color: var(--encre); border: 1.5px solid #c8d1de; }
.dr-btn-ligne:hover { border-color: var(--encre); color: var(--encre); }
.dr-btn-blanc { background: #fff; color: var(--encre); }
.dr-btn-blanc:hover { background: var(--bleu-pale); color: var(--encre); }
.dr-btn-nuit { background: transparent; color: #fff; border: 1.5px solid #4a5d7e; }
.dr-btn-nuit:hover { border-color: #fff; color: #fff; }

/* Le logo de l'appli et l'interrupteur Pro / Perso vivent dans partials/landing_nav.php (toutes les pages publiques
   n'ont pas cette feuille). */

/* ── Héros ── */
.dr-hero { background: var(--papier); padding: 132px 0 72px; }
.dr-hero-grid { display: flex; flex-wrap: wrap; align-items: center; gap: 48px 64px; }
.dr-hero-txt { flex: 1 1 480px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.dr .dr-hero h1 { margin: 0; font-family: 'Bricolage Grotesque', Montserrat, sans-serif; letter-spacing: -0.02em; font-size: clamp(2.4rem, 5vw, 4.4rem); line-height: 1.02; font-weight: 800; color: var(--encre); }
.dr .dr-lead { margin: 0; font-size: 1.15rem; line-height: 1.6; color: var(--gris); max-width: 560px; }
.dr-ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.dr-rassure { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; padding: 0; list-style: none; font-size: 14px; font-weight: 600; color: var(--gris); }
.dr-rassure li { display: inline-flex; align-items: center; gap: 8px; }
.dr-rassure svg { color: var(--vert); flex: 0 0 auto; }
.dr-secteurs { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.dr-secteurs ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.dr-secteurs li { min-height: 34px; display: inline-flex; align-items: center; padding: 0 14px; border-radius: 999px; border: 1px solid var(--trait); background: #fff; font-size: 14px; font-weight: 600; color: var(--gris); }
.dr-hero-visuel { flex: 1 1 440px; min-width: 0; display: flex; justify-content: center; }

/* Sommaire des chapitres */
.dr-ancres { background: #fff; border-bottom: 1px solid var(--trait2); padding: 8px 0; }
.dr-ancres ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.dr-ancres a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 999px; text-decoration: none; font-weight: 600; font-size: 14px; color: var(--gris); }
.dr-ancres a:hover { background: var(--trait3); color: var(--encre); }

/* ── Chapitres et étapes ── */
.dr-chap { background: var(--encre); color: #fff; padding: 48px 0; scroll-margin-top: 80px; }
.dr-chap .dr-in { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; }
.dr .dr-chap h2 { margin: 0; color: #fff; font-family: 'Bricolage Grotesque', Montserrat, sans-serif; letter-spacing: -0.02em; font-size: clamp(2.2rem, 4.4vw, 3.6rem); font-weight: 800; line-height: 1; }
.dr-chap .mono { font-size: 15px; color: #a9b8d0; }
.dr-step { padding: 80px 0; }
.dr-step.alt { background: var(--papier); }
.dr-step-in { display: flex; flex-wrap: wrap; align-items: center; gap: 48px 64px; }
.dr-step.inv .dr-step-in { flex-direction: row-reverse; }
.dr-txt { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.dr-mock { flex: 1 1 520px; min-width: 0; display: flex; justify-content: center; }
.dr-when { align-self: flex-start; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 14px; font-weight: 500; color: #fff; background: var(--encre); border-radius: 999px; padding: 7px 14px; }
.dr .dr-titre { margin: 0; font-family: 'Bricolage Grotesque', Montserrat, sans-serif; letter-spacing: -0.02em; font-size: clamp(1.8rem, 3vw, 2.6rem); line-height: 1.08; font-weight: 800; color: var(--encre); }
.dr .dr-corps { margin: 0; font-size: 1.06rem; line-height: 1.65; color: var(--gris); }
.dr-pts { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.dr-pts li { display: flex; gap: 12px; align-items: baseline; font-weight: 600; color: var(--encre); font-size: 15px; line-height: 1.45; }
.dr-pts li::before { content: ""; flex: 0 0 8px; height: 8px; border-radius: 50%; background: var(--bleu); transform: translateY(-2px); }

/* ── Écrans redessinés ── */
.dr-ecran { width: 100%; max-width: 560px; }
.dr-ui { width: 100%; background: #fff; border: 1px solid var(--trait); border-radius: 20px; box-shadow: 0 28px 56px -34px rgba(14, 23, 38, .45); font-size: 14px; color: var(--encre); overflow: hidden; }
.dr-ui-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--trait2); }
.dr-ui-pad { padding: 18px 20px; }
.dr-ui-bord { border-top: 1px solid var(--trait2); }
.dr-pile { display: flex; flex-direction: column; gap: 12px; }
.dr-rang { display: flex; align-items: center; gap: 12px; }
.dr-entre { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dr-flex1 { flex: 1; min-width: 0; }
.dr-lbl { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--gris2); }
.dr-petit { display: block; font-size: 12.5px; color: var(--gris2); line-height: 1.45; }
.dr-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 0 10px; border-radius: 999px; background: #eef2f7; color: var(--gris); font-size: 12px; font-weight: 600; white-space: nowrap; }
.dr-chip.ok { background: var(--vert-pale); color: var(--vert); }
.dr-chip.att { background: var(--ambre-pale); color: var(--ambre); }
.dr-chip.bleu { background: var(--bleu-pale); color: var(--bleu-fonce); }
.dr-chip.sombre { background: var(--encre2); color: #dbe5f5; }
.dr-chip.noir { background: var(--encre); color: #fff; }
.dr-av { width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #fff; flex: 0 0 30px; background: #4a5568; }
.dr-av.c { background: var(--bleu); }
.dr-av.l { background: var(--lagon); }
.dr-av.k { background: #b5541b; }
.dr-ligne { display: flex; align-items: center; gap: 12px; padding: 12px 20px; border-bottom: 1px solid var(--trait3); }
.dr-ligne:last-child { border-bottom: 0; }
.dr-ligne.choisie { background: var(--bleu-pale); }
.dr-ligne.total { background: var(--papier); }
.dr-case { width: 20px; height: 20px; border-radius: 6px; border: 2px solid #b8c2d0; flex: 0 0 20px; display: inline-flex; align-items: center; justify-content: center; }
.dr-case.on { background: var(--bleu); border-color: var(--bleu); color: #fff; }
.dr-radio { width: 20px; height: 20px; border-radius: 50%; border: 2px solid #b8c2d0; flex: 0 0 20px; background: #fff; }
.dr-radio.on { border: 6px solid var(--bleu); }
.dr-montant { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 13px; white-space: nowrap; }
.dr-signature { display: flex; align-items: center; gap: 16px; }
.dr-onglets { display: flex; gap: 4px; padding: 0 16px; border-bottom: 1px solid var(--trait2); overflow: hidden; }
.dr-onglets span { padding: 12px 10px; color: var(--gris2); white-space: nowrap; }
.dr-onglets span.on { color: var(--encre); font-weight: 700; border-bottom: 2.5px solid var(--bleu); }
.dr-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.dr-stat { background: var(--papier); border-radius: 14px; padding: 14px; }
.dr-stat b { display: block; font-family: 'Bricolage Grotesque', Montserrat, sans-serif; font-size: 28px; font-weight: 800; line-height: 1.2; }
.dr-stats.bandeau { gap: 0; border-top: 1px solid var(--trait2); }
.dr-stats.bandeau .dr-stat { background: none; border-radius: 0; padding: 14px 18px; border-right: 1px solid var(--trait2); }
.dr-stats.bandeau .dr-stat:last-child { border-right: 0; }
.dr-stats.bandeau .dr-stat b { font-size: 24px; }
.dr-semaine li { display: flex; gap: 14px; align-items: flex-start; padding: 10px 0; border-top: 1px solid var(--trait3); }
.dr-semaine li:first-child { border-top: 0; }
.dr-semaine ol, ol.dr-semaine { list-style: none; margin: 0; padding: 0; }
.dr-semaine .mono { flex: 0 0 72px; font-size: 13px; font-weight: 500; color: var(--bleu-fonce); }
.dr-bulles { display: flex; flex-direction: column; gap: 14px; background: #f8fafc; }
.dr-bulle { max-width: 86%; border-radius: 16px; padding: 12px 14px; font-size: 13.5px; line-height: 1.55; }
.dr-bulle.moi { align-self: flex-end; background: var(--bleu-pale); border-bottom-right-radius: 4px; }
.dr-bulle.brief { align-self: flex-end; background: var(--encre); color: #fff; border-bottom-right-radius: 4px; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.dr-bulle.brief .mono { font-size: 11px; letter-spacing: .1em; color: #a9b8d0; }
.dr-bulle.lui { background: #fff; border: 1px solid #e3e8ef; border-bottom-left-radius: 4px; }
.dr-alerte { display: flex; align-items: center; gap: 8px; background: var(--ambre-pale); color: var(--ambre); border-radius: 12px; padding: 9px 12px; font-size: 12.5px; font-weight: 600; }
.dr-carte-ui { position: relative; }
.dr-carte-ui svg { display: block; width: 100%; height: auto; }
.dr-carte-note { position: absolute; left: 16px; top: 16px; background: #fff; border-radius: 14px; padding: 12px 14px; box-shadow: 0 12px 28px -14px rgba(14, 23, 38, .5); max-width: 220px; display: flex; flex-direction: column; gap: 4px; font-size: 13px; line-height: 1.45; }
.dr-legende { display: flex; flex-wrap: wrap; gap: 8px 16px; padding: 12px 18px; border-top: 1px solid var(--trait2); font-size: 12.5px; color: var(--gris); }
.dr-legende span { display: inline-flex; align-items: center; gap: 6px; }
.dr-puce { width: 10px; height: 10px; border-radius: 50%; background: var(--encre); }
.dr-photos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 4px; }
.dr-photo { position: relative; height: 170px; border-radius: 4px; background: #c4ced9; overflow: hidden; }
.dr-photo:nth-child(1) { border-top-left-radius: 14px; }
.dr-photo:nth-child(2) { border-top-right-radius: 14px; background: #d3dbe4; }
.dr-photo:nth-child(3) { border-bottom-left-radius: 14px; background: #ccd5df; }
.dr-photo:nth-child(4) { border-bottom-right-radius: 14px; background: #dde3ea; display: flex; align-items: center; justify-content: center; }
.dr-photo svg { width: 100%; height: 100%; }
.dr-tampon { position: absolute; left: 8px; right: 8px; bottom: 8px; background: rgba(14, 23, 38, .8); color: #fff; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 10.5px; padding: 5px 8px; border-radius: 6px; }
.dr-marque { position: absolute; right: 8px; top: 8px; background: #fff; color: var(--encre); font-size: 11px; font-weight: 800; letter-spacing: .06em; padding: 4px 8px; border-radius: 6px; }
.dr-flou { position: absolute; left: 50%; top: 22px; width: 76px; height: 76px; margin-left: -38px; border-radius: 50%; background: #9fadbd; outline: 2px dashed #fff; outline-offset: 3px; }
.dr-vignettes { display: flex; gap: 6px; }
.dr-vignettes span { width: 64px; height: 52px; border-radius: 10px; background: #c4ced9; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: var(--gris); }
.dr-vignettes span:nth-child(2) { background: #d3dbe4; }
.dr-vignettes span:nth-child(3) { background: #ccd5df; }
.dr-vignettes span:nth-child(4) { background: #eef2f7; }
.dr-rond { width: 40px; height: 40px; border-radius: 50%; background: var(--bleu); color: #fff; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 40px; }
.dr-tel { width: 300px; max-width: 100%; border-radius: 44px; background: var(--encre); padding: 11px; box-shadow: 0 36px 70px -36px rgba(14, 23, 38, .7); }
.dr-tel-ecran { border-radius: 34px; background: #fff; overflow: hidden; display: flex; flex-direction: column; }
.dr-tel-tete { padding: 22px 18px 14px; display: flex; flex-direction: column; gap: 4px; }
.dr-tel-tete b { font-size: 18px; }
.dr-tel .dr-alerte { margin: 0 14px; }
.dr-tel-liste { padding: 10px 14px; }
.dr-tel-liste div { display: flex; gap: 10px; align-items: center; padding: 10px 4px; border-bottom: 1px solid var(--trait3); font-size: 13.5px; }
.dr-tel-liste div:last-child { border-bottom: 0; }
.dr-tel-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 6px 14px 14px; }
.dr-tel-actions span { min-height: 48px; border-radius: 14px; background: #eef2f7; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 700; font-size: 13px; }
.dr-tel-fin { margin: 0 14px 22px; min-height: 50px; border-radius: 14px; background: var(--bleu); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; }
.dr-anneau { flex: 0 0 auto; }
.dr-fil { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; }
.dr-fil div { display: flex; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--trait3); font-size: 13px; }
.dr-fil div:last-child { border-bottom: 0; }
.dr-fil .mono { color: var(--gris2); flex: 0 0 42px; }
.dr-fil .ambre, .dr-fil .ambre .mono { color: var(--ambre); }
.dr-studio { display: flex; flex-wrap: wrap; }
.dr-studio-plan { flex: 1 1 170px; background: var(--papier); padding: 18px 14px; display: flex; flex-direction: column; gap: 4px; border-right: 1px solid var(--trait2); }
.dr-studio-plan span { display: flex; align-items: center; gap: 8px; padding: 9px 8px; font-size: 13px; color: var(--gris2); border-radius: 10px; }
.dr-studio-plan span.fait { color: var(--encre); }
.dr-studio-plan span.on { background: #fff; font-weight: 700; }
.dr-studio-plan i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid #b8c2d0; display: inline-block; }
.dr-studio-page { flex: 999 1 300px; min-width: 0; padding: 20px 22px; display: flex; flex-direction: column; gap: 14px; }
.dr-studio-page p { margin: 0; font-size: 13.5px; line-height: 1.65; color: var(--gris); }
.dr-pastille { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: 999px; background: var(--bleu-pale); color: var(--bleu-fonce); font-weight: 700; font-size: 13px; }
.dr-contour { align-self: flex-start; display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1.5px solid #c8d1de; font-weight: 700; font-size: 13.5px; }
.dr-portail-tete { background: var(--encre); color: #fff; padding: 18px 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dr-portail-tete .mono { font-size: 11px; letter-spacing: .12em; color: #a9b8d0; display: block; }
.dr-ico { width: 44px; height: 44px; border-radius: 12px; background: var(--bleu-pale); color: var(--bleu-fonce); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.dr-ligne .dr-ico { width: 40px; height: 40px; }
.dr-notes { display: flex; gap: 8px; }
.dr-notes span { width: 44px; height: 44px; border-radius: 12px; background: #eef2f7; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; }
.dr-notes span.on { background: var(--bleu); color: #fff; }

/* ── Bilan de la semaine ── */
.dr-bilan { background: var(--encre); color: #fff; padding: 80px 0; }
.dr .dr-bilan h2 { margin: 0 0 36px; max-width: 860px; color: #fff; font-family: 'Bricolage Grotesque', Montserrat, sans-serif; letter-spacing: -0.02em; font-size: clamp(2rem, 3.8vw, 3.2rem); line-height: 1.06; font-weight: 800; }
.dr-chiffres { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.dr-chiffres li { border-top: 2px solid #3a4b68; padding-top: 16px; color: var(--gris-nuit); }
.dr-chiffres li:last-child { border-top-color: var(--bleu-clair); }
.dr-chiffres b { display: block; color: #fff; font-family: 'Bricolage Grotesque', Montserrat, sans-serif; font-size: 44px; font-weight: 800; line-height: 1.15; }

/* ── À la carte ── */
.dr-carte { background: var(--papier); padding: 96px 0; scroll-margin-top: 80px; }
.dr-entete { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 48px; margin-bottom: 40px; }
.dr-entete > div { max-width: 640px; display: flex; flex-direction: column; gap: 14px; } /* 640 + 48 + 420 tient dans les 1 140 px utiles */
.dr .dr-entete h2, .dr .dr-section-titre { margin: 0; color: var(--encre); font-family: 'Bricolage Grotesque', Montserrat, sans-serif; letter-spacing: -0.02em; font-size: clamp(2rem, 3.8vw, 3.2rem); line-height: 1.06; font-weight: 800; }
.dr .dr-entete > p { margin: 0; max-width: 420px; font-size: 1.05rem; line-height: 1.6; color: var(--gris); }
.dr-tuiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.dr-tuile { display: flex; flex-direction: column; gap: 10px; height: 100%; padding: 22px; border-radius: 20px; background: #fff; border: 1px solid var(--trait); color: var(--encre); text-decoration: none; }
a.dr-tuile:hover { border-color: var(--bleu); color: var(--encre); }
.dr-tuile .mono { font-size: 12px; color: var(--bleu-fonce); letter-spacing: .06em; text-transform: uppercase; }
.dr .dr-tuile h3 { margin: 0; font-family: Montserrat, system-ui, sans-serif; font-size: 16.5px; line-height: 1.3; font-weight: 700; color: var(--encre); }
.dr .dr-tuile p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--gris); }
.dr-tuile .dr-suite { margin-top: auto; font-size: 13.5px; font-weight: 700; color: var(--bleu-fonce); }
.dr-aussi { margin-top: 16px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding: 18px 24px; border-radius: 18px; background: #fff; border: 1px solid var(--trait); font-size: 15px; color: var(--gris); }
.dr-aussi a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 700; color: var(--encre); }

/* ── Applications métiers ── */
.dr-metiers { padding: 88px 0; }
.dr-metiers .dr-tuiles { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); margin-top: 28px; }
.dr-tuile.nuit { background: var(--encre); border-color: var(--encre); color: #fff; }
.dr .dr-tuile.nuit h3 { color: #fff; }
.dr .dr-tuile.nuit p { color: var(--gris-nuit); }
.dr-tuile.nuit .mono { color: var(--bleu-clair); }
a.dr-tuile.nuit:hover { border-color: var(--bleu-clair); color: #fff; }
.dr-tuile.pointille { border-style: dashed; }

/* ── FAQ ── */
.dr-faq { padding: 88px 0; background: var(--papier); }
.dr-faq .dr-in { max-width: 860px; }
.dr-faq-liste { margin-top: 32px; display: flex; flex-direction: column; gap: 12px; }
.dr-faq-item { background: #fff; border: 1px solid var(--trait); border-radius: 18px; padding: 22px 24px; }
.dr .dr-faq-item h3 { margin: 0 0 8px; font-family: Montserrat, system-ui, sans-serif; font-size: 17px; line-height: 1.35; font-weight: 700; color: var(--encre); }
.dr .dr-faq-item p { margin: 0; font-size: 15px; line-height: 1.65; color: var(--gris); }
.dr-faq-item a { font-weight: 700; color: var(--bleu-fonce); }

/* ── Appel final ── */
.dr-cta { background: var(--encre); color: #fff; padding: 96px 0; text-align: center; }
.dr-cta .dr-in { max-width: 820px; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.dr .dr-cta h2 { margin: 0; color: #fff; font-family: 'Bricolage Grotesque', Montserrat, sans-serif; letter-spacing: -0.02em; font-size: clamp(2.2rem, 4.4vw, 3.6rem); line-height: 1.04; font-weight: 800; }
.dr .dr-cta p { margin: 0; font-size: 1.1rem; line-height: 1.6; color: var(--gris-nuit); }
.dr-cta .dr-ctas { justify-content: center; margin-top: 8px; }
.dr-stores { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 8px; }

/* ── Accueil à deux portes (lot 2, 27/10/2026) ── */
.dr-accueil .dr-eb.lagon { color: var(--lagon-texte); }
.dr-hero-accueil { padding: 132px 0 44px; text-align: center; }
.dr .dr-hero-accueil h1 { margin: 18px auto 0; max-width: 1020px; font-family: 'Bricolage Grotesque', Montserrat, sans-serif; letter-spacing: -0.02em; font-size: clamp(2.3rem, 5.4vw, 4.7rem); line-height: 1.02; font-weight: 800; color: #0f2129; }
.dr-hero-accueil h1 .pro { color: var(--bleu); }
.dr-hero-accueil h1 .perso { color: var(--lagon); }
.dr .dr-hero-accueil .dr-lead { margin: 22px auto 0; max-width: 640px; font-size: 1.2rem; line-height: 1.55; color: #33474f; }
.dr-portes-zone { padding: 0 0 72px; scroll-margin-top: 80px; }
.dr-portes { display: flex; flex-wrap: wrap; gap: 24px; }
.dr-porte { flex: 1 1 460px; min-width: 0; border-radius: 28px; padding: 44px 40px 40px; display: flex; flex-direction: column; gap: 22px; }
.dr-porte.pro { background: var(--encre); color: #fff; }
.dr-porte.perso { background: var(--sable); color: #0f2129; }
.dr .dr-porte h2 { margin: 0; font-family: 'Bricolage Grotesque', Montserrat, sans-serif; letter-spacing: -0.02em; font-size: clamp(1.9rem, 3.2vw, 2.8rem); line-height: 1.05; font-weight: 800; color: inherit; }
.dr .dr-porte > p { margin: 0; font-size: 1.05rem; line-height: 1.6; max-width: 480px; }
.dr .dr-porte.pro .dr-eb { color: var(--bleu-clair); }
.dr .dr-porte.pro > p { color: var(--gris-nuit); }
.dr .dr-porte.perso .dr-eb { color: var(--lagon-texte); }
.dr .dr-porte.perso > p { color: #33474f; }
.dr-chemin { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; padding: 0; list-style: none; }
.dr-chemin li { display: inline-flex; align-items: center; gap: 6px; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12.5px; font-weight: 500; }
.dr-chemin span { padding: 6px 12px; border-radius: 999px; }
.dr-porte.pro .dr-chemin span { background: var(--encre2); color: #dbe5f5; }
.dr-porte.pro .dr-chemin li:last-child span { background: #fff; color: var(--encre); }
.dr-porte.pro .dr-chemin svg { color: #6f86ab; }
.dr-porte.perso .dr-chemin span { background: #ffe6c2; color: #0f2129; }
.dr-porte.perso .dr-chemin li:last-child span { background: #0f2129; color: #fff; }
.dr-porte.perso .dr-chemin svg { color: #a07a45; }
.dr-porte-visuel { margin-top: auto; padding-top: 8px; display: flex; justify-content: center; }
.dr-porte-pied { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; font-size: 14px; }
.dr-porte.pro .dr-porte-pied { color: var(--gris-nuit); }
.dr-porte.perso .dr-porte-pied { color: #33474f; }
.dr-btn-lagon { background: var(--lagon-texte); color: #fff; }
.dr-btn-lagon:hover { background: #0a5a66; color: #fff; }
.dr-mini { width: 100%; max-width: 430px; background: #fff; color: var(--encre); border-radius: 18px; padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .7); }
.dr-mini b { font-size: 17px; line-height: 1.3; }
.dr-barre { height: 8px; border-radius: 99px; background: var(--trait2); overflow: hidden; }
.dr-barre span { display: block; width: 78%; height: 100%; background: var(--bleu); }
.dr-avs { display: flex; }
.dr-avs .dr-av { border: 2px solid #fff; }
.dr-avs .dr-av + .dr-av { margin-left: -8px; }
.dr-tel-voyage { width: 260px; border-radius: 36px; background: #0f2129; padding: 10px; box-shadow: 0 30px 60px -30px rgba(15, 33, 41, .55); }
.dr-tel-voyage > div { border-radius: 27px; background: #fff; overflow: hidden; }
.dr-tel-voyage-tete { background: var(--lagon); color: #fff; padding: 20px 18px 16px; display: flex; flex-direction: column; gap: 4px; }
.dr-tel-voyage-tete .mono { font-size: 11px; letter-spacing: .12em; }
.dr-tel-voyage-tete b { font-family: 'Bricolage Grotesque', Montserrat, sans-serif; font-size: 26px; font-weight: 800; }
.dr-tel-voyage-tete span:last-child { font-size: 12px; }
.dr-tel-voyage-liste { padding: 6px 14px 14px; display: flex; flex-direction: column; }
.dr-tel-voyage-liste div { display: flex; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid #eef2f2; font-size: 13px; font-weight: 600; }
.dr-tel-voyage-liste .mono { font-size: 11px; color: #4a5c63; width: 38px; font-weight: 400; }
.dr-tel-voyage-liste p { margin: 10px 0 0; background: var(--sable); border-radius: 12px; padding: 10px 12px; font-size: 12.5px; line-height: 1.4; }
.dr-compte-zone { padding: 0 0 80px; }
.dr-compte { border: 1px solid #e3ebec; border-radius: 24px; padding: 32px 36px; display: flex; flex-wrap: wrap; align-items: center; gap: 24px 40px; }
.dr-bascule { display: inline-flex; padding: 5px; border-radius: 999px; background: #f2f7f6; border: 1px solid #e3ebec; }
.dr-bascule span { padding: 10px 22px; border-radius: 999px; font-weight: 700; font-size: 15px; color: #0f2129; }
.dr-bascule span:first-child { background: var(--encre); color: #fff; }
.dr-compte > div { flex: 1 1 420px; min-width: 0; }
.dr .dr-compte h2 { margin: 0; font-family: 'Bricolage Grotesque', Montserrat, sans-serif; letter-spacing: -0.02em; font-size: 1.7rem; font-weight: 800; color: #0f2129; }
.dr .dr-compte p { margin: 8px 0 0; font-size: 1.02rem; line-height: 1.6; color: #33474f; }
.dr-confiance { list-style: none; margin: 0 auto; padding: 0 20px 88px; max-width: 1180px; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.dr-confiance li { display: flex; gap: 14px; align-items: flex-start; padding: 20px; border-radius: 18px; background: #f2f7f6; }
.dr-confiance svg { color: var(--lagon-texte); flex: 0 0 auto; }
.dr-confiance b { display: block; font-size: 15px; }
.dr-confiance span span { font-size: 14px; color: #33474f; }
.dr-outils { padding: 80px 0; background: #f2f7f6; scroll-margin-top: 80px; }
.dr-outils .dr-entete > p { color: #33474f; }
.dr-outils .dr-eb { color: var(--lagon-texte); }
.dr-colonnes { display: flex; flex-wrap: wrap; gap: 24px; }
.dr-colonne { flex: 1 1 440px; min-width: 0; background: #fff; border-radius: 22px; padding: 28px; display: flex; flex-direction: column; gap: 12px; }
.dr .dr-colonne h3 { margin: 0 0 4px; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; font-weight: 500; color: #4a5c63; }
.dr-lien-bloc { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 14px 16px; border-radius: 14px; text-decoration: none; color: #0f2129; border: 1px solid #e3ebec; background: #fff; }
a.dr-lien-bloc:hover { border-color: var(--lagon); color: #0f2129; }
.dr-lien-bloc svg { color: var(--lagon-texte); flex: 0 0 auto; }
.dr-lien-bloc > span { flex: 1; min-width: 0; }
.dr-lien-bloc b { display: block; }
.dr-lien-bloc small { display: block; font-size: 14px; color: #33474f; }
.dr-lien-bloc.pointille { border-style: dashed; }
.dr .dr-outils-tous { margin: 40px 0 16px; font-family: 'Bricolage Grotesque', Montserrat, sans-serif; letter-spacing: -0.02em; font-size: 1.5rem; font-weight: 800; color: #0f2129; }
.dr-outils .dr-tuiles { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.dr-outils .dr-tuile .dr-ico { background: #e6f4f6; color: var(--lagon-texte); }
.dr-outils .dr-tuile .mono { color: var(--lagon-texte); }
.dr-badge { align-self: flex-start; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; background: #fff1dc; color: var(--ambre); }
/* « Fonctionnalités incluses dans Brief » (accueil #tools, page Pro #fonctions) : rubriques du menu de l'appli en filtre. */
.dr-fonctions-zone { padding-top: 64px; }
.dr-fonctions-zone .dr-outils-tous { margin-top: 0; }
.dr-rubriques { position: relative; display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; }
.dr-rubrique { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--trait); background: #fff; color: var(--encre); font: 600 14px/1.2 Montserrat, system-ui, sans-serif; white-space: nowrap; cursor: pointer; }
.dr-rubrique i { font-size: 13px; color: var(--lagon-texte); }
.dr-rubrique:hover { border-color: var(--lagon); }
.dr-rubrique:focus-visible { outline: 2px solid var(--bleu); outline-offset: 2px; }
.dr-rubrique[aria-pressed="true"] { background: var(--lagon-texte); border-color: var(--lagon-texte); color: #fff; }
.dr-rubrique[aria-pressed="true"] i { color: #fff; }
.dr-rubrique-n { font-size: 12px; font-weight: 700; opacity: .6; }
.dr-rubriques-etat { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.dr-fonctions .dr-tuiles > li[hidden] { display: none; }
.dr-fonctions .dr-ico i { font-size: 19px; }
.dr-accueil-cta { background: #0f2129; }
.dr-accueil-cta .dr-btn-soleil { background: var(--soleil); color: #0f2129; }
.dr-accueil-cta .dr-btn-soleil:hover { background: #ffa726; color: #0f2129; }
.dr .dr-accueil-cta p { color: #c9d6da; }

@media (max-width: 640px) {
    .dr-hero { padding: 112px 0 56px; }
    .dr-step { padding: 56px 0; }
    .dr-chap { padding: 36px 0; }
    .dr-carte, .dr-metiers, .dr-faq, .dr-cta, .dr-bilan { padding: 64px 0; }
    .dr-ui-pad, .dr-ui-top { padding-left: 16px; padding-right: 16px; }
    .dr-ligne { padding-left: 16px; padding-right: 16px; }
    .dr-photo { height: 130px; }
    .dr-carte-note { position: static; max-width: none; margin: 12px 12px 0; box-shadow: none; border: 1px solid var(--trait2); }
    .dr-hero-accueil { padding: 112px 0 32px; }
    .dr-porte { padding: 30px 22px 24px; border-radius: 24px; gap: 18px; }
    .dr-porte .dr-btn { width: 100%; padding: 0 18px; }
    .dr-compte, .dr-colonne { padding: 22px 20px; }
}
@media (max-width: 640px) {
    .dr-rubriques { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px 16px; padding: 0 16px 4px; scrollbar-width: none; }
    .dr-rubriques::-webkit-scrollbar { display: none; }
    .dr-fonctions .dr-tuiles { grid-template-columns: 1fr; gap: 10px; }
    .dr-fonctions .dr-tuile { display: grid; grid-template-columns: 40px 1fr; column-gap: 14px; row-gap: 6px; align-content: start; padding: 16px; border-radius: 16px; }
    .dr-fonctions .dr-tuile .dr-ico { grid-row: 1 / span 4; width: 40px; height: 40px; }
    .dr-fonctions .dr-tuile > :not(.dr-ico) { grid-column: 2; }
    .dr-fonctions .dr-badge { justify-self: start; }
    .dr-fonctions-zone { padding-top: 48px; }
}