/* ══════════════════════════════════════════════════════════════
   PICBOIS47 — L'OUTIL « QUELLE TÂCHE VOUS FAIT PERDRE DU TEMPS? »
   Chargé sur TOUTES les pages. Trois façons de le voir :
     · en section dans la page (accueil, Automatisations) : .demo ;
     · en fenêtre superposée (toutes les autres pages) : .outil-fenetre,
       ouverte par n'importe quel [data-outil], sans quitter la page ;
     · des portes d'entrée : le lien du menu (.menu-outil) et le bandeau
       (.outil-bandeau) des pages de service.
   Sorti de accueil.css le 5 oct. 2026.
   ══════════════════════════════════════════════════════════════ */

/* ═══════════════════ 3. TROUVEZ UNE PISTE POUR SIMPLIFIER VOTRE TRAVAIL ═══════════════════
   Deux colonnes : une courte introduction à gauche, l'espace de travail à
   droite (le formulaire, puis la réponse). Le formulaire est un panneau
   délimité sur fond sombre ; le champ de description est IVOIRE, donc
   impossible à manquer ; la réponse est un second panneau ivoire,
   nettement séparé. Rouge : le bouton principal, et le marquage de ce qui
   reste entre les mains du visiteur. Aucune animation continue. */
.demo { background: var(--canvas); color: var(--text); padding: var(--sp-8) 0; }
.demo-grille { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--sp-6) var(--sp-7); align-items: start; }
.demo .label { display: inline-flex; align-items: flex-start; gap: 10px; text-transform: none; letter-spacing: 0.01em; font-family: var(--f-sans); font-size: var(--t-small); font-weight: 600; color: var(--text); line-height: 1.4; }
.demo-vif { flex: none; width: 8px; height: 8px; margin-top: 0.45em; border-radius: 50%; background: var(--red); }
.demo-tete { position: sticky; top: calc(var(--nav-h) + var(--sp-3)); }
.demo-tete h2 { margin-top: var(--sp-3); color: var(--ink); font-size: clamp(2rem, 3.4vw, 3.1rem); line-height: 1.06; letter-spacing: -0.03em; text-wrap: balance; }
.demo-intro { margin-top: var(--sp-3); font-size: 1.1875rem; line-height: 1.55; max-width: 34ch; }
.demo-rassure { margin-top: var(--sp-3); padding-left: var(--sp-2); border-left: 2px solid var(--red); font-size: 1rem; line-height: 1.55; color: var(--ink); max-width: 34ch; }
.demo-sans-js { padding: var(--sp-3); border: 1px solid var(--line-strong); border-radius: var(--r-card); }

.demo-outil { display: grid; gap: var(--sp-4); min-width: 0; }
.demo-panneau { background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-card); padding: var(--sp-5); }
.demo-forme { display: grid; gap: var(--sp-4); }
.demo-q { display: grid; gap: 6px; }
.demo-etiquette { font-size: 1.375rem; font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; color: var(--ink); }
.demo-etiquette-2 { font-size: 1rem; font-weight: 600; line-height: 1.35; color: var(--ink); }
.demo-aide { font-size: 1rem; line-height: 1.5; color: var(--text); margin: 0; }
.demo-champ > .demo-aide, .demo-details > .demo-aide { font-size: var(--t-small); color: var(--muted); }

/* Le champ : ivoire sur panneau sombre, bordure franche, foyer rouge. */
.demo-q textarea {
  width: 100%; min-height: 168px; margin-top: var(--sp-1); padding: 16px 18px; resize: vertical;
  background: var(--panel); color: var(--panel-ink); caret-color: var(--red);
  border: 2px solid var(--panel-line); border-radius: var(--r-button);
  font: inherit; font-size: 1.125rem; line-height: 1.55;
}
.demo-q textarea::placeholder { color: var(--panel-muted); opacity: 1; }
.demo-q textarea:hover { border-color: var(--panel-muted); }
.demo-q textarea:focus, .demo-revision textarea:focus { outline: 3px solid var(--red); outline-offset: 2px; border-color: var(--panel-ink); }
.demo-q textarea[aria-invalid="true"] { border-color: var(--red); }
.demo-sous { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.demo-compteur { margin: 0; font-size: var(--t-small); color: var(--muted); }
.demo-compteur.trop { color: var(--ink); font-weight: 600; }
.demo-lien { background: none; border: 0; padding: 10px 0; min-height: 44px; font: inherit; font-size: var(--t-small); font-weight: 600; color: var(--ink); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.demo-lien:hover { text-decoration-thickness: 2px; }
.demo-lien:focus-visible, .demo-btn-2:focus-visible, .demo-valeur-opt summary:focus-visible, .demo-modele summary:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

.demo-ex { padding: var(--sp-3); background: var(--surface-2); border: 1px dashed var(--muted); border-radius: var(--r-button); display: grid; gap: var(--sp-2); }
.demo-ex-titre { margin: 0; font-size: var(--t-small); font-weight: 600; color: var(--ink); }
.demo-ex-texte { margin: 0; font-size: 1rem; line-height: 1.55; color: var(--text); }
.demo-ex-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); align-items: center; }
.demo-ex-statut { margin: 0; font-size: var(--t-small); color: var(--text); }
.demo-ex-statut:empty { display: none; }

/* Quelques détails : un groupe, des questions simples, de l'air entre elles. */
.demo-details { margin: 0; padding: var(--sp-4) 0 0; border: 0; border-top: 1px solid var(--line-strong); display: grid; gap: var(--sp-3); min-width: 0; }
.demo-details legend { float: left; width: 100%; padding: 0 0 var(--sp-1); font-size: 1.1875rem; font-weight: 600; color: var(--ink); }
.demo-details legend + * { clear: both; }
.demo-champs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4) var(--sp-4); }
.demo-champ { display: grid; gap: var(--sp-1); align-content: start; min-width: 0; margin: 0; padding: 0; border: 0; }
.demo-champ-large, .demo-mode { grid-column: 1 / -1; }
.demo-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
.demo-forme select, .demo-champ input[type="text"] {
  width: 100%; min-height: 50px; padding: 0 40px 0 14px; color: var(--ink); background-color: var(--surface-2);
  border: 1px solid var(--muted); border-radius: var(--r-button);
  font: inherit; font-size: 1.0625rem; cursor: pointer; appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23f2efe9' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
.demo-forme select:disabled { opacity: 0.55; cursor: not-allowed; }
.demo-champ input[type="text"] { padding: 0 14px; background-image: none; cursor: text; }
.demo-champ input[type="text"]::placeholder { color: var(--muted); opacity: 1; }
.demo-champ input[type="text"][aria-invalid="true"] { border-color: var(--red); }
.demo-forme select:hover:not(:disabled), .demo-champ input[type="text"]:hover { border-color: var(--ink); }
.demo-champ input[type="text"]:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; border-color: var(--ink); }
.demo-champ-erreur { font-size: var(--t-small); font-weight: 600; color: var(--ink); padding-left: 10px; border-left: 3px solid var(--red); }
.demo-forme select:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; border-color: var(--ink); }
.demo-forme select option { color: var(--canvas); background: var(--panel); }

.demo-mode { gap: 10px; padding: var(--sp-2); border: 1px solid var(--line-strong); border-radius: var(--r-button); }
.demo-mode[hidden] { display: none; }
.demo-radio, .demo-case { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; font-size: 1rem; line-height: 1.45; color: var(--text); min-height: 44px; padding: 6px 0; }
.demo-radio input, .demo-case input { appearance: auto; -webkit-appearance: auto; flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--red); cursor: pointer; }
.demo-radio input:focus-visible, .demo-case input:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.demo-radio small, .demo-case small { display: block; font-size: var(--t-small); color: var(--muted); margin-top: 2px; }
.demo-case { color: var(--ink); }

.demo-valeur-opt { border: 1px solid var(--line-strong); border-radius: var(--r-button); padding: 0 var(--sp-2); }
.demo-valeur-opt summary { list-style: none; cursor: pointer; padding: 14px 0; min-height: 48px; font-weight: 600; color: var(--ink); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.demo-valeur-opt summary::-webkit-details-marker { display: none; }
.demo-valeur-opt summary::after { content: "+"; font-size: 1.5rem; line-height: 1; color: var(--text); }
.demo-valeur-opt[open] summary::after { content: "−"; }
.demo-valeur-opt[open] { padding-bottom: var(--sp-2); }

/* L'envoi */
.demo-envoi { display: grid; gap: 10px; justify-items: start; }
.demo-note { margin: 0; font-size: var(--t-small); color: var(--text); }
.demo-confid { margin: 0; font-size: var(--t-small); color: var(--muted); }
.demo-erreur { margin: 0; padding: 12px 16px; border-left: 3px solid var(--red); background: var(--surface-2); color: var(--ink); font-size: 1rem; line-height: 1.5; }
.demo-erreur a { color: var(--ink); text-underline-offset: 3px; font-weight: 600; }
.demo [hidden] { display: none !important; }
.demo-turnstile { min-height: 0; }
.demo-turnstile:empty { display: none; }
/* Pot de miel : hors écran, hors lecteurs d'écran (aria-hidden), hors tabulation. */
.demo-piege { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.demo-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.demo-bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6em; min-height: 54px; padding: 0 28px;
  font: inherit; font-size: 1.125rem; font-weight: 600; letter-spacing: -0.005em; color: #fff;
  background: var(--red); border: 2px solid var(--red); border-radius: var(--r-button); cursor: pointer; text-decoration: none;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.demo-bouton:hover { background: var(--red-hover); border-color: var(--red-hover); }
.demo-bouton span { transition: transform var(--dur) var(--ease); }
.demo-bouton:hover span { transform: translateX(3px); }
.demo-bouton:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.demo-bouton:disabled { opacity: 0.7; cursor: progress; }
/* Bouton secondaire : même taille, contour. */
.demo-bouton-2, .demo-btn-2 { background: transparent; color: var(--ink); border: 2px solid var(--muted); }
.demo-bouton-2:hover, .demo-btn-2:hover { background: var(--surface-2); border-color: var(--ink); }
.demo-btn-2 { display: inline-flex; align-items: center; min-height: 48px; padding: 0 20px; font: inherit; font-size: 1rem; font-weight: 600; border-radius: var(--r-button); cursor: pointer; }

/* L'attente : un texte, et une barre qui ne bouge que si le mouvement est permis. */
.demo-attente { padding: var(--sp-3); border: 1px solid var(--line-strong); border-radius: var(--r-card); display: grid; gap: 12px; color: var(--ink); font-size: 1.125rem; }
.demo-attente p { margin: 0; }
.demo-attente-barre { display: block; height: 3px; background: var(--line-strong); position: relative; overflow: hidden; }
.demo-attente-barre::after { content: ""; position: absolute; inset: 0 70% 0 0; background: var(--red); }
html[data-motion="on"] .demo-attente-barre::after { animation: demo-attente 1.6s var(--ease) infinite; }
@keyframes demo-attente { from { transform: translateX(-100%); } to { transform: translateX(340%); } }

/* La réponse : un panneau ivoire, clairement distinct du formulaire. */
.demo-reponse { background: var(--panel); color: var(--panel-text); border-radius: var(--r-card); padding: var(--sp-5); display: grid; gap: var(--sp-4); scroll-margin-top: calc(var(--nav-h) + var(--sp-2)); }
.demo-reponse:focus { outline: none; }
.demo-reponse:focus-visible { outline: 3px solid var(--red); outline-offset: 4px; }
.demo-rep-tete { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sp-1) var(--sp-3); padding-bottom: var(--sp-3); border-bottom: 2px solid var(--panel-ink); }
.demo-reponse h3 { margin: 0; font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.15; letter-spacing: -0.02em; color: var(--panel-ink); }
.demo-maj { margin: 0; padding: 4px 12px; border: 1.5px solid var(--panel-ink); border-radius: var(--r-pill); font-size: var(--t-small); font-weight: 600; color: var(--panel-ink); }
.demo-rep-corps { display: grid; gap: 0; }
.demo-bloc { padding: var(--sp-3) 0; border-bottom: 1px solid var(--panel-line); display: grid; gap: 10px; }
.demo-bloc:first-child { padding-top: 0; }
.demo-bloc:last-child { border-bottom: 0; padding-bottom: 0; }
.demo-bloc h4 { margin: 0; font-size: 1.1875rem; line-height: 1.3; font-weight: 700; color: var(--panel-ink); }
.demo-bloc p, .demo-bloc li { margin: 0; font-size: 1.0625rem; line-height: 1.6; color: var(--panel-text); max-width: 62ch; }
.demo-bloc b { color: var(--panel-ink); }
.demo-bloc ul, .demo-bloc ol { margin: 0; padding-left: 1.25em; display: grid; gap: 6px; }
.demo-etapes { list-style: decimal; }
.demo-etapes li::marker { color: var(--panel-ink); font-weight: 700; }
.demo-bloc-garde h4::before { content: ""; display: inline-block; width: 11px; height: 11px; margin-right: 10px; background: var(--red); vertical-align: 0.04em; }
.demo-bloc-garde ul { list-style: none; padding-left: 0; }
.demo-bloc-garde li { padding-left: 21px; position: relative; }
.demo-bloc-garde li::before { content: ""; position: absolute; left: 3px; top: 0.7em; width: 6px; height: 6px; background: var(--panel-ink); }
.demo-simple { font-weight: 600; color: var(--panel-ink); }
.demo-menu { font-size: var(--t-small); }
.demo-hypo { margin-top: 6px; padding: var(--sp-2); background: rgba(32, 29, 25, 0.06); border-radius: var(--r-button); display: grid; gap: 6px; }
.demo-hypo-titre { font-weight: 700; color: var(--panel-ink); font-size: var(--t-small) !important; }
.demo-hypo ul { padding-left: 0; list-style: none; }
.demo-hypo li { font-size: var(--t-small) !important; line-height: 1.5 !important; }
.demo-derniere { margin: var(--sp-2) 0 0; padding-top: var(--sp-2); border-top: 1px dashed var(--panel-muted); font-size: var(--t-small); color: var(--panel-text); }
.demo-derniere span { font-weight: 700; color: var(--panel-ink); }

/* Préciser */
.demo-revision { display: grid; gap: 10px; padding: var(--sp-3); background: #fff9; border: 1.5px solid var(--panel-ink); border-radius: var(--r-button); }
.demo-revision h4 { margin: 0; font-size: 1.25rem; color: var(--panel-ink); }
.demo-revision .demo-aide, .demo-limite-texte { color: var(--panel-text); }
.demo-revision textarea { width: 100%; min-height: 100px; padding: 12px 14px; resize: vertical; background: #fff; color: var(--panel-ink); border: 2px solid var(--panel-muted); border-radius: var(--r-button); font: inherit; font-size: 1.0625rem; line-height: 1.5; }
.demo-revision textarea::placeholder { color: var(--panel-muted); opacity: 1; }
.demo-revision .demo-compteur { color: var(--panel-muted); }
.demo-revision .demo-compteur.trop { color: var(--panel-ink); }
.demo-reste { margin: 0; font-weight: 600; color: var(--panel-ink); }
.demo-revision .demo-bouton-2 { color: var(--panel-ink); border-color: var(--panel-ink); justify-self: start; }
.demo-revision .demo-bouton-2:hover { background: var(--panel-line); border-color: var(--panel-ink); }
.demo-revision .demo-erreur, .demo-reponse .demo-erreur { background: #fff; color: var(--panel-ink); }
.demo-revision .demo-erreur a { color: var(--panel-ink); }
.demo-limite { padding: var(--sp-3); background: var(--panel-ink); border-radius: var(--r-button); }
.demo-limite-texte { margin: 0; font-size: 1.125rem; line-height: 1.55; color: var(--ink) !important; }

/* La suite : copier, discuter */
.demo-suite { display: grid; gap: var(--sp-2); padding-top: var(--sp-3); border-top: 1px solid var(--panel-line); }
.demo-suite .demo-case { color: var(--panel-ink); min-height: 0; }
.demo-suite .demo-case small { color: var(--panel-text); }
.demo-suite-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.demo-reponse .demo-bouton:focus-visible { outline-color: var(--panel-ink); }
.demo-reponse .demo-bouton-2 { color: var(--panel-ink); border-color: var(--panel-ink); }
.demo-reponse .demo-bouton-2:hover { background: var(--panel-line); border-color: var(--panel-ink); }
.demo-reponse .demo-btn-2 { color: var(--panel-ink); border-color: var(--panel-ink); }
.demo-reponse .demo-btn-2:hover { background: var(--panel-line); }
.demo-reponse .demo-ex-statut { color: var(--panel-text); }
.demo-cta-note { margin: 0; font-size: var(--t-small); color: var(--panel-text); }

/* L'exemple fictif, replié */
.demo-modele { border: 1px dashed var(--muted); border-radius: var(--r-card); }
.demo-modele summary { cursor: pointer; padding: 16px var(--sp-3); min-height: 56px; font-weight: 600; color: var(--ink); list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.demo-modele summary::-webkit-details-marker { display: none; }
.demo-modele summary::after { content: "+"; font-size: 1.5rem; line-height: 1; color: var(--text); }
.demo-modele[open] summary::after { content: "−"; }
.demo-modele-corps { padding: 0 var(--sp-3) var(--sp-3); display: grid; gap: var(--sp-2); }
.demo-fictif { margin: 0; justify-self: start; padding: 3px 12px; border: 1px solid var(--muted); border-radius: var(--r-pill); font-size: var(--t-small); font-weight: 600; color: var(--ink); }
.demo-modele .demo-bloc { border-bottom-color: var(--line-strong); }
.demo-modele .demo-bloc h4 { color: var(--ink); }
.demo-modele .demo-bloc p, .demo-modele .demo-bloc li { color: var(--text); }
.demo-modele .demo-bloc-garde li::before { background: var(--text); }


/* ── Téléphone ── */
@media (max-width: 860px) {
  .demo { padding: var(--sp-7) 0; }
  .demo-grille { grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
  .demo-tete { position: static; }
  .demo-intro, .demo-rassure { max-width: none; }
  .demo-panneau, .demo-reponse { padding: var(--sp-3) var(--sp-2); }
  .demo-champs, .demo-duo { grid-template-columns: minmax(0, 1fr); }
  .demo-etiquette { font-size: 1.25rem; }
  .demo-q textarea { min-height: 190px; font-size: 1.0625rem; }
  .demo-bouton, .demo-btn-2 { width: 100%; justify-content: center; }
  .demo-envoi { justify-items: stretch; }
  .demo-note { text-align: center; }
  .demo-revision .demo-bouton-2 { justify-self: stretch; }
  .demo-suite-actions { flex-direction: column; align-items: stretch; }
  .demo-modele summary, .demo-modele-corps { padding-left: var(--sp-2); padding-right: var(--sp-2); }
  .demo-ex-actions { flex-direction: column; align-items: stretch; }

}

/* ═══════════════════ SUR LES PAGES IVOIRE ═══════════════════
   body.page colore les titres, les étiquettes et le foyer en encre : sur la
   section sombre de l'outil, il faut les remettre (même méthode que .bande-noire). */
body.page .demo h2, body.page .demo-tete h2 { color: var(--ink); }
body.page .demo .label { color: var(--text); }
body.page .demo-etiquette, body.page .demo-etiquette-2, body.page .demo-details legend { color: var(--ink); }
body.page .demo :focus-visible { outline-color: var(--red); }
body.page .demo-reponse h3, body.page .demo-reponse h4, body.page .demo-reponse .demo-bloc h4 { color: var(--panel-ink); }
body.page .demo-reponse :focus-visible { outline-color: var(--panel-ink); }
body.page .demo-modele .demo-bloc h4 { color: var(--ink); }
body.page .demo-bouton:focus-visible { outline-color: var(--ink); }
body.page .demo-reponse .demo-bouton:focus-visible { outline-color: var(--panel-ink); }

/* ═══════════════════ LA FENÊTRE SUPERPOSÉE ═══════════════════
   <dialog> natif : le fond devient inerte, Échap ferme, le focus est retenu
   dans la fenêtre puis rendu au bouton qui l'a ouverte. Le contenu (texte
   saisi, réponse) reste en place si on la referme puis la rouvre. */
.outil-fenetre {
  width: min(1040px, calc(100vw - 2 * var(--sp-3))); max-height: calc(100dvh - 2 * var(--sp-3)); margin: auto;
  padding: 0; border: 1px solid var(--line-strong); border-radius: var(--r-card);
  background: var(--canvas); color: var(--text); overflow: auto; overscroll-behavior: contain;
}
.outil-fenetre::backdrop { background: rgba(8, 7, 6, 0.78); }
html:has(.outil-fenetre[open]) { overflow: hidden; }
.outil-fenetre-barre { position: sticky; top: 0; z-index: 5; display: flex; justify-content: space-between; align-items: center; gap: var(--sp-2); padding: 10px var(--sp-3); background: var(--canvas); border-bottom: 1px solid var(--line-strong); }
.outil-fenetre-barre p { margin: 0; font-size: var(--t-small); font-weight: 600; color: var(--text); }
.outil-fermer { min-height: 44px; padding: 0 16px; display: inline-flex; align-items: center; gap: 8px; background: transparent; color: var(--ink); border: 1.5px solid var(--muted); border-radius: var(--r-button); font: inherit; font-size: 1rem; font-weight: 600; cursor: pointer; }
.outil-fermer:hover { border-color: var(--ink); background: var(--surface-2); }
.outil-fermer:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }
.outil-fenetre .demo { padding: var(--sp-5) var(--sp-4) var(--sp-5); }
.outil-fenetre .cadre-section { padding: 0; max-width: none; }
.outil-fenetre .demo-grille { grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
.outil-fenetre .demo-tete { position: static; max-width: 62ch; }
.outil-fenetre .demo-intro, .outil-fenetre .demo-rassure { max-width: none; }
.outil-fenetre .demo-tete h2 { font-size: clamp(1.75rem, 3.2vw, 2.5rem); }
.outil-fenetre .demo-panneau { background: var(--surface); }
@media (max-width: 860px) {
  .outil-fenetre { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border: 0; border-radius: 0; }
  .outil-fenetre .demo { padding: var(--sp-3) var(--sp-2) var(--sp-5); }
  .outil-fenetre-barre { padding: 8px var(--sp-2); }
}

/* ═══════════════════ LES PORTES D'ENTRÉE ═══════════════════ */
/* Le lien du menu : un texte comme les autres, avec une étiquette « gratuit » qui le distingue. */
.menu-outil a { display: inline-flex; align-items: center; gap: 8px; }
.menu-outil-etiquette { display: inline-block; padding: 1px 8px; border: 1px solid var(--red); border-radius: var(--r-pill); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.02em; color: var(--ink); line-height: 1.5; }
body.page .rail-haut .menu-outil-etiquette { color: var(--ink); }

/* Le bandeau des pages de service : une bande sombre posée sous l'en-tête, impossible à manquer. */
.outil-bandeau { background: var(--canvas); color: var(--text); border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); }
.outil-bandeau .cadre-section { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-2) var(--sp-5); align-items: center; padding-top: var(--sp-4); padding-bottom: var(--sp-4); }
.outil-bandeau-kicker { margin: 0 0 6px; display: flex; align-items: center; gap: 10px; font-size: var(--t-small); font-weight: 600; color: var(--text); }
.outil-bandeau-kicker i { width: 8px; height: 8px; border-radius: 50%; background: var(--red); }
body.page .outil-bandeau h2 { margin: 0; font-size: clamp(1.4rem, 2.4vw, 2rem); line-height: 1.15; letter-spacing: -0.02em; color: var(--ink); text-wrap: balance; }
.outil-bandeau-texte { margin: 8px 0 0; max-width: 60ch; font-size: 1.0625rem; line-height: 1.5; }
.outil-bandeau .demo-bouton { white-space: nowrap; }
body.page .outil-bandeau :focus-visible { outline-color: var(--ink); }
@media (max-width: 860px) {
  .outil-bandeau .cadre-section { grid-template-columns: minmax(0, 1fr); }
  .outil-bandeau .demo-bouton { width: 100%; }
}

/* Le rail ne doit jamais se replier (il a une hauteur fixe) : de 861 à 1180 px,
   l'étiquette « gratuit » disparaît ; de 861 à 1000 px, la marque et les espaces
   se resserrent. Mesuré : tout tient dès 861 px. */
@media (min-width: 861px) and (max-width: 1180px) {
  .menu-outil-etiquette { display: none; }
  .rail-haut .menu ul { gap: var(--sp-2); }
}
@media (min-width: 861px) and (max-width: 1000px) {
  .rail-haut { gap: 12px; padding-left: 20px; padding-right: 20px; }
  .rail-haut .brand svg { height: 38px; }
  .rail-haut .menu ul { gap: 12px; }
}