/* Le retrait suit la hauteur de l'en-tete, qui est passee de 103 a
   53 px. Laisse a 110 px, il ouvrait un trou de la moitie d'un ecran de
   telephone au-dessus du titre. */
.home-shell{padding-top:74px;position:relative;z-index:1}

/* Dans ces deux blocs, l'etiquette est le titre et la phrase le
   sous-titre : c'est l'inverse de la hierarchie des autres sections, ou
   l'etiquette n'est qu'un surtitre discret.

   Les deux blocs de l'accueil la partagent depuis le 23 aout 2026. Ils
   avaient chacun la leur, et elles etaient inversees l'une par rapport
   a l'autre : 43 px pour l'etiquette du blog contre 10 px pour celle du
   catalogue, 23 px pour le titre du blog contre 44 px pour l'autre.
   Deux blocs voisins, deux hierarchies contraires. Joris a demande de
   les aligner sur celle du blog, qu'il valide.

   L'etiquette est verte et non blanche : c'est le vert de la marque,
   celui de var(--green), le meme que le filet neon et le halo du
   bouton. Un titre blanc de plus se noyait dans les autres blancs de
   la page. */
/* La hierarchie de ces intitules etait inversee, d'ou le nom de la
   classe : l'intitule de section s'affichait a 43 px en vert vif, et le
   vrai titre a 20 px en dessous. Deux consequences, corrigees le
   26 aout 2026.

   Le vert : deux titres geants verts par page consommaient a eux seuls
   le budget de la charte, qui vise 2 %. Un intitule sert a situer, pas
   a crier.

   La hierarchie : « Le blog » n'est pas le titre de la section, c'est
   son etiquette. Le titre est la phrase qui suit, et c'est elle qui
   doit etre lue en premier. La charte demande « une hierarchie tres
   claire » : la voici, dans l'ordre normal. */
.home-heading--inverse{margin-bottom:42px}
.home-heading--inverse>span{display:block;margin-bottom:14px;
  font:700 14px/1.4 var(--ff-titre);
  letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.home-heading--inverse h2{margin:0 0 22px;
  font:800 clamp(1.7rem,3.4vw,2.4rem)/1.15 var(--ff-titre);
  letter-spacing:-.02em;color:var(--text);text-wrap:balance}

/* Repris du theme de /partenaires : meme lueur de fond, meme traitement
   de titre, pour que l'accueil et la page mise en avant se sentent
   comme un seul et meme site plutot que deux epoques differentes. */
/* .pt-lueur a ete retire le 26 aout 2026, bloc 1 de la refonte.
   C'etaient trois halos de couleur, vert, bleu et violet, fixes sur
   tout l'ecran et presents en permanence. La charte refuse « les gros
   effets neon » et « les degrades inutiles » : ils etaient les deux.
   La meme regle etait recopiee dans quatre feuilles de page, ce qui
   veut dire quatre endroits ou la corriger et aucun qui fasse foi. */

.pt-hero{position:relative;margin:0 auto 48px;padding:8px 0 4px;
  max-width:980px;text-align:center;
  display:flex;flex-direction:column;align-items:center}

/* .home-duo et le placement du personnage dans le hero ont ete retires
   le 26 aout 2026 : il a quitte le hero pour le dernier bloc de la
   page. Ses regles de positionnement vivent desormais avec lui, sous
   .home-final, et elles n'ont plus besoin de sortir du flux. */

/* Le halo vert de 60 px autour du personnage est parti avec le reste
   des effets lumineux : la charte les refuse, et il devenait une tache
   verte sur fond clair. */
.home-personnage{pointer-events:none}

/* Les deux reglages qui suivaient ont ete retires le 26 aout 2026.
   Ils replaçaient le personnage quand il chevauchait le texte du hero,
   puis le cachaient sur un ecran court parce qu'il repoussait le bouton
   sous la ligne de flottaison. Les deux problemes venaient de sa place
   dans le hero, et il n'y est plus : il vit dans le dernier bloc, dans
   le flux, a cote du texte. Le probleme a disparu avec sa cause. */

.pt-kicker{display:inline-flex;align-items:center;gap:10px;margin:0;
  padding:9px 18px;border-radius:999px;font-size:15px;font-weight:600;
  letter-spacing:.04em;color:var(--muted);
  border:1px solid var(--line)}
/* La pastille ne pulse plus, et n'a plus de halo. Elle clignotait en
   boucle dans le pied de page de toutes les pages : « animations
   permanentes » et « elements qui bougent sans raison » ouvrent la
   liste des interdits de la charte. Un point vert fixe dit la meme
   chose et ne demande rien a l'oeil. */
.pt-kicker-point{width:8px;height:8px;border-radius:50%;flex:0 0 auto;
  background:var(--accent)}

.pt-titre{font-family:var(--ff-titre);font-size:clamp(2.5rem,7vw,4.4rem);line-height:1.02;
  margin:0 0 22px;text-wrap:balance;letter-spacing:-.035em;font-weight:800;color:var(--text)}

/* Le padding droit n'est pas cosmetique : en italique la derniere
   lettre penche au-dela de sa boite, et background-clip:text coupait
   net le « t » de « vraiment ». La marge negative compense le padding
   pour que le mot reste optiquement centre. Meme correctif que sur
   /partenaires, qui n'avait pas ete reporte sur cette copie. */
/* Le mot fort du titre. Il portait un degrade vert vers bleu decoupe
   dans le texte, plus un halo de 34 px : trois couleurs et un effet
   lumineux pour un seul mot, la ou la charte demande deux pour cent de
   vert et refuse « les gros effets neon ». Il est simplement vert, et
   plus lisible pour autant. L'italique reste, c'est lui qui detache le
   mot ; le padding droit avec lui, une lettre penchee depassant de sa
   boite. */
.pt-titre-fort{position:relative;display:inline-block;font-style:italic;
  padding-right:.14em;margin-right:-.14em;
  color:var(--accent-ink)}

.pt-hero .pt-chapo{font-size:1.22rem;max-width:44ch;color:var(--muted);
  margin:0 auto 30px;text-align:center;text-wrap:balance;line-height:1.55}

/* Le filet neon qui courait sous le hero a ete retire le 26 aout 2026.
   C'etait un trait vert lumineux double d'une nappe floutee : la charte
   refuse « les gros effets neon » et « les degrades inutiles ». La
   separation entre le hero et la suite se fait par l'espacement, qui ne
   coute rien a lire et ne consomme pas le budget de vert. */

/* Le halo qui tournait en permanence autour du bouton principal a ete
   retire le 26 aout 2026. La liste des animations interdites de la
   charte s'ouvre sur « animations permanentes » et « elements qui
   bougent sans raison » : un anneau conique anime en boucle etait les
   deux. Le bouton se voit maintenant parce qu'il est vert plein sur un
   fond sombre, ce qui est le role du vert.

   L'enveloppe .home-cta-halo reste, elle ne sert plus qu'a poser le
   bouton dans le flux. */

/* Les gages de confiance : pictogrammes du meme jeu que /partenaires,
   la ou il y avait des caracteres « coche » qui ne suivaient ni le
   trait ni la couleur du reste du site. */
/* Centre explicitement : les pastilles remplissent toute la largeur
   sur un ecran de 360 px, et la troisieme passe a la ligne. Sans ca
   elle se retrouvait callee a gauche sous un hero centre. */

/* Les modules chiffres.
   Ils arrivent par JavaScript : la boite reste donc vide au premier
   rendu et ne doit pas laisser un trou. Pas de hauteur minimale. */
.home-chiffres{display:grid;gap:20px;margin:0 0 26px}

.home-reperes{display:grid;gap:16px;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.home-repere{padding:22px 24px;border-radius:18px;
  border:1px solid var(--line);
  background:var(--surface-2)}
/* Le vert dit « de l'argent ». Un compte d'offres n'en est pas, et le
   nombre de celles qui ne rapportent rien encore moins : les mettre en
   vert, c'etait mettre en avant ce qui ne rapporte rien, la regle que
   Joris a posee le 23 aout 2026. Seule la valeur en euros est verte, et
   c'est ce qui lui redonne son sens. */
.home-repere-valeur{margin:0;font:800 2.3rem var(--ff-titre);line-height:1;
  color:var(--text);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.home-repere--argent .home-repere-valeur{color:var(--accent-ink)}
.home-repere-libelle{margin:10px 0 0;color:var(--muted);font-size:16px;line-height:1.4}
.home-repere-detail{margin:5px 0 0;color:var(--faint);font-size:14px}

/* La vitrine des marques, une rangee par famille.
   Elle remplace depuis le 23 aout 2026 un graphique en barres qui
   comparait ce que rapporte chaque famille. La raison est dans
   accueil-chiffres.js, au-dessus de la fonction qui la construit. */
.home-vitrine{margin:0;padding:24px;border-radius:20px;
  border:1px solid var(--line);
  background:var(--surface-2)}
.home-vitrine figcaption{margin:0 0 18px;font-weight:800;color:var(--text)}
.home-vitrine-liste{margin:0;padding:0;list-style:none;display:grid;gap:18px}
/* Deux colonnes : le nom de la famille, puis ses marques. La colonne de
   gauche est calee pour que les rangees s'alignent d'une famille a
   l'autre, comme le faisaient les barres. */
.home-vitrine-liste li{display:grid;align-items:center;gap:10px 18px;
  grid-template-columns:130px 1fr}
/* La couleur de la famille, la meme que sur /partenaires : c'est elle
   qui fait le lien entre les deux pages. */
/* Le nom de la famille prenait sa teinte brute, sans melange : lisible
   sur fond noir, il tombait a 1,4 pour 1 sur fond clair. Meme melange
   que partout ailleurs, et la dose suit le mode. */
.home-vitrine-famille{
  color:color-mix(in srgb,var(--famille,var(--accent)) var(--dose-famille),var(--text));
  font-size:14px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.home-vitrine-marques{display:flex;flex-wrap:wrap;gap:9px}
.home-marque{display:inline-flex;align-items:center;gap:9px;
  padding:6px 14px 6px 6px;border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.04);
  color:var(--muted);font-size:14px;font-weight:600;line-height:1}
/* Les logos du catalogue sont des carres pleins de 256 px, avec leur
   propre fond : ils se posent tels quels, sans pastille de couleur
   derriere, exactement comme sur les cartes de /partenaires. */
.home-marque img{width:30px;height:30px;border-radius:9px;object-fit:cover;
  display:block;flex:0 0 auto}
.home-vitrine-note{margin:18px 0 0;color:var(--muted);font-size:15px;line-height:1.5}

@media(max-width:640px){
  /* Sur telephone le nom de la famille passe au-dessus de ses marques :
     130 px de colonne sur 360 px de large ne laissaient pas la place
     d'aligner deux pastilles cote a cote. */
  .home-vitrine-liste li{grid-template-columns:1fr;gap:8px}
}

/* Les cartes d'articles.
   Elles arrivent par JavaScript : la grille est donc vide au premier
   rendu et ne doit pas laisser un trou. D'ou l'absence de hauteur
   minimale, elle se replie a zero tant qu'il n'y a rien dedans. */
.home-articles{display:grid;gap:18px;margin:0 0 26px;
  grid-template-columns:repeat(auto-fill,minmax(290px,1fr))}
/* La vignette deborde du padding : elle occupe toute la largeur de la
   carte, comme une couverture, et pas comme une image posee dedans.
   D'ou le padding porte par les enfants et non par la carte. */
.home-article{display:flex;flex-direction:column;gap:10px;padding:0 0 24px;
  border-radius:20px;text-decoration:none;overflow:hidden;
  border:1px solid var(--line);
  background:var(--surface-2);
  transition:transform .18s ease,border-color .18s ease}
.home-article>*:not(.home-article-image){margin-inline:24px}
.home-article-image{width:100%;height:auto;aspect-ratio:1200/630;object-fit:cover;
  display:block;margin:0 0 4px;
  border-bottom:1px solid var(--line)}
.home-article:hover{transform:translateY(-3px);border-color:var(--accent-line)}

/* L'etiquette de famille d'un article. Sa teinte vient du catalogue,
   par --famille : c'est la seule couleur non verte admise ici, et elle
   sert a reconnaitre la famille d'un coup d'oeil, pas a decorer. */
.home-article-cat{margin-top:18px;align-self:flex-start;padding:6px 13px;border-radius:999px;
  --famille:#55E695;
  font:800 14px var(--ff-texte);letter-spacing:.10em;text-transform:uppercase;
  color:color-mix(in srgb,var(--famille) var(--dose-famille),var(--text));
  border:1px solid color-mix(in srgb,var(--famille) 40%,transparent);
  background:color-mix(in srgb,var(--famille) 12%,transparent)}
.home-article h3{margin:0;font:800 1.18rem var(--ff-titre);color:var(--text);line-height:1.3}
.home-article-chapo{margin:0;color:var(--muted);font-size:16px;line-height:1.6;flex:1 1 auto}
.home-article-meta{margin:0;color:var(--faint);font-size:14px}

@media(prefers-reduced-motion:reduce){
  .home-article{transition:none}
  .home-article:hover{transform:none}
}

/* Les quatre principes de la methode. Du texte reel, pas du
   remplissage : Google refusait d'indexer une page d'accueil de
   63 mots, jugee trop maigre pour meriter l'index. */
/* Deux colonnes et pas `auto-fit` : a quatre articles, trois colonnes
   laissent un orphelin seul sur la derniere rangee. */
/* Deux colonnes et pas `auto-fit` : a quatre entrees, trois colonnes
   laissent un orphelin seul sur la derniere rangee. */
.home-methode{display:grid;gap:18px;margin:0 0 30px;
  grid-template-columns:repeat(2,minmax(0,1fr))}

@media(max-width:760px){
  /* L'en-tete fixe est passee de 103 a 53 px : le retrait suit. A 78 px
     il reste 25 px entre elle et le personnage, comme avant. */
  .home-shell{padding-top:78px}
  .home-methode{grid-template-columns:1fr}
}

/* ===================================================================
   LA PAGE D'ACCUEIL REFONDUE, 26 aout 2026, bloc 3.
   -------------------------------------------------------------------
   Elle avait trois sections quand la page des offres en avait huit :
   « trop legere par rapport a la qualite de la page partenaires »,
   ecrit Joris dans son pense-bete. Elle en a six, et chacune repond a
   une demande precise du document.
   =================================================================== */

/* --- Le hero -------------------------------------------------------
   Il n'a plus le personnage a droite : la place sert a expliquer le
   service. Tout est centre, sur une colonne de lecture, parce que le
   hero se lit avant de se parcourir. */
.home-hero {
  max-width: 860px;
  margin: 0 auto 20px;
  padding: 24px 0 8px;
}

/* Les deux boutons du hero. Le principal heritait d'une marge haute de
   22 px de .resource-primary, le second n'en avait pas : ils ne se
   posaient donc pas sur la meme ligne de base. Signale par Joris le
   26 aout 2026. La marge est annulee ici, et « stretch » leur donne la
   meme hauteur quel que soit leur contenu. */
.home-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  align-items: stretch;
}

.home-actions > * { margin-top: 0; }

/* Le second bouton ne concurrence pas le premier : pas de fond, une
   simple bordure. Deux boutons pleins cote a cote, c'est deux fois
   aucune priorite. */
.home-secondaire {
  min-height: var(--tap);
  padding: 0 22px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  color: var(--text);
  text-decoration: none;
  font: 600 16px var(--ff-texte);
  transition: border-color .18s ease, background .18s ease;
}

.home-secondaire:hover {
  border-color: var(--accent-line);
  background: var(--surface-2);
}

/* --- La zone de confiance ------------------------------------------
   Trois faits, separes par un point median, sous les boutons. Ils
   viennent du catalogue : c'est la seule facon qu'ils restent vrais. */
.home-confiance {
  margin: 26px auto 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 12px;
  max-width: 62ch;
  color: var(--muted);
  font-size: 16px;
  text-align: center;
}

.home-confiance-point {
  color: var(--accent-ink);
  font-weight: 700;
}

/* --- L'apercu du produit -------------------------------------------
   Une seule carte, celle de l'offre qui verse le plus. Elle est large
   sur grand ecran mais pas pleine largeur : une carte de 1200 px de
   long ne se lit pas comme une carte. */
.home-vedette {
  display: flex;
  justify-content: center;
}

.home-vedette-carte {
  width: min(100%, 560px);
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--surface-2);
  box-shadow: var(--shadow);
  text-align: left;
}

.home-vedette-tete {
  display: flex;
  align-items: center;
  gap: 14px;
}

.home-vedette-logo {
  width: 54px;
  height: 54px;
  flex: 0 0 auto;
  border-radius: 14px;
  object-fit: contain;
  background: var(--surface);
}

.home-vedette-identite {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.home-vedette-identite h3 {
  margin: 0;
  font: 800 1.4rem var(--ff-titre);
  letter-spacing: -.02em;
  color: var(--text);
}

/* La couleur de famille se melange avec le texte, comme partout
   ailleurs : la dose suit le mode, sinon la teinte devient illisible
   sur fond clair. */
.home-vedette-famille {
  align-self: flex-start;
  padding: 4px 11px;
  border-radius: 999px;
  font: 700 14px var(--ff-texte);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--famille, var(--accent)) var(--dose-famille), var(--text));
  border: 1px solid color-mix(in srgb, var(--famille, var(--accent)) 38%, transparent);
  background: color-mix(in srgb, var(--famille, var(--accent)) 11%, transparent);
}

/* Le montant est le premier element lu, et il est vert. C'est la regle
   posee le 23 aout sur les pages de marque : ce qui rapporte doit se
   voir tout de suite. */
.home-vedette-gain {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1;
}

.home-vedette-gain strong {
  font: 800 clamp(2.6rem, 7vw, 3.4rem) var(--ff-titre);
  letter-spacing: -.03em;
  color: var(--accent-ink);
}

.home-vedette-gain span {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--faint);
}

.home-vedette-resume {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-lift);
  line-height: 1.6;
}

/* Le sceau de verification. Le pense-bete demande d'en faire un
   element de marque et non une mention en petit : « je veux rendre
   cette information beaucoup plus importante ». */
.home-vedette-sceau {
  margin: 0;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px 7px 11px;
  border-radius: 999px;
  border: 1px solid var(--accent-line);
  background: var(--accent-wash);
  color: var(--accent-ink);
  font-size: 15px;
  font-weight: 600;
}

.home-vedette-sceau svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
}

.home-vedette-conditions {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 9px;
  border-top: 1px solid var(--line);
  padding-top: 16px;
}

.home-vedette-conditions li {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 16px;
}

.home-vedette-conditions svg {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  color: var(--faint);
}

.home-vedette-carte .resource-primary {
  width: 100%;
  margin-top: 4px;
}

/* --- La methode, en quatre etapes ----------------------------------
   La numerotation dit quelque chose de vrai : c'est un ordre, chaque
   etape suppose la precedente. Elle ne decore pas. */
ol.home-methode {
  counter-reset: etape;
  list-style: none;
  padding: 0;
}

ol.home-methode > li {
  counter-increment: etape;
  position: relative;
  padding: 24px 24px 24px 68px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  text-align: left;
}

ol.home-methode > li::before {
  content: counter(etape, decimal-leading-zero);
  position: absolute;
  left: 24px;
  top: 24px;
  font: 800 1.05rem var(--ff-titre);
  font-variant-numeric: tabular-nums;
  color: var(--accent-ink);
}

ol.home-methode h3 {
  margin: 0 0 10px;
  font: 700 1.12rem var(--ff-titre);
  color: var(--text);
  line-height: 1.35;
}

ol.home-methode p {
  margin: 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.65;
}

/* --- Pourquoi ici --------------------------------------------------- */
.home-atouts {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.home-atouts article {
  padding: 24px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  text-align: left;
}

.home-atouts h3 {
  margin: 0 0 10px;
  font: 700 1.08rem var(--ff-titre);
  color: var(--text);
  line-height: 1.35;
}

.home-atouts p {
  margin: 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.65;
}

/* --- Le dernier appel, et le personnage ------------------------------
   C'est la seule place du personnage sur la page, choix de Joris du
   26 aout 2026 : plus petit, plus bas, a cote du texte. Il signe la
   marque sans occuper la moitie du premier ecran. */
.home-final {
  margin-top: 18px;
  padding: clamp(28px, 5vw, 46px);
  display: flex;
  align-items: center;
  gap: clamp(20px, 4vw, 42px);
  border: 1px solid var(--line);
  border-radius: 30px;
  background: var(--surface);
}

.home-final .home-personnage {
  position: static;
  transform: none;
  width: 150px;
  height: auto;
  flex: 0 0 auto;
}

.home-final-texte {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
}

.home-final-texte h2 {
  margin: 0;
  font: 800 clamp(1.5rem, 3vw, 2.1rem) var(--ff-titre);
  letter-spacing: -.02em;
  line-height: 1.15;
  color: var(--text);
  text-wrap: balance;
}

.home-final-texte p {
  margin: 0;
  max-width: 58ch;
  color: var(--muted);
  font-size: var(--fs-lift);
  line-height: 1.65;
}

.home-final-texte .resource-primary { margin-top: 6px; }

@media (max-width: 760px) {
  .home-final {
    flex-direction: column;
    text-align: center;
  }
  .home-final .home-personnage { width: 118px; }
  .home-final-texte { align-items: center; }
  .home-vedette-carte { padding: 22px 18px; }
}