html {
    scroll-behavior: smooth;
}

/* Décalage d'ancrage : le header collant ne masque plus la section ciblée */
section[id] {
    scroll-margin-top: 5rem;
}

/* =========================================================================
   TOKENS DA « Cahier » (miroir de tailwind.config, pour les modules maison)
   ========================================================================= */
:root {
    --cream: #FBF6EA;
    --cream-2: #F4ECD8;
    --line: #EAE0CA;
    --ink: #1c3f46;
    --ink-2: #3d5a60;
    --teal: #17636E;
    --teal-deep: #123B42;
    --yellow: #F5B301;
    --orange: #E8792B;
    --pencil: #9a917d;
    /* Encres « feutre » du tableau blanc (contrastes AA sur le blanc) */
    --feutre-encre: #123B42;
    --feutre-doux: #35535a;
    /* Pétrole profond : seule encre foncée qui reste AA sur l'orange plein */
    --ink-deep: #0d2f34;
    /* Encre orange assombrie, réservée aux TEXTES : l'orange DA plafonne à 2,7:1 sur le crème.
       L'orange DA reste la couleur des filets, tampons, scotchs et chiffres décoratifs. */
    --orange-ink: #A64B0C;
}

/* =========================================================================
   BRIQUES PARTAGÉES (utilisées par plusieurs sections)
   ========================================================================= */

/* Intitulé cursif « à la craie/plume » qui coiffe chaque section */
.kicker {
    font-family: "Dancing Script", cursive;
    font-weight: 700;
    font-size: 1.6rem;
    line-height: 1;
    color: var(--teal);
}
.kicker--orange { color: var(--orange-ink); }
.kicker--feutre { color: var(--teal); }
/* Kicker cursif promu en titre de section (un seul titre pour la section) */
.kicker--h2 {
    font-size: 2.3rem;
    line-height: 1.1;
}
@media (min-width: 640px) {
    .kicker--h2 { font-size: 2.7rem; }
}

.t-feutre { color: var(--feutre-doux); }
.t-feutre-o { color: var(--orange-ink); }

/* Surlignage « feutre » (jaune assumé, orange pour la correction) */
.mark-y {
    background-image: linear-gradient(transparent 52%, rgba(245, 179, 1, .55) 52% 92%, transparent 92%);
    padding: 0 .08em;
}
.mark-o {
    background-image: linear-gradient(transparent 52%, rgba(232, 121, 43, .45) 52% 92%, transparent 92%);
    padding: 0 .08em;
}

/* =========================================================================
   HERO + CONTACT — TABLEAU BLANC (verre, cadre bois clair, feutres de couleur)
   ========================================================================= */
.tableau {
    position: relative;
    overflow: hidden;
    background: linear-gradient(178deg, #ffffff 0%, #fdfcf7 62%, #faf7ef 100%);
    border: 14px solid var(--teal);
    border-radius: 12px;
    padding: 44px 42px;
    color: var(--feutre-encre);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, .8),
        0 0 0 1px rgba(18, 59, 66, .35),
        0 34px 62px -32px rgba(18, 59, 66, .55);
}
/* Reflet « verre » : deux bandes diagonales très pâles en haut du panneau */
.tableau::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        116deg,
        rgba(23, 99, 110, .05) 0 16%,
        rgba(255, 255, 255, 0) 16% 27%,
        rgba(23, 99, 110, .035) 27% 34%,
        rgba(255, 255, 255, 0) 34% 100%
    );
    pointer-events: none;
}
.tableau > * {
    position: relative;
    z-index: 1;
}
@media (max-width: 640px) {
    .tableau {
        border-width: 10px;
        border-radius: 10px;
        padding: 26px 22px;
    }
}

/* Titre du hero : fluide sans dépendre d'un palier Tailwind */
.hero-title {
    font-size: clamp(1.9rem, 4.6vw, 2.9rem);
    line-height: 1.12;
}

/* Trait de feutre jaune tracé sous un mot-clé */
.trait-feutre {
    position: relative;
    display: inline-block;
}
.trait-feutre svg {
    position: absolute;
    left: -2%;
    bottom: -.24em;
    width: 104%;
    height: .42em;
    color: var(--yellow);
    pointer-events: none;
}

/* Photo scotchée sur le tableau (cadre blanc + ruban jaune) */
.photo-pin {
    position: relative;
    background: #fff;
    border: 6px solid #fff;
    aspect-ratio: 4 / 5;
    transform: rotate(1.6deg);
    box-shadow: 0 0 0 1px rgba(20, 50, 45, .1), 0 18px 36px -20px rgba(20, 50, 45, .65);
}
.photo-pin picture {
    display: block;
}
.photo-pin__img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.photo-pin__tape {
    position: absolute;
    top: -15px;
    left: 50%;
    width: 92px;
    height: 26px;
    transform: translateX(-50%) rotate(-5deg);
    background: rgba(245, 179, 1, .78);
}

/* Lien secondaire sur le tableau blanc (souligné au feutre orange) */
.link-feutre {
    color: var(--teal);
    font-weight: 700;
    text-decoration: none;
    border-bottom: 2px solid var(--orange);
    padding-bottom: 2px;
    transition: color .15s;
}
.link-feutre:hover { color: var(--teal-deep); }

/* Signature cursive au feutre */
.signature-feutre {
    font-family: "Dancing Script", cursive;
    font-weight: 700;
    color: var(--orange-ink);
}

/* =========================================================================
   BANDEAU DE CONFIANCE (filets de cahier + repères)
   ========================================================================= */
.trust {
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}
.trust__in {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px 30px;
    font-family: "Spectral", serif;
    font-size: 1.05rem;
    color: var(--teal-deep);
}
.trust b { color: var(--orange-ink); }
.trust__star { color: var(--yellow); }
.trust__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--pencil);
}

/* =========================================================================
   « VOUS RECONNAISSEZ » / « MAISON » — phrase d'accroche large en italique
   ========================================================================= */
.lead-big {
    font-family: "Spectral", serif;
    font-style: italic;
    font-weight: 500;
    font-size: 1.5rem;
    line-height: 1.45;
    color: var(--teal-deep);
}

/* =========================================================================
   « NI VOTRE FAUTE » — COPIE CORRIGÉE (papier ligné + marques de correction)
   ========================================================================= */
.copie {
    position: relative;
    background: #fff;
    border: 1px solid #e6ddca;
    border-radius: 8px;
    padding: 34px 36px;
    background-image: repeating-linear-gradient(#fff 0 33px, #eef2f7 33px 34px);
    box-shadow: 0 22px 50px -34px rgba(20, 50, 45, .4);
}
.copie p { color: var(--ink-2); }
.copie s {
    color: var(--orange-ink);
    text-decoration-color: var(--orange-ink);
    text-decoration-thickness: 2px;
}
@media (max-width: 640px) {
    .copie { padding: 26px 22px; }
}

/* =========================================================================
   « QUI JE SUIS » — PHOTO DU CABINET + NOTE MANUSCRITE CLIPSÉE AU TROMBONE
   ========================================================================= */
.cabinet {
    position: relative;
}
.cabinet__photo {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 22px 50px -34px rgba(20, 50, 45, .4);
}

/* Le petit papier : fond crème, légère inclinaison, posé sur le coin de la photo */
.cabinet__note {
    position: absolute;
    top: 0;
    right: 33%;
    width: min(10.5rem, 38%);
    padding: 18px 13px 13px;
    background: var(--cream);
    border: 1px solid #e6ddca;
    border-radius: 3px;
    transform: rotate(2.2deg);
    box-shadow: 0 14px 30px -16px rgba(20, 50, 45, .55);
}
.cabinet__note blockquote {
    font-family: "Dancing Script", cursive;
    font-weight: 600;
    font-size: 1.12rem;
    line-height: 1.24;
    color: #20506b;
}

/* Trombone décoratif, à cheval sur le bord supérieur du papier */
.cabinet__trombone {
    position: absolute;
    top: -16px;
    left: 18px;
    width: 20px;
    height: 46px;
    transform: rotate(-7deg);
    color: var(--pencil);
    filter: drop-shadow(0 2px 2px rgba(20, 50, 45, .28));
    pointer-events: none;
}

/* Mobile : la note passe sous la photo, sans chevauchement ni rognage */
@media (max-width: 640px) {
    .cabinet__note {
        position: static;
        width: min(19rem, 84%);
        margin: -52px auto 0;
        padding: 24px 18px 18px;
        transform: rotate(-1.6deg);
    }
    .cabinet__note blockquote { font-size: 1.5rem; }
}

/* =========================================================================
   « ORTHOPHONISTE / SOUTIEN / ACCOMPAGNEMENT » — MANUEL (bloc canard + page)
   ========================================================================= */
.section-canard {
    background: var(--teal-deep);
    color: #d7e7e7;
}
.section-canard h2 { color: #fff; }

/* La page de manuel qui porte le tableau (fond clair, filet orange en tête) */
.manuel-page {
    background: #fdfaf1;
    border: 1px solid #e6ddca;
    border-top: 4px solid var(--orange);
    border-radius: 6px;
    padding: 10px 14px;
    box-shadow: 0 22px 50px -34px rgba(0, 0, 0, .55);
}
/* Colonne « Mon accompagnement » mise en avant (jaune assumé) */
.col-mine { background: rgba(245, 179, 1, .12); }
thead .col-mine { border-radius: 6px 6px 0 0; }

/* =========================================================================
   « COMMENT SE PASSE UNE SÉANCE » — FICHE D'EXERCICES NUMÉROTÉS
   ========================================================================= */
.exos { margin-top: 8px; }
.exos li {
    list-style: none;
    display: grid;
    grid-template-columns: 54px 1fr;
    gap: 18px;
    align-items: start;
    padding: 18px 0;
    border-bottom: 1px dashed #e2d7bf;
}
.exos li:last-child { border-bottom: 0; }
/* Orange DA vif assumé : chiffres purement ornementaux (aria-hidden), hors critère de contraste.
   Ne pas basculer vers --orange-ink, réservé aux textes. */
.exos .num {
    font-family: "Dancing Script", cursive;
    font-weight: 700;
    font-size: 2.6rem;
    line-height: 1;
    color: var(--orange);
}

/* =========================================================================
   « LES RÉSULTATS » — COMPARATEURS AVANT/APRÈS À CURSEUR
   ========================================================================= */
/* La position du curseur est publiée par js/comparateur.js en --position (rognage du
   volet « avant » et place de la poignée) et en --ratio, sa valeur de 0 à 1, qui fait
   fondre chaque étiquette avec la copie qu'elle nomme. */
.comparateur {
    --position: 50%;
    --ratio: .5;
    margin: 0;
}
.comparateur__cadre {
    position: relative;
    aspect-ratio: 1000 / 290;
    border: 1px solid var(--line);
    border-radius: 6px;
    overflow: hidden;
    background: var(--cream);
    box-shadow: 0 22px 50px -34px rgba(20, 50, 45, .4);
}
.comparateur__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Le volet « avant » recouvre l'image « après », rogné à droite de la poignée */
.comparateur__volet {
    position: absolute;
    inset: 0;
    clip-path: inset(0 calc(100% - var(--position)) 0 0);
}

/* Bande d'étiquettes posée au-dessus du cadre : elle ne masque jamais l'écriture */
.comparateur__bandeau {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 0 2px 7px;
}
.comparateur__etiquette {
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink-2);
}
.comparateur__etiquette--avant {
    opacity: var(--ratio);
}
.comparateur__etiquette--apres {
    color: var(--orange-ink);
    opacity: calc(1 - var(--ratio));
}

/* Poignée : le filet orange et sa pastille, purement visuels (l'input reçoit les gestes) */
.comparateur__poignee {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--position);
    z-index: 2;
    width: 2px;
    margin-left: -1px;
    background: var(--orange);
    pointer-events: none;
}
.comparateur__poignee::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
    border: 2px solid var(--orange);
    border-radius: 50%;
    background: var(--cream) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='14' viewBox='0 0 26 14'%3E%3Cpath d='M7 2 2 7l5 5M19 2l5 5-5 5' fill='none' stroke='%23E8792B' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 26px 14px no-repeat;
}

/* L'input range couvre tout le cadre : glisser, cliquer et flèches du clavier */
.comparateur__curseur {
    position: absolute;
    inset: 0;
    z-index: 3;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    cursor: ew-resize;
    touch-action: pan-y;
}
.comparateur__curseur::-webkit-slider-runnable-track { background: transparent; }
.comparateur__curseur::-moz-range-track { background: transparent; }
.comparateur__curseur::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 48px;
    height: 48px;
    background: transparent;
    border: 0;
    cursor: ew-resize;
}
.comparateur__curseur::-moz-range-thumb {
    width: 48px;
    height: 48px;
    background: transparent;
    border: 0;
    cursor: ew-resize;
}
.comparateur__curseur:focus { outline: none; }
.comparateur__curseur:focus-visible ~ .comparateur__poignee::after {
    outline: 3px solid var(--teal-deep);
    outline-offset: 3px;
}

.comparateur__legende {
    margin-top: 10px;
    text-align: center;
    font-family: "Dancing Script", cursive;
    font-size: 1.3rem;
    color: var(--teal-deep);
}
.comparateur__legende small {
    display: block;
    font-family: "Mulish", system-ui, sans-serif;
    font-weight: 600;
    font-size: .76rem;
    color: var(--pencil);
}

/* Commandes du carrousel : flèches et points. Le glissement horizontal restant
   acquis au comparateur, c'est le seul moyen de changer d'élève. */
[data-carrousel-diapositive][hidden] {
    display: none;
}
.carrousel__commandes {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-top: 18px;
}
.carrousel__fleche {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 2px solid var(--teal);
    border-radius: 50%;
    color: var(--teal-deep);
    transition: background-color .15s, border-color .15s;
}
.carrousel__fleche:hover {
    background: var(--cream-2);
    border-color: var(--orange);
}
.carrousel__points {
    display: flex;
    gap: 10px;
}
.carrousel__point {
    width: 13px;
    height: 13px;
    border: 2px solid var(--pencil);
    border-radius: 50%;
    transition: background-color .15s, border-color .15s;
}
.carrousel__point[aria-current="true"] {
    background: var(--orange-ink);
    border-color: var(--orange-ink);
}
.carrousel__fleche:focus-visible,
.carrousel__point:focus-visible {
    outline: 3px solid var(--teal-deep);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .carrousel__fleche,
    .carrousel__point { transition: none; }
}

.carte-visite__tape {
    position: absolute;
    top: -12px;
    left: 50%;
    width: 84px;
    height: 22px;
    transform: translateX(-50%) rotate(-3deg);
    background: rgba(245, 179, 1, .5);
}

/* =========================================================================
   « POUR QUI ? » — ONGLETS / INTERCALAIRES
   ========================================================================= */
/* Chaque public porte son accent DA : canard, jaune, orange. L'onglet actif passe
   en couleur pleine et se fond dans son panneau (languette + fiche = un seul bloc). */
.tab--canard,
.tabpanel--canard {
    --tab-plein: var(--teal);
    --tab-clair: #a2c1c5;
    --tab-doux: #ecf3f2;
    --tab-encre: #fff;
}
.tab--jaune,
.tabpanel--jaune {
    --tab-plein: var(--yellow);
    --tab-clair: #fadd8d;
    --tab-doux: #fdf4d9;
    --tab-encre: var(--ink-deep);
}
.tab--orange,
.tabpanel--orange {
    --tab-plein: var(--orange);
    --tab-clair: #f6c9aa;
    --tab-doux: #fcefe6;
    --tab-encre: var(--ink-deep);
}

.tabs {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-end;
    gap: 6px;
    flex-wrap: wrap;
}
.tabs button {
    border: none;
    cursor: pointer;
    padding: 13px 24px;
    font-family: "Mulish", system-ui, sans-serif;
    font-weight: 800;
    font-size: .95rem;
    color: var(--ink-deep);
    background: var(--tab-clair);
    border-radius: 12px 12px 0 0;
    transition: background-color .15s, color .15s, filter .15s;
}
.tabs button:hover { filter: brightness(.95); }
/* L'onglet actif déborde de 3px pour recouvrir le filet du panneau : aucune couture */
.tabs button[aria-selected="true"] {
    margin-bottom: -3px;
    padding-bottom: 16px;
    background: var(--tab-plein);
    color: var(--tab-encre);
    filter: none;
}
.tabs button:focus-visible {
    outline: 3px solid var(--teal-deep);
    outline-offset: 2px;
}
.tabpanel {
    background: var(--tab-doux);
    border: 2px solid var(--tab-plein);
    border-top-width: 3px;
    border-radius: 0 14px 14px 14px;
    padding: 26px 28px;
    color: var(--ink-2);
}
.tabpanel:focus-visible {
    outline: 3px solid var(--teal-deep);
    outline-offset: 2px;
}
.tabpanel[hidden] { display: none; }
@media (max-width: 420px) {
    .tabs { gap: 4px; }
    .tabs button { padding: 11px 16px; font-size: .9rem; }
    .tabs button[aria-selected="true"] { padding-bottom: 14px; }
    .tabpanel { padding: 22px 20px; }
}

/* =========================================================================
   « TARIF » — ÉTIQUETTE PRIX (sticker jaune, prix en gros)
   ========================================================================= */
.etiquette {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    background: #FCE7A6;
    border: 2px solid var(--yellow);
    border-radius: 14px;
    padding: 16px 32px;
    transform: rotate(-2deg);
    box-shadow: 0 14px 30px -22px rgba(20, 50, 45, .5);
}
.etiquette .price {
    font-family: "Spectral", serif;
    font-weight: 700;
    font-size: 3.2rem;
    line-height: 1;
    color: var(--teal-deep);
}
.etiquette .unit {
    font-family: "Mulish", system-ui, sans-serif;
    font-weight: 700;
    font-size: 1rem;
    color: #7a5a00;
}

/* =========================================================================
   « ILS EN PARLENT » — TAMPON (cachet encreur)
   ========================================================================= */
.tampon {
    position: relative;
    flex: none;
    width: 132px;
    height: 132px;
    border-radius: 50%;
    border: 3px solid var(--orange-ink);
    color: var(--orange-ink);
    display: grid;
    place-items: center;
    text-align: center;
    transform: rotate(-8deg);
}
.tampon::before {
    content: "";
    position: absolute;
    inset: 8px;
    border-radius: 50%;
    border: 2px dashed var(--orange-ink);
}
.tampon b {
    display: block;
    font-family: "Spectral", serif;
    font-weight: 700;
    font-size: 1.15rem;
    line-height: 1.05;
}
.tampon span {
    display: block;
    margin-top: 4px;
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

/* =========================================================================
   « QUESTIONS FRÉQUENTES » — marqueurs +/- à l'encre orange
   ========================================================================= */
.faq-list summary { list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
    content: "+";
    margin-left: 16px;
    color: var(--orange-ink);
    font-weight: 800;
    font-size: 1.4rem;
    line-height: 1;
}
.faq-list details[open] summary::after { content: "\2013"; }

/* =========================================================================
   « BLOG » — CARTES EN COPIE DOUBLE (encadré consigne + corps ligné)
   ========================================================================= */
/* La seconde feuille qui dépasse est rendue par deux ombres pleines décalées
   (papier puis filet), plutôt qu'un pseudo-élément en z-index négatif. */
.copie-double {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border: 1px solid #e6ddca;
    border-radius: 3px 3px 10px 3px;
    padding: 18px 20px 20px;
    box-shadow:
        6px 6px 0 -1px #fdfaf1,
        6px 6px 0 0 #e6ddca,
        0 18px 40px -30px rgba(20, 50, 45, .5);
    transition: transform .15s, box-shadow .15s, border-color .15s;
}
.copie-double:hover {
    transform: translateY(-2px);
    box-shadow:
        8px 8px 0 -1px #fdfaf1,
        8px 8px 0 0 var(--orange),
        0 22px 44px -28px rgba(20, 50, 45, .55);
}
.copie-double:focus-visible {
    outline: 3px solid var(--teal-deep);
    outline-offset: 3px;
}

/* L'encadré « consigne » en tête de copie : il porte le titre de l'article */
.copie-double__consigne {
    border: 2px solid var(--teal);
    border-radius: 4px;
    background: var(--cream);
    padding: 12px 14px;
    transition: border-color .15s;
}
.copie-double:hover .copie-double__consigne { border-color: var(--orange); }
.copie-double__label,
.article-label {
    display: block;
    margin-bottom: 5px;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--orange-ink);
}
.copie-double__titre {
    font-size: 1.1rem;
    line-height: 1.3;
}

/* Corps de copie : marge orange à gauche, réglure calée sur la ligne de texte */
.copie-double__corps {
    margin-top: 16px;
    padding-left: 34px;
    background:
        linear-gradient(90deg, transparent 22px, rgba(232, 121, 43, .45) 22px 23px, transparent 23px),
        repeating-linear-gradient(#fff 0 27px, #e6ecf3 27px 28px);
}
.copie-double__extrait {
    font-size: .95rem;
    line-height: 28px;
    color: var(--ink-2);
}
.copie-double__lire {
    margin-top: auto;
    padding-top: 16px;
    font-weight: 700;
    color: var(--teal);
}

@media (prefers-reduced-motion: reduce) {
    .copie-double { transition: none; }
    .copie-double:hover { transform: none; }
}

/* =========================================================================
   PAGES D'ARTICLES — écho de la carte : consigne en tête, encart d'appel
   ========================================================================= */
.article-consigne {
    border: 2px solid var(--teal);
    border-radius: 6px;
    background: var(--cream);
    padding: 22px 24px;
}
.article-cta {
    background: var(--cream-2);
    border-left: 4px solid var(--orange);
    border-radius: 0 8px 8px 0;
    padding: 24px 26px;
}
@media (max-width: 640px) {
    .article-consigne { padding: 18px 18px; }
    .article-cta { padding: 20px 20px; }
}

/* =========================================================================
   « CONTACT » — FICHE, CARTE DE VISITE, INTERCALAIRE AGENDA
   ========================================================================= */

/* Le formulaire posé sur une page de cahier (même papier que .manuel-page) */
.fiche-contact {
    background: #fdfaf1;
    border: 1px solid #e6ddca;
    border-top: 4px solid var(--orange);
    border-radius: 6px;
    padding: 28px 30px;
    box-shadow: 0 22px 50px -34px rgba(20, 50, 45, .4);
}

/* Coordonnées présentées comme une carte de visite scotchée (posée droite) */
.carte-visite {
    position: relative;
    background: #fff;
    border: 1px solid #e6ddca;
    border-radius: 6px;
    padding: 30px 30px 28px;
    box-shadow: 0 22px 50px -34px rgba(20, 50, 45, .4);
}
/* Puce « pastille de correction » devant chaque coordonnée */
.carte-visite dl > div {
    position: relative;
    padding-left: 22px;
}
.carte-visite dl > div::before {
    content: "";
    position: absolute;
    left: 0;
    top: .6em;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 2px solid var(--orange);
}

/* L'embed Calendly rangé derrière son intercalaire, même vocabulaire que .tabs */
.agenda__onglet {
    position: relative;
    z-index: 1;
    display: inline-block;
    margin-bottom: -3px;
    padding: 12px 24px;
    background: var(--teal);
    color: #fff;
    font-family: "Mulish", system-ui, sans-serif;
    font-weight: 800;
    border-radius: 12px 12px 0 0;
}
.agenda__page {
    background: #fff;
    border: 2px solid var(--teal);
    border-top-width: 3px;
    border-radius: 0 14px 14px 14px;
    padding: 10px;
    box-shadow: 0 22px 50px -34px rgba(20, 50, 45, .4);
}

@media (max-width: 640px) {
    .fiche-contact { padding: 22px 20px; }
    .carte-visite { padding: 26px 22px 24px; }
    .agenda__onglet { padding: 11px 18px; font-size: .95rem; }
    .agenda__page { padding: 4px; }
}