/* ==========================================================================================
   TOISE — feuille de style commune
   ==========================================================================================

   Registre : plan d'architecte × terminal financier × carte IGN × note d'investissement.
   Ce que cela exclut, volontairement : dégradés, ombres portées, coins très arrondis,
   illustrations, tout signal « startup IA ». Ce métier engage des millions ; l'interface
   doit ressembler à un document d'instruction, pas à une application grand public.

   Le motif de marque est la TOISE elle-même : une réglure graduée. On la retrouve sous
   l'en-tête, en tête de section, et comme jauge de fiabilité. Un seul motif, décliné —
   c'est ce qui fait une identité plutôt qu'une accumulation d'effets.

   Une seule couleur d'accent. Les chiffres sont en chasse tabulaire : dans ce métier ils
   s'alignent et se comparent, ils ne se lisent pas comme du texte.
   ========================================================================================== */

:root {
  /* Encres */
  --encre:        #101519;
  --encre-doux:   #2b3640;
  --sourd:        #61707e;
  --sourd-clair:  #8b98a4;

  /* Fonds — le papier d'un plan, pas l'écran d'une application. Légèrement chaud :
     un gris froid parfaitement neutre est le réglage par défaut de tout le monde. */
  --papier:       #fffefc;
  --fond:         #f2f0ec;
  --fond-creux:   #e8e5df;
  --nuit:         #14181b;

  /* Traits — hairlines, jamais d'ombre */
  --trait:        #d6d2ca;
  --trait-clair:  #e6e3dc;
  --trait-fort:   #a9a297;

  /* Deux couleurs, et deux seulement. Le vermillon des plans cadastraux porte le signal et
     la marque ; le bleu d'encre porte la donnée mesurée. Une couleur seule au milieu de gris
     donne un gabarit ; deux couleurs qui ont chacune un rôle donnent un système. */
  --signal:       #c1301a;
  --signal-fond:  #f9eae6;
  --signal-sombre:#8f2010;
  --mesure:       #1b3d5e;
  --mesure-fond:  #e6ecf2;

  /* Qualification d'une valeur — sourdes, elles annotent, elles ne décorent pas */
  --officiel:     #1c6b3f;
  --officiel-fond:#e6f0e9;
  --observe:      #1f5680;
  --observe-fond: #e7eef4;
  --saisi:        #5a4a86;
  --saisi-fond:   #eceaf4;
  --usuel:        #8a5a00;
  --usuel-fond:   #f9f0dc;

  /* La pile système était le signal le plus bruyant : elle donne à toutes les interfaces
     le même visage. Archivo est un grotesque à axe de chasse variable — il fournit le
     logotype étendu et les titres serrés depuis une seule fonte. Tous les chiffres passent
     en Plex Mono : dans ce métier un nombre est un relevé d'instrument, pas du texte. */
  --sans: "Archivo", ui-sans-serif, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --large: 1240px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font: 16px/1.62 var(--sans);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--encre); }

/* --- Trame cadastrale ------------------------------------------------------------------
   Un fond parfaitement plat est l'autre marque de fabrique du gabarit. La trame reprend le
   quadrillage d'un fond de plan : présente, jamais lisible. */
.trame {
  background-image:
    linear-gradient(var(--trait-clair) 1px, transparent 1px),
    linear-gradient(90deg, var(--trait-clair) 1px, transparent 1px);
  background-size: 32px 32px, 32px 32px;
  background-position: -1px -1px, -1px -1px;
}
/* --- Grille modulaire visible ---------------------------------------------------------
   Une grille tracee est un fond de plan : elle dit d'ou vient ce produit sans avoir a
   l'ecrire. Elle est calee sur la colonne de contenu, pas sur la fenetre, pour que les
   montants tombent la ou tombent les blocs — sinon c'est un motif, pas une structure. */
.bande { position: relative; }
.bande > * { position: relative; z-index: 1; }
.bande.reglee::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0;
  max-width: var(--large); margin: 0 auto; pointer-events: none; z-index: 0;
  background-image: linear-gradient(90deg, var(--trait-clair) 1px, transparent 1px);
  background-size: calc(100% / 6) 100%;
  background-position: 0 0;
}
.bande.nuit.reglee::before {
  background-image: linear-gradient(90deg, rgba(255,255,255,.075) 1px, transparent 1px);
}
/* --- Tablette : entre 700 et 1024 px ------------------------------------------------
   Un iPad en portrait fait 820 px. Le traiter comme un telephone gaspille sa largeur ;
   le traiter comme un bureau tasse le texte. Il a sa propre mesure. */
@media (min-width: 701px) and (max-width: 1024px) {
  .dedans { padding: 0 5vw; }
  section.pave { padding: 52px 0; }
  .compteurs { grid-template-columns: repeat(2, 1fr); }
  .compteurs div:nth-child(2n) { border-right: 0; }
  .compteurs div:nth-child(-n+2) { border-bottom: 1px solid var(--trait-clair); }
  .intentions { grid-template-columns: repeat(2, 1fr); }
  .logotype { font-size: clamp(2.6rem, 8vw, 4rem); }
}

@media (max-width: 880px) { .bande.reglee::before { background-size: calc(100% / 2) 100%; } }

.bande.nuit.trame {
  background-image:
    linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
}

/* Les chiffres sont des relevés : chasse fixe, tabulaire, légèrement resserrée. C'est ce
   qui distingue une fiche d'instruction d'une page de marketing. */
.chiffre, table td.n, .figure, .compteurs dd, .fiche-val, .prix {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: -.01em;
}

/* --- La réglure ---------------------------------------------------------------------------
   Le motif de marque. Une graduation, comme sur une toise : trait long tous les cinq. */
.reglure { height: 13px; display: block; width: 100%; background-color: var(--papier);
  background-image:
    linear-gradient(to right, var(--trait-fort) 1px, transparent 1px),
    linear-gradient(to right, var(--trait) 1px, transparent 1px);
  background-size: 64px 13px, 8px 6px;
  background-position: 0 0, 0 0;
  background-repeat: repeat-x;
  border-bottom: 1px solid var(--trait);
}
.reglure.signal {
  background-image:
    linear-gradient(to right, var(--signal) 2px, transparent 2px),
    linear-gradient(to right, var(--trait-fort) 1px, transparent 1px);
}

/* --- Cartouche de titre ------------------------------------------------------------------
   Le logotype en pleine masse, sur une graduation numérotée. Une toise est un instrument :
   la marque doit se lire comme une mesure, pas comme un mot posé en haut à gauche. */
.cartouche { background: var(--papier); border-bottom: 1px solid var(--trait);
             padding: 24px 4vw 0; overflow: hidden; }
.cartouche-dedans { max-width: var(--large); margin: 0 auto; }
.logotype { font-weight: 800; line-height: .82; letter-spacing: .015em; margin: 0;
            font-size: clamp(2.5rem, 7.2vw, 5.1rem); font-variation-settings: "wdth" 125;
            color: var(--encre); }
.logotype span { color: var(--signal); font-size: .34em; vertical-align: baseline;
                 letter-spacing: 0; }
.graduation { display: block; width: 100%; height: 22px; margin-top: 8px; }
.graduation line { stroke: var(--trait-fort); stroke-width: 1; }
.graduation line.haute { stroke: var(--encre); stroke-width: 1.4; }
.graduation line.axe { stroke: var(--encre); stroke-width: 1.4; }
.graduation text { font: 500 8px var(--mono); fill: var(--sourd); letter-spacing: .08em; }
.legende-marque { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
                  padding: 2px 0 18px; }
.legende-marque span { font: 500 .655rem var(--mono); letter-spacing: .16em;
                       text-transform: uppercase; color: var(--sourd); }

/* --- En-tête ------------------------------------------------------------------------------ */
.entete {
  background: var(--papier);
  padding: 0 4vw;
  display: flex; align-items: center; justify-content: space-between;
  height: 74px; position: sticky; top: 0; z-index: 60;
  border-bottom: 1px solid var(--trait);
}
/* Le bandeau et le cartouche portent le meme nom : en afficher deux a l ecran affaiblit
   les deux. Le logotype du bandeau ne parait donc que lorsque le cartouche est sorti. */
.entete a.marque { transition: opacity .18s ease; }
body.cartouche-visible .entete a.marque { opacity: 0; pointer-events: none; }

a.marque {
  font-weight: 800; font-size: 1.72rem; letter-spacing: .2em;
  font-stretch: 125%; font-variation-settings: "wdth" 118;
  text-decoration: none; color: var(--encre); line-height: 1; white-space: nowrap;
}
a.marque span { color: var(--signal); }
a.marque em {
  display: block; font-style: normal; font-size: .55rem; font-weight: 500;
  font-family: var(--mono); font-stretch: normal; font-variation-settings: normal;
  letter-spacing: .19em; text-transform: uppercase; color: var(--sourd); margin-top: 3px;
}
.entete nav { display: flex; gap: 22px; align-items: center; }
.entete nav a {
  text-decoration: none; font-size: .87rem; color: var(--sourd);
  padding: 3px 0; border-bottom: 2px solid transparent;
}
.entete nav a:hover, .entete nav a[aria-current] { color: var(--encre); border-bottom-color: var(--signal); }
.entete nav a.action {
  background: var(--encre); color: #fff; padding: 8px 15px; border-bottom: 0; border-radius: 2px;
}
.entete nav a.action:hover { background: var(--signal); }

/* --- Boutons ------------------------------------------------------------------------------ */
.btn {
  display: inline-block; text-decoration: none; font: inherit; font-size: .9rem;
  font-weight: 600; padding: 13px 24px; border-radius: 0;
  letter-spacing: .015em;
  border: 1px solid var(--encre); background: var(--encre); color: #fff; cursor: pointer;
}
.btn:hover { background: var(--signal); border-color: var(--signal); }
.btn.creux { background: transparent; color: var(--encre); }
.btn.creux:hover { background: var(--encre); color: #fff; }
.btn.menu { border-color: var(--trait); background: var(--papier); color: var(--encre); font-weight: 600; }
.btn.menu:hover { border-color: var(--encre); background: var(--papier); color: var(--encre); }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn.petit { padding: 7px 13px; font-size: .84rem; }

/* --- Structure ---------------------------------------------------------------------------- */
.dedans { max-width: var(--large); margin: 0 auto; padding: 0 4vw; }
.bande { background: var(--papier); border-bottom: 1px solid var(--trait); }
.bande.creuse { background: var(--fond); }
.bande.nuit { background: var(--nuit); color: #dfe5ea; border-bottom: 0; }
.bande.nuit h2, .bande.nuit h3, .bande.nuit .figure { color: #fff; }
.bande.nuit .sous, .bande.nuit .micro { color: #93a2af; }
section.pave { padding: 62px 0; }

h1 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); line-height: 1.04; margin: 0 0 20px;
     letter-spacing: -.032em; font-weight: 800; font-variation-settings: "wdth" 92; }
h1 em { font-style: normal; color: var(--signal); }
h2 { font-size: 1.68rem; letter-spacing: -.024em; margin: 0 0 10px; font-weight: 700;
     font-variation-settings: "wdth" 95; }
h3 { font-size: 1.06rem; margin: 0 0 8px; letter-spacing: -.01em; font-weight: 700; }
.sous { color: var(--sourd); max-width: 680px; margin: 0 0 30px; }

/* Micro-libellé : le registre « note d'investissement ». Volontairement minuscule — tout
   l'effet vient de son écart avec les chiffres, pas de sa propre taille. */
.micro, .compteurs dt, .fiche-lib, table.reg th, .etiquette {
  font-family: var(--mono); font-size: .655rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--sourd); font-weight: 500;
}
.etiquette.rouge { color: var(--signal); font-weight: 700; }

/* --- Grands chiffres ----------------------------------------------------------------------
   La page doit se lire à deux mètres : ce sont les chiffres qui portent, pas les phrases. */
.figure { font-size: clamp(2.3rem, 4.6vw, 3.4rem); font-weight: 600; letter-spacing: -.045em;
          line-height: 1; display: block; }
.figure.moyenne { font-size: clamp(1.5rem, 2.6vw, 2rem); }
.figure small { font-size: .42em; font-weight: 700; letter-spacing: 0; color: var(--sourd);
                margin-left: 5px; }

.compteurs { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
             border-top: 1px solid var(--trait-clair); }
.compteurs div { padding: 20px 20px 24px; border-right: 1px solid var(--trait-clair); }
.compteurs div:last-child { border-right: 0; }
.compteurs dt { margin-bottom: 6px; }
.compteurs dd { margin: 0; font-size: 1.85rem; font-weight: 600; letter-spacing: -.04em; }

/* --- Cartouches --------------------------------------------------------------------------- */
.bloc { background: var(--papier); border: 1px solid var(--trait); border-radius: 3px;
        padding: 22px 24px; }
.bloc + .bloc { margin-top: 14px; }
.bloc.trait-signal { border-left: 3px solid var(--signal); border-radius: 0 3px 3px 0; }

/* --- Qualification d'une valeur -----------------------------------------------------------
   Le cœur de la doctrine, rendu visible : d'où sort ce chiffre. Sourd volontairement —
   une annotation d'instruction, pas une pastille de gamification. */
.prov {
  display: inline-flex; align-items: center; gap: 5px; font: 600 .64rem/1 var(--mono);
  letter-spacing: .05em; text-transform: uppercase; padding: 3px 7px; border-radius: 2px;
  white-space: nowrap; vertical-align: middle;
}
.prov.officielle { background: var(--officiel-fond); color: var(--officiel); }
.prov.observee   { background: var(--mesure-fond);   color: var(--mesure); }
.prov.saisie     { background: var(--saisi-fond);    color: var(--saisi); }
.prov.usuelle    { background: var(--usuel-fond);    color: var(--usuel); }
.prov.absente    { background: var(--fond-creux);    color: var(--sourd); }
.prov-src { font: 400 .74rem/1.4 var(--mono); color: var(--sourd); display: block; margin-top: 4px; }
.prov-src a { color: var(--sourd); }

/* Ligne de fiche : libellé, valeur, provenance. Le gabarit universel de l'actif. */
.fiche { display: grid; gap: 0; }
.fiche-ligne { display: grid; grid-template-columns: minmax(0,1fr) auto;
               gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--trait-clair);
               align-items: baseline; }
.fiche-ligne:last-child { border-bottom: 0; }
.fiche-val { font-weight: 700; text-align: right; white-space: nowrap; }
.fiche-val.absent { font-weight: 500; color: var(--sourd); }

/* --- Jauge de fiabilité --------------------------------------------------------------------
   Reprend la graduation de la toise. Elle remplace le « score sur 100 » : agréger une valeur
   officielle et une hypothèse en un seul nombre revient à fabriquer un chiffre dont on ne
   peut plus dire d'où il vient — exactement ce que le produit refuse de faire. */
.jauge { margin: 10px 0 0; }
.jauge-piste { height: 8px; background: var(--fond-creux); border: 1px solid var(--trait);
               border-radius: 1px; overflow: hidden; display: flex; }
.jauge-part { height: 100%; }
.jauge-part.sourcee { background: var(--officiel); }
.jauge-part.hypothese { background: repeating-linear-gradient(45deg,
                        var(--usuel) 0 3px, #c7912f 3px 6px); }
.jauge-legende { display: flex; justify-content: space-between; gap: 12px; margin-top: 6px;
                 font: 600 .7rem var(--mono); color: var(--sourd); }

/* --- Verdict -------------------------------------------------------------------------------
   Une lecture immédiate, mais jamais détachée de sa fiabilité : les deux voyagent ensemble. */
.verdict { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.verdict-pastille { font: 800 .78rem var(--sans); letter-spacing: .1em; text-transform: uppercase;
                    padding: 7px 14px; border-radius: 2px; border: 1px solid; }
.verdict-pastille.go        { background: var(--officiel-fond); color: var(--officiel); border-color: #bcd6c6; }
.verdict-pastille.etudier   { background: var(--usuel-fond);    color: var(--usuel);    border-color: #e2cb96; }
.verdict-pastille.nogo      { background: var(--signal-fond);   color: var(--signal);   border-color: #ecc0b6; }
.verdict-pastille.neutre    { background: var(--fond-creux);    color: var(--sourd);    border-color: var(--trait); }

/* --- Tableaux ------------------------------------------------------------------------------ */
/* Un tableau plus large que la colonne defile dans son propre cadre, jamais en emportant
   la page : une barre de defilement horizontale sur le document entier est toujours un defaut. */
.defile { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.defile table.reg { min-width: 620px; }
table.reg { width: 100%; border-collapse: collapse; font-size: .91rem; }
table.reg th { text-align: left; padding: 9px 12px 9px 0; border-bottom: 1px solid var(--trait); }
table.reg td { padding: 11px 12px 11px 0; border-bottom: 1px solid var(--trait-clair);
               vertical-align: top; }
table.reg td.n { text-align: right; white-space: nowrap; }
table.reg tr.tete td { background: var(--fond); font-weight: 700; }
table.reg tr.eteint td { color: var(--sourd); }

/* --- Formulaires --------------------------------------------------------------------------- */
label.champ { display: block; margin-bottom: 12px; }
label.champ > span { display: block; margin-bottom: 5px; font-size: .69rem; letter-spacing: .11em;
                     text-transform: uppercase; color: var(--sourd); font-weight: 600; }
input, select, textarea {
  font: inherit; font-size: .94rem; padding: 10px 12px; border: 1px solid var(--trait);
  border-radius: 2px; background: var(--papier); color: var(--encre); width: 100%;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--signal); outline-offset: -1px; }
input[type=checkbox], input[type=radio] { width: auto; }

/* Barre de saisie principale : l'objet central du produit. */
.barre { display: flex; gap: 10px; align-items: stretch; position: relative; }
.barre input[type=text], .barre input[type=search] {
  flex: 1; font-size: 1.06rem; padding: 15px 16px; border: 1px solid var(--trait-fort);
  background: var(--papier);
}
.barre .btn { padding: 0 26px; white-space: nowrap; }

/* Autocomplétion */
.suggestions { position: absolute; top: 100%; left: 0; right: 0; z-index: 40;
               background: var(--papier); border: 1px solid var(--trait-fort); border-top: 0;
               max-height: 320px; overflow: auto; }
.suggestions div { padding: 10px 14px; cursor: pointer; font-size: .93rem;
                   border-bottom: 1px solid var(--trait-clair); }
.suggestions div:hover, .suggestions div.actif { background: var(--fond); }
.suggestions .lieu { color: var(--sourd); font-size: .84rem; }

/* --- Bascule Simple / Expert ---------------------------------------------------------------
   Deux niveaux d'interface. Le mode simple ne retire aucune fonction : il en retarde
   l'affichage jusqu'à ce qu'on l'ait demandé. */
.bascule { display: inline-flex; border: 1px solid var(--trait); border-radius: 2px;
           overflow: hidden; background: var(--papier); }
.bascule button { font: 600 .82rem var(--sans); padding: 7px 15px; border: 0; background: transparent;
                  color: var(--sourd); cursor: pointer; }
.bascule button[aria-pressed="true"] { background: var(--encre); color: #fff; }

/* --- Choix d'intention ---------------------------------------------------------------------
   Ce qui remplace une navigation à quinze entrées : on demande d'abord ce qu'on veut faire. */
.intentions { display: grid; grid-template-columns: repeat(auto-fit, minmax(238px, 1fr)); gap: 12px; }
.intention { background: var(--papier); border: 1px solid var(--trait); border-top: 3px solid var(--trait);
             border-radius: 3px; padding: 20px; text-decoration: none; color: var(--encre);
             display: block; cursor: pointer; text-align: left; font: inherit; width: 100%; }
.intention:hover { border-top-color: var(--signal); }
.intention .quoi { font-size: 1.02rem; font-weight: 700; letter-spacing: -.01em; margin-bottom: 6px; }
.intention .comment { font-size: .87rem; color: var(--sourd); }
.intention .vers { font-size: .83rem; font-weight: 600; color: var(--signal); margin-top: 12px; display: block; }

/* --- Divers -------------------------------------------------------------------------------- */
.statut { color: var(--sourd); font-size: .9rem; min-height: 1.2em; }
.aide { color: var(--sourd); font-size: .88rem; }
.rappel { background: var(--signal-fond); border: 1px solid #ecc0b6; border-radius: 2px;
          padding: 12px 14px; font-size: .89rem; }
.pile { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.duo { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 18px; }

.pied { background: var(--papier); border-top: 1px solid var(--trait); padding: 28px 4vw;
        color: var(--sourd); font-size: .85rem; }
.pied .dedans { display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; padding: 0; }
.pied a { color: var(--sourd); }

.bandeau-cookies {
  display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 100;
  background: var(--nuit); color: #e3e9ee; padding: 13px 4vw;
  align-items: center; justify-content: space-between; gap: 18px; font-size: .84rem; flex-wrap: wrap;
}
.bandeau-cookies p { margin: 0; max-width: 860px; }
.bandeau-cookies a { color: #fff; }
.bandeau-cookies button { background: var(--signal); color: #fff; border: 0; font: inherit;
                          font-weight: 600; padding: 8px 18px; border-radius: 2px; cursor: pointer; }

@media (max-width: 880px) {
  .entete { padding: 0 4vw; height: 64px; }
  a.marque { font-size: 1.32rem; letter-spacing: .16em; }
  .entete nav { gap: 13px; }
  /* Cible tactile : 44 px est le minimum au-dessous duquel un doigt rate le lien.
     Les liens du bandeau faisaient 22 px de haut. */
  .entete nav a { min-height: 44px; display: inline-flex; align-items: center; }
  .btn.petit { padding: 11px 14px; }
  /* Les entrees secondaires ne se replient qu'a l'etroit : un iPad a la place de les
     afficher, et les cacher l'obligerait a passer par l'accueil pour y revenir. */
}
@media (max-width: 700px) {
  .entete nav a.repli { display: none; }
  section.pave { padding: 44px 0; }
  .barre { flex-direction: column; }
  .barre .btn { padding: 13px 22px; }
}

/* En dessous de 560 px, le logotype et cinq entrees de navigation ne tiennent pas cote a
   cote : le bandeau debordait de 51 px et poussait toute la page en defilement horizontal.
   « Decider » disparait en premier — c est une ancre dans la page Analyser, pas une
   destination propre. */
/* --- Pointeur grossier : un doigt, pas une souris ------------------------------------
   44 px est le minimum au-dessous duquel un doigt rate sa cible — la recommandation est la
   meme chez Apple et chez Google. On l'applique a tout ce qui se touche, y compris aux
   commandes de la carte, qui sont livrees a 30 px par la bibliotheque. */
@media (pointer: coarse) {
  .entete nav a, .bascule button, .sommaire a, .btn, .intention,
  .onglets button, .parcours button, .tabs button {
    min-height: 44px;
    display: inline-flex; align-items: center;
  }
  .intention { display: block; padding: 20px 18px; }

  /* Le logotype et les liens du pied sont de la navigation : ils doivent se toucher.
     Les liens en pleine phrase, eux, restent a la taille du texte — la regle de taille de
     cible (WCAG 2.5.8) les exempte explicitement, et les grossir casserait l'interlignage. */
  a.marque { min-height: 44px; display: inline-flex; flex-direction: column;
             justify-content: center; }
  .pied .dedans a { min-height: 44px; display: inline-flex; align-items: center; }
  .bandeau-cookies button { min-height: 44px; }
  .btn.petit { min-height: 44px; padding: 11px 16px; }

  /* Un champ sous 16 px declenche un zoom automatique a la mise au point sur iOS, et la page
     reste zoomee ensuite. C'est la cause la plus frequente de « le site saute » sur iPhone. */
  input, select, textarea { font-size: 16px; }

  /* Commandes Leaflet : 30 px d'origine, sous le seuil du doigt. */
  .leaflet-touch .leaflet-bar a, .leaflet-bar a {
    width: 44px !important; height: 44px !important; line-height: 44px !important;
  }

  /* Le halo bleu du tap et la selection accidentelle en appui long genent plus qu'ils
     n'aident sur une interface de lecture. */
  a, button { -webkit-tap-highlight-color: rgba(196, 52, 28, .12); }
}

/* Pas de survol : rien d'essentiel ne doit s'y trouver. Les infobulles de la carte restent
   accessibles au toucher, mais les etats de survol purement decoratifs sont neutralises. */
@media (hover: none) {
  .voie:hover, .intention:hover { border-top-color: var(--trait); }
  .entete nav a:hover { border-bottom-color: transparent; }
}

/* --- Encoches et barres gestuelles ---------------------------------------------------
   iPhone en paysage, Android a barre gestuelle : le contenu passerait sous l'arrondi. */
@supports (padding: env(safe-area-inset-left)) {
  .entete, .cartouche, .bandeau-cookies, .pied {
    padding-left: max(4vw, env(safe-area-inset-left));
    padding-right: max(4vw, env(safe-area-inset-right));
  }
  .bandeau-cookies { padding-bottom: max(13px, env(safe-area-inset-bottom)); }
}

@media (max-width: 560px) {
  a.marque { font-size: 1.1rem; letter-spacing: .12em; }
  a.marque em { display: none; }
  .entete nav { gap: 11px; }
  .entete nav a[href*="#decider"] { display: none; }
  .entete nav a.action { padding: 8px 11px; }
  .legende-marque span:nth-child(2) { display: none; }
  /* Sur un ecran de 375 px, le cartouche mangeait 380 px avant la barre de recherche : le
     geste principal de la page tombait sous la ligne de flottaison. Le logotype du bandeau
     reprend alors seul la marque — il y en a toujours exactement un a l ecran. */
  .cartouche { display: none; }
  body.cartouche-visible .entete a.marque { opacity: 1; pointer-events: auto; }
}