/* futureforecast.fr — systeme visuel.
   Registre : chaud et editorial, pas le bleu iOS par defaut. Fond creme le
   jour, noir chaud la nuit, accent sable. L'accent s'INVERSE selon le theme :
   bouton encre sur fond clair, bouton sable sur fond sombre. C'est ce qui
   evite l'aspect "template Bootstrap" d'un accent unique pose partout. */

:root{
  color-scheme: light dark;

  --sable:#D9BFA3;  --sable-clair:#F0DCC8;  --sable-pale:#FBEBD9;
  --encre:#2B2725;
  --vert:#1F7A4D;   --rouge:#AB342D;        --ambre:#B57517;

  --ground:#FAF8F5;
  --carte:#FFFFFF;
  --releve:#F5F2ED;
  --survol:#EFEBE4;
  --texte:#141210;
  --texte2:#6B6560;
  --texte3:#A39C94;
  --trait:rgba(20,18,16,.09);
  --anneau:rgba(0,0,0,.09);
  --barre:rgba(250,248,245,.78);

  --accent:#171412;          /* bouton principal */
  --accent-texte:#FBEBD9;
  --accent-doux:rgba(217,191,163,.28);

  --ombre:0 1px 2px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.07);
  --ombre-forte:0 2px 4px rgba(0,0,0,.08), 0 18px 44px rgba(0,0,0,.14);

  /* Deux rayons, pas six : c'est tout le vocabulaire de formes. */
  --r:16px; --r-lg:16px; --r-sm:8px;
  --marge:max(18px, env(safe-area-inset-left));
  --large:980px;
}
@media (prefers-color-scheme: dark){
  :root{
    --ground:#0E0E0D;
    --carte:#1A1A19;
    --releve:#211F1D;
    --survol:#2A2725;
    --texte:#F5F1EC;
    --texte2:#A8A099;
    --texte3:#6C6560;
    --trait:rgba(245,241,236,.10);
    --anneau:rgba(255,255,255,.14);
    --barre:rgba(14,14,13,.78);
    --accent:#F0DCC8;
    --accent-texte:#1A1512;
    --accent-doux:rgba(217,191,163,.16);
    /* En sombre, la profondeur vient du DECALAGE DE SURFACE, pas de l'ombre.
       Une ombre portee sur fond noir ne se voit pas : elle ne fait
       qu'empater les bords. */
    --ombre:none;
    --ombre-forte:0 0 0 1px rgba(245,241,236,.13);
    --vert:#34C77F; --rouge:#F17070; --ambre:#E0A44A;
  }
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--ground); color:var(--texte);
  font:400 16px/1.45 -apple-system,BlinkMacSystemFont,"SF Pro Text","Inter",system-ui,"Segoe UI",Roboto,sans-serif;
  letter-spacing:-.011em;
  padding-bottom:calc(66px + env(safe-area-inset-bottom));
  -webkit-font-smoothing:antialiased;
}
a{color:inherit; text-decoration:none}
.enveloppe{max-width:var(--large); margin:0 auto}

/* ── En-tete ─────────────────────────────────────────────── */
.nav{
  position:sticky; top:0; z-index:40; background:var(--barre);
  -webkit-backdrop-filter:saturate(180%) blur(22px); backdrop-filter:saturate(180%) blur(22px);
  border-bottom:1px solid var(--trait);
}
.nav .dedans{
  max-width:var(--large); margin:0 auto; min-height:48px; display:flex; align-items:center; gap:12px;
  padding:calc(8px + env(safe-area-inset-top)) var(--marge) 8px;
}
.nav .titre{font-size:15px; font-weight:600; letter-spacing:-.02em; flex:1;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.nav .retour{display:inline-flex; align-items:center; gap:5px; font-size:15px;
  font-weight:500; color:var(--texte2); margin-left:-2px}
.nav .retour:active{color:var(--texte)}
.marque{font-size:15px; font-weight:700; letter-spacing:-.035em}
.marque i{font-style:normal; color:var(--sable-deep,var(--texte3))}

.entete{padding:26px var(--marge) 4px; max-width:var(--large); margin:0 auto}
.grand-titre{
  margin:0; font-size:clamp(32px,8vw,46px); font-weight:600;
  letter-spacing:-.042em; line-height:1.0;
}
.chapo{margin:10px 0 0; color:var(--texte2); font-size:15.5px; max-width:52ch}
.chapo b{color:var(--texte); font-weight:600}

/* ── Recherche ───────────────────────────────────────────── */
.recherche{padding:20px var(--marge) 6px; max-width:var(--large); margin:0 auto}
.recherche label{position:relative; display:block}
.recherche svg{position:absolute; left:15px; top:50%; transform:translateY(-50%);
  color:var(--texte3); pointer-events:none}
.recherche input{
  width:100%; border:1px solid var(--trait); background:var(--carte); color:var(--texte);
  border-radius:14px; padding:13px 15px 13px 43px; font:inherit; font-size:16px;
  box-shadow:var(--ombre); transition:border-color .15s, box-shadow .15s;
}
.recherche input:focus{outline:0; border-color:var(--sable); box-shadow:var(--ombre-forte)}
.recherche input::placeholder{color:var(--texte3)}

/* ── Filtres ─────────────────────────────────────────────── */
/* PAS de defilement horizontal. Du tout.
   Trois versions ont echoue avant celle-ci : barre masquee (on ne devinait pas
   la suite), barre visible de 6px (moche et elle mangeait de la hauteur), puis
   masque de fondu — qui a casse le cas le plus courant du public de ce site :
   une souris SANS molette horizontale ne peut alors plus defiler du tout.
   Le public est constitue d'exploitants agricoles, pas de designers. Rien ne
   doit se deviner : tout est visible, ou derriere un bouton qui dit combien il
   en reste. Les puces passent donc a la ligne, et le surplus vit dans un
   <details> natif — sans JavaScript, et qui fonctionne au clavier. */
.chips{
  display:flex; flex-wrap:wrap; gap:8px;
  padding:12px var(--marge) 4px; max-width:var(--large); margin:0 auto;
}

.chip{
  flex:0 0 auto; padding:11px 17px; border-radius:999px; background:var(--carte);
  font-size:15px; font-weight:550; border:1px solid var(--trait); color:var(--texte);
  transition:.15s; line-height:1.2;
}
.chip.actif{background:var(--accent); color:var(--accent-texte); border-color:transparent}

/* ── Vignette de marque, facon icone d'app ───────────────── */
.tuile{
  flex:0 0 auto; display:grid; place-items:center; color:#fff;
  font-weight:700; letter-spacing:-.04em;
  box-shadow:0 1px 2px rgba(0,0,0,.14), 0 6px 16px rgba(0,0,0,.16);
  position:relative; overflow:hidden;
}
.tuile::after{content:""; position:absolute; inset:0; border-radius:inherit;
  box-shadow:inset 0 0 0 1px var(--anneau);
  background:linear-gradient(160deg,rgba(255,255,255,.22),transparent 55%)}
.tuile-s{width:48px; height:48px; border-radius:13px}
.tuile-l{width:64px; height:64px; border-radius:18px}
.tuile img{width:100%; height:100%; object-fit:contain; padding:16%; display:block; position:relative; z-index:1}
/* Repli quand aucun logo n'est fourni : le NOM de la marque, condense, et non
   deux initiales illisibles. "JD" ne dit rien, "John Deere" dit tout. */
.tuile .mot{position:relative; z-index:1; padding:0 4px; text-align:center;
  font-size:9px; line-height:1.05; font-weight:750; letter-spacing:-.03em;
  text-transform:uppercase; word-break:break-word; hyphens:auto}
.tuile-l .mot{font-size:11px}

/* ── Grille de cotes ─────────────────────────────────────── */
.grille{
  display:grid; gap:10px; padding:14px var(--marge) 8px; max-width:var(--large); margin:0 auto;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
}
.fiche{
  display:flex; align-items:center; gap:14px; padding:14px;
  background:var(--carte); border:1px solid var(--trait); border-radius:var(--r);
  box-shadow:var(--ombre); transition:transform .16s ease, box-shadow .16s ease;
}
.fiche:active{transform:scale(.985)}
@media (hover:hover){ .fiche:hover{box-shadow:var(--ombre-forte); transform:translateY(-2px)} }
/* display:block est INDISPENSABLE ici. Ce sont des <span>, donc inline par
   defaut : overflow, text-overflow et margin verticale n'ont aucun effet sur un
   inline. C'est ce qui faisait chevaucher le prix et le titre, et coller
   "Gratuit" a "3 modeles surveilles". Ne jamais repasser ces regles en inline. */
.fiche .corps{display:block; flex:1 1 auto; min-width:0}
.fiche .nom{display:block; font-size:15.5px; font-weight:600; letter-spacing:-.022em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.fiche .meta{display:block; font-size:12.5px; color:var(--texte2); margin-top:2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.fiche .prix{display:block; flex:0 0 auto; font-size:16px; font-weight:700;
  letter-spacing:-.03em; font-variant-numeric:tabular-nums; text-align:right;
  white-space:nowrap; padding-left:8px}
.fiche .prix small{display:block; font-size:10.5px; font-weight:500; color:var(--texte3);
  letter-spacing:0; margin-top:1px}
.fiche .prix.vide{color:var(--texte3); font-weight:500}

/* ── Bloc de cote ────────────────────────────────────────── */
.bloc{
  margin:16px var(--marge) 14px; max-width:var(--large); background:var(--carte);
  border:1px solid var(--trait); border-radius:var(--r-lg); padding:24px;
  box-shadow:var(--ombre);
}
@media(min-width:1016px){ .bloc{margin-left:auto; margin-right:auto} }
.bloc .k{font-size:11px; font-weight:600; letter-spacing:.11em; text-transform:uppercase;
  color:var(--texte3)}
.chiffre{
  font-size:clamp(44px,12vw,62px); font-weight:600; letter-spacing:-.05em;
  font-variant-numeric:tabular-nums; line-height:1.02; margin:6px 0 0;
}
.chiffre span{font-size:.46em; font-weight:600; letter-spacing:-.02em; color:var(--texte2)}

/* Barre de fourchette : la mediane est un vrai reperage, pas un degrade decoratif */
.plage{margin:22px 0 0}
.plage .piste{height:8px; border-radius:99px; background:var(--releve); position:relative}
.plage .remplissage{position:absolute; inset:0; border-radius:99px;
  background:linear-gradient(90deg,var(--sable),var(--sable-clair))}
.plage .curseur{position:absolute; top:50%; width:16px; height:16px; border-radius:99px;
  background:var(--accent); transform:translate(-50%,-50%);
  box-shadow:0 0 0 3px var(--carte), 0 2px 8px rgba(0,0,0,.28)}
.plage .bornes{display:flex; justify-content:space-between; margin-top:11px;
  font-size:13px; font-variant-numeric:tabular-nums; color:var(--texte2); font-weight:550}

.stats{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:22px}
.stats > div{background:var(--releve); border-radius:14px; padding:12px 13px}
.stats .v{font-size:18px; font-weight:650; letter-spacing:-.028em; font-variant-numeric:tabular-nums}
.stats .l{font-size:11.5px; color:var(--texte2); margin-top:1px}

/* ── Courbe ──────────────────────────────────────────────── */
.courbe{width:100%; height:76px; display:block; margin-top:6px; overflow:visible}
.courbe path.trait{fill:none; stroke:var(--accent); stroke-width:2.2;
  stroke-linecap:round; stroke-linejoin:round}
.courbe path.aire{fill:var(--accent-doux); stroke:none}

/* ── Badges ──────────────────────────────────────────────── */
.badge{display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:650;
  padding:4px 10px; border-radius:99px; letter-spacing:-.005em; vertical-align:middle}
.badge::before{content:""; width:6px; height:6px; border-radius:99px; background:currentColor}
.badge-demo{background:var(--accent-doux); color:var(--ambre)}
.badge-reel{background:rgba(31,122,77,.14); color:var(--vert)}

/* ── Boutons ─────────────────────────────────────────────── */
.actions{margin:0 var(--marge) 22px; max-width:var(--large); display:grid; gap:10px}
@media(min-width:1016px){ .actions{margin-left:auto; margin-right:auto} }
.btn{
  display:flex; align-items:center; justify-content:center; gap:9px; width:100%;
  padding:15px 18px; border-radius:15px; font:inherit; font-size:16px; font-weight:600;
  letter-spacing:-.02em; border:1px solid transparent; cursor:pointer; transition:.15s;
}
.btn-plein{background:var(--accent); color:var(--accent-texte); box-shadow:var(--ombre)}
.btn-plein:active{transform:scale(.985)}
.btn-clair{background:var(--carte); color:var(--texte); border-color:var(--trait); box-shadow:var(--ombre)}
.btn-clair:active{transform:scale(.985)}

/* ── Listes ──────────────────────────────────────────────── */
.groupe{margin:0 var(--marge) 26px; max-width:var(--large)}
@media(min-width:1016px){ .groupe{margin-left:auto; margin-right:auto} }
.groupe > .titre-groupe{font-size:11px; font-weight:600; letter-spacing:.11em;
  text-transform:uppercase; color:var(--texte3); padding:0 2px 10px}
.liste{background:var(--carte); border:1px solid var(--trait); border-radius:var(--r);
  overflow:hidden; box-shadow:var(--ombre)}
.rang{display:flex; align-items:center; gap:13px; padding:13px 16px;
  border-bottom:1px solid var(--trait)}
.rang:last-child{border-bottom:0}
.rang .c{display:block; flex:1 1 auto; min-width:0}
.rang .t{display:block; font-size:15.5px; font-weight:550; letter-spacing:-.018em}
.rang .s{display:block; font-size:12.5px; color:var(--texte2); margin-top:2px; line-height:1.4}
.rang .v{display:block; flex:0 0 auto; font-size:15.5px; font-weight:650;
  font-variant-numeric:tabular-nums; letter-spacing:-.025em; white-space:nowrap;
  padding-left:10px; text-align:right}
.fleche{color:var(--texte3); flex:0 0 auto}

/* ── Formulaire ──────────────────────────────────────────── */
.champ{background:var(--carte); border:1px solid var(--trait); border-radius:var(--r);
  overflow:hidden; margin:0 var(--marge) 12px; max-width:var(--large); box-shadow:var(--ombre)}
@media(min-width:1016px){ .champ{margin-left:auto; margin-right:auto} }
.champ input,.champ textarea{width:100%; border:0; background:transparent; color:var(--texte);
  font:inherit; font-size:16px; padding:14px 16px; border-bottom:1px solid var(--trait)}
.champ textarea{min-height:96px; resize:vertical}
.champ > :last-child{border-bottom:0}
.champ input:focus,.champ textarea:focus{outline:0; background:var(--releve)}

/* ── Onglets ─────────────────────────────────────────────── */
.onglets{
  position:fixed; left:0; right:0; bottom:0; z-index:50; display:flex; justify-content:center;
  background:var(--barre); -webkit-backdrop-filter:saturate(180%) blur(22px);
  backdrop-filter:saturate(180%) blur(22px); border-top:1px solid var(--trait);
  padding-bottom:env(safe-area-inset-bottom);
}
.onglets .dedans{display:flex; width:100%; max-width:460px}
.onglets a{flex:1; display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:9px 0 7px; color:var(--texte3); font-size:10.5px; font-weight:600; letter-spacing:-.005em}
.onglets a.actif{color:var(--texte)}
.onglets svg{width:24px; height:24px}

.note{padding:0 var(--marge) 28px; max-width:var(--large); margin:0 auto;
  color:var(--texte3); font-size:12.5px; line-height:1.55}
.social{display:flex; gap:10px; margin-bottom:16px}
.social a{display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px;
  border-radius:var(--r-sm); border:1px solid var(--trait); background:var(--carte);
  color:var(--texte2); transition:color .15s, background .15s}
.social a:hover{background:var(--accent); color:var(--accent-texte); border-color:transparent}
.vide{padding:70px var(--marge); text-align:center; color:var(--texte2); max-width:var(--large); margin:0 auto}

/* ── Filtres ─────────────────────────────────────────────── */
/* Le fondu est porte par .chips (mask-image) : plus aucun calque
   par-dessus, donc plus rien qui recouvre une puce. */
.filtre{max-width:var(--large); margin:0 auto}
.filtre-titre{font-size:11px; font-weight:600; letter-spacing:.11em;
  text-transform:uppercase; color:var(--texte3); padding:14px var(--marge) 0}
.filtre .chips{padding-top:8px; padding-bottom:2px}
.chip .n{display:inline-block; font-size:11px; font-weight:600; color:var(--texte3);
  margin-left:3px; font-variant-numeric:tabular-nums}
.chip.actif .n{color:var(--accent-texte); opacity:.65}

/* ── Telephone : c'est la cible principale ───────────────── */
@media (max-width:620px){
  .grille{grid-template-columns:1fr; gap:9px}
  .fiche{padding:12px 13px; border-radius:16px}
  .fiche .nom{font-size:16px}
  .fiche .prix{font-size:17px}
  .bloc{padding:20px 18px; border-radius:22px}
  .entete{padding-top:20px}
  .chips{scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch}
  .chip{scroll-snap-align:start; padding:9px 15px; font-size:14.5px}
  /* Cible tactile : 44 px minimum, regle Apple. En dessous, on rate. */
  .onglets a{padding:10px 0 8px}
  .rang{padding:14px 16px}
  .btn{padding:16px 18px}
}
/* Le pouce revient toujours en bas : la barre d'onglets ne bouge jamais. */
@supports (padding:max(0px)){
  .onglets{padding-bottom:max(env(safe-area-inset-bottom), 4px)}
}

/* ── Surplus de filtres ──────────────────────────────────────
   Un <details> natif : pas de JavaScript, accessible au clavier, et le
   resume DIT combien d'elements se cachent derriere. Jamais un chevron seul. */
.plus{max-width:var(--large); margin:0 auto; padding:2px var(--marge) 0}
.plus > summary{
  list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:8px;
  padding:11px 18px; border-radius:999px; border:1px solid var(--trait);
  background:var(--carte); color:var(--texte); font-size:15px; font-weight:600;
}
.plus > summary::-webkit-details-marker{display:none}
.plus > summary::after{content:"▾"; font-size:13px; color:var(--texte2)}
.plus[open] > summary::after{content:"▴"}
.plus[open] > summary{background:var(--survol)}
.plus .chips{padding-top:10px}

/* ── Carte : le nom complet, jamais tronque ──────────────────
   "Case IH Magnu…" ne permet pas de choisir. Le nom passe a la ligne. */
.fiche .nom{
  white-space:normal; overflow:visible; text-overflow:clip;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; line-height:1.25;
}
.fiche{align-items:flex-start; padding:14px}
.fiche .tuile{margin-top:1px}
.fiche .prix{padding-top:1px}
.filtre-aide{margin:2px 0 0; padding:0 var(--marge); color:var(--texte2); font-size:13.5px}

/* ── Pages de texte (legal) ──────────────────────────────── */
.texte{max-width:var(--large); margin:0 auto; padding:0 var(--marge) 30px; font-size:15.5px; line-height:1.65}
.texte h2{font-size:19px; font-weight:600; letter-spacing:-.025em; margin:30px 0 8px}
.texte p{margin:0 0 12px; color:var(--texte2)}
.texte strong{color:var(--texte); font-weight:600}
.texte a{text-decoration:underline}
.texte li{color:var(--texte2); margin-bottom:6px}

/* ── Parcours en etapes numerotees ───────────────────────────
   Le public de ce site n'est pas familier du web. Une etape porte un NUMERO,
   un titre en forme de question, et une phrase qui dit quoi faire. Rien ne se
   devine, rien ne depend d'un placeholder — un placeholder disparait des qu'on
   saisit, et le champ redevient muet. */
.etape{display:flex; gap:14px; max-width:var(--large); margin:0 auto 6px;
  padding:18px var(--marge)}
.etape-num{flex:0 0 auto; width:32px; height:32px; border-radius:999px;
  background:var(--accent); color:var(--accent-texte); display:grid; place-items:center;
  font-size:16px; font-weight:700; margin-top:2px}
.etape-corps{flex:1; min-width:0}
.etape h2{margin:2px 0 4px; font-size:20px; font-weight:600; letter-spacing:-.028em; line-height:1.25}
.aide{margin:0 0 12px; color:var(--texte2); font-size:14.5px; line-height:1.5}
.lab{display:block; font-size:15px; font-weight:600; margin:10px 0 2px}
.saisie{width:100%; padding:15px 16px; font:inherit; font-size:17px; border-radius:14px;
  border:1.5px solid var(--trait); background:var(--carte); color:var(--texte)}
.saisie:focus{outline:0; border-color:var(--accent)}
.saisie.faux{border-color:var(--rouge); background:rgba(171,52,45,.06)}

/* Choix uniques : de gros blocs cliquables, pas un champ numerique a fleches. */
.radio{display:flex; gap:12px; align-items:flex-start; padding:15px 16px; margin-bottom:9px;
  border:1.5px solid var(--trait); border-radius:14px; background:var(--carte); cursor:pointer}
.radio.coche{border-color:var(--accent); background:var(--accent-doux)}
.radio input{position:absolute; opacity:0; width:0; height:0}
.rond{flex:0 0 auto; width:22px; height:22px; border-radius:999px; margin-top:1px;
  border:2px solid var(--texte3); position:relative}
.radio.coche .rond{border-color:var(--accent)}
.radio.coche .rond::after{content:""; position:absolute; inset:4px; border-radius:999px;
  background:var(--accent)}
.r-titre{display:block; font-size:16.5px; font-weight:600; letter-spacing:-.02em}
.r-pct{font-weight:700; color:var(--texte2)}
.r-desc{display:block; font-size:14px; color:var(--texte2); margin-top:3px; line-height:1.45}

/* Cases a cocher legales : grandes, jamais pre-cochees. */
.case{display:flex; gap:12px; align-items:flex-start; padding:14px 16px; margin-bottom:9px;
  border:1.5px solid var(--trait); border-radius:14px; background:var(--carte);
  font-size:14.5px; line-height:1.5; cursor:pointer}
.case.faux{border-color:var(--rouge); background:rgba(171,52,45,.06)}
.case input{flex:0 0 auto; width:22px; height:22px; margin:1px 0 0; accent-color:var(--accent)}
.case a{text-decoration:underline}

.prix-bloc{padding:16px; border-radius:14px; background:var(--accent-doux); margin-bottom:14px}
.pb-montant{font-size:32px; font-weight:700; letter-spacing:-.035em}
.pb-montant span{font-size:17px; font-weight:500; color:var(--texte2); letter-spacing:-.01em}
.pb-sous{font-size:14.5px; color:var(--texte2); margin-top:3px}

.choix-fait{display:flex; align-items:center; gap:12px; padding:12px 14px;
  border:1.5px solid var(--trait); border-radius:14px; background:var(--carte)}
.cf-nom{font-size:16.5px; font-weight:600; letter-spacing:-.02em}
.cf-sous{font-size:13.5px; color:var(--texte2); margin-top:1px}
.cf-lien{margin-left:auto; font-size:14.5px; font-weight:600; text-decoration:underline; color:var(--texte2)}

/* Le bouton principal doit se voir de loin et se toucher sans viser. */
.btn-gros{padding:19px 20px; font-size:17.5px; border-radius:16px}

/* ── Fil d'Ariane visible ────────────────────────────────── */
.fil{max-width:var(--large); margin:0 auto; padding:14px var(--marge) 0}
.fil ol{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap;
  align-items:center; gap:6px; font-size:13.5px}
.fil li{display:flex; align-items:center; gap:6px; color:var(--texte2)}
.fil li:not(:last-child)::after{content:"›"; color:var(--texte3)}
.fil a{color:var(--texte2); text-decoration:underline; text-underline-offset:2px}
.fil a:hover{color:var(--texte)}
.fil [aria-current]{color:var(--texte); font-weight:550}

/* Phrase de reponse directe : c'est le paragraphe qu'un moteur de reponse
   reprend tel quel. Il porte le chiffre, il est court, il est en haut. */
.reponse{max-width:var(--large); margin:0 auto; padding:0 var(--marge) 6px;
  font-size:17px; line-height:1.55; color:var(--texte2)}
.reponse strong{color:var(--texte); font-weight:600}

/* September 2026: a quieter, accessible mobile app shell. */
:root{
  --texte2:#58534E;--texte3:#69625A;--trait:#D9D5CE;--focus:#256345;
  --ombre:0 2px 8px rgba(25,35,28,.035);--ombre-forte:0 6px 20px rgba(25,35,28,.09);
  --accent:#183F32;--accent-texte:#FFFFFF;--barre:#FAF8F5;
}
@media(prefers-color-scheme:dark){:root{
  --texte2:#C6BFB7;--texte3:#B2AAA1;--trait:#57534D;--focus:#9FDBC0;
  --accent:#B5DFC9;--accent-texte:#10261E;--barre:#0E0E0D;
}}
html{scroll-padding-top:90px;scroll-padding-bottom:110px}
body{line-height:1.55;padding-bottom:calc(96px + env(safe-area-inset-bottom))}
main{min-height:55vh;outline:none}
:where(a,button,input,select,textarea,summary):focus-visible{outline:3px solid var(--focus);outline-offset:4px}
:where(input,select,textarea):focus-visible{outline-offset:2px!important;outline:3px solid var(--focus)!important}
:where(input,textarea,select){scroll-margin-block:100px}
.skip-link{position:fixed;top:-100px;left:16px;z-index:100;background:var(--accent);color:var(--accent-texte);padding:14px 20px;border-radius:10px}
.skip-link:focus{top:12px}
.nav .dedans{min-height:64px;padding-block:6px}
.nav .retour{min-width:44px;min-height:44px;justify-content:center;border:1px solid var(--trait);border-radius:50%;margin:0}
.nav .marque{font-size:18px;min-height:44px;display:flex;align-items:center}
.grand-titre{line-height:1.09;letter-spacing:-.04em;font-weight:650}
.entete{padding-top:28px;padding-bottom:12px}
.chapo{font-size:16px;line-height:1.55;margin-top:12px}
.eyebrow{font-size:12px;font-weight:650;letter-spacing:.08em;text-transform:uppercase;color:var(--texte2);margin:0 0 12px}
.catalogue-status{font-size:13px;color:var(--texte2);margin:14px 0 0}
.accueil-entete .grand-titre{font-size:clamp(34px,7.8vw,52px)}
.catalogue-search{max-width:var(--large);margin:8px auto 0;padding:0 var(--marge)}
.catalogue-search>.lab{font-size:16px;margin:0 0 10px}
.search-row{display:flex;gap:8px}
.search-row input{min-width:0;flex:1}
.search-row .btn{width:auto;font-size:14px;padding-inline:14px}
.filter-panel{margin-top:8px}
summary{cursor:pointer;min-height:44px;align-content:center}
.filter-panel summary{font-size:14px;font-weight:550;padding-block:12px}
.filter-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding-bottom:14px}
.filter-fields .lab{font-size:14px}
.filter-fields select{font-size:16px;min-width:0;padding:12px 8px;width:100%}
.filter-fields>div{min-width:0}
.apply-filters{margin-bottom:14px}
.filter-status{font-size:14px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.filter-status a{min-height:44px;align-content:center;text-decoration:underline}
.intent-shortcuts{display:flex;flex-wrap:wrap;gap:8px;max-width:var(--large);margin:8px auto 24px;padding:0 var(--marge)}
.intent-shortcuts a{display:flex;align-items:center;gap:7px;min-height:44px;padding:9px 12px;border-radius:10px;background:var(--releve);border:1px solid var(--trait);font-size:13px;font-weight:550}
.intent-shortcuts a span{font-size:18px;color:var(--accent)}
.section-heading{max-width:var(--large);margin:24px auto 0;padding:0 var(--marge)}
.section-heading h2{margin:0;font-size:21px;line-height:1.25;letter-spacing:-.025em}
.section-heading p{margin:7px 0 0;color:var(--texte2);font-size:14px;line-height:1.5}
.section-heading a,.note a,.privacy-note a{text-decoration:underline;text-underline-offset:3px}
.grille{grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr));gap:10px}
.fiche{align-items:center;min-height:90px;box-shadow:none}
.fiche .nom{display:block;overflow:visible;-webkit-line-clamp:unset;font-size:16px;line-height:1.35}
.fiche .meta{white-space:normal;font-size:13px}
.fiche-next{font-size:22px;color:var(--texte2);margin-left:auto}
.fiche .tuile{box-shadow:none}
.fiche .prix small{font-size:12px}
.onglets{background:var(--barre)!important;backdrop-filter:none!important;border-top:1px solid var(--trait)}
.onglets a{min-height:64px;font-size:12px!important;gap:4px}
.onglets a.actif{color:var(--accent);font-weight:700}
.onglets a.actif svg{background:var(--accent-doux);border-radius:9px;box-shadow:0 0 0 6px var(--accent-doux)}
.note{font-size:14px;line-height:1.6;color:var(--texte2)}
footer.note a{display:inline-flex;min-height:44px;align-items:center}
.text-link{display:inline-block;text-decoration:underline;text-underline-offset:4px;font-weight:550;padding-block:8px}
.status-pill{display:inline-flex;align-items:center;min-height:30px;background:var(--releve);border-radius:8px;padding:4px 10px;font-size:13px;color:var(--texte2)}
.empty-quote h2{font-size:24px;letter-spacing:-.03em;margin:16px 0 8px;line-height:1.2}
.empty-quote p{color:var(--texte2);margin:0}
.checklist{padding:0;list-style:none;display:grid;gap:10px;color:var(--texte2);font-size:15px;margin:20px 0}
.checklist li{display:flex;gap:10px}
.checklist li::before{content:'✓';color:var(--accent);font-weight:700}
.project-options{max-width:var(--large);margin:12px auto 20px;padding:0 var(--marge);display:grid;gap:12px}
.project-card{display:flex;align-items:center;gap:16px;padding:20px;background:var(--carte);border:1px solid var(--trait);border-radius:var(--r)}
.project-card>div{flex:1;min-width:0}
.project-card h2{font-size:19px;line-height:1.25;margin:0 0 6px;letter-spacing:-.02em}
.project-card p{font-size:14px;color:var(--texte2);margin:0}
.project-icon,.context-symbol{display:grid;place-items:center;width:44px;height:44px;flex-shrink:0;background:var(--accent-doux);color:var(--accent);border-radius:12px;font-size:24px}
.demande-entete,.request-form{max-width:680px}
.demande-entete .grand-titre{font-size:clamp(30px,7vw,40px)}
.model-context{display:flex;align-items:center;gap:12px;padding:16px 0;margin-top:6px;border-bottom:1px solid var(--trait)}
.model-context>div{flex:1;min-width:0}
.model-context strong{display:block;font-size:15px;line-height:1.3}
.model-context a{font-size:13px;text-decoration:underline;min-height:44px;align-content:center}
.context-label{font-size:12px;color:var(--texte2);display:block;margin-bottom:2px}
.request-form{margin:10px auto 30px;padding:0 var(--marge)}
.form-section{border:0;margin:0 0 8px;padding:0;min-width:0}
.form-section legend{font-weight:650;font-size:21px;padding:0;margin-bottom:6px}
.form-section .aide{font-size:14px;margin-bottom:18px}
.form-field{margin:0 0 18px}
.form-field>label{display:block;font-size:15px;font-weight:600;margin-bottom:7px}
.form-field>label span{font-size:13px;font-weight:400;color:var(--texte2)}
.saisie{border-color:var(--trait);border-radius:10px;font-size:16px;min-height:52px}
.form-field textarea{resize:vertical;min-height:110px;line-height:1.5}
.optional-fields{border-top:1px solid var(--trait);border-bottom:1px solid var(--trait);padding:8px 0;margin:10px 0 18px}
.optional-fields summary{font-size:15px;font-weight:550;padding:8px 0}
.optional-fields summary span{display:block;font-size:13px;font-weight:400;color:var(--texte2);margin-top:4px}
.optional-fields[open] summary{margin-bottom:16px}
.privacy-note,.form-reassurance{font-size:13px;color:var(--texte2);line-height:1.6}
.form-reassurance{text-align:center;margin-top:12px}
.honeypot{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.error-summary{border:2px solid var(--rouge);border-radius:12px;padding:18px;margin-bottom:24px;background:var(--carte)}
.error-summary h2{font-size:20px;margin:0 0 10px}
.error-summary p{font-size:15px;margin:0}
.error-summary ul{padding-left:22px;margin-bottom:0}
.error-summary a{color:var(--rouge);text-decoration:underline;display:inline-block;padding:6px 0}
.saisie[aria-invalid=true]{border:2px solid var(--rouge)}
.field-error{color:var(--rouge);font-size:14px;margin:6px 0 0}
.btn:disabled{opacity:.75;cursor:wait}
@media(hover:hover){.project-card:hover,.intent-shortcuts a:hover{background:var(--releve);border-color:var(--texte3)}}
@media(min-width:900px){.accueil-entete{padding-top:42px}.catalogue-search{margin-top:16px}.project-options{grid-template-columns:repeat(3,1fr)}.project-card{align-items:flex-start;flex-direction:column}.intent-shortcuts{margin-bottom:32px}}
@media(max-width:380px){.search-row{flex-wrap:wrap}.search-row .btn{width:100%}.filter-fields{grid-template-columns:1fr}.project-card{padding:16px;gap:12px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
#resultats{scroll-margin-top:88px;outline:none}

@media print{.nav,.onglets,footer,.skip-link,[data-print-receipt]{display:none!important}body{padding:0;background:white;color:black}.bloc{box-shadow:none;break-inside:avoid}}