/* ══════════════════════════════════════════════════════════════════
   composer.css — le configurateur « Composez votre co-offre »

   FEUILLE SÉPARÉE, ET POURQUOI
   site.css est appelé avec une empreinte (?v=…) qu'il faut recalculer
   et reposer sur les 40 pages dès qu'on y touche. Le module a donc sa
   propre feuille, chargée par ses pages seulement. Il n'emprunte à
   site.css que ses JETONS — couleurs, polices, arrondis, durées.

   MOBILE D'ABORD
   La plupart des visites se font au téléphone (test utilisateur du
   18/09). Le même test a dit « trop petit » deux fois : ici le corps
   de texte ne descend pas sous 17 px et les cibles font 44 px.
   ══════════════════════════════════════════════════════════════════ */

.composer {
    --col-gauche: minmax(0, 1fr);
    /* PLUS ÉTROITE QU'AVANT (470 → 400).
       Pendant qu'on choisit, la colonne de droite sert à donner un
       retour — le prix, ce que ça produit — pas à faire lire un
       contrat. Les 70 px rendus au milieu font passer la grille de
       trois à quatre vignettes par ligne, ce qui enlève une rangée
       entière à l'écran. */
    --col-droite: minmax(0, 400px);
    --carte-r: 10px;
    /* Le test utilisateur du 18/09 a dit « trop petit » deux fois. Sur
       téléphone, le corps ne descend pas sous 17 px : ce jeton le tient
       en un seul endroit plutôt que dans trente déclarations. */
    /* La planche montre de GRANDES icônes et un texte lisible à
       distance. Trois retours de Nathan sur « trop petit » : le jeton
       part plus haut, et les icônes doublent. */
    /* Calé pour qu'un écran d'ordinateur standard (1440 × 900) montre
       les deux colonnes d'un coup d'œil. Monter davantage oblige à
       défiler pour comprendre la page, ce qui tue le principe. */
    /* LA LISIBILITÉ PASSE AVANT LA DENSITÉ.
       La version d'avant descendait jusqu'à 0,74 rem — 12 pixels — pour
       faire tenir l'étape sur un portable de quinze pouces. Nathan,
       20/09 : « le texte est très peu lisible ». Il a raison, et
       l'arbitrage était mauvais : un outil qu'on ne lit pas ne sert à
       rien, même s'il tient à l'écran.
       PLANCHER : rien en dessous de 0,9 rem, soit 14,4 px, et 1,08 rem
       pour le corps. La place se gagne désormais en MONTRANT MOINS —
       le filtre « qui est devant la caméra », les paquets repliés — et
       non en rapetissant ce qui reste. */
    --txt: 1.08rem;
    --txt-petit: 1rem;
    --icone: 42px;
    padding: clamp(.9rem, 2vw, 1.4rem) 0 5rem;
}
@media (max-width: 980px) {
    /* Au téléphone la contrainte des 15 pouces ne s'applique pas : on
       défile de toute façon, et le test du 18/09 a dit « trop petit »
       deux fois. Le corps et les icônes y remontent. */
    .composer, .barre-panier, .feuille { --txt: 1.12rem; --txt-petit: 1.04rem; --icone: 74px; }
}

/* ── La coupure en deux ─────────────────────────────────────────── */
.composer__grille {
    display: grid;
    grid-template-columns: var(--col-gauche);
    gap: clamp(1.2rem, 2.5vw, 2rem);
}
@media (min-width: 981px) {
    .composer__grille { grid-template-columns: var(--col-gauche) var(--col-droite); align-items: start; }
    /* « .composer__grille > » N'EST PAS DÉCORATIF. Écrit « .composer__droite »
       tout court, ce bloc perdait contre la règle du cadre, plus bas, qui
       pose `position: relative` avec le même poids : la colonne n'a
       JAMAIS collé, et son `top: 92px` la décalait de 92 pixels vers le
       bas. D'où, relevé le 22/09 : « à droite je dois dérouler ». */
    .composer__grille > .composer__droite {
        position: sticky; top: 92px;
        /* ELLE NE DOIT PLUS PILOTER LA HAUTEUR DE LA PAGE.
           Le récapitulatif, le calendrier et le plan de publication
           s'allongent avec le panier : à six lignes cochées, la
           colonne de droite mesurait deux mille pixels et emportait
           toute la page avec elle, alors qu'on regardait le milieu.
           Elle défile maintenant dans son propre cadre. */
        /* Le défilement intérieur ne s'applique QUE si la colonne
           dépasse vraiment la fenêtre — une classe posée par le
           JavaScript après mesure. Sinon on héritait d'une barre de
           défilement dans un cadre qui tenait largement à l'écran. */
        align-self: start;
    }
    .composer__droite.deborde {
        max-height: calc(100vh - 112px);
        overflow-y: auto; overscroll-behavior: contain;
    }
    /* Une barre de défilement discrète, dans les couleurs de la charte
       plutôt que le gris du système. */
    .composer__droite::-webkit-scrollbar { width: 8px; }
    .composer__droite::-webkit-scrollbar-thumb { background: var(--crayon-light); border-radius: 999px; }
    .composer__droite { scrollbar-width: thin; scrollbar-color: var(--crayon-light) transparent; }
}

.composer__pile { min-width: 0; }
.composer__gauche, .composer__milieu, .composer__droite {
    /* Le cadre ajoute son padding à la largeur allouée par la grille :
       sans box-sizing, la colonne droite dépassait de son cadre. */
    box-sizing: border-box;
    /* La planche pose chaque colonne dans un grand cadre au trait, avec
       son numéro à l'intérieur. C'est ce cadre qui fait « page de
       carnet » plutôt que « formulaire ». */
    position: relative;
    padding: clamp(.8rem, 1.6vw, 1.15rem);
    background: var(--ivoire);
    border: 2px solid var(--crayon);
    border-radius: 14px;
    box-shadow: 4px 5px 0 rgba(142, 74, 90, .10);
}


/* ── Les formules de départ, version servie sans JavaScript ─────
   Cette liste est ce que voient les moteurs de recherche et ce qui
   s'affiche si le script échoue. Elle doit donc être lisible seule,
   pas seulement servir de réservoir de données. */
/* Les quatre formules statiques reprennent les cartes d'offres de
   l'accueil (balisage .offre, styles de site.css) : c'est ce que lit un
   moteur, ce que voit un visiteur sans script, et ce qu'on voit sous le
   questionnaire. Une fois le configurateur monté, elles feraient
   doublon — les mêmes formules sont cliquables à l'intérieur. */
body:has(#composer[data-etat="prêt"]) .composer-formules { display: none; }
.composer-formules__tete { margin-bottom: clamp(1.2rem, 3vw, 2rem); }
.composer__noscript { padding: 1rem; border: 2px dashed var(--lie); border-radius: 10px; font-size: 1.05rem; }

/* ── Les formules de départ, dans le configurateur ──────────────── */
.presets { display: grid; gap: 1.4rem .7rem; margin: .4rem 0 0; }
/* Les formules toutes faites ne sont plus en tête : quelqu'un qui sait
   ce qu'il veut compose directement, et celui qui sèche les trouve en
   bas, là où il arrive justement quand il ne sait pas quoi cocher. */
.presets-bloc { margin-top: 2.4rem; padding-top: 1.6rem; border-top: 1.5px dashed var(--ivoire-dark); }
.presets-bloc__titre { font-family: var(--font-hand); font-size: 1.6rem; color: var(--charbon); margin: 0 0 .2rem; }
.presets-bloc__sous { font-size: var(--txt); color: var(--crayon-light); margin: 0 0 1.4rem; }
@media (min-width: 620px) { .presets { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Les formules reprennent l'habillage des cartes d'offres du site :
   la capsule du nom, l'emblème, le prix en gros. Une formule doit se
   reconnaître d'une page à l'autre. */
.preset {
    position: relative; display: flex; flex-direction: column; gap: .3rem;
    width: 100%; min-height: 44px; padding: 1.6rem 1rem 1rem;
    text-align: center; font: inherit; font-size: var(--txt); cursor: pointer;
    background: var(--ivoire); border: 2px solid var(--crayon);
    border-radius: 12px;
    box-shadow: 4px 5px 0 rgba(142, 74, 90, .13);
    transition: transform var(--t-vif, .18s) var(--ease-doux, ease), box-shadow var(--t-vif, .18s);
}
.preset__capsule {
    position: absolute; top: -.85rem; left: 50%; transform: translateX(-50%) rotate(-1.2deg);
    padding: .15rem .9rem; border-radius: 6px; white-space: nowrap;
    font-family: var(--font-hand); font-size: 1.25rem; color: #fff; background: var(--lie);
}
.preset:nth-child(2) .preset__capsule { background: var(--vert); }
.preset:nth-child(3) .preset__capsule { background: var(--jaune); color: var(--charbon); }
.preset:nth-child(4) .preset__capsule { background: var(--bleu); }
.preset:hover, .preset:focus-visible { transform: translate(-1px, -2px); box-shadow: 5px 7px 0 rgba(142, 74, 90, .17); }
.preset[aria-pressed="true"] { border-color: var(--lie); background: var(--cire-bg, #f7f5e4); }
.preset__nom { display: none; }
.preset__resume { font-size: var(--txt-petit); color: var(--crayon); margin: .2rem 0 0; line-height: 1.45; }
.preset__prix { font-family: var(--font-hand); font-size: 1.5rem; color: var(--charbon); margin: .35rem 0 0; }
/* Ce qui se paie une fois, sous ce qui revient chaque mois — en plus
   petit, parce que les deux nombres ne s'additionnent pas et que le
   mensuel est celui qui décide. */
.preset__prix-detail { font-size: var(--txt-petit); color: var(--crayon); margin: .1rem 0 0; }
.preset__embleme { width: 64px; height: 64px; object-fit: contain; margin: 0 auto; }
.preset__ruban {
    position: absolute; top: -10px; right: 10px;
    font-family: var(--font-hand); font-size: var(--txt-petit); color: #fff;
    background: var(--vert); padding: .1rem .55rem; border-radius: 4px;
    transform: rotate(-2deg);
}

/* ── Les catégories, et leur surligneur peint ───────────────────── */
.cat { margin: 2rem 0 .9rem; }
.cat__titre {
    margin-left: .35rem;
    /* isolation : sans elle, le z-index -1 du surligneur le fait passer
       DERRIÈRE le fond du cadre de colonne, et la tache de couleur
       disparaît. Le contexte d'empilement le retient dans le titre. */
    position: relative; isolation: isolate; display: inline-block;
    font-family: var(--font-hand); font-size: 1.75rem; color: var(--charbon);
    padding: .12rem .8rem .18rem; margin: 0;
}
.cat__surligneur {
    /* Le trait déborde du mot : c'est ce que fait un surligneur tenu à
       la main, et c'est ce que montre la planche. Collé au texte, il se
       lit comme un fond de bouton. */
    position: absolute; inset: -9px -18px -7px -16px; z-index: -1;
    background-size: 100% 100%; background-repeat: no-repeat;
    /* VISIBLE PAR DÉFAUT. Une transition ne progresse pas quand l'onglet
       est en arrière-plan : avec l'ancienne écriture, le surligneur
       restait invisible — un élément de la charte disparaissait pour qui
       ouvre la page dans un onglet de fond. L'animation ne fait donc que
       le RÉVÉLER, elle n'est plus responsable de sa présence. */
    clip-path: inset(0 0 0 0);
}
.cat.est-vue .cat__surligneur {
    animation: peindre .45s var(--ease-pose, cubic-bezier(.25,.8,.3,1)) both;
}
@keyframes peindre { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

.cat__accroche { font-size: var(--txt); color: var(--crayon-light); margin: .55rem 0 1.1rem; }

/* ── Les prestations : des icônes cliquables, pas des cartes ─────
   La planche ne montre aucune bordure par élément : les icônes d'une
   même catégorie sont posées ensemble dans une bande claire. Une carte
   encadrée par prestation fabrique une grille de boutons ; une bande
   commune se lit comme une planche d'inventaire, ce qui est le sujet. */
.cartes {
    display: grid; gap: .4rem;
    /* LA LARGEUR QUI COMPTE EST CELLE DE LA COLONNE, PAS DE LA FENÊTRE.
       Les paliers d'avant se déclenchaient sur @media, donc sur la
       fenêtre : à 1 440 px on passait à quatre colonnes alors que la
       colonne du milieu n'en fait que 600 — d'où des vignettes de
       126 px et « Vidéo verticale (réel) » coupé sur trois lignes.
       auto-fill compte dans l'espace réellement disponible, et le
       nombre de colonnes s'ajuste tout seul, ici comme au téléphone. */
    /* auto-FIT, pas auto-FILL. La différence tient en un mot et se
       voyait à chaque étape courte : auto-fill GARDE les colonnes
       vides — sur Acquisition, deux vignettes occupaient deux pistes
       sur trois et la troisième restait béante. auto-fit replie les
       pistes vides et les vignettes s'étalent sur la largeur. */
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 138px), 1fr));
    padding: .7rem .6rem;
    background: rgba(226, 215, 196, .38);
    border-radius: 10px;
}

.carte {
    position: relative; display: flex; flex-direction: column;
    align-items: center; justify-content: flex-start; text-align: center; gap: .15rem;
    padding: .5rem .35rem .45rem;
    background: none; border: 0; border-radius: 8px; box-shadow: none;
    transition: transform var(--t-vif, .18s) var(--ease-doux, ease), background var(--t-vif, .18s);
}
/* Une vignette cochée se signale par son CADRE, pas par un fond : un
   aplat de couleur derrière une illustration l'étouffe, et douze aplats
   côte à côte font une mosaïque. Le trait suffit. */
.carte:hover { background: rgba(226, 215, 196, .35); }
.carte.est-choisie {
    background: none;
    box-shadow: inset 0 0 0 2.5px var(--vert);
    transform: none;
}
.carte.est-choisie .carte__nom { font-size: .97rem; line-height: 1.22; color: var(--vert); font-weight: 600; }
.carte__icone { width: var(--icone); height: var(--icone); object-fit: contain; }
.carte.est-choisie .carte__icone { animation: fretille .5s var(--ease-doux, ease); }
@keyframes fretille { 0%,100%{transform:rotate(0)} 30%{transform:rotate(-7deg) scale(1.06)} 65%{transform:rotate(5deg)} }

.carte__nom { font-size: .97rem; line-height: 1.22;
    /* width:100% et non max-width : dans une colonne flex centrée,
       l'enfant prend sa largeur NATURELLE, donc un nom long sortait de
       la vignette au lieu de passer à la ligne. */
    /* Pas de césure : « Commu-nity manage-ment » est pire qu'un nom
       sur trois lignes. On élargit la vignette à la place. */
    width: 100%; font-family: var(--font-body); font-size: var(--txt); line-height: 1.3;
    color: var(--charbon); margin: 0; overflow-wrap: normal; hyphens: manual;
}
/* Pas de prix sur la vignette : la planche n'en montre aucun, et le
   récapitulatif de droite est le seul endroit où le chiffre a un sens. */
.carte__prix, .carte__derive, .carte__quoi { display: none; }
.carte__recommande { width: 100%; }
.carte__recommande {
    order: 3; margin: .15rem 0 0; padding: .05rem .4rem;
    font-family: var(--font-hand); font-size: 1rem; color: var(--charbon);
    background: var(--jaune-light); border-radius: 4px; transform: rotate(-1deg);
}
.carte__pourquoi { display: none; }

/* la case, dessinée, en haut à droite de l'icône */
.carte__coche {
    position: absolute; top: .5rem; right: .5rem; width: 28px; height: 28px;
    border: 2px solid var(--crayon); border-radius: 4px;
    background: var(--ivoire); cursor: pointer; padding: 0;
    display: grid; place-items: center;
}
.carte__coche svg { width: 21px; height: 21px; stroke: var(--vert); stroke-width: 3.4; fill: none;
    stroke-linecap: round; stroke-linejoin: round;
    stroke-dasharray: 30; stroke-dashoffset: 30; transition: stroke-dashoffset .3s var(--ease-pose, ease); }
.carte.est-choisie .carte__coche svg { stroke-dashoffset: 0; }
.carte.est-choisie .carte__coche { border-color: var(--vert); }

/* LE DÉCLENCHEUR ET LES RÉGLAGES.
   Le déclencheur couvre la carte pour qu'on puisse cocher en visant
   n'importe où. Mais il la couvrait AUSSI là où se trouvent le « + »
   et les lots de photos : le clic arrivait sur lui, la carte se
   décochait, et le nombre de photos était inatteignable. Les réglages
   se hissent donc au-dessus de lui dans l'ordre de peinture. Un
   z-index sur une zone statique ne ferait rien : d'où le position. */
.carte__declencheur { position: absolute; inset: 0; border: 0; background: none; cursor: pointer; border-radius: 8px; z-index: 1; }
.carte__declencheur:focus-visible { outline: 3px solid var(--lie); outline-offset: 2px; }

.carte__reglages { width: 100%; display: flex; justify-content: center; flex-wrap: wrap;
    gap: .25rem; align-items: center; margin-top: .35rem;
    position: relative; z-index: 3; max-width: 100%; box-sizing: border-box;
    padding-top: .35rem; border-top: 1.5px dashed var(--crayon-light); }
.carte, .carte__corps { min-width: 0; max-width: 100%; box-sizing: border-box; }
.qte { display: inline-flex; align-items: center; border: 1.5px solid var(--crayon); border-radius: 6px; overflow: hidden; }
.qte__b { width: 38px; height: 32px; font-size: 1.1rem; background: var(--ivoire); border: 0; cursor: pointer; color: var(--charbon); }
.qte__v { min-width: 2.2rem; text-align: center; font-size: var(--txt-petit); }
.lots { display: flex; gap: .25rem; flex-wrap: wrap; justify-content: center; }
.lot { min-height: 30px; padding: .1rem .42rem; font: inherit; font-size: var(--txt-petit); cursor: pointer;
    background: var(--ivoire); border: 1.5px solid var(--crayon); border-radius: 5px; }
.lot[aria-pressed="true"] { background: var(--lie); color: #fff; border-color: var(--lie); }

/* ── La bulle d'explication ─────────────────────────────────────── */
.carte__aide {
    /* EN BAS DE LA VIGNETTE, DANS LE FLUX.
       Il était en position absolue dans le coin — ce qui allait tant
       que c'était un « ? » rond de 28 px. Devenu « ▸ exemple », large
       de 73 px, il recouvrait le dessin : c'est le bogue signalé le
       20/09. Posé en bas, il ne peut plus rien recouvrir. */
    position: relative; z-index: 3; margin-top: .35rem; width: 100%;
    border: 1.5px solid var(--crayon-light); background: var(--ivoire);
    color: var(--crayon); cursor: pointer;
}
/* Elle s'ouvrait sous la carte, en position absolue, et se faisait
   couper par le bas de la colonne : on ne lisait rien. En position
   FIXE, le JavaScript la place au-dessus ou en dessous selon la place,
   et la ramène dans la fenêtre si elle déborde d'un côté. */
.bulle {
    position: fixed; z-index: 120;
    width: min(360px, calc(100vw - 24px));
    max-height: min(62vh, 480px); overflow-y: auto;
    padding: .9rem 1rem 1rem; background: var(--ivoire);
    border: 2px solid var(--crayon); border-radius: 12px;
    box-shadow: 6px 8px 0 rgba(142, 74, 90, .20);
    font-size: var(--txt-petit); line-height: 1.55;
}
.bulle__fleche {
    position: absolute; bottom: -9px; width: 14px; height: 14px;
    background: var(--ivoire); border-right: 2px solid var(--crayon); border-bottom: 2px solid var(--crayon);
    transform: rotate(45deg);
}
.bulle--dessous .bulle__fleche { bottom: auto; top: -9px; transform: rotate(225deg); }
.bulle__tete { display: flex; align-items: center; gap: .6rem; margin-bottom: .6rem;
    padding-bottom: .6rem; border-bottom: 1.5px solid var(--crayon-light); }
.bulle__dessin { width: 54px; height: 54px; border-radius: 50%; object-fit: cover;
    border: 2px solid var(--crayon-light); background: #fff; flex: none; }
.bulle__nom { font-family: var(--font-hand); font-size: 1.3rem; color: var(--charbon); margin: 0; }
.bulle__qui { font-size: .97rem; color: var(--crayon); margin: 0; }
.bulle__fermer { margin-left: auto; flex: none; width: 34px; height: 34px; border-radius: 50%;
    border: 1.5px solid var(--crayon-light); background: none; color: var(--crayon);
    font-size: 1.3rem; line-height: 1; cursor: pointer; }
.bulle__fermer:hover { background: var(--crayon-light); }
.bulle__mention { font-size: .95rem; color: var(--crayon); font-style: italic; }
.bulle[hidden] { display: none; }
.bulle dt { font-family: var(--font-hand); font-size: 1.1rem; color: var(--lie); margin-top: .5rem; }
.bulle dt:first-child { margin-top: 0; }
.bulle dd { margin: .1rem 0 0; }
.bulle__lien { display: inline-block; margin-top: .7rem; color: var(--lie); text-decoration: underline; }

/* ── Colonne droite : on montre, on ne liste pas ─────────────────
   La planche ne met aucune liste à droite : de grands dessins, le
   nombre en gros dessous, et un calendrier dessiné pour la durée.
   C'est ce qui fait passer « votre offre » du bon de commande à la
   projection. */
.co-offre { background: none; border: 0; padding: 0; }

.co-offre__bloc { margin-bottom: 1.1rem; padding: 1.5rem 1rem 1.2rem;
    background: var(--ivoire); border: 2px solid var(--crayon); border-radius: 12px;
    box-shadow: 4px 5px 0 rgba(142, 74, 90, .10); }
.co-offre__bloc-titre { display: inline-block; font-family: var(--font-hand); font-size: 1.45rem;
    color: var(--charbon); margin: -2.1rem 0 .9rem -.2rem; padding: .12rem .75rem;
    border-radius: 4px; transform: rotate(-1deg); background: var(--brique-clair, #ddc3ba); }


.effets { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }
.effet { display: grid; place-items: center; gap: .15rem; width: calc(33.333% - .34rem); }
.effet img { width: 66px; height: 66px; object-fit: contain; }
.effet span { font-size: var(--txt-petit); color: var(--crayon); text-align: center; line-height: 1.3; }

/* Le calendrier reprend celui de l'espace client (.esp-cal) : une vraie
   grille de mois, des cases blanches séparées d'un filet, le numéro du
   jour et des pastilles par type. Un damier de carrés colorés ne dit
   rien ; un mois avec ses jours se lit tout de suite. */
.calendrier {
    display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 1px; margin-top: .9rem;
    background: var(--ivoire-dark); border: 1px solid var(--ivoire-dark);
    border-radius: 8px; overflow: hidden;
}
.cal__entete {
    background: var(--ivoire-warm); text-align: center; padding: .4rem .1rem;
    font-family: var(--font-hand); font-size: 1.15rem; color: var(--crayon-light);
}
.cal__j {
    background: #fff; min-height: 2.9rem; padding: .25rem .15rem;
    display: flex; flex-direction: column; align-items: center; gap: .2rem;
}
.cal__j--hors { background: var(--ivoire-warm); }
.cal__num { font-size: 1rem; color: var(--crayon-light); line-height: 1.1; }
.cal__points { display: flex; gap: 2px; flex-wrap: wrap; justify-content: center; }
.cal__point { width: 8px; height: 8px; border-radius: 50%; background: var(--crayon-light); }
.cal__point--reel  { background: var(--lie); }
.cal__point--photo { background: var(--vert); }
.cal__point--video { background: var(--bleu); }
.cal__j.est-remplie { animation: pose .25s var(--ease-pose, ease) backwards; }
@keyframes pose { from { transform: scale(.85); opacity: 0 } to { transform: scale(1); opacity: 1 } }
.cal__legende { display: flex; gap: .8rem; flex-wrap: wrap; align-items: center;
    font-size: var(--txt-petit); color: var(--crayon-light); margin-top: .5rem; }
.cal__puce { display: inline-block; width: .8rem; height: .8rem; border-radius: 50%; margin-right: .25rem; vertical-align: -1px; }

/* Une seule colonne, toujours. La media query regardait la largeur de la
   FENÊTRE alors que la colonne droite n'en fait que 420 : le bloc prix
   prenait toute la place et écrasait la liste, dont il ne restait que
   des fins de mots. */

.prix {
    text-align: center; padding: 1rem; align-self: stretch;
    background: var(--ivoire); border: 2px solid var(--crayon); border-radius: 10px;
    box-shadow: 3px 4px 0 rgba(142, 74, 90, .12);
}

.prix__avant { font-size: 1.25rem; color: var(--crayon-light); position: relative; display: inline-block; }
.prix__avant::after { content: ''; position: absolute; left: -3px; right: -3px; top: 52%; height: 2.5px;
    background: var(--lie); border-radius: 2px; transform-origin: left center; transform: scaleX(1); }
.prix__net { display: inline-block; font-family: var(--font-hand); font-size: 2.6rem; color: var(--charbon);
    line-height: 1.15; padding: 0 .35rem; background: linear-gradient(transparent 58%, var(--jaune-light) 58%); }
.prix__mention { font-size: var(--txt-petit); color: var(--crayon-light); margin: .35rem 0 0; line-height: 1.4; }
.prix__economie { display: block; font-family: var(--font-hand); font-size: 1.2rem; color: var(--vert); margin-top: .2rem; }

.tampon { display: inline-flex; align-items: center; gap: .25rem; margin: .35rem 0 0;
    padding: .28rem .7rem; border: 2.5px solid var(--lie);
    border-radius: 48% 52% 47% 53% / 55% 45% 55% 45%;
    font-family: var(--font-hand); font-size: 1.2rem; color: var(--lie); transform: rotate(-5deg);
    animation: tampon .4s var(--ease-pose, ease) backwards; }
@keyframes tampon { from { transform: scale(1.35) rotate(-12deg); opacity: 0 } to { transform: scale(1) rotate(-5deg); opacity: 1 } }
.tampon img { width: 20px; height: 20px; }

.co-rythme { display: flex; flex-wrap: wrap; gap: .35rem; }
.co-rythme__b { min-height: 44px; padding: .3rem .65rem; font: inherit; font-size: var(--txt-petit); cursor: pointer;
    background: var(--ivoire); border: 1.5px solid var(--crayon); border-radius: 6px; }
.co-rythme__b[aria-pressed="true"] { background: var(--vert); color: #fff; border-color: var(--vert); }

.co-offre__cta { display: block; width: 100%; margin-top: 1rem; min-height: 56px;
    font-family: var(--font-hand); font-size: 1.35rem; color: #fff; background: var(--lie);
    border: 0; border-radius: 8px; cursor: pointer; }
.co-offre__cta:hover { background: var(--lie-light); }
.co-offre__second { display: block; text-align: center; margin-top: .5rem; min-height: 44px; line-height: 44px;
    font-size: var(--txt-petit); color: var(--crayon); text-decoration: underline; }

/* ── Les annotations dans les marges ────────────────────────────── */
/* Les notes dans les marges. Elles n'existent que là où il y a
   vraiment de la marge : sous 1400 px elles se poseraient sur le
   contenu, et une annotation qui gêne n'est plus une annotation. */
.annot { display: none; }
@media (min-width: 1400px) {
    .annot { display: block; position: absolute; width: 175px; z-index: 5;
        font-family: var(--font-hand); font-size: 1.12rem; color: var(--lie); line-height: 1.28; }
    .annot svg { position: absolute; width: 62px; height: 46px; stroke: var(--lie);
        stroke-width: 1.8; fill: none; opacity: .75; }
    .annot--gauche { left: -196px; text-align: right; transform: rotate(-3deg); }
    .annot--gauche svg { right: -58px; top: 100%; }
    .annot--droite { right: -196px; transform: rotate(2.5deg); }
    /* Le tracé va de haut-gauche en bas-droite : à droite de la colonne,
       il pointait vers le vide. Retourné, il désigne la colonne. */
    .annot--droite svg { left: -56px; top: 100%; transform: scaleX(-1); }
}

/* La décoration : le village dans les vignes, en haut à droite. */
.composer__decor { display: none; }
@media (min-width: 980px) {
    .composer__decor { display: block; position: absolute; top: -18px; right: 0;
        width: 210px; opacity: .92; pointer-events: none; }
}
.composer__entete { position: relative; }

/* ── La barre collante du téléphone ─────────────────────────────── */
.barre-panier {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    display: flex; align-items: center; gap: .8rem;
    padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom));
    background: var(--ivoire); border-top: 2px solid var(--crayon);
    box-shadow: 0 -4px 14px rgba(142, 74, 90, .16);
    transform: translateY(110%); transition: transform .3s var(--ease-pose, ease);
}
.barre-panier.est-visible { transform: translateY(0); }
@media (min-width: 981px) { .barre-panier { display: none; } }
.barre-panier__total { font-family: var(--font-hand); font-size: 1.5rem; color: var(--charbon); }
.barre-panier__n { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 .35rem;
    background: var(--lie); color: #fff; border-radius: 13px; font-size: var(--txt-petit); }
.barre-panier__n.saute { animation: saute .42s var(--ease-pose, ease); }
@keyframes saute { 0%,100%{transform:translateY(0) scale(1)} 35%{transform:translateY(-9px) scale(1.18)} }
.barre-panier__voir { margin-left: auto; min-height: 44px; padding: .5rem 1rem; font: inherit; font-size: var(--txt);
    background: var(--lie); color: #fff; border: 0; border-radius: 8px; cursor: pointer; }

/* ── La feuille : panneau qui monte au téléphone, fenêtre centrée
   sur ordinateur ───────────────────────────────────────────────
   Elle n'était QUE le panneau du bas. Sur un écran large, ça donnait
   un bandeau de mille huit cents pixels collé en bas, avec le titre
   d'un côté et la croix à l'autre bout — c'est le bogue signalé le
   21/09. Le panneau reste au téléphone, où il est juste ; l'ordinateur
   reçoit une vraie fenêtre, centrée et bornée. */
.feuille { position: fixed; inset: 0; z-index: 70; display: grid; align-items: end; background: rgba(44,44,44,.45); }
.feuille[hidden] { display: none; }
.feuille__corps { max-height: 88vh; overflow: auto; background: var(--ivoire);
    border-radius: 16px 16px 0 0; padding: 1rem 1rem 2rem; animation: monte .3s var(--ease-pose, ease); }
@keyframes monte { from { transform: translateY(100%) } to { transform: translateY(0) } }
@media (min-width: 720px) {
    .feuille { place-items: center; padding: 1.5rem; }
    .feuille__corps {
        width: min(560px, 100%); max-height: min(82vh, 760px);
        border-radius: 16px; padding: 1.2rem 1.6rem 1.8rem;
        border: 2px solid var(--crayon);
        box-shadow: 8px 10px 0 rgba(142, 74, 90, .18);
        animation: parait .22s var(--ease-pose, ease);
    }
    @keyframes parait { from { opacity: 0; transform: translateY(14px) scale(.98) } to { opacity: 1; transform: none } }
}
.feuille__fermer { display: block; margin: 0 0 .6rem auto; min-width: 44px; min-height: 44px;
    border: 2px solid var(--crayon); border-radius: 8px; background: var(--ivoire); font-size: 1.2rem; cursor: pointer; }

/* l'icône qui vole vers le panier */
.vol { position: fixed; z-index: 80; width: 44px; height: 44px; pointer-events: none; object-fit: contain; }

/* ── Le ruban des tarifs provisoires ────────────────────────────── */
.provisoire {
    /* Avertissement INTERNE, pas un argument de vente. Il pesait
       cinquante pixels en travers de la page, soit plus que le titre
       de l'étape — au point qu'on le lisait avant l'outil. Réduit à un
       filet discret : il doit se voir, pas s'imposer. */
    display: inline-flex; align-items: center; gap: .4rem;
    margin: 0 0 .5rem; padding: .22rem .7rem;
    font-size: .94rem; line-height: 1.35; color: var(--charbon);
    background: color-mix(in srgb, var(--jaune) 40%, var(--ivoire));
    border: 1px solid color-mix(in srgb, var(--jaune) 70%, var(--crayon));
    border-radius: 999px;
}
.provisoire b { font-weight: 600; }

/* ── Mouvement réduit : tout devient instantané ─────────────────── */
@media (prefers-reduced-motion: reduce) {
    .composer *, .composer *::before, .composer *::after,
    .barre-panier, .feuille__corps, .vol {
        animation: none !important; transition: none !important;
    }
    .cat__surligneur { clip-path: inset(0 0 0 0) !important; }
    .prix__avant::after { transform: scaleX(1) !important; }
    .carte.est-choisie { transform: none !important; }
}

/* ══════════════════════════════════════════════
   L'ONBOARDING — six écrans, une question à la fois

   Une question par écran sur téléphone : un formulaire de six blocs
   fait fuir, six écrans d'une question se traversent en moins de
   quatre-vingt-dix secondes.
   ══════════════════════════════════════════════ */
.onb { max-width: 640px; margin: 0 auto; padding: 1.5rem 0 4rem; }
.onb__progression { display: flex; align-items: center; gap: .3rem; margin-bottom: 1.6rem; }
.onb__pas { flex: 1; height: 6px; border-radius: 3px; background: var(--ivoire-dark); transition: background .3s; }
.onb__pas.est-fait { background: var(--vert); }
.onb__pas.est-en-cours { background: var(--lie); }
.onb__compte { font-family: var(--font-hand); font-size: var(--txt-petit); color: var(--crayon-light); margin-left: .4rem; }

.onb__titre { font-family: var(--font-hand); font-size: clamp(1.7rem, 5vw, 2.3rem);
    color: var(--charbon); margin: 0 0 1.2rem; outline: none; }
.onb__champ { display: grid; gap: .45rem; }
/* CE QUI MANQUE DOIT SE VOIR. La règle d'avant teintait la bordure en
   bordeaux — or la bordure normale est déjà foncée : à l'écran, rien ne
   bougeait. Le champ fautif s'épaissit ET prend un fond rosé, ce qu'un
   champ voisin correct n'a pas. */
.onb__champ.est-incomplet .onb__input[aria-invalid],
.onb__champ .onb__input[aria-invalid] {
    border-color: var(--lie); border-width: 2.5px;
    background: color-mix(in srgb, var(--lie) 7%, var(--ivoire));
}
.onb__erreur {
    display: flex; align-items: flex-start; gap: .4rem;
    margin: .5rem 0 0; padding: .5rem .7rem;
    background: color-mix(in srgb, var(--lie) 9%, var(--ivoire));
    border-left: 3px solid var(--lie); border-radius: 0 7px 7px 0;
    font-size: var(--txt); line-height: 1.4; color: var(--lie);
}
/* Le « ! » vit dans la feuille de style : le texte du message reste
   alors une phrase propre pour un lecteur d'écran, qui n'a que faire
   d'une ponctuation décorative. */
.onb__erreur::before { content: "!"; font-family: var(--font-hand); font-size: 1.25rem; line-height: 1.25; flex: none; }
.onb__erreur[hidden] { display: none; }
.onb__label { font-size: var(--txt); color: var(--crayon); }
.onb__input { width: 100%; min-height: 52px; padding: .6rem .8rem; font: inherit; font-size: 1.1rem;
    background: var(--ivoire); border: 2px solid var(--crayon); border-radius: 8px; }
.onb__input:focus-visible { outline: 3px solid var(--lie); outline-offset: 2px; }
.onb__aide { font-size: var(--txt-petit); color: var(--crayon-light); margin: 0; }

.onb__suggestions { list-style: none; margin: .2rem 0 0; padding: 0; display: grid; gap: .25rem; }
.onb__suggestion { display: grid; gap: .1rem; width: 100%; min-height: 52px; padding: .5rem .8rem;
    text-align: left; font: inherit; cursor: pointer;
    background: var(--ivoire); border: 1.5px solid var(--ivoire-dark); border-radius: 8px; }
.onb__suggestion:hover { border-color: var(--lie); }
.onb__sugg-nom { font-size: var(--txt); color: var(--charbon); }
.onb__sugg-lieu { font-size: var(--txt-petit); color: var(--crayon-light); }

.onb__cartes { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.onb__carte {
    position: relative; display: grid; gap: .15rem; min-height: 56px;
    padding: .7rem 2.5rem .7rem .8rem; text-align: left;
    font: inherit; color: var(--charbon); cursor: pointer; background: var(--ivoire);
    border: 2px solid var(--crayon); border-radius: 10px;
    transition: transform .16s var(--ease-doux, ease), box-shadow .16s;
}
.onb__carte:hover { transform: translateY(-2px); box-shadow: 3px 4px 0 rgba(142, 74, 90, .12); }
.onb__carte:focus-visible { outline: 3px solid var(--lie); outline-offset: 2px; }
/* Cochée : un liseré vert et la case cochée, comme les vignettes du
   configurateur. L'ancien aplat bordeaux noyait le dessin. */
.onb__carte[aria-pressed="true"] {
    border-color: var(--vert); box-shadow: inset 0 0 0 1.5px var(--vert);
    background: color-mix(in srgb, var(--vert) 8%, var(--ivoire));
}
.onb__carte-nom { font-size: var(--txt); line-height: 1.3; }
.onb__carte-quoi { font-size: var(--txt-petit); opacity: .8; }
.onb__coche {
    position: absolute; top: .55rem; right: .55rem; width: 24px; height: 24px;
    display: grid; place-items: center;
    border: 2px solid var(--crayon); border-radius: 4px; background: var(--ivoire);
}
.onb__coche svg {
    width: 18px; height: 18px; fill: none; stroke: var(--vert); stroke-width: 3.4;
    stroke-linecap: round; stroke-linejoin: round;
    stroke-dasharray: 30; stroke-dashoffset: 30; transition: stroke-dashoffset .3s var(--ease-pose, ease);
}
.onb__carte[aria-pressed="true"] .onb__coche { border-color: var(--vert); }
.onb__carte[aria-pressed="true"] .onb__coche svg { stroke-dashoffset: 0; }

/* Les cartes à dessin : le dessin en grand, centré, le nom dessous. */
.onb__cartes--dessins { grid-template-columns: repeat(auto-fit, minmax(138px, 1fr)); gap: .6rem; }
.onb__carte--dessin {
    justify-items: center; align-content: start; text-align: center;
    min-height: 0; padding: .95rem .6rem .85rem;
}
.onb__carte--dessin .onb__img {
    width: 88px; height: 88px; margin: .1rem 0 .35rem;
    filter: drop-shadow(0 3px 4px rgba(107, 45, 62, .12));
}
.onb__carte--dessin .onb__carte-nom { font-size: 1.02rem; line-height: 1.28; }
@media (min-width: 561px) {
    .onb__cartes--dessins[data-n="5"] { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .onb__cartes--dessins[data-n="6"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .onb__cartes--dessins[data-n="5"] .onb__img { width: 76px; height: 76px; }
}
@media (max-width: 560px) {
    .onb__cartes--dessins { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .onb__carte--dessin .onb__img { width: 72px; height: 72px; }
}
@media (prefers-reduced-motion: reduce) { .onb__carte { transition: none; } .onb__carte:hover { transform: none; } }

.onb__info { font-size: var(--txt-petit); color: var(--crayon-light); margin: 1rem 0 0; line-height: 1.5; }
.onb__info a { color: var(--lie); text-decoration: underline; }

.onb__actions { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-top: 1.6rem; }
.onb__suivant { min-height: 56px; padding: .6rem 1.4rem; font-family: var(--font-hand); font-size: 1.3rem;
    color: #fff; background: var(--lie); border: 0; border-radius: 8px; cursor: pointer; }
.onb__suivant:disabled { opacity: .6; }
.onb__passer, .onb__direct { min-height: 44px; padding: .4rem .8rem; font: inherit; font-size: var(--txt-petit);
    color: var(--crayon); background: none; border: 0; text-decoration: underline; cursor: pointer; }

/* ══════════════════════════════════════════════
   CE QUE CHAQUE CHOSE PRODUIT

   « Une journée sur place, c'est une vidéo ou dix ? » — la question de
   Nathan, et elle n'avait pas de réponse à l'écran. Chaque vignette dit
   maintenant ce qu'elle livre, le récapitulatif le répète, et la
   captation affiche à droite ce qu'on peut en tirer.
   ══════════════════════════════════════════════ */
.carte__livre { font-size: .92rem; line-height: 1.25;
    display: block; font-size: .97rem; line-height: 1.25;
    color: var(--crayon-light); font-style: italic; margin: .15rem 0 0;
}
.carte.est-choisie .carte__livre { font-size: .92rem; line-height: 1.25; color: var(--vert); }


.suggestion__intro { font-size: var(--txt-petit); color: var(--crayon); margin: 0 0 .8rem; line-height: 1.45; }
.suggestions { display: grid; gap: .5rem; }
.suggestion {
    display: flex; align-items: center; gap: .7rem; width: 100%;
    min-height: 56px; padding: .6rem .8rem; text-align: left; font: inherit; cursor: pointer;
    background: var(--ivoire); border: 1.5px dashed var(--crayon); border-radius: 10px;
}
.suggestion:hover { border-style: solid; border-color: var(--vert); }
.suggestion__img { width: 56px; height: 56px; object-fit: contain; flex: 0 0 auto; }
.suggestion__txt { display: grid; flex: 1; }
.suggestion__nom { font-size: var(--txt); color: var(--charbon); }
.suggestion__livre { font-size: var(--txt-petit); color: var(--crayon-light); font-style: italic; }
.suggestion__prix { font-family: var(--font-hand); font-size: 1.3rem; color: var(--vert); white-space: nowrap; }

/* ── La première semaine, écrite en clair ───────────────────────── */
.cal__puce--reel { background: var(--lie); }
.cal__puce--carrousel { background: var(--jaune); }
.cal__puce--photo { background: var(--vert); }
.cal__puce--video { background: var(--bleu); }
.cal__point--carrousel { background: var(--jaune); }

.plan-semaine { margin-top: 1.1rem; padding-top: .9rem; border-top: 1.5px dashed var(--ivoire-dark); }
.plan-semaine__titre { font-family: var(--font-hand); font-size: 1.3rem; color: var(--charbon); margin: 0 0 .5rem; }
.plan-semaine__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.plan-semaine__liste li {
    display: grid; grid-template-columns: 5.6rem minmax(0, 1fr) auto; gap: .5rem;
    align-items: baseline; font-size: var(--txt-petit); padding: .25rem 0;
    border-bottom: 1px solid var(--ivoire-dark);
}
.plan-semaine__jour { font-family: var(--font-hand); font-size: 1.1rem; color: var(--lie); }
.plan-semaine__quoi { color: var(--crayon); }
.plan-semaine__heure { color: var(--crayon-light); font-variant-numeric: tabular-nums; }
.plan-semaine__note { font-size: var(--txt-petit); color: var(--crayon-light); margin: .6rem 0 0; }

/* ══════════════════════════════════════════════════════════════════
   LE PARCOURS PAR ÉTAPES
   Une famille par écran. Ce qui suit remplace l'empilement de six
   mille pixels : le fil en haut dit où l'on est, l'étape au milieu ne
   montre qu'une famille, la colonne de droite ne bouge plus.
   ══════════════════════════════════════════════════════════════════ */

/* ── Le fil des étapes : un rail, pas cinq gélules ──────────────
   L'ancienne version alignait cinq cadres de même poids, chacun avec
   une pastille grise pleine. Le gris plein dit « désactivé » alors que
   toutes les étapes sont cliquables, et cinq cadres égaux ne
   hiérarchisent rien. Un rail que la progression remplit, des nœuds
   dessus : le seul élément plein est celui où l'on se trouve. */
/* ══ LES ÉTAPES, ÉCRITES À LA MAIN ══════════════════════════════════
   Ni gélules ni rail : les cinq familles sont écrites au crayon, et
   celle où l'on se trouve porte son coup de surligneur — le lavis peint
   de sa catégorie, exactement celui qui souligne son titre quelques
   lignes plus bas. Voir filEtapes() dans composer.js pour le pourquoi. */
.fil { position: relative; margin-bottom: .7rem; }
/* La liste défile en largeur, et un « overflow-x: auto » coupe AUSSI ce
   qui dépasse en hauteur : le surligneur déborde sous la ligne de base
   et le compteur au-dessus. D'où la marge intérieure haute et basse,
   sans quoi ils seraient tranchés net (« les bulles sont bug », 22/09). */
.fil__liste {
    position: relative; display: flex; list-style: none; margin: 0;
    padding: 6px 0 8px; gap: .7rem;
    overflow-x: auto; scrollbar-width: none;
    border-bottom: 1.5px dashed var(--ivoire-dark);
}
.fil__liste::-webkit-scrollbar { display: none; }
.fil__item { flex: 0 1 auto; }
.fil__b {
    position: relative;
    display: flex; align-items: baseline; gap: .28rem;
    padding: .25rem .5rem; cursor: pointer; background: none; border: 0;
    font-family: var(--font-hand); font-size: 1.28rem; line-height: 1.25;
    color: var(--crayon-light); white-space: nowrap;
    transition: color .2s;
}
.fil__b:hover { color: var(--crayon); }

/* Le nom porte le surligneur : il lui faut donc un repère, et un plan
   de peinture au-dessus du lavis. */
.fil__nom { position: relative; z-index: 1; }
.fil__surligneur {
    position: absolute; inset: 45% -9px -6px -7px; z-index: -1;
    background-repeat: no-repeat; background-size: 100% 100%;
    opacity: 0; transition: opacity .25s;
}

/* FAITE : une coche verte devant le nom. « Faite » veut dire TRAVERSÉE,
   pas remplie — on a le droit de passer une famille sans rien y prendre. */
.fil__coche { display: none; flex: none; align-self: center; }
.fil__coche svg {
    width: 15px; height: 15px; display: block;
    fill: none; stroke: var(--vert); stroke-width: 3.4;
    stroke-linecap: round; stroke-linejoin: round;
}
.fil__b.est-faite { color: var(--charbon); }
.fil__b.est-faite .fil__coche { display: block; }

/* EN COURS : le lavis apparaît, le nom passe au charbon. */
.fil__b.est-courante { color: var(--charbon); }
.fil__b.est-courante .fil__surligneur { opacity: .5; }

/* Le compteur : un chiffre posé contre le nom, dans le bordeaux du
   site. La pastille verte pleine d'avant était le seul aplat vif de
   l'écran, et elle se lisait comme une notification à traiter. */
.fil__compte {
    flex: none; font-family: var(--font-body); font-size: .82rem;
    color: var(--lie); align-self: flex-start; margin: .1rem 0 0 .15rem;
}
/* L'attribut hidden pose display:none avec la spécificité d'une règle
   d'agent utilisateur : n'importe quel display déclaré ici le bat.
   Sans cette ligne, les étapes vides portaient un compteur VIDE — on
   croyait y avoir coché quelque chose. */
.fil__compte[hidden] { display: none; }

/* Le contour du focus, À L'INTÉRIEUR du bouton. La liste masque ce qui
   déborde : un contour extérieur n'y montrait que son bord droit, un
   trait vertical sans explication après « Contenus ». */
.fil__b:focus { outline: none; }
.fil__b:focus-visible { outline: 2px solid var(--lie); outline-offset: -3px; border-radius: 8px; }

/* ── L'en-tête de l'étape ───────────────────────────────────────── */
.etape__tete { display: flex; align-items: center; flex-wrap: wrap; gap: 0 .55rem; margin-bottom: .45rem; }
.etape__rang {
    flex: none; font-family: var(--font-hand); font-size: 1.05rem;
    color: var(--crayon); margin: 0;
    padding: .1rem .5rem; border: 1.5px solid var(--crayon-light); border-radius: 999px;
}
.etape__titre {
    /* isolation : même piège que pour .cat__titre plus haut. Sans elle,
       le z-index -1 du surligneur l'envoie DERRIÈRE le fond ivoire du
       cadre de colonne, et la tache de couleur disparaît. */
    position: relative; isolation: isolate; display: inline-block;
    margin: 0; padding: .05rem .6rem .1rem;
    font-family: var(--font-hand); font-size: clamp(1.35rem, 2.3vw, 1.6rem);
    color: var(--charbon); line-height: 1.1;
}
/* UN SURLIGNEUR, PAS UN APLAT. Le pinceau couvrait tout le mot, et une
   encre foncée posée sur un bordeaux dense ne se lisait plus — relevé le
   22/09 sur « Contenus ». Il ne passe plus que sous le bas des lettres,
   éclairci, comme un vrai coup de surligneur : la couleur de la famille
   reste, le mot se lit. */
.etape__surligneur {
    position: absolute; inset: 42% -12px -7px -10px; z-index: -1;
    background-repeat: no-repeat; background-size: 100% 100%;
    opacity: .5;
    animation: surligner .55s cubic-bezier(.3,.8,.4,1) both;
}
.etape__titre { text-shadow: 0 1px 0 rgba(255, 253, 248, .85); font-weight: 700; }
@keyframes surligner { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@media (prefers-reduced-motion: reduce) { .etape__surligneur { animation: none; } }
.etape__question {
    flex: 1 1 100%; line-height: 1.25;
    font-family: var(--font-hand); font-size: clamp(1rem, 1.9vw, 1.2rem);
    color: var(--lie); margin: .1rem 0 0;
}
.etape__accroche { flex: 1 1 100%; font-size: var(--txt-petit); color: var(--crayon); margin: .2rem 0 0; max-width: 62ch; }
.etape__sans-prix {
    font-size: var(--txt-petit); line-height: 1.55; margin: 0 0 .8rem;
    padding: .65rem .85rem; border-left: 4px solid var(--bleu); border-radius: 0 8px 8px 0;
    background: color-mix(in srgb, var(--bleu) 10%, var(--ivoire));
}

/* ── Les deux temps de l'étape Contenus ─────────────────────────── */
.venue { margin-bottom: .8rem; }
.venue__titre, .livrables__titre {
    display: flex; align-items: center; gap: .45rem;
    font-family: var(--font-hand); font-size: 1.15rem; color: var(--charbon); margin: 0 0 .15rem;
}
.venue__num {
    flex: none; display: grid; place-items: center; width: 25px; height: 25px;
    border-radius: 50%; background: var(--lie); color: #fff; font-size: 1rem;
}
.venue__quoi, .livrables__quoi {
    font-size: .96rem; color: var(--crayon); margin: 0 0 .45rem; max-width: 70ch; line-height: 1.4;
}
.venue__choix { display: grid; gap: .4rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 124px), 1fr)); }
.venue__opt {
    display: flex; flex-direction: column; align-items: center; gap: .1rem;
    padding: .5rem .4rem .55rem; cursor: pointer; text-align: center; font: inherit;
    background: var(--ivoire); border: 2px solid var(--crayon-light); border-radius: var(--carte-r);
    transition: border-color .18s, box-shadow .18s, transform .18s;
}
.venue__opt:hover { border-color: var(--crayon); transform: translateY(-2px); }
.venue__opt.est-choisie { border-color: var(--vert); box-shadow: inset 0 0 0 2.5px var(--vert); }

/* LES CRÉNEAUX DE TEMPS, À LA PLACE DE L'ICÔNE.
   Les trois durées portaient la même vignette de domaine, trois fois :
   une image identique ne dit rien de ce qui les sépare, et cette
   scène-là n'était qu'une tache à 60 px. Ce qui les sépare est le
   temps — quatre créneaux dont on allume un, deux ou quatre. */
.venue__jauge { display: flex; gap: 3px; margin-bottom: .35rem; }
.venue__cr {
    width: 15px; height: 9px; border-radius: 2px;
    background: transparent; border: 1.5px solid var(--crayon-light);
}
.venue__cr.est-plein { background: var(--lie); border-color: var(--lie); }
.venue__opt.est-choisie .venue__cr.est-plein { background: var(--vert); border-color: var(--vert); }
.venue__nom { font-family: var(--font-hand); font-size: 1.1rem; color: var(--charbon); line-height: 1.15; }
.venue__detail { font-size: .95rem; color: var(--crayon); line-height: 1.3; }
.venue__prix { font-size: 1rem; color: var(--lie); margin-top: .15rem; }

/* La quatrième porte prend toute la largeur, en dessous : serrée en
   quatrième colonne elle devenait illisible, reléguée seule dans un
   coin elle se lisait comme un refus. Sur sa propre ligne et d'un
   dessin différent, elle redevient l'autre chemin. */
/* Quatrième porte, au même rang que les trois durées. Mise seule sur
   sa ligne elle prenait soixante pixels pour dire une chose que les
   autres disent en zéro ; le trait discontinu suffit à marquer qu'elle
   est d'une autre nature. */
.venue__opt--aucune { border-style: dashed; }
.venue__img { width: 34px; height: 34px; object-fit: contain; flex: none; margin-bottom: .1rem; }

.livrables__titre { margin-top: .2rem; }
.livrables__attente {
    font-size: .97rem; color: var(--crayon); margin: .3rem 0 0; line-height: 1.5;
    padding: .7rem .9rem; border: 1.5px dashed var(--crayon-light); border-radius: 10px;
}

/* ── La venue, une fois décidée ──────────────────────────────────
   Un bandeau d'une ligne au lieu des quatre cartes : la question est
   devenue une réponse, elle n'a plus à occuper la place d'une
   question. Le bouton la rouvre à tout moment. */
/* LE RAYON NE PEUT PAS ÊTRE CELUI D'UNE GÉLULE.
   999 px suppose une seule ligne. Le résumé en fait trois au téléphone
   — « Une demi-journée · environ 3 h sur place · 10 photos comprises ·
   430 € » — et « Changer la durée », renvoyé à la ligne par le
   flex-wrap, se retrouvait dans la courbe du coin : il en sortait
   franchement (relevé par Nathan le 23/09). Un rayon de carte tient
   quel que soit le nombre de lignes. */
.venue--repliee {
    display: flex; align-items: center; gap: .5rem .6rem; flex-wrap: wrap;
    padding: .45rem .8rem; margin-bottom: .5rem;
    background: color-mix(in srgb, var(--vert) 9%, var(--ivoire));
    border: 2px solid var(--vert); border-radius: 18px;
}
.venue__marque {
    flex: none; display: grid; place-items: center; width: 26px; height: 26px;
    border-radius: 50%; background: var(--vert);
}
.venue__marque svg { width: 15px; height: 15px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.venue__resume { margin: 0; font-size: 1rem; color: var(--charbon); }
.venue__resume b { font-family: var(--font-hand); font-size: 1.15rem; color: var(--lie); font-weight: 400; }
.venue__modifier {
    margin-left: auto; flex: none; min-height: 30px; padding: .2rem .8rem;
    font: inherit; font-size: .96rem; cursor: pointer; color: var(--charbon);
    background: var(--ivoire); border: 1.5px solid var(--crayon); border-radius: 999px;
}
.venue__modifier:hover { background: var(--crayon-light); }

/* ── LE RÉGLAGE DES STORIES ──────────────────────────────────────
   Posé après les vignettes de livrables, et dessiné comme un réglage et
   non comme une vignette : les stories ne se cochent pas, elles se
   comptent. Voir reglageStories() dans composer.js. */
.stories {
    display: flex; align-items: center; flex-wrap: wrap; gap: .4rem .8rem;
    margin: .5rem 0 0; padding: .6rem .8rem;
    background: rgba(226, 215, 196, .3);
    border: 1.5px dashed var(--crayon-light); border-radius: 10px;
}
.stories__titre {
    display: flex; align-items: center; gap: .45rem; margin: 0; flex: none;
    font-family: var(--font-hand); font-size: 1.15rem; color: var(--charbon);
}
.stories__img { width: 34px; height: 34px; object-fit: contain; }
.stories__quoi { flex: 1 1 14rem; margin: 0; font-size: var(--txt-petit); color: var(--crayon); line-height: 1.35; }
.stories .qte { flex: none; }
.stories__total { flex: none; min-width: 4.5rem; font-family: var(--font-hand); font-size: 1.2rem; color: var(--lie); }
@media (max-width: 560px) {
    /* Au téléphone, la phrase passe sous le titre et le compteur reste
       à portée du pouce, à droite. */
    .stories { gap: .35rem .6rem; padding: .55rem .6rem; }
    .stories__quoi { flex: 1 1 100%; order: 3; }
    .stories .qte { margin-left: auto; }
    /* 44 px au doigt : les boutons héritaient du 38 × 32 des vignettes,
       où la carte entière sert de cible. Ici le « − » et le « + » sont la
       seule cible, ils doivent porter la taille du pouce. */
    .stories .qte__b { width: 46px; height: 44px; font-size: 1.2rem; }
}

/* ── La jauge de tournage ───────────────────────────────────────── */
.jauge {
    margin: 0 0 .45rem; padding: .4rem .65rem;
    background: color-mix(in srgb, var(--ivoire) 60%, transparent);
    border: 1.5px dashed var(--crayon-light); border-radius: 10px;
}
.jauge__barres { display: grid; gap: .3rem 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); }
.jauge__lib { font-size: .95rem; margin: 0 0 .15rem; color: var(--charbon); }
.jauge__lib b { font-family: var(--font-hand); font-size: 1.1rem; color: var(--lie); }
.jauge__piste { height: 7px; border-radius: 999px; background: var(--crayon-light); overflow: hidden; }
.jauge__rempli { height: 100%; background: var(--vert); border-radius: 999px; transition: width .35s cubic-bezier(.3,.8,.4,1); }
/* L'explication de chaque compteur ne s'affiche que sur grand écran :
   trois lignes de légende sous trois barres, c'est cent pixels pris à
   ce qu'on est venu voir. Le titre du compteur suffit à le lire. */
.jauge__aide { display: none; font-size: .94rem; color: var(--crayon); margin: .2rem 0 0; line-height: 1.35; }
@media (min-width: 1500px) { .jauge__aide { display: block; } }
.jauge__b.deborde .jauge__rempli { background: var(--lie); }
.jauge__b.deborde .jauge__lib b { color: var(--lie); }
.jauge--deborde { border-color: var(--lie); border-style: solid; }
.jauge__mot { font-size: var(--txt-petit); line-height: 1.55; margin: .8rem 0 0; }
.jauge--vide .jauge__mot, .jauge--sans-venue .jauge__mot { margin: 0; color: var(--crayon); }
.jauge--sans-venue { border-color: var(--lie); border-style: solid; }
.jauge__allonger {
    display: inline-block; margin-top: .5rem; padding: .5rem .9rem; min-height: 44px;
    font: inherit; font-size: var(--txt-petit); cursor: pointer;
    background: var(--lie); color: #fff; border: 0; border-radius: 8px;
}
.jauge__allonger:hover { filter: brightness(1.08); }

/* ── Le rappel des formules, replié ─────────────────────────────── */
/* Replié dans la ligne de titre : il ne prend de la hauteur que
   lorsqu'on l'ouvre, et le panneau se pose par-dessus le reste. */
.formules { position: relative; margin: 0 0 0 auto; flex: none; }
.formules[open] { z-index: 40; }
/* UN LIEN, PAS UNE GÉLULE. La pastille dorée à bordure pointillée
   pesait plus lourd que la question de l'étape qu'elle accompagnait,
   et elle revenait à chaque étape : cinq fois le même appel au secours
   en travers de l'écran. Ici, le dessin, la phrase, un trait tracé à
   la main dessous. Ça se voit quand on le cherche, ça s'oublie quand
   on ne le cherche pas. */
.formules__tete {
    display: flex; align-items: center; gap: .4rem; cursor: pointer; list-style: none;
    padding: .2rem .15rem; min-height: 36px; white-space: nowrap;
    font-family: var(--font-hand); font-size: 1.05rem; color: var(--crayon);
    background: none; border: 0;
    transition: color .2s;
}
.formules__tete::-webkit-details-marker { display: none; }
.formules__mot {
    text-decoration: underline dashed var(--crayon-light);
    text-underline-offset: 4px; text-decoration-thickness: 1.5px;
}
.formules__tete:hover, .formules[open] .formules__tete { color: var(--lie); }
.formules__tete:hover .formules__mot,
.formules[open] .formules__mot { text-decoration-color: var(--lie); }
.formules__panneau {
    position: absolute; right: 0; top: calc(100% + 6px); width: min(470px, 80vw); z-index: 40;
    padding: .8rem .9rem 1rem; background: var(--ivoire);
    border: 2px solid var(--crayon); border-radius: 12px;
    box-shadow: 6px 8px 0 rgba(142, 74, 90, .18);
}
.formules__img { width: 26px; height: 26px; object-fit: contain; }
.formules__quoi { font-size: .95rem; color: var(--crayon); margin: 0 0 .7rem; line-height: 1.45; }
.formules__panneau .presets { margin: 0; }

/* ── Le mot de l'expert : un bandeau qui se déplie ───────────────
   Déplié en permanence il coûtait cent-soixante-dix pixels par étape,
   et sur un écran de quinze pouces c'est le pied de page qui passait
   sous la ligne de flottaison. Le titre du conseil EST le conseil en
   une phrase ; le reste se déplie pour qui veut le pourquoi. */
.expert {
    position: relative; margin-top: .8rem;
    background: var(--ivoire); border: 2px solid var(--crayon); border-radius: 12px;
    box-shadow: 4px 5px 0 rgba(142, 74, 90, .10);
}
.expert::before {
    content: ''; position: absolute; top: 18px; left: -9px; width: 14px; height: 14px;
    background: var(--ivoire); border-left: 2px solid var(--crayon); border-bottom: 2px solid var(--crayon);
    transform: rotate(45deg);
}
.expert[data-auteur="nathan"] { border-color: var(--bleu); }
.expert[data-auteur="nathan"]::before { border-color: var(--bleu); }

.expert__tete {
    display: flex; align-items: center; gap: .65rem; cursor: pointer; list-style: none;
    padding: .45rem .8rem .45rem .5rem; min-height: 56px;
}
.expert__tete::-webkit-details-marker { display: none; }
.expert__dessin {
    flex: none; width: 44px; height: 44px; border-radius: 50%; object-fit: cover;
    border: 2px solid var(--crayon-light); background: #fff;
}
.expert__ligne { min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .4rem; }
.expert__qui { font-size: .95rem; color: var(--crayon); flex: none; }
.expert__titre { font-family: var(--font-hand); font-size: 1.2rem; color: var(--charbon); line-height: 1.2; }
/* Le chevron dit qu'il y a autre chose dessous. Il pivote à
   l'ouverture — c'est le seul retour visuel du dépliage. */
.expert__chevron {
    flex: none; margin-left: auto; width: 22px; height: 22px;
    border-right: 2.5px solid var(--crayon); border-bottom: 2.5px solid var(--crayon);
    transform: rotate(45deg) translate(-3px, -3px); transition: transform .2s ease;
}
.expert[open] .expert__chevron { transform: rotate(225deg) translate(-3px, -3px); }
.expert__corps { padding: 0 .9rem .8rem 1.65rem; }
.expert__texte { font-size: .97rem; line-height: 1.55; margin: 0; max-width: 78ch; }
.expert__source { font-size: .94rem; color: var(--crayon); margin: .5rem 0 0; font-style: italic; }
.expert__source--a-verifier { color: var(--lie); }
@media (max-width: 560px) {
    .expert::before { display: none; }
    .expert__corps { padding-left: .9rem; }
}

/* ── Avancer, reculer ───────────────────────────────────────────── */
/* ── Avancer, reculer : collé au bas de l'écran ─────────────────
   Dans le flux, la barre d'avance tombait sous la ligne de flottaison
   dès que l'étape était un peu remplie : on cochait, et il fallait
   chercher comment passer à la suite. Collée, elle est toujours là, et
   elle sort du budget de hauteur de l'étape — ce qui était le dernier
   obstacle pour tenir sur un portable de quinze pouces. */
.pieds {
    display: flex; gap: .8rem; justify-content: space-between; align-items: center;
    margin-top: .9rem;
}
@media (min-width: 981px) {
    /* sous la colonne de gauche seulement : voir batir() */
    .composer__pile .pieds { margin-top: .9rem; }
    .pieds {
        position: sticky; bottom: 0; z-index: 30; margin-top: 0;
        padding: .55rem clamp(.8rem, 1.6vw, 1.15rem);
        background: color-mix(in srgb, var(--ivoire) 92%, transparent);
        backdrop-filter: blur(6px);
        border: 2px solid var(--crayon); border-radius: 12px;
        box-shadow: 0 -3px 14px rgba(58, 42, 46, .07);
    }
}
.pieds__b {
    min-height: 46px; padding: .6rem 1.1rem; cursor: pointer;
    font: inherit; font-size: var(--txt); border-radius: 10px;
    border: 2px solid var(--crayon); background: var(--ivoire); color: var(--charbon);
    transition: transform .16s, filter .16s;
}
.pieds__b:hover { transform: translateY(-2px); }
.pieds__b--prec { margin-right: auto; }
.pieds__b--prec[hidden] + .pieds__aide { margin-right: auto; }
.pieds__b--suiv {
    margin-left: auto; background: var(--lie); border-color: var(--lie); color: #fff;
    font-family: var(--font-hand); font-size: 1.2rem;
}
.pieds__b--fin { background: var(--vert); border-color: var(--vert); }
.pieds__b--suiv:hover { filter: brightness(1.08); }
@media (max-width: 560px) {
    /* La barre collante du panier occupe déjà le bas de l'écran :
       les deux boutons se mettent côte à côte au-dessus d'elle. */
    .pieds { flex-direction: row; }
    .pieds__b { flex: 1 1 0; padding: .7rem .6rem; font-size: var(--txt-petit); }
    .pieds__b--suiv { font-size: 1.1rem; }
}

/* ══════════════════════════════════════════════════════════════════
   LE QUESTIONNAIRE ET SON PASSAGE
   ══════════════════════════════════════════════════════════════════ */

.onb__tete { display: flex; align-items: center; gap: .8rem; margin-bottom: .6rem; }
.onb__img { flex: none; object-fit: contain; }

/* ── Le passage ─────────────────────────────────────────────────── */
.passage {
    max-width: 880px; margin: 0 auto; padding: clamp(1.4rem, 4vw, 2.6rem) 0;
    text-align: center;
}
.passage__titre {
    font-family: var(--font-hand); font-size: clamp(2rem, 5vw, 2.8rem);
    color: var(--charbon); margin: 0 0 clamp(1.2rem, 3vw, 2rem);
}
/* ── L'avant / après : une seule photo, grise puis en couleur ─────
   Remplace les deux cartes de texte du 19/09. La même vigne des deux
   côtés : éteinte aujourd'hui, vivante demain. Le texte est posé
   dessus, en gros, sur un dégradé qui le rend lisible quelle que soit
   la photo. Au téléphone, la couture devient horizontale : aujourd'hui
   en haut, demain en bas — deux moitiés de 187 px de large ne
   porteraient pas une phrase. */
.passage__ap {
    position: relative; isolation: isolate; overflow: hidden;
    margin: 0 auto; max-width: 880px;
    aspect-ratio: 16 / 9; max-height: 58vh; min-height: 340px;
    border-radius: 16px; text-align: left;
    background: var(--charbon);
    box-shadow: 0 12px 30px rgba(58, 42, 46, .20);
}
.passage__ap-photo {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    /* En miroir : la grappe, le plus vivant de la photo, passe du côté
       de demain — c'est elle qu'on voit s'allumer en couleur. */
    transform: scaleX(-1);
}
.passage__ap-photo--gris { filter: grayscale(1) brightness(.72) contrast(.9); }
/* La découpe se lit AVANT le miroir : « inset(0 50% 0 0) » garde la
   moitié gauche de l'image, que scaleX(-1) pose à droite de l'écran. */
.passage__ap-photo--couleur { filter: saturate(1.15); clip-path: inset(0 50% 0 0); }
.passage__ap-couture {
    position: absolute; z-index: 2; top: 0; bottom: 0; left: 50%;
    width: 3px; margin-left: -1.5px;
    background: var(--ivoire); box-shadow: 0 0 14px rgba(0, 0, 0, .4);
}
.passage__ap-couture svg {
    position: absolute; top: 42%; left: 50%; transform: translate(-50%, -50%);
    width: 70px; height: 30px; padding: .45rem .6rem; box-sizing: content-box;
    background: var(--ivoire); border-radius: 999px;
    fill: none; stroke: var(--lie); stroke-width: 2.8;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .3);
}
.passage__ap-texte {
    position: absolute; z-index: 1; top: 0; bottom: 0; width: 50%;
    display: flex; flex-direction: column; justify-content: flex-end;
    padding: 2rem clamp(1.1rem, 2.8vw, 2rem) clamp(1.1rem, 2.6vw, 1.8rem);
    box-sizing: border-box;
    background: linear-gradient(to top, rgba(22, 16, 18, .86) 0%, rgba(22, 16, 18, .6) 42%, transparent 78%);
}
.passage__ap-texte--avant { left: 0; }
.passage__ap-texte--apres { right: 0; }
.passage__ap .passage__quand {
    font-family: var(--font-hand); font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1.1;
    margin: 0 0 .35rem;
}
.passage__ap-texte--avant .passage__quand { color: #d9d4cd; }
.passage__ap-texte--apres .passage__quand { color: #ffe29a; }
.passage__ap .passage__texte {
    margin: 0; font-size: clamp(1.08rem, 1.9vw, 1.32rem); line-height: 1.42;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}
.passage__ap-texte--avant .passage__texte { color: #e2ded8; }
.passage__ap-texte--apres .passage__texte { color: #fff; font-weight: 600; }

@media (max-width: 640px) {
    .passage__ap { aspect-ratio: auto; max-height: none; height: 640px; min-height: 0; }
    .passage__ap-photo--couleur { clip-path: inset(50% 0 0 0); }
    .passage__ap-couture { top: 50%; bottom: auto; left: 0; right: 0; width: auto; height: 3px; margin: -1.5px 0 0; }
    .passage__ap-couture svg { top: 50%; left: 78%; transform: translate(-50%, -50%) rotate(90deg); }
    .passage__ap-texte { left: 0; right: 0; width: auto; top: auto; bottom: auto; height: 50%; }
    .passage__ap-texte--avant { top: 0; }
    .passage__ap-texte--apres { top: 50%; }
}

/* La couleur gagne sa moitié quand le chargement finit. Tout est là
   dès le premier rendu — la photo, les deux phrases, la couture — et
   un onglet d'arrière-plan qui gèle la transition trouve simplement
   l'état final à son retour. */
.passage--anime .passage__ap-photo--couleur { clip-path: inset(0 100% 0 0); transition: clip-path 1.5s cubic-bezier(.3, .8, .3, 1); }
.passage--anime .passage__ap-couture { left: 100%; transition: left 1.5s cubic-bezier(.3, .8, .3, 1); }
.passage--anime.passage--revele .passage__ap-photo--couleur { clip-path: inset(0 50% 0 0); }
.passage--anime.passage--revele .passage__ap-couture { left: 50%; }
@media (max-width: 640px) {
    .passage--anime .passage__ap-photo--couleur { clip-path: inset(100% 0 0 0); }
    .passage--anime .passage__ap-couture { left: 0; top: 100%; transition: top 1.5s cubic-bezier(.3, .8, .3, 1); }
    .passage--anime.passage--revele .passage__ap-photo--couleur { clip-path: inset(50% 0 0 0); }
    .passage--anime.passage--revele .passage__ap-couture { left: 0; top: 50%; }
}

.passage__chargement { margin: clamp(1.2rem, 3vw, 2rem) auto 0; max-width: 420px; }
.passage__piste {
    height: 8px; border-radius: 999px; overflow: hidden;
    background: var(--crayon-light);
}
.passage__rempli {
    height: 100%; width: 0; border-radius: 999px; background: var(--lie);
    transition: width .25s linear;
}
.passage__dit {
    font-family: var(--font-hand); font-size: 1.2rem; color: var(--crayon);
    margin: .5rem 0 0; min-height: 1.6em;
}
.passage .onb__actions { justify-content: center; margin-top: 1.4rem; }

/* Déplacé sous le questionnaire par le module : un rappel, plus une
   porte d'entrée qui passerait devant l'outil. */
.composer-formules--deplacee { margin-top: clamp(2.5rem, 6vw, 4rem); }

/* ── L'en-tête de la page, en mode outil ────────────────────────
   Posée par le module au montage. Sans JavaScript la page garde son
   chapeau complet : elle se lit alors comme une page, pas comme un
   outil. */
.composer-intro--outil { padding-block: clamp(.8rem, 2vw, 1.4rem) 0; }
.composer-intro--outil .eyebrow { display: none; }
.composer-intro--outil .section-title { font-size: clamp(1.6rem, 3.4vw, 2.2rem); margin-bottom: .25rem; }
.composer-intro--outil .section-subtitle {
    font-size: 1rem; line-height: 1.45; max-width: 74ch; margin-inline: auto;
}
@media (min-width: 981px) {
    /* Sur ordinateur, le chapeau disparaît : chaque étape pose sa
       propre question en haut de la colonne, ce qui dit la même chose
       au moment où c'est utile. Il reste au téléphone, où l'on défile
       de toute façon, et dans la page sans JavaScript. */
    .composer-intro--outil .section-subtitle { display: none; }
    .composer-intro--outil { padding-block: .8rem 0; }
}

/* Les lots de photos sur une seule ligne : à cinq pastilles de 36 px
   dans une vignette de 138, ils passaient à la ligne et faisaient
   monter toute la rangée de quarante pixels. */
@media (min-width: 981px) {
    /* Elles PARTAGENT la largeur au lieu de la subir : chacune prend
       un cinquième de ce qui reste, quoi qu'il arrive. Une largeur
       minimale revenait à parier sur la taille de la vignette, et le
       pari était perdu de douze pixels — la dernière était coupée. */
    .lot { min-height: 28px; padding: .1rem 0; font-size: .95rem; flex: 1 1 0; min-width: 0; }
    .lots { gap: 2px; flex-wrap: nowrap; width: 100%; }
}

/* ══════════════════════════════════════════════════════════════════
   « VOTRE OFFRE PREND FORME » — plus courte, plus vendeuse
   Elle empilait cinq blocs dépliés : ce qu'on obtient, ce que la
   journée permet, ce que ça change, le récapitulatif, le prix, le
   rythme, le bouton. À six lignes cochées, le prix se trouvait à
   douze cents pixels du haut. L'ordre est maintenant : ce qu'on
   obtient, COMBIEN, le rythme qui le fait baisser — puis le détail,
   replié, pour qui veut vérifier.
   ══════════════════════════════════════════════════════════════════ */

.co-offre__bloc--prix {
    text-align: center;
    background: color-mix(in srgb, var(--lie) 6%, var(--ivoire));
    border-color: var(--lie);
}
.co-offre__bloc--prix .prix { display: block; }
/* Le prix à la carte, barré, AU-DESSUS du net : c'est là que se voit
   l'intérêt d'en prendre plus, et c'est ce que Nathan réclamait. */
.co-offre__bloc--prix .prix__avant { display: block; font-size: 1.15rem; margin-bottom: .1rem; }
.co-offre__bloc--prix .prix__net {
    display: block; font-family: var(--font-hand);
    font-size: clamp(2.4rem, 5.5vw, 3.2rem); line-height: 1; color: var(--lie);
}
.co-offre__bloc--prix .prix__economie { font-size: .97rem; }
.co-offre__bloc--prix .prix__mention { font-size: .94rem; margin-top: .35rem; }

.co-offre__compte {
    font-family: var(--font-body); font-size: .94rem; color: var(--crayon);
    padding: .1rem .5rem; border: 1px solid var(--crayon-light); border-radius: 999px;
}

/* Le bouton qui attend. Grisé mais PARLANT : il dit ce qui manque,
   et depuis le 22/09 il y MÈNE — il était désactivé, avec un lien
   « Aller à… » en dessous : deux lignes pour une seule chose à faire.
   Un bouton désactivé sans explication est la pire chose qu'on puisse
   poser devant quelqu'un ; un bouton qui explique et qui agit, la
   meilleure. */
.co-offre__cta--attente {
    /* PIÈGE DE NOMMAGE. « --crayon-light » vaut #4e4e4e et « --crayon »
       #3a3a3a : ce sont deux gris de MINE DE CRAYON, tous les deux
       foncés. Les avoir pris pour un fond clair et un texte sombre
       donnait 1,4 pour 1 de contraste — le bouton était illisible.
       Ici, fond ivoire à peine grisé et texte charbon : 9 pour 1. */
    background: color-mix(in srgb, var(--crayon-light) 16%, var(--ivoire));
    color: var(--charbon);
    border: 2px dashed var(--crayon-light);
}

/* Le curseur qui clignote pendant que le conseil s'écrit. */
.expert__titre.est-en-train::after {
    content: '▍'; margin-left: 1px; color: var(--lie);
    animation: clignote .7s steps(1) infinite;
}
@keyframes clignote { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .expert__titre.est-en-train::after { display: none; } }

/* Le plafond, dit dans la vignette plutôt que dans une jauge. */
.carte__plafond {
    flex: 1 1 100%; margin: .35rem 0 0; font-size: .92rem; line-height: 1.35; color: var(--crayon);
}
.carte__allonger {
    display: inline-block; margin-top: .2rem; padding: .18rem .5rem; min-height: 28px;
    font: inherit; font-size: .92rem; cursor: pointer;
    background: var(--lie); color: #fff; border: 0; border-radius: 6px;
}
.lot:disabled, .qte__b:disabled { opacity: .35; cursor: not-allowed; }

/* ── Les paquets de l'étape Contenus ────────────────────────────
   Dix vignettes d'affilée, personne ne les compare. Quatre paquets de
   deux à cinq, si — et le titre du paquet fait la moitié du travail
   d'explication. */
.paquet { display: block; margin-bottom: .7rem; }
.paquet__titre {
    display: block; font-family: var(--font-hand); font-size: 1.1rem;
    color: var(--charbon); margin: 0;
}
/* L'ACCROCHE DISPARAÎT DES PAQUETS OUVERTS.
   « Les photos », « Les formats verticaux » : le titre dit déjà tout,
   et la phrase en dessous coûtait quarante pixels par paquet pour
   répéter ce qu'on vient de lire. Elle reste sur les paquets REPLIÉS,
   où elle explique pourquoi ils le sont — et là, elle sert. */
.paquet > .paquet__accroche { display: none; }
.paquet--replie .paquet__accroche {
    display: block; font-size: .95rem; line-height: 1.35; color: var(--crayon);
    margin: 0; max-width: 72ch;
}
.paquet .cartes { margin: 0; }

/* Le format horizontal, replié : Nathan a tranché le 20/09, il doit
   être rare puisqu'on axe sur les réseaux. Le replier le dit mieux
   qu'une note, et qui en a vraiment besoin le trouve quand même. */
.paquet--replie { margin-top: .5rem; }
.paquet--replie .paquet__tete {
    display: flex; flex-direction: column; gap: .1rem; cursor: pointer; list-style: none;
    padding: .45rem .75rem; min-height: 44px; justify-content: center;
    background: color-mix(in srgb, var(--crayon-light) 28%, transparent);
    border: 1.5px dashed var(--crayon-light); border-radius: 10px;
}
.paquet--replie .paquet__tete::-webkit-details-marker { display: none; }
.paquet--replie .paquet__tete::after {
    content: ''; position: absolute; right: 1rem; width: 9px; height: 9px;
    border-right: 2px solid var(--crayon); border-bottom: 2px solid var(--crayon);
    transform: rotate(45deg) translate(-2px, -2px); transition: transform .2s ease;
}
.paquet--replie { position: relative; }
.paquet--replie[open] .paquet__tete::after { transform: rotate(225deg) translate(-2px, -2px); }
.paquet--replie[open] .paquet__tete { border-style: solid; margin-bottom: .35rem; }
.paquet--replie .paquet__accroche { margin: 0; }

/* Les variantes de retouche, sous le lot de photos. */
.carte__reglages .lots + .lots { margin-top: .2rem; }

/* ── Qui est devant la caméra : le filtre de l'étape Contenus ────
   Quatorze vignettes ne se lisent pas. Cette question les range, et
   c'est aussi celle qui bloque le plus — autant la régler avant de
   montrer quoi que ce soit. */
.expo { margin-bottom: .8rem; }
.expo__choix {
    display: grid; gap: .35rem;
    /* Les quatre réponses sur UNE ligne. À 158 px elles passaient à
       trois par rangée, donc deux rangées, donc 273 px pour quatre
       phrases courtes — plus que la question elle-même. */
    /* DEUX COLONNES LARGES, PAS QUATRE ÉTROITES.
       À 118 px de large, « Quelqu'un d'autre parle de moi » tombait
       sur trois lignes et le bloc montait à 134 px : resserrer la
       largeur avait RALLONGÉ la hauteur. */
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr));
}
.expo__opt {
    display: flex; flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 0 .4rem;
    padding: .4rem .7rem; cursor: pointer; text-align: left; font: inherit;
    background: var(--ivoire); border: 2px solid var(--crayon-light); border-radius: var(--carte-r);
    transition: border-color .18s, box-shadow .18s, transform .18s;
}
.expo__opt:hover { border-color: var(--crayon); transform: translateY(-2px); }
.expo__opt.est-choisie { border-color: var(--vert); box-shadow: inset 0 0 0 2.5px var(--vert); }
.expo__nom { font-family: var(--font-hand); font-size: 1rem; color: var(--charbon); line-height: 1.2; }
.expo__detail { font-size: .94rem; color: var(--crayon); line-height: 1.3; }
.expo__detail::before { content: '— '; }
/* L'échappatoire. Le filtre range, il n'interdit pas — et il faut que
   ça se voie, sinon on croit que le catalogue est plus pauvre qu'il ne
   l'est. */
.expo__tout {
    margin-top: .4rem; padding: .25rem 0; font: inherit; font-size: .95rem;
    background: none; border: 0; cursor: pointer; color: var(--lie); text-decoration: underline;
}

/* ── La bulle montre, elle ne décrit plus ───────────────────────
   Elle alignait quatre paragraphes pour vendre des IMAGES : un
   contresens. Une vidéo verticale de quinze secondes, muette et en
   boucle, puis deux phrases. Le détail vit sur la page prestation. */
/* UN RÉEL SE MONTRE EN ENTIER, SINON IL NE MONTRE RIEN.
   Maxence, 23/09/2026 : « les réels sur le site en grand écran ne
   fonctionnent pas ». Ils fonctionnaient — ils jouaient, mesuré — mais
   on n'en voyait qu'une tranche.

   La règle d'avant forçait la largeur à 100 % puis coupait la hauteur à
   300 px en « cover ». Un fichier 540 × 960 réclame 576 px de haut pour
   324 de large : on en montrait 300, soit 48 % de l'image rognée, et
   toujours par le haut et le bas — c'est-à-dire là où un format
   vertical met son sujet. Plus la bulle est large, plus la coupe est
   forte : d'où « en grand écran ».

   Ici la hauteur commande et la largeur suit. « contain » plutôt que
   « cover » : si un exemple horizontal arrive un jour, il s'affichera
   entier lui aussi au lieu d'être recadré. */
.bulle__video {
    display: block; width: auto; max-width: 100%;
    height: auto; max-height: min(44vh, 330px);
    object-fit: contain;
    margin: 0 auto .7rem;
    border-radius: 10px; background: var(--crayon-light);
    border: 1.5px solid var(--crayon-light);
}
.bulle__sans-video {
    display: grid; place-items: center; padding: 1.1rem 0 .9rem;
    margin-bottom: .6rem; border-radius: 10px;
    background: color-mix(in srgb, var(--crayon-light) 26%, transparent);
}
.bulle__icone { width: 56px; height: 56px; object-fit: contain; }
.bulle__liste dt { margin-top: .5rem; }
.bulle__liste dt:first-child { margin-top: 0; }

/* ── L'option d'une vignette, quand il n'y a que deux choix ──────
   Deux boutons « Retouche naturelle » / « Accordées à votre identité »
   ne tiennent pas dans 150 px : ils débordaient et cassaient la
   rangée. Quand l'un des deux est le défaut, ce n'est pas un choix
   multiple — c'est une option, donc une case. */
.carte__option {
    display: flex; align-items: center; gap: .35rem; flex-wrap: wrap;
    width: 100%; margin-top: .3rem; padding: .3rem .4rem;
    font-size: .95rem; line-height: 1.25; text-align: left; cursor: pointer;
    background: color-mix(in srgb, var(--crayon-light) 22%, transparent);
    border-radius: 7px;
}
.carte__option input { width: 18px; height: 18px; flex: none; accent-color: var(--vert); cursor: pointer; }
.carte__option-nom { flex: 1 1 auto; min-width: 0; }
.carte__option-prix { flex: none; color: var(--lie); font-size: .94rem; }

/* ── Le bouton qui invite à VOIR ────────────────────────────────
   Un point d'interrogation annonce une explication ; depuis que la
   bulle montre une vidéo, il mentait par omission. Un triangle de
   lecture et le mot « exemple » disent ce qui va se passer. */
.carte__aide {
    display: flex; align-items: center; justify-content: center; gap: .22rem;
    min-height: 30px; padding: .15rem .4rem;
    border-radius: 7px; font-size: .92rem; line-height: 1;
}
.carte__aide svg { width: 15px; height: 15px; fill: currentColor; flex: none; }
.carte__aide-mot { font-family: var(--font-hand); font-size: 1rem; }
.carte__aide--exemple { border-color: var(--lie); color: var(--lie); }
.carte__aide--exemple:hover { background: var(--lie); color: #fff; }
.carte__aide:not(.carte__aide--exemple):hover {
    /* Pas --crayon-light (#4e4e4e, un gris FONCÉ) : texte gris foncé sur
       fond gris foncé, on ne lisait plus « détails » (relevé le 22/09). */
    background: color-mix(in srgb, var(--crayon-light) 14%, var(--ivoire)); color: var(--charbon);
}

.bulle__photo {
    display: block; width: 100%; border-radius: 10px; margin-bottom: .7rem;
    border: 1.5px solid var(--crayon-light);
}

/* ── À quel rythme on publie ────────────────────────────────────
   La cadence existait dans les données mais nulle part à l'écran : on
   subissait « 3 par semaine » sans savoir que c'était un choix, alors
   que la durée affichée en dépend entièrement. */
.cadence {
    margin-top: .7rem; padding-top: .6rem;
    border-top: 1.5px dashed var(--crayon-light);
}
/* Quand on arrive ici depuis la durée, le bloc se signale une fois : la
   feuille est longue, et un défilement qui s'arrête quelque part sans
   rien désigner laisse chercher ce qu'on est venu changer. */
.cadence.est-designee {
    animation: cadence-designee 1.8s var(--ease-doux, ease) 1;
    border-radius: 10px;
}
@keyframes cadence-designee {
    0%, 100% { box-shadow: 0 0 0 0 transparent; background: transparent; }
    18%, 62% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--jaune) 55%, transparent);
               background: color-mix(in srgb, var(--jaune) 16%, transparent); }
}
@media (prefers-reduced-motion: reduce) { .cadence.est-designee { animation: none; } }
.cadence__titre {
    font-family: var(--font-hand); font-size: 1.05rem; color: var(--charbon); margin: 0 0 .35rem;
}
.cadence__choix { display: flex; flex-wrap: wrap; gap: .3rem; }
.cadence__b {
    flex: 1 1 auto; min-height: 34px; padding: .25rem .55rem;
    font: inherit; font-size: .95rem; cursor: pointer; white-space: nowrap;
    background: var(--ivoire); border: 1.5px solid var(--crayon-light); border-radius: 999px;
}
.cadence__b:hover { border-color: var(--crayon); }
.cadence__b.est-choisie { background: var(--lie); border-color: var(--lie); color: #fff; }
/* Ce qui manque pour tenir, dit en semaines — la seule unité qui parle
   au client : « je veux tenir deux mois », pas « il me faut 14 posts ». */
.cadence__manque { font-size: .95rem; line-height: 1.5; margin: .55rem 0 0; color: var(--charbon); }
.cadence__combler {
    display: block; width: 100%; margin-top: .4rem; min-height: 40px; padding: .4rem .7rem;
    font: inherit; font-size: .95rem; cursor: pointer; text-align: left;
    background: color-mix(in srgb, var(--jaune) 30%, var(--ivoire));
    border: 1.5px solid var(--jaune); border-radius: 8px; color: var(--charbon);
}
.cadence__combler:hover { filter: brightness(1.04); }

/* Le conseil se termine par un geste : dire « prenez un lot de photos »
   en laissant chercher la vignette est un demi-service. */
.expert__geste {
    display: inline-block; margin-top: .55rem; min-height: 40px; padding: .4rem .9rem;
    font: inherit; font-size: .97rem; cursor: pointer;
    background: var(--lie); color: #fff; border: 0; border-radius: 8px;
}
.expert__geste:hover { filter: brightness(1.08); }
.expert[data-auteur="nathan"] .expert__geste { background: var(--bleu); }

/* ── Les adresses, dans le questionnaire ────────────────────────
   Posées sur le même écran que « qu'est-ce que vous publiez » : c'est
   le moment où l'on y pense. Aucune n'est obligatoire. */
.onb__liens { margin-top: 1.1rem; padding-top: .9rem; border-top: 1.5px dashed var(--crayon-light); }
.onb__lien { display: flex; align-items: center; gap: .6rem; margin-top: .45rem; }
.onb__lien-nom { flex: 0 0 8.5rem; font-size: 1rem; color: var(--crayon); }
.onb__input--lien { flex: 1 1 auto; min-width: 0; margin: 0; }
@media (max-width: 560px) {
    .onb__lien { flex-direction: column; align-items: stretch; gap: .2rem; }
    .onb__lien-nom { flex: none; }
}

/* ── L'adresse, dans le questionnaire ───────────────────────────
   Elle était dans le bandeau vert de la venue : un champ de saisie
   dans une pastille arrondie, ce qui déformait la pastille — le bogue
   du 21/09. Elle est maintenant à l'étape « Votre maison », où l'on se
   présente, et pré-remplie par l'annuaire. */
.onb__adresse { margin-top: 1rem; padding-top: .8rem; border-top: 1.5px dashed var(--crayon-light); position: relative; }
.onb__adresse[hidden] { display: none; }
.onb__aide.est-offert { color: var(--vert); }

.prix__frais { font-size: .92rem; color: var(--crayon); margin: .25rem 0 0; }


/* ── Les étiquettes de ce qu'on a retenu ────────────────────────
   Elles s'affichaient collées — « MAXENCE GRAO (LA DEGUSTE DIVIN)
   RestaurantUn événement » — parce que trois <span> côte à côte dans
   un bloc ne laissent aucun espace. Une liste en flex, chacune dans
   son cadre, et le nom de la maison mis en avant puisque c'est le
   sien. */
.passage__retenu {
    display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem;
    list-style: none; margin: 0 0 clamp(1rem, 2.5vw, 1.6rem); padding: 0;
}
.passage__puce {
    padding: .25rem .8rem; border-radius: 999px;
    font-size: .97rem; line-height: 1.3; color: var(--charbon);
    background: color-mix(in srgb, var(--crayon-light) 34%, var(--ivoire));
    border: 1.5px solid var(--crayon-light);
}
.passage__puce:first-child {
    font-family: var(--font-hand); font-size: 1.15rem;
    background: var(--ivoire); border-color: var(--lie); color: var(--lie);
}
.passage__sur {
    font-size: .95rem; letter-spacing: .06em; text-transform: uppercase;
    color: var(--crayon); margin: 0 0 .2rem; text-align: center;
}

/* ── Deux totaux, jamais un seul ────────────────────────────────
   Un tournage se paie une fois, un abonnement tant qu'il dure. Les
   additionner donnerait un nombre qui ne veut rien dire, et qui
   ferait peur. */
.prix__quand { display: block; font-size: .95rem; color: var(--crayon); margin-top: -.15rem; }

/* ── L'offre, montrée avant d'être envoyée ──────────────────────
   Le bouton disait « voir mon offre » et ouvrait un formulaire de
   code. Le mot promettait une chose, le geste en faisait une autre.
   Ici, l'offre en entier — et l'envoi n'est qu'un bouton en bas. */
.co-bilan__sur {
    font-size: .95rem; letter-spacing: .06em; text-transform: uppercase;
    color: var(--crayon); margin: 0 0 .1rem;
}
.co-bilan__titre {
    font-family: var(--font-hand); font-size: clamp(1.5rem, 3.4vw, 2rem);
    color: var(--charbon); margin: 0 0 .5rem; line-height: 1.15;
}
/* ── La vitrine : le prix en grand, face à ce qu'il achète ───────── */
.feuille__corps--offre { width: min(700px, 100%) !important; }
.co-bilan__vitrine {
    margin: .4rem 0 1.1rem; padding: 1rem clamp(.8rem, 2.4vw, 1.3rem) 1.05rem;
    background: color-mix(in srgb, var(--lie) 6%, var(--ivoire));
    border: 2px solid var(--lie); border-radius: 14px;
    box-shadow: 4px 5px 0 rgba(142, 74, 90, .12);
}
.co-bilan__prix-rangee { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: .4rem 2rem; }
.co-bilan__prix-col { display: flex; flex-direction: column; align-items: center; text-align: center; }
.co-bilan__prix-col--mois { padding-left: 2rem; border-left: 1.5px dashed var(--crayon-light); }
.co-bilan__barre { font-size: 1.1rem; color: var(--crayon); text-decoration: line-through; text-decoration-color: var(--lie); text-decoration-thickness: 2px; }
.co-bilan__grand {
    font-family: var(--font-hand); font-size: clamp(2.6rem, 7vw, 3.6rem); line-height: 1;
    color: var(--lie); padding: 0 .3rem;
    background: linear-gradient(transparent 60%, var(--jaune-light) 60%);
}
.co-bilan__grand--mois { font-size: clamp(2rem, 5vw, 2.6rem); color: var(--vert); background: linear-gradient(transparent 60%, #dfe9d4 60%); }
.co-bilan__quand { font-size: .95rem; color: var(--crayon); margin-top: .2rem; }
@media (max-width: 480px) { .co-bilan__prix-col--mois { padding-left: 0; border-left: 0; } }

/* ce que le prix achète, en dessins */
.co-bilan__valeur {
    display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .5rem 1.1rem;
    margin: .9rem 0 0; padding-top: .8rem; border-top: 1.5px dashed var(--crayon-light);
}
.co-bilan__piece { display: inline-flex; align-items: center; gap: .3rem; font-size: 1rem; color: var(--charbon); }
.co-bilan__piece-img { width: 52px; height: 52px; object-fit: contain; }
.co-bilan__piece b, .co-bilan__duree b { font-family: var(--font-hand); font-weight: 400; font-size: 1.7rem; line-height: 1; }
/* La durée est devenue un bouton : elle dit le rythme qui la produit et
   mène au réglage. Elle garde l'allure d'une phrase — un bouton dessiné
   comme un bouton, en plein milieu du prix, ferait un objet de plus. */
.co-bilan__duree {
    display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: .3rem;
    font: inherit; font-size: 1rem; text-align: left;
    padding: .2rem .35rem; margin-left: -.35rem;
    background: none; border: 0; border-radius: 8px; cursor: pointer; color: inherit;
}
.co-bilan__duree:hover { background: color-mix(in srgb, var(--jaune) 22%, transparent); }
.co-bilan__duree:focus-visible { outline: 2.5px solid var(--lie); outline-offset: 1px; }
.co-bilan__egal { font-family: var(--font-hand); font-size: 1.7rem; color: var(--crayon-light); }
.co-bilan__duree b { color: var(--lie); background: linear-gradient(transparent 60%, var(--jaune-light) 60%); padding: 0 .15rem; }
/* Le rythme sur sa propre ligne, au crayon : c'est la précision qui
   donne son sens au nombre de semaines, pas une seconde information. */
.co-bilan__cadence {
    flex: 1 0 100%; font-size: .93rem; color: var(--crayon);
    text-decoration: underline dashed var(--crayon-light); text-underline-offset: 3px;
}
.co-bilan__duree:hover .co-bilan__cadence { color: var(--lie); text-decoration-color: var(--lie); }

/* les repères, tous vérifiables */
.co-bilan__ancres { list-style: none; margin: .85rem 0 0; padding: .75rem 0 0; border-top: 1.5px dashed var(--crayon-light); display: grid; gap: .3rem; }
.co-bilan__ancres li { position: relative; padding-left: 1.5rem; font-size: 1rem; line-height: 1.4; color: var(--charbon); }
.co-bilan__ancres li::before {
    content: ''; position: absolute; left: .15rem; top: .3em; width: .8rem; height: .45rem;
    border-left: 2.5px solid var(--vert); border-bottom: 2.5px solid var(--vert); transform: rotate(-45deg);
}
.co-bilan__ancres b { font-family: var(--font-hand); font-weight: 400; font-size: 1.3rem; color: var(--vert); }
.co-bilan__ancres .co-bilan__ancre--neutre { color: var(--crayon); font-size: .95rem; }
.co-bilan__ancres .co-bilan__ancre--neutre::before { border-color: var(--crayon-light); }

/* ── Les lignes, chacune avec son dessin ───────────────────────── */
.co-bilan__sous {
    font-family: var(--font-hand); font-size: 1.25rem; color: var(--charbon);
    margin: 1rem 0 .3rem; padding-bottom: .2rem; border-bottom: 1.5px solid var(--crayon-light);
}
.co-bilan__liste { list-style: none; margin: 0; padding: 0; }
.co-bilan__ligne {
    display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: .7rem; align-items: center;
    padding: .45rem 0; border-bottom: 1px dashed var(--ivoire-dark);
}
.co-bilan__ligne:last-child { border-bottom: 0; }
.co-bilan__ligne-img { width: 48px; height: 48px; object-fit: contain; }
.co-bilan__ligne-txt { display: grid; gap: .05rem; min-width: 0; }
.co-bilan__nom { font-size: 1.02rem; color: var(--charbon); line-height: 1.3; }
.co-bilan__livre { font-size: .92rem; color: var(--crayon); font-style: italic; line-height: 1.3; }
.co-bilan__inclut { font-family: var(--font-hand); font-size: 1rem; color: var(--vert); line-height: 1.25; }
.co-bilan__prix { font-size: 1.02rem; color: var(--lie); white-space: nowrap; font-variant-numeric: tabular-nums; }
.co-bilan__ligne--mois .co-bilan__prix { color: var(--vert); }
.co-bilan__ligne--rdv .co-bilan__prix { color: var(--crayon); font-style: italic; }
.co-bilan__mention { margin: .6rem 0 0; font-size: .92rem; color: var(--crayon); line-height: 1.45; }

/* Le code de confirmation : l'avertissement indésirables, et le renvoi.
   Le renvoi est un lien plutôt qu'un bouton plein — il ne doit pas
   faire concurrence à « Valider mon offre », qui est l'action attendue. */
.onb__spam { margin-top: .55rem; font-size: .95rem; line-height: 1.5; }
.onb__renvoyer {
    display: inline-flex; align-items: center;
    margin: .7rem 0 0; min-height: 44px; padding: 0 .2rem;
    background: none; border: 0; cursor: pointer;
    font-family: var(--font-hand); font-size: 1.1rem; color: var(--lie);
    text-decoration: underline; text-underline-offset: 4px;
}
.onb__renvoyer:disabled { color: var(--crayon-light); cursor: default; text-decoration: none; }

/* Une option déjà comprise dans le community management tout compris.
   Elle reste visible — on voit ce que l'offre complète contient, c'est
   ce qui la rend avantageuse — mais elle ne se coche pas en plus. */
.carte.est-incluse { opacity: .72; background: var(--cire-bg, #f7f5e4); }
.carte.est-incluse .carte__declencheur { cursor: default; }
.carte.est-incluse .carte__prix { text-decoration: line-through; color: var(--crayon-light); }
.carte__inclus {
    margin: .3rem 0 0; font-family: var(--font-hand); font-size: 1.02rem;
    color: var(--vert); line-height: 1.2;
}

/* « Le plus rentable » : la journée filmée passe en tête des formats
   verticaux, et la pastille dit pourquoi — une venue, un film ET
   plusieurs réels découpés dedans. */
.carte__atout {
    display: inline-block; margin: 0 0 .25rem; padding: .1rem .55rem;
    font-family: var(--font-hand); font-size: .95rem; line-height: 1.3;
    color: #fff; background: var(--vert); border-radius: 999px;
}

/* ══ LA COLONNE DE DROITE, REPENSÉE LE 22/09 ══════════════════════════
   UNE SEULE FICHE, COMME UN TICKET. Chaque bloc avait son cadre DANS
   le cadre de la colonne : quatre bordures, quatre rembourrages, quatre
   marges — cent quatre-vingts pixels de cadres, sur un écran où il en
   manquait deux cents. Les parties sont maintenant séparées d'un
   pointillé, et la fiche tient dans la fenêtre d'un portable : le prix
   et ce qu'il achète, le panier, la récurrence, le bouton. Quand la
   fenêtre est courte, c'est la liste du panier qui cède et défile dans
   son cadre (ajusterColonneDroite, dans composer.js). */
.composer__droite .co-offre__bloc {
    margin: 0; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none;
}
.composer__droite .co-offre > * + * {
    margin-top: .65rem; padding-top: .65rem; border-top: 1.5px dashed var(--crayon-light);
}
.composer__droite .co-offre__bloc-titre {
    display: flex; align-items: baseline; justify-content: space-between; gap: .5rem;
    margin: 0 0 .3rem; padding: 0; background: none; border-radius: 0; transform: none;
    font-family: var(--font-hand); font-size: 1.3rem; line-height: 1.2; color: var(--charbon);
}

/* 1. le prix, sur un fond à peine teinté : c'est ce que l'œil cherche */
.composer__droite .co-offre__bloc--prix {
    position: relative; text-align: center;
    padding: .5rem .55rem .55rem;
    background: color-mix(in srgb, var(--lie) 6%, var(--ivoire));
    border-radius: 10px;
}
.composer__droite .co-offre__bloc--prix .co-offre__bloc-titre {
    justify-content: center; font-size: 1.45rem; color: var(--lie);
}
.co-offre__bloc--prix .prix { padding: 0; border: 0; background: none; box-shadow: none; }
.prix__deux { display: grid; gap: .4rem; }
.prix__deux--2 { grid-template-columns: 1fr 1fr; align-items: end; }
.prix__deux--2 .prix__col + .prix__col { border-left: 1.5px dashed var(--crayon-light); }
.prix__col { display: flex; flex-direction: column; align-items: center; }
.co-offre__bloc--prix .prix__avant { line-height: 1.2; margin: 0; }
.co-offre__bloc--prix .prix__quand { line-height: 1.25; margin-top: .1rem; }
.prix__net--mois { color: var(--vert); background: linear-gradient(transparent 58%, #dfe9d4 58%); }
.prix__deux--2 .prix__net { font-size: 2.15rem; }
.prix__mentions { margin: .35rem 0 0; font-size: .9rem; line-height: 1.3; color: var(--crayon); }
.prix__mention--alerte { color: var(--lie); font-weight: 600; }
.co-offre__bloc--prix .prix__mention--alerte { font-size: .9rem; line-height: 1.3; }
/* le tampon de remise, posé en biais sur le coin de la fiche */
.tampon--coin {
    position: absolute; top: -.55rem; right: -.35rem; margin: 0;
    line-height: 1.1; background: var(--ivoire);
}

/* ce que le prix achète : une ligne, qui ouvre le calendrier */
.co-obtenu {
    display: flex; align-items: center; justify-content: center; gap: .5rem;
    width: 100%; margin: .45rem 0 0; padding: .35rem .3rem 0;
    border: 0; border-top: 1.5px dashed var(--crayon-light); background: none;
    font: inherit; font-size: .98rem; line-height: 1.3; color: var(--charbon);
    text-align: left; cursor: pointer;
}
.co-obtenu__img { width: 34px; height: 34px; object-fit: contain; flex: none; }
.co-obtenu__txt { min-width: 0; }
.co-obtenu__duree {
    font-family: var(--font-hand); font-weight: 400; font-size: 1.35rem; line-height: 1;
    color: var(--lie); padding: 0 .15rem; white-space: nowrap;
    background: linear-gradient(transparent 58%, var(--jaune-light) 58%);
}
.co-obtenu:hover .co-obtenu__txt, .co-obtenu:focus-visible .co-obtenu__txt {
    text-decoration: underline; text-underline-offset: 3px;
}

/* 2. le panier : ligne à ligne, le prix aligné à droite */
.co-panier__vide { margin: 0; font-size: .98rem; color: var(--crayon); line-height: 1.5; }
.co-panier__liste {
    list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem;
    position: relative; overflow-y: auto; overscroll-behavior: contain;
    scrollbar-width: thin; scrollbar-color: var(--crayon-light) transparent;
}
/* Bornée, elle défile : une ombre en haut et en bas dit qu'il y a
   d'autres lignes, là où la barre de défilement de macOS reste
   invisible tant qu'on ne défile pas. */
.co-panier__liste.est-bornee {
    background:
        linear-gradient(var(--ivoire) 30%, transparent) top / 100% 22px no-repeat local,
        linear-gradient(transparent, var(--ivoire) 70%) bottom / 100% 22px no-repeat local,
        radial-gradient(farthest-side at 50% 0, rgba(44, 44, 44, .16), transparent) top / 100% 9px no-repeat scroll,
        radial-gradient(farthest-side at 50% 100%, rgba(44, 44, 44, .16), transparent) bottom / 100% 9px no-repeat scroll;
}
.co-panier__ligne {
    display: grid; grid-template-columns: 1fr auto; gap: .6rem; align-items: baseline;
    padding: .3rem .4rem; border-bottom: 1px dashed var(--ivoire-dark); border-radius: 6px;
    font-size: .98rem; line-height: 1.3;
}
.co-panier__ligne:last-child { border-bottom: 0; }
.co-panier__nom { color: var(--charbon); }
.co-panier__prix { color: var(--lie); font-variant-numeric: tabular-nums; white-space: nowrap; }
.co-panier__ligne--mois .co-panier__prix { color: var(--vert); }
.co-panier__ligne--rdv .co-panier__prix { color: var(--crayon); font-style: italic; }
.co-panier__inclut {
    grid-column: 1 / -1; font-family: var(--font-hand); font-size: .98rem;
    color: var(--vert); line-height: 1.25;
}
/* La ligne qu'on vient d'ajouter s'allume puis s'éteint : c'est la
   preuve, à droite, du clic fait à gauche. */
.co-panier__ligne.est-nouvelle { animation: arrivee 1.6s var(--ease-pose, ease) both; }
@keyframes arrivee {
    0%   { background: var(--jaune-light); transform: translateX(10px); opacity: .2; }
    18%  { background: var(--jaune-light); transform: none; opacity: 1; }
    100% { background: transparent; }
}

/* 3. la récurrence : quatre pastilles sur une rangée. Celle qu'on
   conseille porte un liseré et le mot, écrit à la main au-dessus —
   dans la ligne du titre, qui est vide de ce côté-là. */
.co-offre__bloc--rythme .co-rythme { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .3rem; }
.co-rythme__b {
    position: relative; display: grid; place-content: center; gap: 0;
    min-height: 46px; padding: .2rem .15rem; line-height: 1.15; text-align: center;
}
.co-rythme__quoi { font-family: var(--font-hand); font-size: 1.12rem; font-weight: 400; white-space: nowrap; }
.co-rythme__remise { font-size: .9rem; white-space: nowrap; color: var(--vert); font-weight: 600; }
.co-rythme__b[aria-pressed="true"] .co-rythme__remise { color: #fff; }
.co-rythme__b.est-conseille { outline: 2px dashed var(--vert); outline-offset: 2px; }
.co-rythme__b.est-conseille::before {
    content: 'conseillé'; position: absolute; top: -1.45rem; left: 50%;
    transform: translateX(-50%) rotate(-3deg);
    padding: 0 .3rem; line-height: 1.2; white-space: nowrap;
    font-family: var(--font-hand); font-size: .98rem; color: var(--vert);
}

/* 4. le bouton, et le lien pour être rappelé */
.co-appel { display: grid; gap: .1rem; }
.composer__droite .co-offre__cta { margin-top: 0; min-height: 52px; }
.co-offre__cta--attente { display: grid; place-content: center; gap: .05rem; padding: .35rem .6rem; line-height: 1.15; cursor: pointer; }
.co-offre__cta-haut { font-family: var(--font-body); font-size: .92rem; color: var(--crayon); }
.co-offre__cta-bas { font-family: var(--font-hand); font-size: 1.3rem; color: var(--lie); }
.co-offre__cta--attente:hover { background: color-mix(in srgb, var(--lie) 8%, var(--ivoire)); }
.co-appel__liens { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0 1.1rem; }
.co-appel__liens .co-offre__second {
    display: inline-block; width: auto; margin: 0; padding: 0 .2rem;
    min-height: 38px; line-height: 38px;
}

/* LES ÉCRANS COURTS. Un portable de 13 pouces, barre d'onglets et
   barre d'adresse comprises, laisse 680 pixels à la page : la fiche y
   dépassait de quarante. On retire le titre (le tampon et les prix
   disent assez ce que c'est), on serre les séparations, et la mention
   « conseillé » redevient un simple liseré. */
@media (min-width: 981px) and (max-height: 760px) {
    .composer__grille > .composer__droite { padding: .8rem; }
    .composer__droite .co-offre__bloc--prix .co-offre__bloc-titre { display: none; }
    .composer__droite .co-offre > * + * { margin-top: .5rem; padding-top: .5rem; }
    .composer__droite .co-offre__bloc--rythme .co-offre__bloc-titre { font-size: 1.15rem; margin-bottom: .15rem; }
    .co-rythme__b { min-height: 42px; }
    .co-rythme__b.est-conseille::before { display: none; }
    .composer__droite .co-offre__cta { min-height: 48px; }
    .co-appel__liens .co-offre__second { min-height: 32px; line-height: 32px; }
    .co-obtenu__img { width: 28px; height: 28px; }
}

/* la feuille d'offre reçoit ce qui a quitté la colonne */
.co-bilan__rythme { margin: 0 0 1.2rem; }
.co-bilan__rythme .effets { margin-top: .6rem; }

@media (prefers-reduced-motion: reduce) { .co-panier__ligne.est-nouvelle { animation: none; } }

.barre-panier__panier {
    display: flex; align-items: center; gap: .45rem; min-height: 44px; padding: 0 .3rem;
    background: none; border: 0; cursor: pointer; font: inherit; color: var(--charbon);
}
.barre-panier__icone { width: 26px; height: 26px; fill: none; stroke: var(--charbon);
    stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.barre-panier__icone circle { fill: var(--charbon); stroke: none; }

/* ══ LE TÉLÉPHONE, EN UNE PAGE (22/09) ═════════════════════════════════
   Les cinq familles se suivent : on descend au pouce. Le fil devient une
   rangée d'onglets collée sous la barre du site ; les vignettes passent
   à trois par ligne, plus petites ; les boutons « étape précédente /
   continuer » disparaissent — il n'y a plus d'écrans à franchir. */
@media (max-width: 760px) {
    .fil {
        /* 73 px : la hauteur mesurée de la barre du site à cette largeur */
        position: sticky; top: 73px; z-index: 20;
        margin: 0 calc(var(--gutter, 1rem) * -1) .6rem; padding: .35rem var(--gutter, 1rem);
        background: var(--ivoire); border-bottom: 1.5px solid var(--ivoire-dark);
    }
    /* C'est la LISTE qui défile, pas la barre. Le fondu ci-dessous se
       calcule sur la boîte qu'il masque : posé sur une barre qui ne
       défile pas, il tombe au bord de l'écran, là où on le veut ; posé
       sur une liste de 642 px qui se promène, il tomberait dans le
       vide, 267 px après la fin de l'écran. */
    /* Cinq familles ne tiennent pas dans 375 px : la liste mesure 642.
       Un nom tranché net au bord droit se lit comme un défaut
       d'affichage — c'était le « Acquisi » de la capture du 23/09. Le
       fondu dit la même chose autrement : il y en a d'autres, faites
       glisser. Le masque ne mord que sur les noms ; le fond ivoire de
       la barre, lui, reste plein jusqu'au bord. */
    .fil__liste {
        gap: .45rem; padding: 4px 0 7px; border-bottom: 0;
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 38px), transparent);
        mask-image: linear-gradient(to right, #000 calc(100% - 38px), transparent);
    }
    /* Les gélules disparaissent : cinq ovales bordés, dont un en aplat
       bordeaux, ne ressemblent à rien d'autre sur ce site. Restent les
       noms écrits à la main et le lavis sous celui où l'on se trouve.
       44 px de haut pour que le pouce vise juste. */
    .fil__b { min-height: 44px; padding: .2rem .55rem; font-size: 1.2rem; }

    .etape-mobile { padding: .4rem 0 1.4rem; scroll-margin-top: 130px; }
    .etape-mobile + .etape-mobile { border-top: 2px dashed var(--ivoire-dark); padding-top: 1.1rem; }

    .cartes { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: .3rem; }
    .carte { --icone: 40px; padding: .35rem .2rem .4rem; }
    .carte__nom { font-size: .9rem; line-height: 1.18; }
    /* « En petit », disait la demande : le dessin, le nom, « détails ».
       La ligne de ce qu'on reçoit faisait monter chaque vignette à
       240 px — elle est dans la bulle « détails », à un geste. */
    .carte__livre { display: none; }
    .carte__inclus-dans { display: none; }
    .carte__inclus { font-size: .9rem; }
    .carte__aide { font-size: .9rem; }

    .pieds { display: none; }
    .co-obtenu { min-height: 44px; }
    /* la page doit pouvoir défiler jusqu'au panier sans qu'il passe sous la barre */
    .composer { padding-bottom: 5.5rem; }
}

/* ── DEUX COLONNES : LA VIGNETTE COCHÉE S'ÉTALE ────────────────────────
   Une vignette cochée qui a des réglages passe EN BANDEAU, sur toute la
   largeur : le dessin et le nom à gauche, « détails » à droite, les
   réglages dessous, à l'horizontale et à la taille du doigt. Serrés dans
   une demi-largeur, les lots de photos s'empilent et les boutons − / +
   deviennent minuscules.

   Sous 560 px la question ne se pose plus : toutes les cartes sont déjà
   des bandeaux (palier suivant). D'où la borne basse. */
@media (min-width: 561px) and (max-width: 760px) {
    .carte.est-choisie:has(> .carte__reglages) {
        grid-column: 1 / -1;
        display: grid; grid-template-columns: 40px minmax(0, 1fr) auto;
        grid-template-areas: "icone corps aide" "reglages reglages reglages";
        align-items: center; column-gap: .55rem; row-gap: .1rem;
        text-align: left; padding: .45rem 2.7rem .5rem .55rem;
    }
    .carte.est-choisie:has(> .carte__reglages) > .carte__icone { grid-area: icone; }
    .carte.est-choisie:has(> .carte__reglages) > .carte__corps { grid-area: corps; }
    .carte.est-choisie:has(> .carte__reglages) > .carte__aide { grid-area: aide; width: auto; margin: 0; }
    .carte.est-choisie:has(> .carte__reglages) > .carte__reglages { grid-area: reglages; justify-content: flex-start; }
    .carte.est-choisie:has(> .carte__reglages) .qte__b { width: 44px; height: 40px; }
    .carte.est-choisie:has(> .carte__reglages) .lots { flex-wrap: nowrap; width: 100%; gap: .3rem; }
    .carte.est-choisie:has(> .carte__reglages) .lot { flex: 1 1 0; min-width: 0; min-height: 40px; }
    .carte.est-choisie:has(> .carte__reglages) .carte__allonger { min-height: 40px; }
}

/* ══ LE TÉLÉPHONE : UNE LIGNE PAR PRESTATION ═══════════════════════════
   Nathan, 23/09/2026 : « sur le téléphone le configurateur n'est pas du
   tout ergonomique, il faut moins d'info, moins chargé, plus smooth ».

   CE QUI N'ALLAIT PAS, MESURÉ À 375 px
   La grille restait à trois colonnes de 95 px. Dans ces 95 px on
   empilait cinq objets : le dessin, le nom, le badge « recommandé pour
   vous », le bouton « détails » et la case. Résultat : treize noms sur
   dix-neuf passaient sur deux à quatre lignes — « Gestion de vos
   annonces Google » en prenait quatre —, les vignettes allaient de 109
   à 160 px de haut, et comme « détails » est le dernier enfant, les
   dix-neuf boutons descendaient en escalier.

   CE QU'ON FAIT
   Une ligne par prestation : le dessin, le nom, son prix, la case sous
   le pouce, à la même place sur chaque ligne. La hauteur de la page n'y
   perd rien — une ligne de 56 px contre une rangée de 135 pour trois —
   et tout devient lisible du premier coup d'œil.

   POURQUOI LE PRIX REVIENT ICI
   La règle générale le cache : « le récapitulatif de droite est le seul
   endroit où le chiffre a un sens ». Au téléphone cette colonne
   n'existe pas — elle est remplacée par la barre du bas, qui ne donne
   qu'un total. On cochait donc à l'aveugle. */
@media (max-width: 560px) {
    .cartes { grid-template-columns: 1fr !important; gap: .3rem; padding: .5rem .45rem; }

    .carte {
        --icone: 36px;
        flex-direction: row; flex-wrap: wrap; align-items: center;
        /* Chaque pixel pris ici est un pixel de moins pour le nom, qui
           n'a que 157 px : le dessin, le rond et la case en mangent
           déjà 104. D'où le dessin à 36 et non 40, et des écarts serrés. */
        text-align: left; gap: .45rem;
        min-height: 52px; padding: .4rem .5rem;
        background: var(--ivoire); border-radius: 9px;
    }
    /* Le survol n'existe pas au doigt, et son gris sur fond ivoire ne
       faisait que salir la ligne. */
    .carte:hover { background: var(--ivoire); }
    .carte__icone { flex: none; }
    /* BASE ZÉRO, PAS `auto`. Flexbox décide des coupures de ligne sur la
       taille HYPOTHÉTIQUE des éléments — pour une base `auto`, celle du
       texte déplié, soit 250 px pour « Gestion de vos annonces Google ».
       La ligne dépassait donc avant même que le corps ait eu le droit de
       se rétrécir, et le rond « i » et la case tombaient à la ligne
       suivante : chaque prestation prenait deux lignes au lieu d'une.
       Avec une base nulle, le corps ne pèse rien dans ce calcul et prend
       simplement la place qui reste. */
    .carte__corps { flex: 1 1 0; min-width: 0; }
    .carte__nom, .carte.est-choisie .carte__nom { font-size: .93rem; line-height: 1.22; }

    .carte__prix { display: block; margin: 0; font-size: .88rem; line-height: 1.3; color: var(--lie); }
    .carte.est-incluse .carte__prix { color: var(--crayon-light); }

    /* « détails » écrit dix-neuf fois faisait dix-neuf pavés à lire. Un
       rond, posé au même endroit sur chaque ligne : on le trouve sans
       avoir à le lire. Le libellé complet reste dans l'aria-label, donc
       rien ne se perd pour un lecteur d'écran. Les boutons « exemple »
       gardent leur triangle : eux annoncent une vidéo, pas un texte. */
    .carte__aide {
        order: 1; flex: none; width: 40px; min-height: 40px;
        margin: 0; padding: 0; border-radius: 999px;
    }
    .carte__aide .carte__aide-mot { display: none; }
    .carte__aide:not(.carte__aide--exemple)::after {
        content: "i"; font-family: var(--font-hand); font-size: 1.2rem; line-height: 1;
    }
    .carte__aide--exemple svg { width: 18px; height: 18px; }

    /* La case quitte le coin pour prendre sa place au bout de la ligne. */
    .carte__coche { order: 2; position: static; flex: none; }

    /* Tout ce qui ne tient pas sur la ligne passe dessous, sur toute la
       largeur : les réglages (lots de photos, quantités), le badge de
       recommandation, les mentions « comprise dans la venue ». */
    .carte__reglages, .carte__recommande, .carte__inclus, .carte__atout, .carte__plafond {
        flex: 0 0 100%; order: 3; margin-top: .3rem;
    }
    .carte__reglages { justify-content: flex-start; margin-top: .35rem; }
    .carte__recommande { width: auto; text-align: left; }

    /* Le raccourci vers les formules toutes faites s'ouvre cinq fois,
       une par étape. En pavé doré pleine largeur, cinq fois, il pèse
       plus que la question qu'il accompagne. Réduit à sa phrase. */
    .formules__tete { font-size: 1rem; padding: .2rem .1rem; gap: .35rem; }
    .formules__img { width: 22px; height: 22px; }
}

/* ══ LE GUIDE (22/09) ═══════════════════════════════════════════════
   Une souris dessinée, un halo sur l'élément présenté, le reste dans
   l'ombre, une bulle qui explique. Voir lancerGuide() dans composer.js.
   Au-dessus de la barre du site (100) et sous les bulles d'exemple (120). */
.guide { position: fixed; inset: 0; z-index: 110; }
.guide__halo {
    position: fixed; pointer-events: none; border-radius: 14px;
    box-shadow: 0 0 0 200vmax rgba(28, 20, 22, .58);
    outline: 2.5px dashed #f3d98b; outline-offset: 3px;
    transition: left .5s cubic-bezier(.45, .05, .25, 1), top .5s cubic-bezier(.45, .05, .25, 1),
                width .5s cubic-bezier(.45, .05, .25, 1), height .5s cubic-bezier(.45, .05, .25, 1);
}
.guide__souris {
    position: fixed; left: 0; top: 0; z-index: 2; width: 34px; height: 34px; pointer-events: none;
    transition: transform .8s cubic-bezier(.45, .05, .25, 1);
}
.guide__souris svg {
    width: 34px; height: 34px; fill: #fff; stroke: var(--charbon); stroke-width: 2; stroke-linejoin: round;
    filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .35)); transform-origin: 5px 3px;
}
.guide__onde {
    position: absolute; left: 5px; top: 3px; width: 14px; height: 14px; margin: -7px 0 0 -7px;
    border-radius: 50%; border: 2.5px solid #f3d98b; opacity: 0;
}
.guide--clic .guide__onde { animation: guide-onde .75s ease-out 2; }
.guide--clic .guide__souris svg { animation: guide-presse .75s ease 2; }
@keyframes guide-onde { 0% { transform: scale(.4); opacity: .95 } 100% { transform: scale(3.6); opacity: 0 } }
@keyframes guide-presse { 0%, 100% { transform: scale(1) } 30% { transform: scale(.84) } }
.guide__bulle {
    position: fixed; z-index: 3; left: 12px; top: 12px; box-sizing: border-box;
    width: min(340px, calc(100vw - 24px)); padding: .95rem 1.1rem .85rem;
    background: var(--ivoire); border: 2px solid var(--lie); border-radius: 14px;
    box-shadow: 6px 8px 0 rgba(142, 74, 90, .22);
    transition: left .45s cubic-bezier(.45, .05, .25, 1), top .45s cubic-bezier(.45, .05, .25, 1);
}
.guide__compte { margin: 0; font-family: var(--font-hand); font-size: .95rem; color: var(--crayon); }
.guide__titre { margin: .1rem 0 .3rem; font-family: var(--font-hand); font-size: 1.45rem; line-height: 1.15; color: var(--lie); }
.guide__texte { margin: 0; font-size: 1rem; line-height: 1.5; color: var(--charbon); }
.guide__actions { display: flex; justify-content: space-between; align-items: center; gap: .6rem; margin-top: .8rem; }
.guide__passer {
    min-height: 40px; padding: .3rem .2rem; background: none; border: 0; cursor: pointer;
    font: inherit; font-size: .95rem; color: var(--crayon); text-decoration: underline;
}
.guide__suivant {
    min-height: 44px; padding: .45rem 1.15rem; border: 0; border-radius: 8px; cursor: pointer;
    background: var(--lie); color: #fff; font-family: var(--font-hand); font-size: 1.2rem;
}
.guide__suivant:focus-visible, .guide__passer:focus-visible { outline: 3px solid #f3d98b; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
    .guide__halo, .guide__souris, .guide__bulle { transition: none; }
    .guide--clic .guide__onde, .guide--clic .guide__souris svg { animation: none; }
}

/* « Revoir le guide » : un lien dans les pieds sur ordinateur, une
   pastille « ? » au bout des onglets au téléphone. */
.pieds__aide {
    min-height: 44px; padding: .3rem .6rem; background: none; border: 0; cursor: pointer;
    font: inherit; font-size: .98rem; color: var(--crayon); text-decoration: underline; text-underline-offset: 3px;
}
.pieds__aide:hover { color: var(--lie); }
.fil__item--aide { display: none; }
@media (max-width: 760px) {
    .fil__item--aide { display: block; flex: none; min-width: 0; }
    .fil__aide {
        width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
        border: 1.5px solid var(--crayon-light); background: var(--ivoire);
        font-family: var(--font-hand); font-size: 1.25rem; color: var(--lie);
    }
}

/* ── « Modifier mes réponses », au-dessus des étapes (22/09) ──────── */
.composer__retour {
    display: inline-flex; align-items: center; min-height: 36px; margin: 0 0 .35rem; padding: 0 .2rem;
    background: none; border: 0; cursor: pointer; font: inherit; font-size: .95rem;
    color: var(--crayon); text-decoration: underline; text-underline-offset: 3px;
}
.composer__retour:hover { color: var(--lie); }

/* ── « C'est envoyé ! », centré (22/09) ─────────────────────────── */
.envoye { display: grid; justify-items: center; text-align: center; gap: .15rem; padding: .4rem 0 .2rem; }
.envoye__dessin { width: 120px; height: 120px; object-fit: contain; margin-bottom: .2rem;
    filter: drop-shadow(0 6px 10px rgba(107, 45, 62, .15)); }
.envoye__titre { margin: 0 0 .35rem; font-family: var(--font-hand); font-size: clamp(2rem, 5vw, 2.6rem);
    line-height: 1.1; color: var(--charbon); outline: none; }
.envoye__texte { margin: 0; max-width: 38ch; font-size: 1.05rem; line-height: 1.5; color: var(--charbon); }
.envoye__suite { margin: .9rem 0 .3rem; font-family: var(--font-hand); font-size: 1.3rem; color: var(--lie); }
.envoye__actions { display: grid; gap: .5rem; width: min(100%, 340px); margin-top: .2rem; }
.envoye__creneau {
    display: flex; align-items: center; justify-content: center; min-height: 54px; padding: .5rem 1.2rem;
    font-family: var(--font-hand); font-size: 1.35rem; color: #fff; text-decoration: none;
    background: var(--lie); border-radius: 10px; box-shadow: 3px 4px 0 rgba(142, 74, 90, .2);
}
.envoye__creneau:hover { background: var(--lie-light); }
.envoye__rappel {
    min-height: 48px; padding: .4rem 1rem; cursor: pointer; font: inherit; font-size: 1.02rem;
    color: var(--lie); background: var(--ivoire); border: 2px solid var(--lie); border-radius: 10px;
}
.envoye__rappel:hover { background: color-mix(in srgb, var(--lie) 7%, var(--ivoire)); }
.envoye__rappel:disabled { opacity: .55; cursor: default; }
.envoye__zone:empty { display: none; }
.envoye__zone { width: min(100%, 340px); margin-top: .6rem; }
.envoye__form { display: grid; gap: .45rem; text-align: left; }
.envoye__confirme { margin: 0; padding: .7rem .9rem; border-radius: 10px; font-size: 1rem; line-height: 1.45;
    background: color-mix(in srgb, var(--vert) 12%, var(--ivoire)); color: var(--charbon); }
.envoye__confirme b { color: var(--vert); }
.envoye__note { margin: .9rem 0 0; font-size: .95rem; color: var(--crayon); }

/* ── La grille des contenus du 22/09 ─────────────────────────────
   Ce qu'on photographie : une liste déroulante, parce que six boutons
   ne tiennent pas dans une vignette de 150 px. */
.carte__type { display: flex; flex-direction: column; gap: .15rem; width: 100%;
    font-size: .92rem; line-height: 1.25; text-align: left; color: var(--crayon); }
.carte__type-choix { width: 100%; min-height: 36px; padding: .2rem .4rem; font: inherit; font-size: .95rem;
    color: var(--charbon); background: var(--ivoire); border: 1.5px solid var(--crayon); border-radius: 6px; cursor: pointer; }
.carte__type-choix:focus-visible { outline: 3px solid var(--lie); outline-offset: 1px; }
/* Chaque lot dit son prix, sous son nombre : on ne choisit pas « 25 »
   à l'aveugle. */
.lot { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1; }
.lot__prix { font-size: .78rem; opacity: .85; white-space: nowrap; }
/* La durée conseillée sur la vignette de l'événement vit dans une zone
   de réglages (voir majCartes) : elle en hérite la hauteur de pile et,
   sur téléphone, le bandeau pleine largeur. */
/* Le bouton qui répare « il manque la venue », sous le prix. */
.prix__reparer {
    display: inline-block; margin-top: .2rem; padding: .18rem .5rem; min-height: 30px;
    font: inherit; font-size: .9rem; font-weight: normal; cursor: pointer;
    background: var(--lie); color: #fff; border: 0; border-radius: 6px;
}
/* Réseaux sociaux : pour cette commande, ou tous les mois. Le même
   dessin que les durées de la venue — c'est la même nature de choix. */
.co-duree { margin: 0 0 .8rem; }
.co-duree__titre { font-family: var(--font-hand); font-size: 1.1rem; color: var(--charbon); margin: 0 0 .35rem; }
.co-duree__choix { display: grid; gap: .4rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.co-duree__b {
    display: flex; flex-direction: column; align-items: flex-start; gap: .1rem; text-align: left;
    padding: .5rem .75rem; min-height: 48px; font: inherit; cursor: pointer;
    background: var(--ivoire); border: 2px solid var(--crayon-light); border-radius: var(--carte-r);
    transition: border-color .18s, box-shadow .18s;
}
.co-duree__b:hover { border-color: var(--crayon); }
.co-duree__b.est-choisie { border-color: var(--vert); box-shadow: inset 0 0 0 2.5px var(--vert); }
.co-duree__b:focus-visible { outline: 3px solid var(--lie); outline-offset: 2px; }
.co-duree__haut { font-family: var(--font-hand); font-size: 1.12rem; color: var(--charbon); line-height: 1.15; }
.co-duree__bas { font-size: .95rem; color: var(--crayon); line-height: 1.3; }