/* ═══════════════════════════════════════════════════════════════════════════
   Votre GLI · passe de design
   Appliquée le 19/09/2026 d'après lead_generation_funnel/15_design_craft.md.
   Chargée après site.css : ce fichier ne redéfinit que ce qu'il assume.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── §2 · Type ─────────────────────────────────────────────────────────────
   Afacad porte les titres et le texte courant. Aboreto est la voix d'accent :
   elle a UN seul emploi sur toute la page, les repères numérotés de la bande
   de méthode. Elle n'apparaît nulle part ailleurs, c'est ce qui la rend
   délibérée. Pas d'italique synthétique : Afacad n'a pas de fichier italique,
   donc l'italique passe par Georgia, qui en a un vrai. */
@font-face{
  font-family:Aboreto;
  src:url('../fonts/aboreto-regular.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
}
html{font-synthesis:none}
em,i{font-family:Georgia,serif;font-style:italic}

/* ── §1 · Levier de forme : la pastille ────────────────────────────────────
   Une seule décision non rectangulaire, répétée partout et surtout REPRISE
   SUR LES CRÉATIONS PUBLICITAIRES : les trois jeux de cartes portent la même
   pastille claire « GARANTIE DES LOYERS IMPAYÉS ». C'est cette répétition
   entre la page et les annonces qui fait la reconnaissance, pas la couleur.
   Les largeurs maximales héritées sont neutralisées : sur une pastille, une
   max-width casse le mot au lieu de borner le bloc. */
.eyebrow{
  display:inline-block;
  max-width:none;
  padding:7px 13px 6px;
  background:var(--lime);
  color:var(--ink);
  font-size:12px;
  letter-spacing:.1em;
  line-height:1.25;
}
.form-panel .eyebrow,
.approach .eyebrow{color:var(--ink)}
.daily-copy .eyebrow,
.hero .eyebrow,
.prepare .eyebrow{font-size:12px;max-width:none;padding-right:13px}

/* ── §2 · La voix d'accent, un seul emploi ────────────────────────────────── */
.strip-item span{
  font-family:Aboreto,Georgia,serif;
  letter-spacing:.06em;
}

/* ── §4 · Photographie : l'effet restreint ────────────────────────────────
   Trois photographies, trois emplois. Le désaturé ne s'applique qu'à UNE
   seule d'entre elles : celle de la section « Au rythme des locations », qui
   est la respiration de la page. Désaturer les trois ne dirait rien ; n'en
   désaturer qu'une dit « ici, on s'arrête ». La recette vérifie que les deux
   autres calculent bien « filter: none ». */
.daily-grid .local-photo img{
  filter:grayscale(1) contrast(1.04);
}
/* Voile dégradé sous la légende : le contraste ne doit jamais dépendre de la
   photographie elle-même, sinon il tombe le jour où quelqu'un la remplace. */
.daily-grid .local-photo{position:relative}
.daily-grid .local-photo::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:96px;
  background:linear-gradient(to top,rgba(21,62,53,.72),rgba(21,62,53,0));
  pointer-events:none;
}
/* Sur grand ecran l'image est en position absolue et remplit la figure : la
   legende, restee dans le flux, se retrouvait en HAUT de la photo, en gris
   clair sur des briques. Elle redescend en pied, sur le voile, en couleur
   papier. Sous 760 px la legende reste sous l'image, ou elle est lisible. */
@media (min-width:761px){
  .daily-grid .local-photo figcaption{
    position:absolute;left:0;right:0;bottom:0;z-index:1;margin:0;
    color:var(--paper);font-size:11px;line-height:1.4;padding:0 13px 10px;
  }
  .daily-grid .local-photo figcaption a{color:var(--paper)}
}
@media (max-width:760px){
  .daily-grid .local-photo::after{display:none}
}

/* ── §6 · Relief de lecture, rationné ─────────────────────────────────────
   Une phrase soulignée par section, au maximum : celle qu'on dirait à voix
   haute. Jamais deux reliefs sur la même ligne. */
.dit{
  text-decoration:underline;
  text-decoration-thickness:2px;
  text-underline-offset:4px;
  text-decoration-color:var(--lime);
}
.approach .dit,
.form-panel .dit{text-decoration-color:var(--lime)}

/* ── §5 · Mouvement : montrer ce qui doit être compté ─────────────────────
   Tous les états cachés ci-dessous vivent SOUS `.js-reveal`, une classe que
   seul assets/reveal.js pose sur <html>, et seulement après avoir vérifié que
   l'appareil accepte le mouvement. Si le script ne tourne pas, aucune de ces
   règles ne s'applique et la page est entière. C'est la seule façon d'animer
   sans risquer de cacher définitivement du contenu.

   Une courbe unique pour toute la page — sortie douce, sans rebond. Un rebond
   attire l'œil sur le mouvement ; ici le mouvement doit servir le texte et
   disparaître. */
:root{--elan:cubic-bezier(.22,.61,.36,1)}

/* Le cas général : le bloc monte de quelques pixels en entrant dans le champ.
   14 px, pas 40 : assez pour qu'on sente un changement de sujet, trop peu pour
   qu'on attende la fin du déplacement avant de lire. */
.js-reveal .anim{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .55s var(--elan),transform .55s var(--elan);
}
.js-reveal .anim.vu{opacity:1;transform:none}

/* Les repères numérotés gardent leur réglage d'origine : ils s'écrivent l'un
   après l'autre pour qu'on les COMPTE. */
.js-reveal .strip-item{
  opacity:0;
  transform:translateY(10px);
  transition:opacity .5s ease,transform .5s ease;
}
.js-reveal .strip-item.vu{opacity:1;transform:none}

/* Les personnages détourés entrent d'un peu plus bas : ils marchent dans le
   champ plutôt que d'y apparaître. */
.js-reveal .perso.anim{transform:translateY(26px)}
.js-reveal .perso.anim.vu{transform:none}

/* ── Mouvement de réponse, pas de décoration ──────────────────────────────
   Les seules transitions permanentes de la page sont sur des éléments qu'on
   peut ACTIONNER : elles accusent réception du survol ou du focus. Rien sur
   les blocs de texte, les photos ou les lignes de liste — un élément qui
   réagit au survol sans être cliquable est un mensonge d'interface. */
nav a,.btn,.choice,.text-button,.faq summary,.legal-links a,.wordmark{
  transition:background-color .16s ease,border-color .16s ease,
             color .16s ease,filter .16s ease,opacity .16s ease;
}
.faq summary::after{display:inline-block;transition:transform .16s ease}
.faq summary:hover::after{transform:scale(1.18)}
.progress div{transition:width .28s var(--elan)}

@media (prefers-reduced-motion:reduce){
  .js-reveal .anim,
  .js-reveal .strip-item{opacity:1;transform:none;transition:none}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* ── Bannière de consentement aux traceurs ────────────────────────────────
   Posée en bas de l'écran, au-dessus du reste, mais elle ne barre pas la page :
   on peut lire et utiliser le formulaire sans répondre. Ne pas répondre équivaut
   à refuser — rien n'est chargé tant qu'aucun choix n'est fait.

   Les deux boutons sont IDENTIQUES : même fond, même bordure, même taille, même
   graisse. Un « Refuser » qu'on distingue moins bien qu'un « Accepter » rend le
   refus plus coûteux que l'acceptation, et le consentement obtenu ne vaut rien.
   Si quelqu'un veut un jour « mettre Accepter en avant », c'est ici que ça se
   verra, et c'est non. */
.traceurs{
  position:fixed;
  left:16px;right:16px;bottom:16px;
  z-index:50;
  /* Ancree a GAUCHE, pas centree : centree, elle recouvrait le bouton
     « Continuer » du formulaire, c'est-a-dire l'action principale de la page.
     Une banniere qui cache le bouton qu'on est venu chercher est un defaut, pas
     un detail de style. A gauche elle ne passe que sur du texte deja lu. */
  margin-right:auto;
  max-width:720px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:18px 26px;
  background:var(--green);
  color:var(--paper);
  padding:18px 20px;
  box-shadow:0 6px 30px rgba(21,62,53,.22);
}
.traceurs-texte{flex:1 1 340px;min-width:0}
.traceurs-titre{font-size:19px;font-weight:600;margin-bottom:5px}
.traceurs .small{color:#d5ded0}
.traceurs a{color:var(--lime);white-space:nowrap}
.traceurs-boutons{display:flex;gap:12px;flex:0 0 auto}
.traceurs-btn,
.traceurs-btn:hover{
  background:var(--lime);
  color:var(--ink);
  border-color:var(--lime);
  min-width:132px;
  justify-content:center;
  font-weight:600;
  filter:none;
}
.traceurs :focus-visible{outline-color:var(--lime)}
.traceurs-lien{cursor:pointer}

@media (max-width:620px){
  .traceurs{left:10px;right:10px;bottom:10px;padding:16px;gap:14px}
  .traceurs-boutons{width:100%}
  .traceurs-btn{flex:1 1 0;min-width:0}
}

/* ── Écrans étroits ───────────────────────────────────────────────────────
   Rien de décoratif à porter sur un téléphone : le voile reste, il sert la
   lisibilité, mais il se raccourcit. */
@media (max-width:760px){
  .daily-grid .local-photo::after{height:72px}
  .eyebrow{font-size:11px;padding:6px 11px 5px}
}

/* ── Personnages détourés ──────────────────────────────────────────────────
   Des photographies de personnes, détourées sur fond transparent, posées dans
   les vides réels de la mise en page — pas des vignettes ajoutées pour décorer.
   Chacune a un rapport direct avec la section qui l'accueille : celle qui
   s'interroge se tient entre la question et la grille qui y répond, celui qui
   tend sa liste se tient au bout de la liste à préparer.

   Elles sont inertes : aria-hidden, pointer-events coupés, derrière le texte,
   et retirées sous 1100 px, là où les colonnes s'empilent et où il n'y a plus
   de vide à occuper. Elles ne portent AUCUN filtre : le désaturé reste réservé
   à la photographie de respiration (voir plus haut, §4). */
.perso{
  position:absolute;
  z-index:0;
  pointer-events:none;
  filter:none;
  user-select:none;
}
.wrap.reading,.wrap.prepare{position:relative}

.perso-question{
  left:35.5%;
  bottom:0;
  height:430px;
  width:auto;
}
/* Le vide mesure de la section : 440 px de large sur 250 px de haut, entre la
   fin du titre et le dessin a la cle. Il est bordé a gauche par le texte du
   chapeau et a droite par le dessin ; le personnage s'y tient sans rien
   recouvrir. Il a ete recadre sous les genoux pour que, a cette hauteur, ce
   soit la main qui tend la liste qu'on lise, et pas une silhouette entiere.
   Une premiere pose, en bas a droite de la section, masquait la fin de trois
   lignes de la liste a preparer : une illustration qui cache le texte qu'elle
   illustre ne vaut pas la place qu'elle prend. */
.perso-checklist{
  left:56%;
  /* 16 px sous le bord de la bande verte : colle a zero, le crane semblait
     pousser hors du bandeau. */
  top:16px;
  height:244px;
  width:auto;
  /* Coupe a mi-cuisse : sans rien, le bord franc lit comme une image tronquee.
     Le degrade la transforme en sortie de champ. */
  -webkit-mask-image:linear-gradient(to bottom,#000 76%,transparent 99%);
  mask-image:linear-gradient(to bottom,#000 76%,transparent 99%);
}

@media (max-width:1100px){
  .perso{display:none}
}