/* Site Sigilbo. Couleurs et polices : charte.css, copiée depuis marque/ à la construction. */
@import url("charte.css?v=0cfa242c");

:root {
  --page: 1160px;
  --gutter: clamp(16px, 4vw, 32px);
  --focus: var(--accent-ink);
}

* { box-sizing: border-box; }
html { scroll-padding-top: 84px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--ground); color: var(--ink); font: 17px/1.6 var(--body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 3px; }
/* Lien d'évitement : invisible jusqu'au premier Tab, il saute l'en-tête et ses huit liens. */
.evitement { position: absolute; left: 16px; top: -100px; z-index: 30; background: #fff; color: var(--accent); padding: 10px 16px; border-radius: 6px; font-weight: 600; text-decoration: none; }
.evitement:focus { top: 12px; }
mark.a-completer { background: #fff1a0; color: #5c4400; padding: 0 .2em; border-radius: 2px; }

.page { max-width: var(--page); margin: 0 auto; padding: 0 var(--gutter); }
/* Étiquettes en Mono capitales : une seule taille, 14 px, comme tout le texte du site (aucun texte sous 14 px).
   Le caractère d'étiquette tient aux capitales, à la Mono, à l'interlettrage et à la couleur, plus à la taille ;
   l'interlettrage se resserre (.06em) pour qu'elle ne s'étale pas. Détail : docs/maquettes/taille-minimale.md. */
.kicker { font: 500 14px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--accent-ink); margin: 0 0 12px; }
.titre-section .kicker, .demo .kicker, .etage > .kicker { font-size: 14px; color: var(--accent-ink); margin: 0 0 12px; }
h1, h2, h3 { font-family: var(--display); margin: 0; text-wrap: balance; }
h2 { font-weight: 700; font-size: clamp(30px, 4.2vw, 46px); line-height: 1.05; letter-spacing: -.01em; }
h3 { font-weight: 600; font-size: 24px; line-height: 1.15; }
p { margin: 0 0 1em; }
p, li { text-wrap: pretty; }
.chapo { font-size: clamp(18px, 1.7vw, 20px); line-height: 1.55; color: var(--muted); max-width: 36em; }

.bouton { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 12px 22px; border-radius: 8px; font: 600 16px/1.2 var(--body); text-decoration: none; transition: background-color .15s, color .15s, border-color .15s, transform .1s; }
.bouton:active { transform: translateY(1px); }
.bouton.plein { background: var(--accent-ink); color: #fff; }
.bouton.plein:hover { background: var(--accent); }
.bouton.trait { border: 1.5px solid var(--ink); color: var(--ink); }
.bouton.trait:hover { background: var(--ink); color: #fff; }
.bouton svg { width: 18px; height: 18px; flex: none; }

/* En-tête */
.entete { position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--accent) 96%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--on-dark-rule); color: #fff; }
.entete .page { display: flex; align-items: center; gap: 28px; height: 68px; }
.marque { display: flex; align-items: center; gap: 10px; text-decoration: none; margin-right: auto; }
.marque svg { width: 30px; height: 30px; }
.entete .marque svg path { fill: currentColor; }
.marque b { font: 700 24px/1 var(--display); letter-spacing: -.01em; }
.entete nav { display: flex; gap: 24px; }
.entete nav a { font-size: 15px; color: var(--on-dark); text-decoration: none; }
.entete nav a:hover { color: #fff; }
.entete .bouton { min-height: 40px; padding: 8px 16px; font-size: 15px; }

/* Ouverture : le circuit qui tourne, et le sceau de la validation humaine */
.ouverture { position: relative; overflow: hidden; padding: clamp(48px, 8vw, 104px) 0 clamp(56px, 8vw, 96px); background: var(--accent); color: #fff; }
.ouverture .kicker { color: var(--accent-bright); }
.ouverture .chapo { color: var(--on-dark); }
.ouverture .page { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.ouverture h1 { font-weight: 700; font-size: clamp(40px, 4.4vw, 60px); line-height: 1; letter-spacing: -.02em; margin-bottom: 24px; }
.ouverture h1 em { display: block; font-style: normal; color: var(--accent-bright); }
.ouverture .actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 32px 0 20px; }
/* En Mono, comme le circuit : à 14 px, la troisième assurance passe à la ligne, sur ordinateur aussi. */
.ouverture .assurances { display: flex; flex-wrap: wrap; gap: 6px 20px; font: 14px/1.4 var(--mono); color: var(--on-dark); list-style: none; padding: 0; margin: 0; }
.ouverture .assurances li::before { content: "✓ "; color: var(--accent-bright); }
.ouverture .qui-construit { color: var(--on-dark); font-size: 15px; margin: 0 0 18px; max-width: 36em; text-wrap: balance; }
.ouverture .qui-construit b { color: #fff; font-weight: 600; }
/* Un seul bouton plein en ouverture : la seconde action est un lien. */
.lien-fleche { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 4px; color: #fff; font-weight: 600; text-decoration: underline; text-decoration-color: var(--accent-bright); text-decoration-thickness: 2px; text-underline-offset: 7px; }
.lien-fleche:hover { color: var(--accent-bright); }
.lien-fleche span { display: inline-block; }
/* Le sceau en filigrane, dans la teinte « motif » de la charte, derrière le circuit : écho au tampon « Validé ». */
.filigrane { position: absolute; right: -10vw; top: 50%; transform: translateY(-50%) rotate(-11deg); width: clamp(360px, 50vw, 760px); color: var(--motif); pointer-events: none; }
.filigrane svg { width: 100%; height: auto; }
.entete .bouton.plein, .ouverture .bouton.plein, .contact .bouton.plein { background: #fff; color: var(--accent); }
.entete .bouton.plein:hover, .ouverture .bouton.plein:hover, .contact .bouton.plein:hover { background: var(--accent-soft); }
.entete, .ouverture, .contact, .pied { --focus: var(--accent-bright); }

/* Le circuit est une grille à deux colonnes : tout occupe la largeur, sauf le dernier groupe, que le sceau
   accompagne à droite. Le sceau ne recouvre ainsi aucun texte, à aucune largeur. */
.trace { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; margin: 0; color: var(--ink); background: var(--paper); border: 1px solid var(--rule); border-radius: 12px; padding: 20px 22px 16px; box-shadow: 0 1px 0 color-mix(in srgb, var(--ink) 4%, transparent), 0 28px 48px -32px color-mix(in srgb, var(--ink) 45%, transparent); }
.trace > figcaption, .trace > ol, .trace > .pause { grid-column: 1 / -1; }
.trace > ol:last-of-type { grid-column: 1; grid-row: 4; }
/* La légende peut passer sur deux lignes : sur téléphone, « Exemple fictif » se range sous le titre. */
.trace figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; font: 500 14px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding-bottom: 14px; margin-bottom: 6px; border-bottom: 1px solid var(--rule); }
.trace figcaption b { color: var(--ink); font-weight: 500; }
.trace ol { list-style: none; margin: 0; padding: 0; }
/* « 08:14:02 » en Mono 14 px mesure 67,2 px : colonne des heures de 72 px, pastille de 20. */
.trace li { position: relative; display: grid; grid-template-columns: 72px 20px 1fr; align-items: baseline; padding: 7px 0; font-size: 15px; line-height: 1.4; }
.trace li time { font: 14px/1.4 var(--mono); color: var(--muted); font-variant-numeric: tabular-nums; }
.trace li .point { position: relative; align-self: center; width: 10px; height: 10px; border-radius: 50%; background: var(--accent-ink); }
.trace li:not(:last-child) .point::after { content: ""; position: absolute; left: 4px; top: 10px; width: 2px; height: 28px; background: var(--accent-soft); }
.trace li.doute .point { background: var(--paper); box-shadow: inset 0 0 0 2px var(--pick); }
.trace li.doute span { color: var(--pick-ink); }
.trace li.attente { color: var(--muted); }
.trace li.humain .point { background: var(--pick); }
.trace li.humain span { font-weight: 600; color: var(--pick-ink); }
.trace .pause { padding: 2px 0 2px 92px; font: 14px/1.4 var(--mono); color: var(--muted); letter-spacing: .02em; }

/* Le sceau « Validé » : dans la grille du circuit, à droite des deux dernières étapes. */
.sceau { grid-column: 2; grid-row: 4; align-self: center; margin: 2px 2px 0 0; width: 100px; height: 100px; border-radius: 50%; display: grid; place-content: center; justify-items: center; gap: 4px; color: var(--pick); background: color-mix(in srgb, var(--pick-soft) 70%, transparent); border: 2.5px solid var(--pick); box-shadow: inset 0 0 0 5px var(--paper), inset 0 0 0 6.5px var(--pick); transform: rotate(-11deg); pointer-events: none; }
.sceau svg { width: 24px; height: 24px; }
.sceau b { font: 600 14px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; }
.sceau small { font: 500 14px/1 var(--mono); letter-spacing: .02em; white-space: nowrap; }

@media (prefers-reduced-motion: no-preference) {
  .trace li, .trace .pause { opacity: 0; animation: ligne .45s ease-out forwards; animation-delay: calc(.5s + var(--i) * .42s); }
  .sceau { opacity: 0; animation: tampon .5s cubic-bezier(.2, 1.4, .4, 1) forwards; animation-delay: calc(.5s + var(--i) * .42s); }
  @keyframes ligne { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
  @keyframes tampon { 0% { opacity: 0; transform: rotate(-24deg) scale(1.9); } 60% { opacity: 1; } 100% { opacity: 1; transform: rotate(-11deg) scale(1); } }
}

/* Sections */
.section { padding: clamp(64px, 9vw, 112px) 0; }
.section.blanche { background: var(--paper); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.titre-section { max-width: 44em; margin-bottom: clamp(36px, 5vw, 56px); }
.titre-section h2 { margin-bottom: 16px; }
.titre-section p { color: var(--muted); font-size: 18px; margin: 0; }

/* Démos : un seul lecteur et des onglets, d'après la maquette validée docs/maquettes/demos-lecteur-unique.html.
   Amélioration progressive : sans script, la liste d'onglets reste cachée (attribut hidden) et les trois démos
   s'affichent l'une sous l'autre. accueil/demos.js ajoute .onglets-actifs, montre les onglets et ne laisse
   visible que la démo choisie. Aucune vidéo n'est téléchargée avant « Lecture » (preload="none", affiche). */
/* Le lecteur est un conteneur : les onglets passent en colonne quand la section est étroite, quelle que soit la fenêtre. */
.lecteur-demos { container: demos / inline-size; }
/* En haut plutôt qu'au centre : la vidéo ne bouge pas quand le texte de la démo choisie est plus long ou plus court. */
.demo { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.demo + .demo { margin-top: clamp(48px, 7vw, 88px); }
.video { border-radius: 10px; overflow: hidden; background: var(--ink); box-shadow: 0 24px 48px -32px color-mix(in srgb, var(--ink) 50%, transparent); }
.video video { width: 100%; height: auto; aspect-ratio: 16 / 9; }
.demo h3 { font-size: clamp(26px, 3vw, 32px); margin-bottom: 14px; }
.demo p { color: var(--muted); }
.demo .humain { border-left: 3px solid var(--pick); background: var(--pick-soft); color: var(--ink); padding: 10px 14px; border-radius: 0 6px 6px 0; font-size: 16px; }
.demo .humain b { display: block; font: 500 14px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--pick-ink); margin-bottom: 2px; }
.demo .duree { font: 14px/1.4 var(--mono); color: var(--muted); margin: 0; }
/* Les onglets : une rangée soulignée ; la démo choisie porte un trait de 3 px et passe en gras
   (lisible sans la couleur : épaisseur du trait et graisse du texte). L'écart de 24 px entre colonnes
   laisse la place à l'anneau de focus (3 px, décalé de 3 px). Courts : le secteur seul, sans surtitre. */
.demos-onglets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 24px; margin: 0 0 clamp(24px, 3vw, 36px); border-bottom: 1px solid var(--rule); }
.demos-onglets [role="tab"] { position: relative; min-height: 56px; margin: 0; padding: 14px 0 16px; background: none; border: 0; border-radius: 0; font: 500 17px/1.3 var(--body); color: var(--muted); text-align: left; cursor: pointer; transition: color .15s; }
.demos-onglets [role="tab"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: transparent; transition: background-color .15s; }
.demos-onglets [role="tab"]:hover { color: var(--ink); }
.demos-onglets [role="tab"]:hover::after { background: var(--rule); }
.demos-onglets [role="tab"][aria-selected="true"] { color: var(--ink); font-weight: 600; }
.demos-onglets [role="tab"][aria-selected="true"]::after { background: var(--accent-ink); }
/* Section étroite (téléphone) : les trois onglets en colonne, le trait passe à gauche. */
@container demos (max-width: 639px) {
  .demos-onglets { grid-template-columns: minmax(0, 1fr); border-bottom: 0; border-left: 1px solid var(--rule); }
  .demos-onglets [role="tab"] { min-height: 48px; padding: 12px 12px 12px 18px; }
  .demos-onglets [role="tab"]::after { top: 8px; bottom: 8px; left: -1px; right: auto; width: 3px; height: auto; border-radius: 0 3px 3px 0; }
  /* En colonne, les onglets se touchent : l'anneau de focus se dessine à l'intérieur. */
  .demos-onglets [role="tab"]:focus-visible { outline-offset: -3px; }
}
/* Avec le script : une seule démo visible, sans marge au-dessus ; le surtitre de secteur disparaît,
   puisque l'onglet choisi le dit déjà juste au-dessus. Il reste visible sans script. */
.lecteur-demos.onglets-actifs .demo + .demo { margin-top: 0; }
.lecteur-demos.onglets-actifs .demo .kicker { display: none; }
@media (prefers-reduced-motion: reduce) { .demos-onglets [role="tab"], .demos-onglets [role="tab"]::after { transition: none; } }
.note-demos { margin-top: clamp(40px, 5vw, 56px); padding-top: 20px; border-top: 1px solid var(--rule); font-size: 14px; color: var(--muted); max-width: 52em; }

/* Ce que j'automatise : la gamme des tâches, avant les exemples filmés */
.taches { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(32px, 6vw, 88px); }
.taches li { border-top: 1px solid var(--rule); padding: 22px 0 24px; }
.taches b { display: block; font: 600 21px/1.25 var(--display); margin-bottom: 6px; }
.taches p { margin: 0; max-width: 34em; color: var(--muted); font-size: 16px; }
/* La réparation est un autre service que les sept automatisations : filet et titre en bleu encre. */
.taches li.reparation { border-top: 2px solid var(--accent-ink); }
.taches li.reparation b { color: var(--accent-ink); }

/* Méthode : une vraie séquence, d'où la numérotation. L'appel est l'étape 0, les trois étages suivent. */
.etapes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; counter-reset: etape -1; position: relative; }
.etapes::before { content: ""; position: absolute; top: 19px; left: 20px; right: 20px; height: 2px; background: var(--accent-soft); }
.etapes li { position: relative; counter-increment: etape; }
.etapes li::before { content: counter(etape); display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--accent-ink); color: #fff; font: 600 16px/1 var(--mono); margin-bottom: 18px; position: relative; }
/* L'appel découverte précède les trois étages : cercle en contour, sans numéro payant. */
.etapes li.offert::before { background: var(--paper); color: var(--accent-ink); box-shadow: inset 0 0 0 2px var(--accent-ink); }
.etapes h3 { font-size: 22px; margin-bottom: 8px; }
.etapes p { color: var(--muted); font-size: 16px; margin: 0; }

.garanties { list-style: none; margin: clamp(48px, 6vw, 72px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.garanties li { background: var(--ground); border-radius: 10px; padding: 22px 24px; border-top: 3px solid var(--accent-ink); }
.garanties li.humaine { border-top-color: var(--pick); background: var(--pick-soft); }
.garanties b { display: block; font: 600 20px/1.2 var(--display); margin-bottom: 6px; }
.garanties p { margin: 0; color: var(--muted); font-size: 16px; }

/* Tarifs : un prix par étage, puis le détail de l'abonnement */
.etages { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.etage { display: flex; flex-direction: column; background: var(--ground); border-radius: 10px; border-top: 3px solid var(--accent-ink); padding: 24px 24px 22px; }
.etage h3 { font-size: 26px; margin-bottom: 10px; }
.etage > p { color: var(--muted); font-size: 16px; }
.prix-etage { width: 100%; border-collapse: collapse; margin-top: auto; font-variant-numeric: tabular-nums; }
.prix-etage td { padding: 12px 0; border-top: 1px solid var(--rule); vertical-align: baseline; }
.prix-etage td:first-child { font: 600 18px/1.25 var(--display); padding-right: 12px; }
.prix-etage td:first-child small { display: block; font: 400 14px/1.4 var(--body); color: var(--muted); margin-top: 2px; }
.prix-etage td.prix { text-align: right; white-space: nowrap; font: 600 19px/1.2 var(--display); }
.prix-etage td.prix small { font: 400 14px var(--body); color: var(--muted); }
.etage .plus { margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--rule); font-size: 15px; font-weight: 600; color: var(--accent-ink); }

.titre-formules { margin: clamp(56px, 7vw, 80px) 0 20px; font-size: 26px; }
.defile { overflow-x: auto; }
.formules { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 15px; }
.formules thead th { font: 600 20px/1.2 var(--display); text-align: left; padding: 0 12px 12px 0; border-bottom: 2px solid var(--ink); }
.formules thead td { border-bottom: 2px solid var(--ink); }
.formules tbody th { font-weight: 400; text-align: left; color: var(--muted); width: 34%; padding: 12px 20px 12px 0; }
.formules tbody td { padding: 12px 12px 12px 0; width: 22%; }
.formules tbody tr { border-bottom: 1px solid var(--rule); vertical-align: baseline; }
.formules tr.prix td { font: 600 22px/1.2 var(--display); font-variant-numeric: tabular-nums; }
.formules td.oui { color: var(--accent-ink); font-weight: 600; }
.formules td.oui::before { content: "✓ "; }
.formules td.non { color: var(--muted); }
.note-tarifs { margin-top: 20px; font-size: 15px; color: var(--muted); max-width: 52em; }
.suite-tarifs { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; margin-top: 28px; }
.suite-tarifs .note-tarifs { margin: 0; flex: 1 1 30em; }

/* Page Tarifs : chaque étage en détail, le texte à gauche, les prix à droite */
.entete nav a[aria-current="page"] { color: #fff; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.tarifs-intro { padding-bottom: 0; }
.tarifs-intro .titre-section { margin-bottom: clamp(48px, 6vw, 72px); }
.tarifs-intro h1 { font-weight: 700; font-size: clamp(38px, 5vw, 58px); line-height: 1.05; letter-spacing: -.01em; margin-bottom: 16px; }
.detail-etage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.detail-etage h2 { margin-bottom: 16px; }
.detail-etage .prix-etage { margin-top: 8px; }
.inclus { list-style: none; margin: 24px 0 0; padding: 0; }
.inclus li { position: relative; padding-left: 28px; margin-bottom: 10px; color: var(--ink-soft); }
.inclus li::before { content: "✓"; position: absolute; left: 0; color: var(--accent-ink); font-weight: 600; }
.conditions { margin: 16px 0 0; font-size: 15px; color: var(--muted); }
.conditions-abonnement { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; margin-top: 32px; font-size: 16px; }

/* Agences */
.agences { background: var(--accent-soft); color: var(--accent); }
.agences .page { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px; padding-top: 36px; padding-bottom: 36px; }
.agences p { margin: 0; max-width: 44em; font-size: 18px; }
.agences b { font-family: var(--display); font-size: 22px; font-weight: 600; display: block; margin-bottom: 4px; }
.agences a { color: var(--accent-ink); font-weight: 600; text-underline-offset: 4px; }

/* Questions */
/* Questions : colonne de lecture centrée, titre aligné sur elle. */
#questions .titre-section, .questions { max-width: 820px; margin-left: auto; margin-right: auto; }
.questions details { border-bottom: 1px solid var(--rule); }
.questions summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 24px; padding: 20px 0; font: 600 21px/1.3 var(--display); }
.questions summary::-webkit-details-marker { display: none; }
/* Le « + » garde sa propre hauteur (pas étiré sur une question de deux lignes) : tourné à 45°, il reste
   dans la marge de la page, sans défilement horizontal sur téléphone. */
.questions summary::after { content: "+"; align-self: flex-start; font: 400 26px/1 var(--mono); color: var(--accent-ink); transition: transform .2s; }
.questions details[open] summary::after { transform: rotate(45deg); }
.questions details p { color: var(--muted); margin: -4px 0 22px; max-width: 40em; }

/* Contact */
.contact { background: var(--accent); color: #fff; padding: clamp(64px, 9vw, 112px) 0; }
.contact .page { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 48px; align-items: end; }
.contact h2 { font-size: clamp(34px, 5vw, 58px); margin-bottom: 20px; }
.contact .chapo { color: var(--on-dark); }
.contact .bouton.plein { margin-top: 12px; }
.contact .qui { border-left: 1px solid var(--on-dark-rule); padding-left: 28px; }
.contact .qui b { display: block; font: 600 24px/1.2 var(--display); }
.contact .qui .role { color: var(--on-dark); margin-bottom: 18px; }
.contact .qui ul { list-style: none; margin: 0 0 18px; padding: 0; font: 15px/1.9 var(--mono); }
.contact .qui a { text-decoration: none; }
.contact .qui a:hover { text-decoration: underline; text-underline-offset: 4px; }
.contact .qui p { color: var(--on-dark); font-size: 15px; margin: 0; }
.contact .qui p + p { margin-top: 10px; }

/* Pied de page */
.pied { background: var(--accent-deep); color: var(--on-dark-faint); border-top: 1px solid var(--on-dark-rule); font-size: 14px; }
.pied .page { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; padding-top: 24px; padding-bottom: 32px; }
.pied nav { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.pied a { text-decoration: none; }
.pied a:hover { color: #fff; }
/* La mention de la voix a la taille du reste du pied (14 px). */
.pied .credit { flex-basis: 100%; }

/* Pages de texte (mentions, confidentialité) */
.texte { max-width: 760px; padding: clamp(48px, 7vw, 88px) 0; }
.texte h1 { font-size: clamp(38px, 5vw, 54px); line-height: 1.05; margin-bottom: 12px; }
.texte h2 { font-size: 26px; margin: 40px 0 12px; }
.texte p, .texte li { color: var(--ink-soft); }
.texte ul { padding-left: 20px; }

/* Petits écrans */
@media (max-width: 960px) {
  /* La navigation reste, sur une seconde ligne qui défile, au lieu de disparaître. */
  html { scroll-padding-top: 120px; }
  .entete .page { flex-wrap: wrap; height: auto; padding-top: 10px; row-gap: 2px; }
  .entete nav { order: 3; flex-basis: 100%; gap: 22px; overflow-x: auto; padding: 4px 0 10px; scrollbar-width: none; mask-image: linear-gradient(90deg, #000 82%, transparent); -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent); }
  .entete nav::-webkit-scrollbar { display: none; }
  .entete nav a { white-space: nowrap; padding: 6px 0; }
  .entete nav a[aria-current="page"] { text-underline-offset: 5px; }
  .filigrane { top: auto; bottom: -24vw; transform: rotate(-11deg); }
  .ouverture .page, .contact .page { grid-template-columns: 1fr; }
  .demo { grid-template-columns: 1fr; }
  .etapes { grid-template-columns: 1fr 1fr; row-gap: 36px; }
  .taches { grid-template-columns: 1fr; }
  .etapes::before { display: none; }
  .etages { grid-template-columns: 1fr; max-width: 640px; }
  .detail-etage, .conditions-abonnement { grid-template-columns: 1fr; }
  .detail-etage { max-width: 640px; }
  .contact .qui { border-left: 0; padding-left: 0; border-top: 1px solid var(--on-dark-rule); padding-top: 28px; }
}
@media (max-width: 620px) {
  body { font-size: 16px; }
  .entete .page { gap: 12px; }
  .marque b { font-size: 21px; }
  .entete .bouton { padding: 8px 12px; font-size: 14px; }
  .trace { padding: 16px 14px 12px; }
  /* L'heure garde ses 14 px : colonne de 70 px, pastille de 16. */
  .trace li { grid-template-columns: 70px 16px 1fr; font-size: 14px; }
  .trace .pause { padding-left: 86px; }
  /* 92 px : « 08:21 » à 14 px laisse 2,9 px avant l'anneau intérieur. */
  .sceau { width: 92px; height: 92px; }
  .sceau svg { width: 18px; height: 18px; }
  .etapes, .garanties { grid-template-columns: 1fr; }
  .etage { padding: 20px 18px 18px; }
  /* Tableau des formules : l'intitulé passe au-dessus, les trois formules restent côte à côte. */
  .formules { min-width: 0; font-size: 14px; }
  .formules, .formules thead, .formules tbody { display: block; }
  .formules tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 12px; }
  .formules thead td { display: none; }
  .formules thead th { font-size: 17px; padding-right: 0; }
  .formules tbody th { grid-column: 1 / -1; width: auto; padding: 12px 0 4px; }
  .formules tbody td { width: auto; padding: 0 0 12px; }
  /* À 360 px, « automatisations » (105 px) dépasse sa colonne (101 px) : il se coupe plutôt que de déborder. */
  .formules tbody td { hyphens: auto; overflow-wrap: break-word; }
  .formules tr.prix td { font-size: 19px; }
}

/* ==========================================================================
   Simulateur de rentabilité (rentabilite.html), d'après la maquette validée
   docs/maquettes/rentabilite.html, puis la direction validée le 03/10/2026 (experiences-design/simulateur-design) :
   la saisie de la variante C, le résultat de la variante B. La couleur d'erreur (--error) est dans charte.css.
   Le vert de la charte n'y sert jamais : ni pour un gain, ni pour une courbe, ni pour une étape remplie.
   ========================================================================== */

/* Un élément masqué par le script le reste, même s'il porte une classe qui l'affiche (.bouton…) */
[hidden] { display: none !important; }

/* Texte réservé aux lecteurs d'écran (unités, région d'annonce) */
.hors-ecran { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* Ouverture de la page : on reprend .tarifs-intro, resserrée. À 1440 × 800, le premier champ et la carte du
   résultat tiennent dans le premier écran : la carte commence à la hauteur de la colonne de saisie.
   La page s'ouvre sur une tâche vide (choix d'Antoine du 02/10/2026) : ni bandeau, ni étiquette d'exemple. */
.rentabilite-intro { padding-top: clamp(28px, 2.2vw, 32px); }
.rentabilite-intro .titre-section { margin-bottom: 0; }
.rentabilite-intro .sans-script { margin-top: 24px; }

/* Simulateur : la saisie à gauche, le résultat collant à droite. La direction validée le 03/10/2026 : la saisie en
   six étapes (« calculatrice guidée »), le résultat en grand aplat bleu nuit (« tableau de bord sobre »).
   --rail : la place du cercle d'étape, à gauche de la saisie. */
.simulateur { --rail: 60px; --cercle: 40px; padding-top: 32px; }
.simulateur > .page { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 48px; align-items: start; }
/* Les intitulés du simulateur en Plex Sans, sans capitales ni numéro : les numéros vont aux étapes. */
.simulateur .kicker { font: 600 15px/1.3 var(--body); letter-spacing: 0; text-transform: none; color: var(--accent-ink); margin-bottom: 6px; }
.bloc-saisie h2 { font-size: clamp(28px, 2.6vw, 34px); margin-bottom: 18px; }
.bloc-saisie + .bloc-saisie { margin-top: 44px; }

/* « Voir un exemple » et « Réinitialiser », au-dessus de la tâche, toujours visibles : deux pilules côte à côte,
   l'une sous l'autre si la place manque ; l'exemple en bleu encre, la remise à zéro en retrait.
   Des boutons natifs : sans le fond gris du navigateur. */
.actions-tache { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 30px; }
.actions-tache .bouton { min-height: 44px; padding: 8px 20px; border-width: 1.5px; border-radius: 999px; background: transparent; font-size: 15px; cursor: pointer; }
.actions-tache #voir-exemple { border-color: var(--accent-ink); color: var(--accent-ink); }
.actions-tache #voir-exemple:hover { background: var(--accent-ink); color: var(--paper); }
.actions-tache #reinitialiser { border-color: var(--rule); color: var(--ink-soft); }
.actions-tache #reinitialiser:hover { background: var(--paper); border-color: var(--muted); color: var(--ink); }
/* Au doigt, le survol resterait collé après l'appui : « Voir un exemple » aurait l'air choisi. */
@media (hover: none) {
  .actions-tache #voir-exemple:hover { background: transparent; color: var(--accent-ink); }
  .actions-tache #reinitialiser:hover { background: transparent; border-color: var(--rule); color: var(--ink-soft); }
}

/* La tâche, une seule (02/10/2026) : un fieldset sans cadre. Sa légende n'est lue qu'aux lecteurs d'écran (.hors-ecran). */
.tache { container: tache / inline-size; position: relative; min-width: 0; margin: 0; padding: 0; border: 0; }

/* Les six étapes : un cercle numéroté à gauche, un rail jusqu'à l'étape suivante. Le cercle se remplit de bleu encre
   quand le champ est accepté (.rempli, interface.js), passe en brique quand il est en erreur. La numérotation dit
   une vraie séquence, l'ordre de saisie ; elle n'est pas lue aux lecteurs d'écran, les libellés suffisent.
   Le compteur vit dans .champs : .tache et .couts sont des conteneurs, qui isolent les compteurs ; l'étape 6, la
   formule, porte son numéro en dur. */
.champs { display: flex; flex-direction: column; counter-reset: etape; }
.champ { position: relative; min-width: 0; padding: 0 0 32px var(--rail); }
.champ > label { display: block; margin-bottom: 10px; font: 600 21px/1.2 var(--display); color: var(--ink); }
.champ::before, .couts::before {
  counter-increment: etape; content: counter(etape); content: counter(etape) / "";
  position: absolute; left: 0; top: -6px; display: grid; place-items: center;
  width: var(--cercle); height: var(--cercle); border: 2px solid var(--accent-ink); border-radius: 50%;
  background: var(--ground); color: var(--accent-ink); font: 600 19px/1 var(--display);
  transition: background-color .2s, color .2s, border-color .2s;
}
.champ::after { content: ""; position: absolute; left: calc(var(--cercle) / 2 - 1px); top: calc(var(--cercle) + 2px); bottom: 6px; width: 2px; border-radius: 1px; background: var(--rule); }
.champ:last-child::after { display: none; }
.champ.rempli::before { background: var(--accent-ink); color: var(--paper); }
.champ.rempli::after { background: var(--accent-ink); }
.champ.invalide::before { border-color: var(--error); background: var(--error-soft); color: var(--error); }

/* Les gros champs, blancs sur le fond de la page. Le filet s'épaissit au focus et en erreur par une ombre
   intérieure, sans décaler la saisie. */
.saisie { display: flex; align-items: center; width: min(100%, 260px); min-height: 60px; background: var(--paper); border: 1.5px solid var(--muted); border-radius: 12px; transition: border-color .15s; }
.champ.nom .saisie { width: 100%; }
.saisie:hover { border-color: var(--ink); }
.saisie:focus-within { border-color: var(--accent-ink); box-shadow: inset 0 0 0 1px var(--accent-ink); outline: 3px solid var(--focus); outline-offset: 2px; }
.saisie input { flex: 1 1 auto; width: 100%; min-width: 0; height: 57px; padding: 0 8px 0 16px; background: transparent; border: 0; border-radius: 12px; font: 500 26px/1 var(--body); font-variant-numeric: tabular-nums; color: var(--ink); text-align: right; }
.saisie input:focus { outline: none; }
.champ.nom .saisie input { font: 400 20px/1 var(--body); text-align: left; }
.saisie .unite { flex: none; padding: 0 16px 0 4px; font: 16px/1 var(--body); color: var(--muted); white-space: nowrap; }
.aide { margin: 10px 0 0; font-size: 15px; line-height: 1.45; color: var(--muted); }

/* Champ invalide : filet et message en rouge brique, jamais la couleur seule */
.champ.invalide .saisie { border-color: var(--error); box-shadow: inset 0 0 0 1px var(--error); background: var(--error-soft); }
.erreur { display: flex; gap: 8px; margin: 10px 0 0; font: 600 14px/1.4 var(--body); color: var(--error); }
.erreur::before { content: "!"; content: "!" / ""; flex: none; display: grid; place-items: center; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; background: var(--error); color: #fff; font: 700 14px/1 var(--mono); }

/* Les choix rapides : des pilules sous le champ. Celle de la valeur en cours est enfoncée (aria-pressed) et pleine. */
.rapides { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.pastille { min-height: 44px; padding: 0 16px; border: 1.5px solid var(--rule); border-radius: 999px; background: var(--paper); font: 600 15px/1 var(--body); color: var(--ink); cursor: pointer; transition: border-color .15s, background-color .15s, color .15s; }
.pastille:hover { border-color: var(--ink); }
.pastille[aria-pressed="true"] { background: var(--accent-ink); border-color: var(--accent-ink); color: var(--paper); }
@media (hover: none) { .pastille:hover { border-color: var(--rule); } .pastille[aria-pressed="true"]:hover { border-color: var(--accent-ink); } }

/* La part automatisée : le champ et le curseur côte à côte (l'un sous l'autre dans une tâche étroite), la plage
   habituelle, 50 à 80 %, repérée dessous. --v : la position du curseur, pour remplir la piste (interface.js). */
.champ.champ-part { display: grid; grid-template-columns: minmax(0, 150px) minmax(0, 1fr); column-gap: 24px; align-items: center; }
.champ-part > :not(.saisie, .curseur-bloc) { grid-column: 1 / -1; }
.champ-part > .saisie { width: 100%; }
.curseur-bloc { --pouce: 28px; min-width: 0; }
.curseur { display: block; width: 100%; height: 44px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; }
.curseur::-webkit-slider-runnable-track { height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--accent-ink) 0 var(--v, 0%), var(--rule) var(--v, 0%) 100%); }
.curseur::-moz-range-track { height: 8px; border-radius: 4px; background: var(--rule); }
.curseur::-moz-range-progress { height: 8px; border-radius: 4px; background: var(--accent-ink); }
.curseur::-webkit-slider-thumb { -webkit-appearance: none; width: var(--pouce); height: var(--pouce); margin-top: -10px; border: 3px solid var(--accent-ink); border-radius: 50%; background: var(--paper); box-shadow: 0 2px 6px color-mix(in srgb, var(--accent) 30%, transparent); }
.curseur::-moz-range-thumb { width: 22px; height: 22px; border: 3px solid var(--accent-ink); border-radius: 50%; background: var(--paper); }
.curseur:focus { outline: none; }
.curseur:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--paper), 0 0 0 6px var(--focus); }
.curseur:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px var(--paper), 0 0 0 6px var(--focus); }
/* Part pas encore choisie : le pouce en pointillé, à zéro. */
.curseur.vide::-webkit-slider-thumb { border-style: dashed; border-color: var(--muted); }
.curseur.vide::-moz-range-thumb { border-style: dashed; border-color: var(--muted); }
.curseur-regle { position: relative; height: 6px; margin: 2px calc(var(--pouce) / 2) 0; border-radius: 3px; }
.curseur-regle .plage { position: absolute; top: 0; bottom: 0; left: 50%; width: 30%; border-radius: 3px; background: color-mix(in srgb, var(--accent-ink) 30%, transparent); }
.curseur-legende { margin: 6px 0 0; padding-left: calc(var(--pouce) / 2 + (100% - var(--pouce)) * .5); font-size: 14px; line-height: 1.3; color: var(--muted); }
@container tache (max-width: 520px) {
  .champ.champ-part { grid-template-columns: minmax(0, 1fr); }
  .champ-part > .saisie { width: min(100%, 260px); }
  .champ-part > .curseur-bloc { margin-top: 10px; }
}

/* Le bilan en direct, sous les étapes : une phrase en texte courant, pas en Mono (elle se lisait comme du code),
   chiffres en gras, chacun avec son unité (« il vous en restera 2,7 h », interface.js). */
.bilan-tache { margin: 0 0 0 var(--rail); padding: 12px 16px 13px; background: var(--accent-soft); border-radius: 12px; font: 16px/1.45 var(--body); color: var(--ink-soft); }
.bilan-tache b { font-weight: 600; color: var(--ink); }

/* Alerte non bloquante : à vérifier, pas une erreur */
.a-verifier { margin: 12px 0 0 var(--rail); padding: 12px 16px; background: var(--accent-soft); border-left: 3px solid var(--accent-ink); border-radius: 0 10px 10px 0; font-size: 15px; color: var(--ink); }
.a-verifier b { display: block; margin-bottom: 2px; font: 500 14px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--accent-ink); }

/* Étape 6 : la formule, trois cartes à choix unique, et rien à saisir (décision d'Antoine du 03/10/2026).
   Le cercle est plein d'emblée : une formule est toujours choisie. Assez large, le prix passe à droite du nom. */
.couts { container: couts / inline-size; position: relative; min-width: 0; margin: 0; padding: 0 0 0 var(--rail); }
.couts::before { counter-increment: none; content: "6"; content: "6" / ""; background: var(--accent-ink); color: var(--paper); }
.types-projet { min-width: 0; margin: 0; padding: 0; border: 0; }
.types-projet legend { padding: 0; margin-bottom: 12px; font: 600 21px/1.2 var(--display); color: var(--ink); }
.types { display: grid; gap: 10px; }
.type { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; align-items: baseline; padding: 14px 16px; background: var(--paper); border: 1.5px solid var(--rule); border-radius: 12px; cursor: pointer; transition: border-color .15s, background-color .15s; }
.type:hover { border-color: var(--muted); }
.type input { grid-row: span 2; align-self: start; width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--accent-ink); }
.type input:focus-visible { outline: none; }
.type:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.type-nom { font: 600 17px/1.3 var(--display); }
.type-prix { font: 15px/1.45 var(--body); color: var(--muted); }
.type:has(input:checked) { background: var(--accent-soft); border-color: var(--accent-ink); box-shadow: inset 0 0 0 1px var(--accent-ink); }
.type:has(input:checked) .type-prix { color: var(--ink-soft); }
@container couts (min-width: 460px) {
  .type { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; }
  .type input { grid-row: auto; align-self: center; margin: 0; }
  .type-prix { text-align: right; }
}
.mention-prix { margin: 12px 0 0; font-size: 14px; line-height: 1.45; color: var(--muted); }

/* La barre du résultat, en une ligne, avec un lien pour y aller : utile seulement quand le résultat passe sous la
   saisie (moins de 961 px). Il suit les mêmes états que le résultat. Placé en fin de colonne de saisie, il colle au bas
   de l'écran tant que la colonne défile (position: sticky, sans script) : le dirigeant voit le résultat bouger
   pendant qu'il tape, sans remonter ni descendre de 2 000 px. Une bande bleu nuit, comme la carte du résultat et
   l'en-tête ; sur papier clair à filet brique quand elle porte une correction. Masquée tant que la tâche est vide :
   rien à suivre encore. Le défilement vers un champ réserve la hauteur de la barre (scroll-padding-bottom), pour
   qu'elle ne cache jamais le champ actif ; interface.js remonte un champ touché à moitié caché. */
.apercu-resultat { margin: 12px 0 0; font-size: 15px; line-height: 1.5; color: var(--ink-soft); }
.apercu-resultat a { color: var(--accent-ink); font-weight: 600; text-underline-offset: 3px; white-space: nowrap; }
@media (min-width: 961px) { .apercu-resultat { display: none; } }
@media (max-width: 960px) {
  html:has(#apercu-resultat:not([hidden])) { scroll-padding-bottom: 112px; }
  .apercu-resultat {
    --focus: var(--accent-bright);
    position: sticky; bottom: 0; z-index: 5;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    margin: 32px calc(-1 * var(--gutter)) 0;
    padding: 8px var(--gutter) calc(8px + env(safe-area-inset-bottom, 0px));
    background: var(--accent); color: var(--on-dark);
    box-shadow: 0 -12px 30px -14px color-mix(in srgb, var(--accent) 70%, transparent);
    font-size: 16px; line-height: 1.4;
  }
  .apercu-resultat b { font-weight: 600; color: var(--paper); }
  .apercu-resultat a { color: var(--accent-bright); }
  .apercu-resultat > [aria-hidden="true"] { display: none; }
  /* Le résumé passe sur deux lignes, le lien garde la sienne, à droite : barre de 64 px à 390 px. */
  .apercu-resultat > span:first-child { flex: 1 1 auto; min-width: 0; }
  .apercu-resultat a { flex: none; display: inline-flex; align-items: center; min-height: 44px; }
  /* Seul dans la barre (« Corrigez le champ … ») : le lien prend la largeur et passe à la ligne. */
  .apercu-resultat > a:only-child { flex: 1 1 auto; white-space: normal; }
  .apercu-resultat.corriger { --focus: var(--accent-ink); background: var(--error-soft); color: var(--ink); border-top: 3px solid var(--error); }
  .apercu-resultat.corriger a { color: var(--error); }
}

/* Le résultat : le grand aplat bleu nuit de la page (un aplat, donc permis par la charte). Texte blanc, étiquettes
   bleu clair, anneau de focus bleu clair. Les deux chiffres clés en très grand, côte à côte, puis la jauge de la
   semaine, puis les montants ; l'erreur s'y pose sur un papier clair, pour que la brique garde son contraste.
   Hauteur fixe (choix d'Antoine du 03/10/2026) : toutes les lignes sont toujours là, « — » quand une valeur ne se
   calcule pas, et chaque boîte dont le contenu varie réserve la hauteur de sa plus longue variante à cette largeur
   (les variables ci-dessous, mesurées) : la carte garde la même hauteur, au pixel, dans tous les états.
   Ce sont des hauteurs minimales : sous 360 px seulement, un contenu plus long agrandirait la carte plutôt que de déborder.
   --zone-etat : la zone d'état, deux lignes à toutes les largeurs (carte resserrée du 03/10/2026 : au plus 24 px de
   blanc sous la note du scénario une fois calculé ; chaque message tient en deux lignes à 360 px) ; --cle : la valeur
   d'un chiffre clé et sa précision ; --gain, --valeur, --rendement : les lignes des montants. Mesurées le 03/10/2026 sur tous les états (départ, à compléter, chaque erreur, vide, sans
   coût horaire, l'exemple dans les 3 × 3 cas, non rentabilisé, au-delà de 36 mois, dès la mise en service), au plus
   étroit de chaque palier (961, 621, 481 et 360 px), plus un ou deux pixels. */
.resultat { --zone-etat: 44px; --cle: 135px; --gain: 48px; --valeur: 70px; --rendement: 67px;
  --focus: var(--accent-bright); padding: 18px 28px 16px; background: var(--accent); color: var(--paper); border-radius: 18px; box-shadow: 0 2px 6px color-mix(in srgb, var(--accent) 16%, transparent), 0 28px 56px -24px color-mix(in srgb, var(--accent) 55%, transparent); scrollbar-color: var(--on-dark-rule) transparent; }
.resultat-tete { margin-bottom: 10px; }
.resultat-tete .kicker { margin: 0; color: var(--accent-bright); }

/* Scénarios : trois boutons radio natifs, en commande segmentée ; le choisi, en papier sur la nuit */
.scenarios { min-width: 0; margin: 0; padding: 0; border: 0; }
.segments { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; background: var(--accent-deep); border: 1px solid var(--on-dark-rule); border-radius: 12px; }
.segments label { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 44px; border-radius: 9px; font: 600 15px/1.2 var(--body); color: var(--on-dark); cursor: pointer; transition: background-color .15s, color .15s; }
.segments input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.segments label:hover { background: color-mix(in srgb, var(--paper) 9%, transparent); color: var(--paper); }
.segments label:has(input:checked) { background: var(--paper); color: var(--accent); }
.segments label:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
/* Sous le sélecteur, toujours là : ce qui distingue les scénarios, en une ligne à toutes les largeurs. */
.scenarios-precision { margin: 6px 0 0; font-size: 14px; line-height: 1.45; color: var(--on-dark); }
/* La zone d'état, sous le sélecteur de scénario, à hauteur réservée : elle ne pousse rien. Une fois calculé, la note du scénario. */
.resultat-etat { min-height: var(--zone-etat); margin: 8px 0 0; }
.scenario-note { margin: 0; font-size: 14px; line-height: 1.45; color: var(--on-dark); }
.scenario-note + .scenario-note { margin-top: 2px; }

/* Le style de trait de chaque scénario : le même dans les boutons, le tableau et le graphique */
.trait-scenario { width: 28px; height: 8px; flex: none; overflow: visible; }
.trait-scenario line { stroke: currentColor; fill: none; }
.trait-scenario .prudent { stroke-width: 2; stroke-dasharray: 6 4; }
.trait-scenario .central { stroke-width: 3.5; stroke-linecap: round; }
.trait-scenario .favorable { stroke-width: 2.5; stroke-dasharray: .1 5; stroke-linecap: round; }

/* Les deux chiffres clés, côte à côte, en très grand. Un nombre long descend d'une taille, ou de deux (interface.js). */
.chiffres-cles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 8px 0 0; padding: 12px 0 14px; border-top: 1px solid var(--on-dark-rule); }
.chiffres-cles > div { min-width: 0; }
.chiffres-cles > div:first-child { padding-right: 18px; }
.chiffres-cles > div + div { padding-left: 20px; border-left: 1px solid var(--on-dark-rule); }
.chiffres-cles dt { font: 600 15px/1.3 var(--body); color: var(--accent-bright); }
.chiffres-cles dd { min-height: var(--cle); margin: 6px 0 0; }
.chiffres-cles .valeur { display: block; font: 700 60px/.92 var(--display); letter-spacing: -.025em; color: var(--paper); }
.chiffres-cles .valeur.long { font-size: 46px; }
.chiffres-cles .valeur.tres-long { font-size: 36px; }
/* L'unité commence par une espace, pour les lecteurs d'écran : elle passe dessous, en bleu clair. */
.chiffres-cles .valeur small { display: block; margin: 4px 0 0; font: 600 17px/1.2 var(--display); letter-spacing: 0; color: var(--accent-bright); }
/* Un délai en mots (« Non rentabilisé »). La classe n'est pas .texte, celle des pages de texte, qui ajoute 48 px de marge. */
.chiffres-cles .valeur.en-mots { font-size: 32px; line-height: 1.05; }
.chiffres-cles .precision { display: block; margin-top: 6px; font-size: 14px; line-height: 1.45; color: var(--on-dark); }
/* « — » : une valeur pas encore calculée, en gris bleuté plutôt qu'en blanc (interface.js, nonCalcule) ; les tableaux
   des scénarios en gris. Lue « non calculé ». */
.resultat .non-calcule, .jauge.vide b { color: var(--on-dark); }
.formules.comparatif .non-calcule, .chiffres-table .non-calcule { color: var(--muted); }

/* La jauge du temps de la semaine (interface.js) : rendu en plein bleu clair, reste à faire en contour ;
   en pointillé tant que la tâche est incomplète. */
.jauge { margin: 0 0 12px; padding: 10px 18px; background: var(--accent-deep); border-radius: 12px; }
.jauge p { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; margin: 0; font-size: 14px; line-height: 1.4; color: var(--on-dark); }
.jauge .jauge-tete { margin-bottom: 8px; }
.jauge-tete span:first-child { font-weight: 600; color: var(--accent-bright); }
.jauge b { font: 600 17px/1.2 var(--display); color: var(--paper); }
.jauge-barre { display: flex; gap: 3px; height: 14px; margin-bottom: 8px; }
.jauge-barre span { min-width: 0; border-radius: 4px; }
.jauge-barre .rendu { background: var(--accent-bright); }
.jauge-barre .reste { flex: 1 1 auto; border: 1.5px solid var(--on-dark); }
.jauge.vide .jauge-barre .rendu, .jauge.plein .jauge-barre .reste { display: none; }
.jauge.vide .jauge-barre .reste { border-style: dashed; border-color: var(--on-dark-faint); }
@media (prefers-reduced-motion: no-preference) { .jauge-barre .rendu { transition: width .35s cubic-bezier(.2, .8, .2, 1); } }

/* Les montants */
.chiffres { margin: 0; }
/* Une ligne garde sa hauteur réservée : son contenu y est centré (une perte passe à la ligne sur téléphone). */
.chiffres > div { display: flex; flex-wrap: wrap; align-content: center; align-items: baseline; justify-content: space-between; column-gap: 12px; min-height: var(--gain); padding: 8px 0; border-bottom: 1px solid var(--on-dark-rule); }
.chiffres > div:nth-child(3) { min-height: var(--valeur); }
.chiffres > div.rendement { min-height: var(--rendement); }
.chiffres > div:first-child { border-top: 1px solid var(--on-dark-rule); }
.chiffres dt { font-size: 15px; color: var(--on-dark); }
.chiffres dd { margin: 0; font: 600 23px/1.2 var(--display); white-space: nowrap; color: var(--paper); }
.chiffres dd.definition { flex-basis: 100%; margin-top: 2px; font: 14px/1.45 var(--body); white-space: normal; color: var(--on-dark-faint); }
.chiffres .rendement dd:not(.definition) { font-size: 20px; }
/* « perte » suit le montant après une espace : la marge en tient compte. */
.perte { display: inline-block; margin-left: 2px; padding: 2px 5px; border: 1px solid var(--muted); border-radius: 4px; font: 500 14px/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); vertical-align: 2px; }
.resultat .perte { border-color: var(--on-dark); color: var(--paper); }
.resultat-pied { margin: 8px 0 0; font-size: 14px; line-height: 1.5; color: var(--on-dark); }

/* Les messages de la zone d'état, en deux lignes au plus (44 px réservés) : la consigne en blanc, sa suite en plus
   petit. La correction : une bande de papier clair, filet brique et signe « ! » (jamais la couleur seule), comme sous
   le champ, puis sa suite sur la nuit. L'anneau de focus du lien reste dans la bande (décalage nul). */
.resultat-message { margin: 0; }
.resultat-message p { margin: 0; font: 600 17px/1.25 var(--display); color: var(--paper); }
.resultat-message p + p { margin-top: 2px; font: 14px/1.45 var(--body); color: var(--on-dark); }
.resultat-message.corriger p:first-child { --focus: var(--accent-ink); display: flex; gap: 6px; padding: 3px 8px; background: var(--error-soft); border-left: 4px solid var(--error); border-radius: 0 8px 8px 0; font-size: 15px; line-height: 1.3; color: var(--ink); }
.resultat-message.corriger p:first-child::before { content: "!"; content: "!" / ""; flex: none; align-self: center; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--error); color: #fff; font: 700 14px/1 var(--mono); }
.resultat-message.corriger p + p { margin-top: 0; line-height: 1.3; }
.resultat-message.corriger a { color: var(--error); text-underline-offset: 3px; }
.resultat-message.corriger a:focus-visible { outline-offset: 0; }

/* Collant sous l'en-tête. Si la fenêtre est plus basse que la carte, la carte défile seule :
   les deux chiffres clés, en haut, restent toujours visibles. */
@media (min-width: 961px) {
  .resultat { position: sticky; top: 84px; max-height: calc(100vh - 94px); overflow-y: auto; overscroll-behavior: contain; }
}

/* Les trois scénarios : deux panneaux gris, tableau et graphique côte à côte. Sous 1160 px, l'un sous l'autre :
   à deux colonnes, le graphique serait affiché plus petit que son dessin (580 unités), et ses textes passeraient
   sous 14 px. */
.comparer { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: start; }
@media (min-width: 1160px) { .comparer { grid-template-columns: minmax(0, 1fr) 580px; } }
.comparer > div, .courbe { background: var(--ground); border-radius: 14px; }
.comparer > div { padding: 22px 24px 10px; }
.comparer h3 { font-size: 22px; margin-bottom: 14px; }
/* Le comparatif : la colonne du scénario affiché, en-tête plein bleu encre et colonne bleu pâle. */
.formules.comparatif { min-width: 0; }
.formules.comparatif thead th { padding: 10px 10px 12px; border-bottom: 0; font-size: 18px; vertical-align: bottom; }
.formules.comparatif thead td { border-bottom: 0; }
.formules.comparatif tbody tr:first-child { border-top: 2px solid var(--ink); }
.tete-scenario { display: flex; align-items: center; gap: 8px; height: 14px; margin-bottom: 8px; color: var(--accent-ink); }
.formules.comparatif thead th.choisi { background: var(--accent-ink); color: var(--paper); border-radius: 10px 10px 0 0; }
.formules.comparatif thead th.choisi .tete-scenario, .formules.comparatif thead th.choisi .affiche { color: var(--paper); }
.formules.comparatif tbody th { width: 40%; padding-right: 12px; }
.formules.comparatif tbody td { width: 20%; padding: 12px 10px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.formules.comparatif tbody td.texte, .formules.comparatif tbody td:has(.perte) { white-space: normal; }
.formules.comparatif tbody .choisi { background: var(--accent-soft); }
.formules.comparatif tbody tr:last-child .choisi { border-radius: 0 0 10px 10px; }
.formules.comparatif tr.prix td { font-size: 22px; }
.affiche { font: 500 14px/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--accent-ink); }

/* Le graphique : le dessin occupe toute la largeur du panneau, le reste garde une marge. */
.courbe { margin: 0; padding: 22px 0 6px; }
.courbe > :not(svg) { margin-left: 22px; margin-right: 22px; }
.courbe-tete { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 20px; margin-bottom: 10px; }
.courbe-tete h3 { margin: 0; }
.legende { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; padding: 0; list-style: none; font-size: 14px; color: var(--ink-soft); }
.legende li { display: flex; align-items: center; gap: 8px; }
.legende .trait-scenario { color: var(--accent-ink); }
/* La fourchette entre le prudent et le favorable : la même teinte que dans le dessin, avec un filet pour la voir. */
.legende .bande { display: inline-block; width: 22px; height: 12px; border-radius: 3px; background: color-mix(in srgb, var(--accent-ink) 13%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-ink) 35%, transparent); }
/* Le texte d'un SVG s'écrit dans les unités du dessin : un dessin affiché plus petit que son gabarit
   réduit tout ce qu'il écrit. Il n'est donc jamais réduit (comparatif et graphique l'un sous l'autre
   sous 1160 px, dessin étroit sous 640 px), et grossit au plus de 10 % (largeurs maximales). */
.courbe-svg { width: 100%; height: auto; overflow: visible; }
.courbe-svg.large { max-width: 640px; }
.courbe-svg.etroite { display: none; max-width: 400px; }
@media (max-width: 640px) { .courbe-svg.large { display: none; } .courbe-svg.etroite { display: block; } }
.courbe-svg .grille line { stroke: var(--rule); stroke-width: 1; }
.courbe-svg .fourchette { fill: color-mix(in srgb, var(--accent-ink) 13%, transparent); }
.courbe-svg .zero { stroke: var(--ink); stroke-width: 1.5; }
.courbe-svg text { font-family: var(--body); }
.courbe-svg .axe-texte text { font-size: 14px; font-variant-numeric: tabular-nums; fill: var(--muted); }
.courbe-svg .axe-texte .zero-texte { fill: var(--ink); font-weight: 500; }
.courbe-svg .axe-texte .axe-titre { font-size: 14px; }
.courbe-svg .zero-etiquette { font-size: 14px; fill: var(--ink-soft); }
.courbe-svg .droite { fill: none; stroke: var(--accent-ink); }
.courbe-svg .droite.central { stroke-width: 4; stroke-linecap: round; }
.courbe-svg .droite.prudent { stroke-width: 2; stroke-dasharray: 8 6; }
.courbe-svg .droite.favorable { stroke-width: 2.5; stroke-dasharray: .1 6; stroke-linecap: round; }
.courbe-svg .points circle { fill: var(--accent-ink); stroke: var(--ground); stroke-width: 2; }
.courbe-svg .points circle.equilibre { r: 7px; stroke: var(--paper); stroke-width: 3; }
.courbe-svg .repere { stroke: var(--ink-soft); stroke-width: 1; }
.courbe-svg .annotation { font-size: 14px; font-weight: 600; fill: var(--ink); }
.courbe-svg .etiquette { font-size: 15px; fill: var(--ink-soft); }
.courbe-svg .etiquette-valeur { font-size: 14px; font-variant-numeric: tabular-nums; fill: var(--muted); }
/* Dessin étroit (358 unités) : affiché sur 328 px à 360 px de large, d'où 15,5 px pour rendre 14,2. */
.courbe-svg.etroite .axe-texte text, .courbe-svg.etroite .axe-texte .axe-titre,
.courbe-svg.etroite .annotation, .courbe-svg.etroite .etiquette, .courbe-svg.etroite .etiquette-valeur, .courbe-svg.etroite .attente { font-size: 15.5px; }
/* À 15,5 px, « Mise en place remboursée » heurterait le départ des droites : la légende le dit à sa place. */
.courbe-svg.etroite .zero-etiquette { display: none; }
.courbe-svg .choisie { font-weight: 600; fill: var(--ink); }
/* Le graphique vide (interface.js, dessinerAttente) : sa note, au milieu de la moitié haute. */
.courbe-svg .attente { font-size: 15px; fill: var(--ink-soft); }
.courbe figcaption { margin-top: 8px; font-size: 14px; color: var(--muted); }

.valeurs-courbe { margin-top: 14px; border-top: 1px solid var(--rule); }
.valeurs-courbe summary { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; cursor: pointer; list-style: none; font: 600 15px/1.3 var(--body); color: var(--accent-ink); }
.valeurs-courbe summary::-webkit-details-marker { display: none; }
.valeurs-courbe summary::after { content: "+"; content: "+" / ""; font: 400 20px/1 var(--mono); }
.valeurs-courbe[open] summary::after { content: "−"; content: "−" / ""; }

/* Tableaux de chiffres : les valeurs du graphique */
.chiffres-table { width: 100%; border-collapse: collapse; font-size: 15px; font-variant-numeric: tabular-nums; }
.chiffres-table th, .chiffres-table td { padding: 11px 0 11px 16px; border-bottom: 1px solid var(--rule); text-align: right; vertical-align: baseline; white-space: nowrap; }
.chiffres-table th:first-child { padding-left: 0; text-align: left; white-space: normal; }
.chiffres-table thead th { font: 600 14px/1.3 var(--body); color: var(--muted); border-bottom: 2px solid var(--ink); white-space: normal; }
.chiffres-table tbody th { font-weight: 400; color: var(--ink); }
.chiffres-table tfoot th, .chiffres-table tfoot td { font-weight: 600; border-bottom: 0; }
.chiffres-table td.texte, .chiffres-table td.mois-zero, .chiffres-table td:has(.perte) { white-space: normal; }
/* Le tableau du graphique défile seul si des montants très longs ne tiennent pas, jamais la page. */
.valeurs-courbe .defile { padding-bottom: 2px; }

/* Comment je calcule */
.calcul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 5vw, 64px); }
.calcul h3 { font-size: 22px; margin-bottom: 14px; }
.liste-calcul { margin: 0; padding: 0; list-style: none; }
.liste-calcul li { position: relative; margin-bottom: 12px; padding-left: 22px; color: var(--ink-soft); }
.liste-calcul li::before { content: ""; position: absolute; left: 0; top: .78em; width: 10px; height: 2px; background: var(--accent-ink); }
.liste-calcul b { color: var(--ink); font-weight: 600; }
.liste-calcul a { color: var(--accent-ink); font-weight: 600; text-underline-offset: 3px; }

/* Sans JavaScript */
.sans-script { max-width: 52em; padding: 22px 24px; background: var(--paper); border: 1px solid var(--rule); border-top: 3px solid var(--accent-ink); border-radius: 10px; }
.sans-script h2 { font-size: 26px; margin-bottom: 10px; }
.sans-script p { color: var(--ink-soft); }

@media (max-width: 960px) {
  .simulateur > .page { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .calcul { grid-template-columns: minmax(0, 1fr); }
  .resultat { max-width: 640px; --cle: 128px; }
}
@media (max-width: 620px) {
  /* Ouverture : le chapeau passe de 18 à 17 px, une ligne de moins (le kicker, un <p> lui aussi, garde ses 14 px). */
  .rentabilite-intro .titre-section h1 + p { font-size: 17px; }
  .simulateur { --rail: 52px; --cercle: 36px; padding-top: 20px; }
  .champ { padding-bottom: 28px; }
  .champ > label, .types-projet legend { font-size: 19px; }
  .champ::before, .couts::before { top: -5px; font-size: 17px; }
  .saisie input { font-size: 24px; }
  .pastille { padding: 0 14px; }
  .resultat { padding: 16px 18px 18px; border-radius: 16px; --cle: 124px; }
  .chiffres-cles > div:first-child { padding-right: 14px; }
  .chiffres-cles > div + div { padding-left: 14px; }
  .chiffres-cles .valeur { font-size: 56px; }
  .chiffres-cles .valeur.long { font-size: 42px; }
  .chiffres-cles .valeur.tres-long { font-size: 32px; }
  .chiffres-cles .valeur.en-mots { font-size: 26px; }
  .jauge { padding: 10px 14px; }
  .comparer > div { padding: 18px 16px 6px; }
  .courbe > :not(svg) { margin-left: 16px; margin-right: 16px; }
  /* Comparatif : il reprend l'empilement du tableau des formules (intitulé au-dessus, trois scénarios côte à côte).
     La case vide d'en-tête reste lue (rôles ARIA) : sans elle, les en-têtes se décaleraient d'une colonne.
     Le scénario affiché : un trait bleu encre sous son en-tête, ses chiffres en gras. */
  .formules.comparatif thead td { display: block; position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); border: 0; }
  .formules.comparatif thead th { padding: 0 0 10px; font-size: 16px; }
  .formules.comparatif thead th.choisi { background: none; color: var(--ink); border-radius: 0; box-shadow: inset 0 -3px 0 var(--accent-ink); }
  .formules.comparatif thead th.choisi .tete-scenario, .formules.comparatif thead th.choisi .affiche { color: var(--accent-ink); }
  /* Dans le panneau, une colonne fait 90 px à 360 px : « affiché » passe sous le trait plutôt que sur la colonne voisine. */
  .formules.comparatif .tete-scenario { flex-wrap: wrap; row-gap: 6px; height: auto; }
  .formules.comparatif tbody td { width: auto; padding: 2px 0 12px; font-size: 14px; white-space: normal; }
  .formules.comparatif tr.prix td { font-size: 18px; }
  .formules.comparatif tbody .choisi { background: none; font-weight: 600; }
  .formules.comparatif tbody th { width: auto; padding-right: 0; }
  /* Tableau du graphique : plus serré, « perte » passe sous le montant */
  .valeurs-courbe .chiffres-table { font-size: 14px; }
  .valeurs-courbe .chiffres-table th, .valeurs-courbe .chiffres-table td { padding-left: 10px; }
  .valeurs-courbe .chiffres-table th:first-child { padding-left: 0; }
}

/* Téléphone : la carte réserve plus de hauteur (une précision sur trois lignes ; une perte, ou une valeur de
   10 000 € et plus, passe sous son intitulé ; la définition de la valeur sur deux lignes à 360 px). */
@media (max-width: 480px) {
  .resultat { --cle: 144px; --gain: 71px; --valeur: 113px; }
}

/* Mouvement réduit : pas de transition, pas de défilement animé */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .saisie, .type, .segments label, .pastille, .champ::before, .couts::before, .actions-tache .bouton { transition: none; }
}

/* Liens vers le simulateur, depuis l'accueil et la page Tarifs */
.suite-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.lien-rentabilite { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--rule); font-size: 16px; color: var(--ink-soft); }
.lien-rentabilite a { color: var(--accent-ink); font-weight: 600; text-underline-offset: 3px; }

/* M'envoyer la simulation, par email (04/10/2026). Sous le verdict, « M'envoyer cette simulation par email » : un
   bouton à filet bleu clair sur la nuit, à côté de « Réserver un appel ». Il ouvre la section #ecrire : un encart
   « Conseillé » qui replie le détail de la tâche (choix d'Antoine du 05/10/2026), puis les boutons de l'email.
   Le détail reprend les étapes numérotées de la saisie du simulateur (.champs, .champ), en champs pleine largeur. */
.contact-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.contact-actions .bouton.plein { margin-top: 0; }
.contact .bouton.trait { border-color: var(--accent-bright); background: transparent; color: #fff; cursor: pointer; }
.contact .bouton.trait:hover { background: var(--accent-deep); }

.ecrire { --rail: 60px; --cercle: 40px; }
.ecrire-formulaire { max-width: 760px; }
.ecrire h2:focus { outline: none; }
.ecrire .saisie { width: 100%; min-height: 56px; }
.ecrire .saisie input { height: 53px; font: 400 18px/1.3 var(--body); text-align: left; }
.ecrire .champ-titre { margin: 0 0 10px; font: 600 21px/1.2 var(--display); color: var(--ink); }
.etapes-tache { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.etapes-tache .numero { flex: none; padding-left: 16px; font: 500 16px/1 var(--mono); color: var(--muted); }
.ecrire .etapes-tache .saisie input { padding-left: 10px; }
.ajouter-etape { min-height: 44px; margin-top: 12px; padding: 8px 20px; border: 1.5px solid var(--accent-ink); border-radius: 999px; background: transparent; color: var(--accent-ink); font-size: 15px; cursor: pointer; }
.ajouter-etape:hover { background: var(--accent-ink); color: var(--paper); }
@media (hover: none) { .ajouter-etape:hover { background: transparent; color: var(--accent-ink); } }
.vous { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.vous label { display: block; margin-bottom: 8px; font: 600 16px/1.3 var(--body); color: var(--ink); }
.ecrire-conseil { margin-bottom: 32px; padding: 24px 28px 28px; background: var(--paper); border: 1px solid var(--rule); border-left: 4px solid var(--accent-ink); border-radius: 0 14px 14px 0; }
.ecrire-conseil > .kicker { margin-bottom: 8px; }
.ecrire-conseil h3 { margin: 0 0 8px; font: 600 24px/1.2 var(--display); color: var(--ink); }
.conseil-texte { margin: 0 0 18px; color: var(--ink-soft); }
/* Le bouton qui affiche et masque le détail : une pilule à filet bleu encre, comme « Voir un exemple », et un
   chevron qui se retourne quand le détail est affiché. En filet et pas en plein : « Ouvrir l'email » reste le
   seul bouton plein de la section. */
.bouton-detail { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 10px 22px; border: 1.5px solid var(--accent-ink); border-radius: 999px; background: transparent; color: var(--accent-ink); font: 600 16px/1.2 var(--body); cursor: pointer; transition: background-color .15s, color .15s; }
.bouton-detail:hover { background: var(--accent-ink); color: var(--paper); }
@media (hover: none) { .bouton-detail:hover { background: transparent; color: var(--accent-ink); } }
.bouton-detail svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s; }
.bouton-detail[aria-expanded="true"] svg { transform: rotate(180deg); }
.detail-garde { margin: 12px 0 0; font-size: 15px; color: var(--muted); }
.ecrire-detail { margin-top: 32px; }
@media (prefers-reduced-motion: reduce) { .bouton-detail, .bouton-detail svg { transition: none; } }
.ecrire-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.ecrire-actions .bouton.trait { background: transparent; cursor: pointer; }
/* Les messageries en ligne, sous les deux boutons : un intitulé, puis Gmail et Outlook en filet, côte à côte. */
.ecrire-web { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 12px; }
.ecrire-web-titre { font-weight: 600; color: var(--ink); }
.ecrire-web .bouton.trait { background: transparent; }
.ecrire-statut { margin: 12px 0 0; font-weight: 600; color: var(--ink); }
.ecrire-statut:empty { display: none; }
.ecrire-secours { margin-top: 16px; }
.ecrire-secours label { display: block; margin-bottom: 8px; font-weight: 600; }
.ecrire-secours textarea { width: 100%; padding: 12px 14px; border: 1.5px solid var(--muted); border-radius: 12px; background: var(--paper); font: 15px/1.5 var(--mono); color: var(--ink); resize: vertical; }
@media (max-width: 760px) { .vous { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 620px) {
  .ecrire { --rail: 52px; --cercle: 36px; }
  .ecrire .champ-titre { font-size: 19px; }
  .ecrire-conseil { padding: 20px 16px 22px; }
  .ecrire-conseil h3 { font-size: 21px; }
  .ecrire .saisie input { font-size: 17px; }
  .ecrire-actions .bouton { flex: 1 1 100%; justify-content: center; }
  .ecrire-web-titre { flex: 1 1 100%; }
  .ecrire-web .bouton { flex: 1 1 0; justify-content: center; }
  /* Les deux boutons du contact, l'un sous l'autre, de même largeur. */
  .contact-actions { flex-direction: column; align-items: stretch; }
  .contact-actions .bouton { justify-content: center; text-align: center; }
}