/* ═══════════════════════════════════════════════════════════
   legal.css — les pages de texte : conditions, mentions,
   confidentialité, livraison, paiement, gabarit, questions.

   Ces pages n'ont rien à mettre en scène : elles portent des
   mots qui engagent la maison, repris tels quels de la boutique.
   On leur donne donc la colonne de lecture des fiches produit
   (cf. `.fiche-texte` dans fiches.css), sans cadre ni fond, et
   la même voix typographique que le reste du site.
   ═══════════════════════════════════════════════════════════ */

/* ── Bandeau d'ouverture, version sobre ──────────────────────
   Pas de photo : un aplat d'encre, le titre, la date de mise à
   jour. Un texte juridique n'a pas besoin d'un visuel. */
.doc-bande{background:var(--noir,#0B0B0D);color:#fff;
  border-bottom:1px solid rgba(255,255,255,.08)}
.doc-bande .wrap{padding-block:clamp(44px,6vw,86px) clamp(34px,4.5vw,58px)}
.doc-bande .sur{font-size:.68rem;letter-spacing:.3em;text-transform:uppercase;
  font-weight:600;color:rgba(255,255,255,.62)}
.doc-bande h1{font-family:var(--display);font-size:clamp(1.9rem,4.4vw,3.3rem);
  text-transform:uppercase;line-height:1.02;letter-spacing:.015em;margin-top:14px;
  max-width:20ch;text-wrap:balance}
.doc-bande p{color:rgba(255,255,255,.74);max-width:56ch;margin-top:16px;font-weight:300;
  font-size:.95rem}

/* ── Fil d'Ariane ────────────────────────────────────────── */
.doc-fil{border-bottom:1px solid var(--trait);background:#fff;font-size:.72rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--encre-tres-doux)}
.doc-fil .wrap{padding-block:14px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.doc-fil a{color:var(--encre-doux)}
.doc-fil a:hover{color:var(--laque)}
.doc-fil span[aria-hidden]{opacity:.5}

/* ── La colonne de lecture ───────────────────────────────── */
.doc{padding-block:clamp(46px,6vw,96px)}
.doc-in{max-width:760px;margin-inline:auto;min-width:0}

/* Le corps : le gris de lecture du site, une graisse légère,
   une largeur de ligne qui se lit sans fatiguer. */
.doc-corps{font-size:1.02rem;font-weight:300;line-height:1.78;
  color:var(--encre-doux);overflow-wrap:break-word}
.doc-corps>*:first-child{margin-top:0}
.doc-corps>*:last-child{margin-bottom:0}
.doc-corps p{margin-block:0 1.15em}
.doc-corps strong,.doc-corps b{color:var(--encre);font-weight:500}
.doc-corps em,.doc-corps i{font-style:italic}
.doc-corps u{text-decoration:none;color:var(--encre);font-weight:500}

/* Les intertitres du rédacteur : même famille d'affichage que
   partout, ouverts par le carré de laque. */
.doc-corps :is(h2,h3,h4){font-family:var(--display);color:var(--encre);
  text-transform:uppercase;letter-spacing:.03em;line-height:1.2;
  margin:2.1em 0 .75em;text-wrap:balance}
.doc-corps h2{font-size:clamp(1.05rem,1.8vw,1.34rem)}
.doc-corps h3{font-size:clamp(.96rem,1.5vw,1.12rem)}
.doc-corps h4{font-size:.92rem}
.doc-corps :is(h2,h3,h4)::before{content:'';display:inline-block;
  width:5px;height:5px;background:var(--laque);margin-right:12px;
  transform:translateY(-3px)}
/* Le sommaire mène à ces titres par ancre. L'en-tête flotte au-dessus de
   la page : sans réserve, le titre visé atterrit pile dessous et l'on
   croit avoir sauté au mauvais endroit. Mesuré : 0 px du haut pour un
   en-tête de 78. */
.doc-corps :is(h2,h3,h4)[id],.doc-faq-bloc[id],.doc-faq-topic[id]{
  scroll-margin-top:calc(var(--header) + 18px)}

.doc-corps :is(ul,ol){margin-block:0 1.15em;padding-left:0;list-style:none}
.doc-corps ol{counter-reset:doc-n}
/* La puce et le numéro sont posés en retrait ABSOLU, dans une marge
   réservée par le rembourrage — et surtout pas dans une rangée
   flexible. Un `<li>` en `display:flex` fait de chacun de ses enfants
   un élément de rangée : le `<strong>` d'une liste devient une boîte
   qui ne descend pas sous sa largeur minimale et sort de la colonne
   dès qu'elle est étroite. Constaté sur les listes du journal ; la
   cause était ici. En retrait absolu, le texte reste du texte : il
   coule, il se coupe, il se justifie comme un paragraphe. */
.doc-corps li{position:relative;padding-left:17px;margin-block:8px}
.doc-corps ul>li::before{content:'';position:absolute;left:0;top:.72em;
  width:5px;height:5px;background:var(--encre-tres-doux)}
.doc-corps ol>li{counter-increment:doc-n;padding-left:28px}
.doc-corps ol>li::before{content:counter(doc-n) '.';position:absolute;left:0;top:0;
  color:var(--laque);font-weight:500;font-size:.82rem;line-height:2.2}
/* Une liste imbriquée reprend la ligne, en retrait, sans reprendre la
   puce de son parent. */
.doc-corps li>:is(ul,ol){margin-block:8px 0}

.doc-corps :is(img,figure){display:block;max-width:100%;margin-inline:auto}
.doc-corps img{height:auto;background:var(--creme)}
.doc-corps figure{margin-block:clamp(26px,3.2vw,44px)}
.doc-corps figcaption{margin-top:12px;font-size:.78rem;text-align:center;
  color:var(--encre-tres-doux)}

/* Les tableaux défilent seuls dans leur couloir, jamais la page. Le filet
   de droite dit qu'il reste quelque chose à voir : sans lui, une colonne
   coupée se lit comme un défaut de mise en page. */
.doc-tableau{overflow-x:auto;margin-block:clamp(22px,2.6vw,36px);
  -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
@media(max-width:620px){
  .doc-tableau{border-right:1px solid var(--trait);
    -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 22px),transparent 100%);
    mask-image:linear-gradient(to right,#000 calc(100% - 22px),transparent 100%)}
}
.doc-corps table{border-collapse:collapse;width:100%;min-width:min(420px,100%);
  font-size:.9rem}
.doc-corps :is(td,th){padding:11px 14px;border-bottom:1px solid var(--trait);
  text-align:left;vertical-align:top}
.doc-corps th{font-size:0.66rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:600;color:var(--encre)}

.doc-corps a{color:var(--encre);text-decoration:underline;
  text-underline-offset:3px;text-decoration-color:var(--trait);
  transition:text-decoration-color .25s var(--ease)}
.doc-corps a:hover{text-decoration-color:var(--laque)}
/* Au doigt, un lien de 19 px de haut se rate. Le rembourrage vertical
   d'un élément EN LIGNE n'écarte pas les lignes : la colonne de texte ne
   bouge pas d'un caractère — ce qui est la règle sur ces pages — et la
   zone touchable passe de 19 à 35 px. On n'en met pas plus : au-delà,
   deux liens de lignes voisines se recouvriraient. */
@media(pointer:coarse){
  .doc-corps a,.doc-source a{padding-block:8px;margin-block:-8px}
}

/* ── Le pied de la colonne ───────────────────────────────── */
.doc-source{margin-top:clamp(38px,4.5vw,62px);padding-top:22px;
  border-top:1px solid var(--trait);font-size:.78rem;font-weight:300;
  color:var(--encre-tres-doux);line-height:1.7}
.doc-voisins{margin-top:22px;display:flex;flex-wrap:wrap;gap:10px}
.doc-voisins a{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  font-weight:600;border:1px solid var(--trait);padding:12px 16px;
  min-height:44px;display:inline-flex;align-items:center;
  color:var(--encre);transition:.2s}
.doc-voisins a:hover{border-color:var(--encre);background:var(--encre);color:#fff}

/* ── Sommaire d'une page longue (CGV, confidentialité) ───── */
.doc-sommaire{border:1px solid var(--trait);padding:24px 26px;
  margin-bottom:clamp(34px,4vw,54px);background:var(--creme)}
.doc-sommaire p{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
  font-weight:600;color:var(--encre-doux)}
.doc-sommaire ol{margin-top:12px;counter-reset:som-n;display:grid;gap:0;
  list-style:none;padding:0}
.doc-sommaire li{counter-increment:som-n;font-size:.9rem;font-weight:300;
  display:flex;gap:10px;align-items:baseline}
.doc-sommaire li::before{content:counter(som-n) '.';color:var(--laque);
  font-weight:500;font-size:.78rem;flex:0 0 auto;padding-top:12px}
/* Trente-deux articles à viser au doigt : chaque entrée fait sa hauteur
   de cible plutôt que de compter sur l'espacement entre les lignes. */
.doc-sommaire a{color:var(--encre-doux);display:flex;align-items:center;
  min-height:44px;padding-block:4px;flex:1 1 auto}
.doc-sommaire a:hover{color:var(--laque)}

/* ── Accordéon des questions ─────────────────────────────── */
.doc-faq-topic{font-family:var(--display);font-size:clamp(1.05rem,1.9vw,1.4rem);
  text-transform:uppercase;letter-spacing:.03em;line-height:1.15;
  margin:clamp(40px,4.5vw,64px) 0 4px}
.doc-faq-topic:first-child{margin-top:0}
.doc-faq-bloc{border-bottom:1px solid var(--trait)}
.doc-faq-bloc:first-of-type{border-top:1px solid var(--trait)}
.doc-faq-bloc>button{width:100%;display:flex;justify-content:space-between;
  align-items:baseline;gap:20px;padding:19px 0;text-align:left;background:none;
  border:0;cursor:pointer;font-family:inherit;font-size:.95rem;font-weight:500;
  color:var(--encre);transition:color .25s var(--ease)}
.doc-faq-bloc>button:hover{color:var(--laque)}
.doc-faq-bloc>button .plus{font-size:1.05rem;color:var(--encre-tres-doux);
  flex:0 0 auto;transition:transform .3s var(--ease),color .25s var(--ease)}
.doc-faq-bloc.ouvert>button .plus{transform:rotate(45deg);color:var(--laque)}
.doc-faq-rep{display:none;padding-bottom:22px}
.doc-faq-bloc.ouvert .doc-faq-rep{display:block}

/* ── Contact : la fiche de la maison ─────────────────────── */
.doc-fiche{background:var(--creme);padding:clamp(26px,4vw,42px);margin-block:8px 30px}
.doc-fiche dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px 26px}
.doc-fiche dt{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--encre-doux);font-weight:600;padding-top:4px}
.doc-fiche dd{font-size:.95rem;font-weight:300;line-height:1.65}
/* Un numéro de téléphone ou une adresse, on les touche : 44 px. */
.doc-fiche dd a{color:var(--encre);text-decoration:underline;
  text-underline-offset:3px;text-decoration-color:var(--trait);
  display:inline-flex;align-items:center;min-height:44px}
.doc-fiche dd a:hover{text-decoration-color:var(--laque)}
@media(max-width:560px){
  .doc-fiche dl{grid-template-columns:minmax(0,1fr);gap:4px 0}
  .doc-fiche dd+dt{margin-top:14px}
}

/* ── Sommaire des services (services.html) ───────────────── */
.serv-grille{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;
  background:var(--trait);border:1px solid var(--trait)}
.serv-carte{background:#fff;padding:30px 28px 28px;display:flex;flex-direction:column;
  transition:background .3s var(--ease)}
.serv-carte:hover{background:var(--creme)}
.serv-carte .num{font-family:var(--display);font-size:.9rem;color:var(--laque);
  letter-spacing:.06em}
/* Les cartes portent un `h3` depuis que la grille est annoncée par
   un `h2` de section : la hiérarchie des titres doit rester lisible
   pour qui navigue au lecteur d'écran. On garde les deux au cas où. */
.serv-carte :is(h2,h3){font-family:var(--display);font-size:1.3rem;text-transform:uppercase;
  line-height:1.08;margin-top:12px;letter-spacing:.01em;text-wrap:balance}
.serv-carte p{color:var(--encre-doux);font-size:.9rem;font-weight:300;margin-top:12px;
  flex:1 1 auto}
.serv-carte .aller{margin-top:16px;font-size:.66rem;letter-spacing:.18em;
  text-transform:uppercase;font-weight:600;color:var(--encre);
  display:inline-flex;align-items:center;gap:8px;min-height:44px}
.serv-carte:hover .aller{color:var(--laque)}
@media(max-width:900px){.serv-grille{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.serv-grille{grid-template-columns:minmax(0,1fr)}}

@media(max-width:640px){
  .doc-corps{font-size:15px;line-height:1.72}
  .doc-corps :is(h2,h3,h4)::before{margin-right:10px}
}

/* Les boîtes du gabarit d'origine gardées pour la respiration du texte
   (page « Financement et moyens de paiement ») : sans attributs, sans fond,
   juste un blanc entre deux lignes qui ne doivent pas se souder. */
.doc-corps div{margin-block:0 .55em}
.doc-corps div:empty{display:none}
.doc-corps div>div:last-child{margin-bottom:0}

/* ═══════════════════════════════════════════════════════════
   Ce qui suit a été ajouté dans la nuit du 11 au 12 septembre
   2026, pour la passe « UX/UI page par page ». Trois familles :
   la lecture d'un document long, les questions fréquentes, et
   les formulaires. Tout ce qui ne sert qu'à une seule page est
   resté dans le `<style>` de cette page-là.
   ═══════════════════════════════════════════════════════════ */

/* ── La barre de progression de lecture ──────────────────────
   Un filet de laque de deux pixels, tout en haut de la fenêtre.
   Il ne dit rien d'autre que « voilà où vous en êtes » : pas de
   pourcentage, pas d'étiquette. On le peint avec `transform`
   plutôt qu'avec `width`, pour que le navigateur n'ait jamais à
   recalculer la mise en page pendant le défilement. */
.doc-progres{position:fixed;top:0;left:0;right:0;height:2px;z-index:90;
  pointer-events:none;background:transparent}
.doc-progres i{display:block;height:100%;background:var(--laque);
  transform:scaleX(0);transform-origin:0 50%;will-change:transform}

/* ── La colonne de lecture d'un document long ────────────────
   Sur un écran large, le sommaire quitte le fil du texte et se
   range à gauche, collé sous l'en-tête : on sait en permanence
   où l'on est dans le document, et l'on saute d'un article à
   l'autre sans remonter. En dessous de 1120 px il n'y a pas la
   place : le sommaire redevient un dépliant en tête de page. */
.doc-in.doc-long{max-width:1180px}
.doc-long-grille{display:grid;grid-template-columns:minmax(0,1fr);gap:0}
@media(min-width:1120px){
  .doc-long-grille{grid-template-columns:minmax(210px,250px) minmax(0,1fr);
    gap:clamp(34px,4vw,66px);align-items:start}
  .doc-long-grille>.doc-som-nav{position:sticky;top:calc(var(--header) + 22px);
    max-height:calc(100vh - var(--header) - 54px);display:flex;flex-direction:column}
}

/* Le sommaire lui-même. C'est un `<details>` : fermé, il tient
   en une ligne sur un téléphone ; ouvert, il déroule la liste.
   Sur grand écran le script l'ouvre et le résumé disparaît. */
.doc-sommaire{display:block}
.doc-sommaire>summary{list-style:none;cursor:pointer;display:flex;align-items:center;
  justify-content:space-between;gap:14px;min-height:44px;
  font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;font-weight:600;
  color:var(--encre-doux)}
.doc-sommaire>summary::-webkit-details-marker{display:none}
.doc-sommaire>summary .plus{font-size:1.05rem;color:var(--encre-tres-doux);
  transition:transform .25s var(--ease),color .25s var(--ease)}
.doc-sommaire[open]>summary .plus{transform:rotate(45deg);color:var(--laque)}
.doc-sommaire>summary:hover{color:var(--encre)}
/* La liste garde la numérotation d'origine ; on lui ajoute le
   repère de l'article que l'on est en train de lire. */
.doc-sommaire li{position:relative}
.doc-sommaire a.actif{color:var(--encre);font-weight:400}
.doc-sommaire a.actif::before{content:'';position:absolute;left:-14px;top:50%;
  width:9px;height:1px;background:var(--laque);transform:translateY(-50%)}
@media(min-width:1120px){
  .doc-long-grille .doc-sommaire{margin-bottom:0;overflow-y:auto;
    overscroll-behavior:contain;padding:20px 22px}
  .doc-long-grille .doc-sommaire>summary{display:none}
  .doc-long-grille .doc-sommaire li{font-size:.82rem}
  .doc-long-grille .doc-sommaire a{min-height:0;padding-block:7px;line-height:1.35}
  .doc-long-grille .doc-sommaire li::before{padding-top:7px}
}

/* ── La ligne de repères d'un document long ──────────────────
   Sous le titre : de quoi juger en un coup d'œil ce que l'on
   s'apprête à lire — combien d'articles, combien de minutes.
   Un contrat de vingt-cinq articles n'est pas un paragraphe,
   autant l'annoncer plutôt que de le laisser découvrir. */
.doc-reperes{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:20px;
  font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  color:rgba(255,255,255,.55)}
.doc-reperes span{display:inline-flex;align-items:center;gap:9px}
.doc-reperes span::before{content:'';width:4px;height:4px;background:var(--laque);
  flex:0 0 auto}

/* ── Le retour en haut ───────────────────────────────────────
   Il n'apparaît qu'une fois le premier écran passé, sinon il
   vient encombrer une page que l'on n'a pas commencé à lire. */
/* À GAUCHE, et non à droite : le coin bas-droit appartient à la
   bulle de discussion, posée par `conseiller.js` très au-dessus de
   tout le reste. Un bouton qui se laisse recouvrir ne sert à rien. */
.doc-haut{position:fixed;left:clamp(14px,2.4vw,30px);bottom:clamp(14px,2.4vw,30px);
  z-index:55;width:46px;height:46px;display:flex;align-items:center;justify-content:center;
  background:var(--encre);color:#fff;border:1px solid var(--encre);
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .22s var(--ease),transform .22s var(--ease),
             visibility .22s var(--ease),background .22s var(--ease)}
.doc-haut.vu{opacity:1;visibility:visible;transform:none}
.doc-haut:hover{background:var(--laque);border-color:var(--laque)}
.doc-haut svg{width:17px;height:17px}
/* Tant que le bandeau des cookies barre le bas de l'écran, le bouton
   se retire : il n'y a pas deux places au même endroit, et c'est au
   bandeau qu'il faut répondre d'abord. */
body:has(.ckb.on) .doc-haut{opacity:0;visibility:hidden;pointer-events:none}

/* ── Questions fréquentes ────────────────────────────────────
   La barre de recherche, les pastilles de thème, le compteur. */
.faq-outils{display:flex;flex-wrap:wrap;gap:12px;align-items:center;
  margin-block:clamp(24px,3vw,38px) clamp(18px,2.2vw,26px)}
.faq-champ{position:relative;flex:1 1 260px;min-width:0}
.faq-champ svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);
  width:17px;height:17px;color:var(--encre-tres-doux);pointer-events:none}
/* 16 px pile pour la taille du texte : en dessous, iOS agrandit
   toute la page dès que le champ prend le focus. */
.faq-champ input{width:100%;min-height:48px;padding:12px 14px 12px 42px;font:inherit;
  font-size:1rem;background:#fff;border:1px solid var(--trait);border-radius:0;
  transition:border-color .2s var(--ease)}
.faq-champ input:focus{outline:none;border-color:var(--encre)}
.faq-champ input::-webkit-search-cancel-button{cursor:pointer}
.faq-compte{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--encre-tres-doux);font-weight:600;white-space:nowrap}
.faq-themes{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:clamp(26px,3.4vw,44px)}
.faq-themes a{font-size:0.66rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  border:1px solid var(--trait);padding:11px 15px;min-height:44px;
  display:inline-flex;align-items:center;color:var(--encre-doux);
  transition:border-color .2s var(--ease),color .2s var(--ease),background .2s var(--ease)}
.faq-themes a:hover{border-color:var(--encre);color:var(--encre);background:var(--creme)}
.faq-vide{padding:34px 0;font-size:.95rem;font-weight:300;color:var(--encre-doux)}
.faq-vide b{color:var(--encre);font-weight:500}

/* Le dépli d'une question. La réponse n'est plus montrée ou
   cachée d'un coup : sa hauteur est animée, ce qui laisse l'œil
   suivre le mouvement au lieu de rechercher où le texte a sauté.
   `grid-template-rows` de 0fr à 1fr est la seule façon d'animer
   vers une hauteur que l'on ne connaît pas d'avance. */
.doc-faq-bloc>button{gap:20px;position:relative}
.doc-faq-rep{display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .26s var(--ease);padding-bottom:0}
.doc-faq-rep>.doc-faq-rep-in{overflow:hidden;min-height:0;margin:0}
.doc-faq-bloc.ouvert .doc-faq-rep{display:grid;grid-template-rows:1fr;padding-bottom:22px}
.doc-faq-rep-in>*:last-child{margin-bottom:0}
/* Filet de sécurité pour une autre zone qui reprendrait le balisage des
   questions sans charger `legal.js` : c'est le script qui enveloppe la
   réponse. Sans cette enveloppe, la hauteur animée vaudrait zéro et la
   réponse ne s'ouvrirait jamais — on revient alors au comportement
   d'origine, montrer ou cacher d'un coup. */
.doc-faq-rep:not(:has(> .doc-faq-rep-in)){display:none}
.doc-faq-bloc.ouvert .doc-faq-rep:not(:has(> .doc-faq-rep-in)){display:block;
  padding-bottom:22px}
/* Le lien d'ancre d'une question : il ne se montre qu'au survol
   ou au clavier, et copie l'adresse de la question dans le
   presse-papier. Au doigt, il reste visible en permanence. */
.faq-ancre{flex:0 0 auto;margin-left:6px;font-size:0.66rem;letter-spacing:.14em;
  text-transform:uppercase;font-weight:600;color:var(--encre-tres-doux);
  border:1px solid var(--trait);padding:8px 10px;min-height:36px;
  display:inline-flex;align-items:center;opacity:0;
  transition:opacity .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease)}
.doc-faq-bloc:hover .faq-ancre,.faq-ancre:focus-visible{opacity:1}
.faq-ancre:hover{color:var(--encre);border-color:var(--encre)}
.faq-ancre.copie{opacity:1;color:var(--laque);border-color:var(--laque)}
@media(pointer:coarse){.faq-ancre{opacity:1}}
/* Le script glisse le lien d'ancre juste après le bouton : le
   bloc devient donc une ligne, le bouton prend la place qui
   reste, le lien se range à droite sans déborder. */
.doc-faq-bloc.faq-range{display:flex;flex-wrap:wrap;align-items:center;
  column-gap:10px;row-gap:0}
/* Le bouton portait `width:100%` du temps où il était seul sur
   sa ligne : il faut le lui retirer, sinon le lien d'ancre est
   renvoyé à la ligne suivante et la question fait deux étages. */
.doc-faq-bloc.faq-range>button{width:auto;flex:1 1 auto;min-width:0}
.doc-faq-bloc.faq-range>.doc-faq-rep{flex-basis:100%;order:2}
@media(max-width:560px){
  .faq-ancre{display:none}
}

/* ── Formulaires ─────────────────────────────────────────────
   Une seule colonne, des libellés au-dessus, des champs hauts.
   Un formulaire de service n'a pas à être malin : il a à être
   lisible, et à dire clairement ce qui ne va pas. */
.doc-form{margin-block:clamp(26px,3.4vw,42px) 0;display:grid;gap:20px}
/* `display:grid` l'emporterait sur la règle générale de `[hidden]` :
   un formulaire que le script efface resterait affiché. */
.doc-form[hidden]{display:none}
.doc-form .champ{display:grid;gap:8px}
.doc-form label{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  font-weight:600;color:var(--encre-doux)}
.doc-form label .oblig{color:var(--laque);margin-left:3px}
.doc-form :is(input,select,textarea){width:100%;min-height:48px;padding:13px 15px;
  font:inherit;font-size:1rem;color:var(--encre);background:#fff;
  border:1px solid var(--trait);border-radius:0;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.doc-form textarea{min-height:150px;resize:vertical;line-height:1.6}
.doc-form select{appearance:none;cursor:pointer;padding-right:44px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%236E727B' stroke-width='1.6'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center}
.doc-form :is(input,select,textarea):focus{outline:none;border-color:var(--encre);
  box-shadow:inset 0 -2px 0 var(--encre)}
.doc-form :is(input,select,textarea):focus-visible{outline:2px solid var(--laque);
  outline-offset:2px}
/* L'état d'erreur : un filet rouge et une phrase sous le champ.
   Jamais la seule couleur — le message porte l'information. */
.doc-form .champ.faux :is(input,select,textarea){border-color:var(--laque);
  box-shadow:inset 0 -2px 0 var(--laque)}
.doc-form .erreur{font-size:.8rem;line-height:1.5;color:var(--laque);font-weight:400;
  display:none;align-items:flex-start;gap:7px}
.doc-form .champ.faux .erreur{display:flex}
.doc-form .erreur::before{content:'!';flex:0 0 auto;width:16px;height:16px;
  display:inline-flex;align-items:center;justify-content:center;margin-top:2px;
  background:var(--laque);color:#fff;font-size:.66rem;font-weight:700}
.doc-form .aide{font-size:.8rem;font-weight:300;color:var(--encre-tres-doux);line-height:1.5}
.doc-form .compteur{font-size:.72rem;color:var(--encre-tres-doux);
  text-align:right;font-variant-numeric:tabular-nums}
.doc-form .compteur.plein{color:var(--laque)}

/* La case à cocher : une vraie case, agrandie, avec une zone
   touchable qui couvre tout le libellé. */
.doc-form .accord{display:flex;align-items:flex-start;gap:13px;cursor:pointer;
  font-size:.88rem;font-weight:300;line-height:1.6;color:var(--encre-doux);
  padding-block:6px;min-height:44px}
.doc-form .accord input{width:20px;height:20px;min-height:0;flex:0 0 auto;margin-top:2px;
  accent-color:var(--laque);cursor:pointer;padding:0;border:1px solid var(--trait)}
.doc-form .accord a{color:var(--encre);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--trait)}
.doc-form .accord a:hover{text-decoration-color:var(--laque)}
.doc-form .champ.faux .accord{color:var(--laque)}

.doc-form .pied{display:flex;flex-wrap:wrap;gap:16px;align-items:center;
  margin-top:4px}
.doc-form .pied .btn{flex:0 0 auto}

/* Le message de confirmation. Il remplace le formulaire, il ne
   s'ajoute pas au-dessus : rien ne doit laisser croire qu'il
   reste quelque chose à remplir. */
.doc-recu{border-top:2px solid var(--laque);background:var(--creme);
  padding:clamp(24px,3.2vw,38px);margin-block:clamp(26px,3.4vw,42px) 0}
.doc-recu h3{font-family:var(--display);font-size:clamp(1.15rem,2vw,1.5rem);
  text-transform:uppercase;letter-spacing:.02em;line-height:1.1;margin:0 0 12px}
.doc-recu p{margin:0 0 .9em;font-size:.94rem;font-weight:300;line-height:1.7;
  color:var(--encre-doux)}
.doc-recu p:last-child{margin-bottom:0}
.doc-recu dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 22px;margin-block:16px;
  font-size:.88rem}
.doc-recu dt{font-size:0.66rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--encre-tres-doux);font-weight:600;padding-top:3px}
.doc-recu dd{margin:0;font-weight:300;color:var(--encre);overflow-wrap:anywhere}
@media(max-width:520px){.doc-recu dl{grid-template-columns:minmax(0,1fr);gap:2px}
  .doc-recu dd+dt{margin-top:12px}}

/* L'avertissement « démonstration ». Le prototype n'envoie rien
   nulle part : ça se dit en toutes lettres, en haut du
   formulaire, pas en petit en bas de page. */
.doc-demo{display:flex;gap:14px;align-items:flex-start;
  border:1px solid var(--trait);border-left:3px solid var(--laque);
  background:var(--creme);padding:16px 20px;font-size:.86rem;font-weight:300;
  line-height:1.6;color:var(--encre-doux)}
.doc-demo b{color:var(--encre);font-weight:600}
/* Surtout pas `.pastille` : c'est la classe du compteur du panier,
   et `site.js` réécrit le contenu de TOUTES les pastilles de la page
   avec le nombre d'articles. Le mot « Démo » y devenait « 0 ». */
.doc-demo .marque{flex:0 0 auto;white-space:nowrap;align-self:flex-start;
  font-size:0.66rem;letter-spacing:.14em;
  text-transform:uppercase;font-weight:700;color:#fff;background:var(--laque);
  padding:5px 9px;margin-top:1px}
@media(max-width:520px){.doc-demo{flex-direction:column;gap:10px}}

/* ── Le mouvement, quand on n'en veut pas ────────────────────
   Une seule règle, à la fin, qui coupe tout ce que cette
   feuille anime. Les états restent, seule la durée tombe. */
@media(prefers-reduced-motion:reduce){
  .doc-progres i,.doc-haut,.doc-faq-rep,.doc-sommaire>summary .plus,
  .faq-ancre,.doc-form :is(input,select,textarea){transition:none}
  .doc-haut{transform:none}
}