/*!*************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../../../../../wp-content/themes/aikiwi/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!../../../../../../wp-content/themes/aikiwi/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!../../../../../../wp-content/themes/aikiwi/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./css/src/homepage.scss ***!
  \*************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/* Les 12 déclarations de police (font-face) Satoshi (css/src/_fonts.scss) ne sont plus importés ici (audit perf
   du 2026-10-05, action 14) : app.css, chargé AVANT homepage.css sur toutes les pages
   (functions.php, fct_enqueue_style), déclare les mêmes 12, à l'identique (mêmes URL
   fonts_new/). Patch MANUEL, cf. homepage.scss. */
.color-purple {
  color: #E31C79;
}

:root {
  --ink: #171717;
  --paper: #fff;
  --bg: #fafafa; /* aligne sur #fafafa 2026-09-09 (PO) — patch MANUEL, cf. _variables.scss */
  --muted: #5E5E5E;
  --line: #E6E6E6;
  --kiwi: #D1FA94;
  --kiwi-wash-soft: rgba(209, 250, 148, .2);
  --kiwi-wash: rgba(209, 250, 148, .28);
  --kiwi-wash-strong: rgba(209, 250, 148, .3);
  /* ── 8 jetons AJOUTES pour le mode sombre (2026-09-22, direction A « Ardoise ») ──
     Valeurs CLAIRES identiques a ce qui etait ecrit en dur dans les composants :
     aucun changement visible en mode clair. --on-kiwi / --on-pastel sont VERROUILLES
     sombres dans les deux modes (blanc sur kiwi = 1,05:1 ; blanc sur pastel = 1,00-1,17:1). */
  --paper2: #f4f4f4;
  --line-strong: #CFCFCF;
  --on-kiwi: #171717;
  --on-pastel: #171717;
  --link: #3C1DAD;
  --up: #1A9D5A;
  --down: #D1493F;
  /* Filet au SURVOL des blocs cliquables. En CLAIR : valeur historique inchangee, une encre
     sombre a 16 % qui FONCE le filet (1,17:1 au repos -> 1,40:1 au survol). En SOMBRE la meme
     encre ramenait le filet A LA COULEUR DE LA CARTE (1,01:1) : le contour DISPARAISSAIT.
     L'ombre qui l'accompagne (noir a 5 %) etant invisible sur sombre, le filet porte SEUL
     l'affordance -> il doit s'ECLAIRCIR (demande PO 2026-09-24). */
  --line-hover: rgba(23, 23, 23, .16);
  /* Voile de survol POSE SUR UNE SURFACE (oblong interne de la barre de recherche).
     Une encre sombre a 5 % sur du blanc = gris discret ; la meme sur une surface sombre ne
     pose RIEN. Le jeton bascule le SENS du voile, pas seulement son opacite. */
  --wash-hover: rgba(25,25,25,.05);
  /* Ombre portee des blocs cliquables au SURVOL. Elle valait rgba(0,0,0,.05) : quasi
     invisible en clair, et totalement invisible en sombre (du noir sur du presque-noir).
     Durcie dans les DEUX modes (demande PO 2026-09-24). Le jeton porte l'ombre ENTIERE,
     pas seulement sa couleur : en sombre il faut aussi plus d'etalement. */
  --shadow-hover: 0 8px 22px rgba(0,0,0,.16);
  --glass: rgba(255, 255, 255, .6);
  --shadow: rgba(0, 0, 0, .08);
  /* 4 neutres supplementaires : leurs valeurs CLAIRES sont exactement les litteraux
     qu'ils remplacent (aucun changement visible en clair). Ils existent parce qu'on ne
     peut pas les fondre dans --ink sans deplacer le rendu clair : #000 vs #333 = 1,66:1. */
  --ink-0: #000000;
  --ink-warm: #2f2a26;
  --ink-soft: #333333;
  --line-2: #ededed;
  /* Voiles de verre (header colle, scrims, sommaires collants). Ce sont des rgba, pas des
     hex : la substitution litteral -> jeton ne les voyait pas, et le header restait un
     voile BLANC sur page sombre (mesure : rgba(255,255,255,.6) avec du texte #F2F2F3). */
  --veil: rgba(255, 255, 255, .92);
  --veil-soft: rgba(255, 255, 255, .88);
}

/* ══ MODE SOMBRE — direction A « Ardoise » (arbitrage PO 2026-09-22) ══════════════
   Un seul jeu de valeurs, DEUX portes : le choix explicite (bouton) et la preference
   systeme. La porte systeme s'ecrit sous `:root:not([data-theme=light])` — (0,1,1) — et
   SURTOUT PAS sous `:root` nu : homepage.css est enqueue sans condition APRES app.css et
   resert le meme `:root` (0,0,1) ; une media query n'ajoute AUCUNE specificite, donc un
   `@media{:root{}}` serait ecrase en silence. Ce bloc est servi par les DEUX bundles
   (_variables.scss est importe par les deux) : voulu, et insensible a l'ordre. */
:root[data-theme=dark] {
  --bg: #101012;
  --paper: #1c1c1e;
  --paper2: #26262a;
  --ink: #F2F2F3;
  --muted: #9A9AA1;
  --line: #3A3A42;
  --line-strong: #4C4C55;
  --link: #9FC7FF;
  --up: #4ADE80;
  --down: #F87171;
  --glass: rgba(28, 28, 30, .72);
  --shadow: rgba(0, 0, 0, .55);
  --ink-0: #FFFFFF;
  --ink-warm: #EDEAE6;
  --ink-soft: #D8D8DE;
  --line-2: #2E2E35;
  /* Survol : on ECLAIRCIT (2,50:1 contre la carte, le double du repos a 1,26:1) au lieu
     d'assombrir. Valeur OPAQUE a dessein : une encre translucide se composerait avec la
     carte et redonnerait le defaut. Le REPOS ne bouge pas, il est valide PO. */
  --line-hover: #5A5A66;
  --wash-hover: rgba(255,255,255,.08);   /* voile CLAIR : c'est l'inverse, pas plus fort */
  /* Sombre : un halo noir sur une page presque noire ne se voit que s'il est FRANC.
     .55 d'opacite et 30px d'etalement, contre .16/22px en clair. */
  --shadow-hover: 0 10px 30px rgba(0,0,0,.55);
  --veil: rgba(28, 28, 30, .92);
  --veil-soft: rgba(28, 28, 30, .88);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) {
    --bg: #101012;
    --paper: #1c1c1e;
    --paper2: #26262a;
    --ink: #F2F2F3;
    --muted: #9A9AA1;
    --line: #3A3A42;
    --line-strong: #4C4C55;
    --link: #9FC7FF;
    --up: #4ADE80;
    --down: #F87171;
    --glass: rgba(28, 28, 30, .72);
    --shadow: rgba(0, 0, 0, .55);
  --ink-0: #FFFFFF;
  --ink-warm: #EDEAE6;
  --ink-soft: #D8D8DE;
  --line-2: #2E2E35;
  /* Survol : on ECLAIRCIT (2,50:1 contre la carte, le double du repos a 1,26:1) au lieu
     d'assombrir. Valeur OPAQUE a dessein : une encre translucide se composerait avec la
     carte et redonnerait le defaut. Le REPOS ne bouge pas, il est valide PO. */
  --line-hover: #5A5A66;
  --wash-hover: rgba(255,255,255,.08);   /* voile CLAIR : c'est l'inverse, pas plus fort */
  /* Sombre : un halo noir sur une page presque noire ne se voit que s'il est FRANC.
     .55 d'opacite et 30px d'etalement, contre .16/22px en clair. */
  --shadow-hover: 0 10px 30px rgba(0,0,0,.55);
  --veil: rgba(28, 28, 30, .92);
  --veil-soft: rgba(28, 28, 30, .88);
  }
}

/* Titre de BLOC (h2 de section : home, hub blog…).
   Valeur issue du test PO en cours sur la home (Satoshi-Variable 400 / 42px, cap
   mobile a 22px, interligne SANS UNITE pour qu'il suive la taille tout seul).
   ⚠️ Le mixin porte la VALEUR, pas la regle : le hub blog l'appelle, la home garde
   pour l'instant sa propre declaration (c'est un test que le PO peut refuser d'un
   bloc). Si le test est valide, la home devrait appeler ce mixin a son tour — a ce
   moment-la, la valeur ne vivra plus qu'ici. Proposition faite a la TdC. */
:root {
  --hover-ease: cubic-bezier(.2, .7, .2, 1);
  --hover-dur: .16s;
  --hover-lift: -3px;
  --hover-lift-tile: -2px;
  --hover-press: .98;
  --hover-shadow: 0 10px 26px rgba(23, 23, 23, .10);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --hover-lift: 0;
    --hover-lift-tile: 0;
    --hover-press: 1;
  }
}
.bouton_secondaire {
  border: 1px solid var(--muted);
  border-radius: 50px;
  color: var(--muted);
  padding: 13px 0;
  min-width: 200px;
  text-align: center;
  font-size: 16px;
  font-weight: 400;
  display: inline-block;
  margin-top: 15px;
  line-height: 1;
  text-transform: none;
  transition: all 0.5s ease;
  cursor: pointer;
}
.bouton_secondaire:hover {
  background: var(--ink-warm);
  color: var(--paper);
}
.bouton_secondaire.noir {
  border: 1px solid var(--ink-warm);
  border-radius: 50px;
  color: var(--paper);
  padding: 13px 0;
  min-width: 200px;
  text-align: center;
  font-size: 16px;
  font-weight: 400;
  display: inline-block;
  margin-top: 15px;
  line-height: 1;
  text-transform: none;
  transition: all 0.5s ease;
  background: var(--ink-warm);
  cursor: pointer;
}
.bouton_secondaire.noir:hover {
  border-color: #d1fa94;
  background: #d1fa94;
  color: var(--muted);
}

.new_bouton_secondaire {
  border: 1px solid var(--muted);
  border-radius: 50px;
  color: var(--muted);
  padding: 13px 0;
  min-width: 200px;
  text-align: center;
  font-size: 16px;
  font-weight: 400;
  display: inline-block;
  margin-top: 15px;
  line-height: 1;
  text-transform: none;
  transition: all 0.5s ease;
  cursor: pointer;
  border-radius: 5px;
  border-color: var(--muted);
  padding: 10px;
  min-width: 0;
  transition: none;
}
.new_bouton_secondaire:hover {
  background: var(--ink-warm);
  color: var(--paper);
}
.new_bouton_secondaire:hover {
  border-color: #d1fa94;
  background: #d1fa94;
  color: var(--ink-warm);
  font-weight: 700;
}
.new_bouton_secondaire::after {
  content: attr(data-text);
  font-weight: 700;
  visibility: hidden;
  height: 0;
  overflow: hidden;
  display: block;
}

@keyframes bounceLeft {
  0%, 20%, 50%, 80%, 100% {
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
  40% {
    -ms-transform: translateX(20px);
    transform: translateX(20px);
  }
  60% {
    -ms-transform: translateX(10px);
    transform: translateX(10px);
  }
}
/* /left bounce */
/* =========================================================================
   bleed — LE CALCUL DE BASE : faire sortir un bloc de son `.wrapper` pour
   qu'il file d'un bord à l'autre de l'écran. Rien d'autre (pas de scroll).
   À utiliser tel quel pour un bloc NON scrollable (carte de contenu, pilule,
   bandeau…) ; pour une PISTE scrollable, prendre `edge-to-edge` ci-dessous,
   qui consomme ce mixin et ajoute le comportement de piste.

   ⚠️ POURQUOI PAS `width:100vw; margin:0 calc(50% - 50vw)` : `100vw` INCLUT
   la barre de défilement alors que le `.wrapper` se calcule SANS elle -> le
   bloc déborde de la moitié de la scrollbar et crée un scroll horizontal
   parasite (~7px). Cette variante a été ÉLIMINÉE du thème (0 déclaration au
   2026-07-29, il n'en reste que des mentions en commentaire) : ne pas la
   réintroduire.

   D'OÙ VIENT LE 1/18 : le `.wrapper` fait 90% du viewport et il est centré,
   donc la gouttière vaut 5% du viewport de chaque côté. Rapportée à la
   largeur du wrapper (= 100% pour un de ses enfants), cette gouttière vaut
   5/90 = 1/18. `calc(-100% / 18)` atteint donc EXACTEMENT le bord de
   l'écran, quelle que soit la largeur de la barre de défilement.

   ⚠️ CONDITION : l'élément doit être un ENFANT DIRECT du `.wrapper`
   (90% centré). Sous un parent à PADDING FIXE (header, modale), ce rapport
   est faux -> utiliser `edge-to-edge-pad($pad)` (plus bas).

   NB : un bloc devenu bord à bord perd en général son `border-radius` et ses
   filets latéraux (un coin arrondi au ras de l'écran fait accidentel) — à la
   charge du consommateur, le mixin ne touche pas à l'habillage.
   ========================================================================= */
/* =========================================================================
   track — le comportement de PISTE SCROLLABLE seul : défilement horizontal
   au doigt, sans barre visible. AUCUNE marge négative, donc utilisable
   TELLE QUELLE pour une piste qui vit DÉJÀ dans un conteneur sorti du wrapper
   (cas fiche IA : le breakout est porté par `.fiche_topbars`, la piste qui
   défile est le `<ul>` à l'intérieur — lui appliquer `edge-to-edge` la ferait
   re-sortir une 2e fois, qu'il faudrait ensuite neutraliser).

   MARGES DE DÉBUT/FIN : volontairement ABSENTES ici. Deux options au
   consommateur, selon la nature de ses enfants :
   - `> *:first-child`/`:last-child` (ce que fait `edge-to-edge`) — à éviter si
     la piste contient un enfant non-item (ex. un indicateur `.tab_ind` injecté
     en JS en dernier enfant : la marge tomberait dessus) ;
   - `padding-left`/`padding-right` sur la piste — le padding de fin EST honoré
     (mesuré : à scroll max, l'espace subsiste après le dernier élément).
   ========================================================================= */
/* =========================================================================
   edge-to-edge — LA COMPOSITION courante : une piste scrollable qui file d'un
   bord à l'autre de l'écran, le 1er élément restant aligné sur la colonne de
   contenu. = `bleed` (sortie du wrapper) + `track` (piste) + marges d'extrémités.
   Consommateurs : onglets du blog, pistes de carrousels, pastilles.

   ⚠️ QUELLE BRIQUE CHOISIR (4 cas, une seule source pour chaque mécanisme) :
   - bloc NON scrollable, parent `.wrapper`      -> `bleed`                (ci-dessus)
   - piste DÉJÀ dans un conteneur sorti          -> `track($inset)`        (ci-dessus)
   - piste scrollable, parent `.wrapper`         -> `edge-to-edge`         (ici)
   - parent à PADDING FIXE (header, modale)      -> `edge-to-edge-pad($pad)` (plus bas)

   CONDITIONS D'EMPLOI :
   1. enfant direct du `.wrapper` (cf. `bleed`) ;
   2. les marges de début/fin sont portées par les ENFANTS EXTRÊMES : robuste
      quel que soit le moteur. ⚠️ Ne convient PAS si la piste contient un
      enfant qui n'est pas un item (indicateur injecté en JS…) -> composer
      soi-même `bleed` + `track` + un `padding` (cf. `track`).

   NB : le mixin ne pose PAS `display`/`flex` — c'est au composant de définir
   sa mise en page (ex. `flex: 1 1 100%` si la piste est elle-même un item
   flex qui doit occuper toute la ligne).
   ========================================================================= */
/* =========================================================================
   edge-to-edge-pad — même intention que `edge-to-edge`, mais pour une piste
   dont le parent n'est PAS un `.wrapper` : un conteneur à PADDING FIXE
   (header, modale, encart…). On annule le padding du parent par une marge
   négative de la même valeur, puis on le restitue en padding interne pour
   que le 1er élément reste aligné sur le contenu.

   ⚠️ Ne pas utiliser `edge-to-edge` (formule en 1/18) ici : ce rapport
   suppose la géométrie du `.wrapper` (90% centré) et serait faux.

   MARGE DE FIN : le `padding-right` suffit — mesuré honoré (Chrome 2026, sur
   `.hs_hero_suggest` : à scroll max, 12px subsistent après le dernier
   élément). Si un moteur l'ignorait (comportement historique de certains
   conteneurs scrollables), ajouter au consommateur :
   `> *:last-child{ margin-right: $pad; }`.
   ========================================================================= */
.clearfix:after, .row:after {
  display: block;
  content: "";
  clear: both;
}

.wrapper {
  width: 90%;
  max-width: 1360px;
  margin: 0 auto;
}

.row .col1 {
  float: left;
}
.row .col1 {
  width: 5.3333333333%;
  margin-left: 1.5%;
  margin-right: 1.5%;
}
.row .col1.nogutter {
  width: 8.3333333333%;
  margin-left: 0;
  margin-right: 0;
}
.row .col1.nogutterleft, .row .col1.nogutterright {
  width: 6.8333333333%;
}
.row .col1.nogutterleft {
  margin-left: 0;
}
.row .col1.nogutterright {
  margin-right: 0;
}
.row .col.nogutterleft {
  margin-left: 0;
}
.row .col2 {
  float: left;
}
.row .col2 {
  width: 13.6666666667%;
  margin-left: 1.5%;
  margin-right: 1.5%;
}
.row .col2.nogutter {
  width: 16.6666666667%;
  margin-left: 0;
  margin-right: 0;
}
.row .col2.nogutterleft, .row .col2.nogutterright {
  width: 15.1666666667%;
}
.row .col2.nogutterleft {
  margin-left: 0;
}
.row .col2.nogutterright {
  margin-right: 0;
}
.row .col.nogutterleft {
  margin-left: 0;
}
.row .col3 {
  float: left;
}
.row .col3 {
  width: 22%;
  margin-left: 1.5%;
  margin-right: 1.5%;
}
.row .col3.nogutter {
  width: 25%;
  margin-left: 0;
  margin-right: 0;
}
.row .col3.nogutterleft, .row .col3.nogutterright {
  width: 23.5%;
}
.row .col3.nogutterleft {
  margin-left: 0;
}
.row .col3.nogutterright {
  margin-right: 0;
}
.row .col.nogutterleft {
  margin-left: 0;
}
.row .col4 {
  float: left;
}
.row .col4 {
  width: 30.3333333333%;
  margin-left: 1.5%;
  margin-right: 1.5%;
}
.row .col4.nogutter {
  width: 33.3333333333%;
  margin-left: 0;
  margin-right: 0;
}
.row .col4.nogutterleft, .row .col4.nogutterright {
  width: 31.8333333333%;
}
.row .col4.nogutterleft {
  margin-left: 0;
}
.row .col4.nogutterright {
  margin-right: 0;
}
.row .col.nogutterleft {
  margin-left: 0;
}
.row .col5 {
  float: left;
}
.row .col5 {
  width: 38.6666666667%;
  margin-left: 1.5%;
  margin-right: 1.5%;
}
.row .col5.nogutter {
  width: 41.6666666667%;
  margin-left: 0;
  margin-right: 0;
}
.row .col5.nogutterleft, .row .col5.nogutterright {
  width: 40.1666666667%;
}
.row .col5.nogutterleft {
  margin-left: 0;
}
.row .col5.nogutterright {
  margin-right: 0;
}
.row .col.nogutterleft {
  margin-left: 0;
}
.row .col6 {
  float: left;
}
.row .col6 {
  width: 47%;
  margin-left: 1.5%;
  margin-right: 1.5%;
}
.row .col6.nogutter {
  width: 50%;
  margin-left: 0;
  margin-right: 0;
}
.row .col6.nogutterleft, .row .col6.nogutterright {
  width: 48.5%;
}
.row .col6.nogutterleft {
  margin-left: 0;
}
.row .col6.nogutterright {
  margin-right: 0;
}
.row .col.nogutterleft {
  margin-left: 0;
}
.row .col7 {
  float: left;
}
.row .col7 {
  width: 55.3333333333%;
  margin-left: 1.5%;
  margin-right: 1.5%;
}
.row .col7.nogutter {
  width: 58.3333333333%;
  margin-left: 0;
  margin-right: 0;
}
.row .col7.nogutterleft, .row .col7.nogutterright {
  width: 56.8333333333%;
}
.row .col7.nogutterleft {
  margin-left: 0;
}
.row .col7.nogutterright {
  margin-right: 0;
}
.row .col.nogutterleft {
  margin-left: 0;
}
.row .col8 {
  float: left;
}
.row .col8 {
  width: 63.6666666667%;
  margin-left: 1.5%;
  margin-right: 1.5%;
}
.row .col8.nogutter {
  width: 66.6666666667%;
  margin-left: 0;
  margin-right: 0;
}
.row .col8.nogutterleft, .row .col8.nogutterright {
  width: 65.1666666667%;
}
.row .col8.nogutterleft {
  margin-left: 0;
}
.row .col8.nogutterright {
  margin-right: 0;
}
.row .col.nogutterleft {
  margin-left: 0;
}
.row .col9 {
  float: left;
}
.row .col9 {
  width: 72%;
  margin-left: 1.5%;
  margin-right: 1.5%;
}
.row .col9.nogutter {
  width: 75%;
  margin-left: 0;
  margin-right: 0;
}
.row .col9.nogutterleft, .row .col9.nogutterright {
  width: 73.5%;
}
.row .col9.nogutterleft {
  margin-left: 0;
}
.row .col9.nogutterright {
  margin-right: 0;
}
.row .col.nogutterleft {
  margin-left: 0;
}
.row .col10 {
  float: left;
}
.row .col10 {
  width: 80.3333333333%;
  margin-left: 1.5%;
  margin-right: 1.5%;
}
.row .col10.nogutter {
  width: 83.3333333333%;
  margin-left: 0;
  margin-right: 0;
}
.row .col10.nogutterleft, .row .col10.nogutterright {
  width: 81.8333333333%;
}
.row .col10.nogutterleft {
  margin-left: 0;
}
.row .col10.nogutterright {
  margin-right: 0;
}
.row .col.nogutterleft {
  margin-left: 0;
}
.row .col11 {
  float: left;
}
.row .col11 {
  width: 88.6666666667%;
  margin-left: 1.5%;
  margin-right: 1.5%;
}
.row .col11.nogutter {
  width: 91.6666666667%;
  margin-left: 0;
  margin-right: 0;
}
.row .col11.nogutterleft, .row .col11.nogutterright {
  width: 90.1666666667%;
}
.row .col11.nogutterleft {
  margin-left: 0;
}
.row .col11.nogutterright {
  margin-right: 0;
}
.row .col.nogutterleft {
  margin-left: 0;
}
.row .col12 {
  float: left;
}
.row .col12 {
  width: 97%;
  margin-left: 1.5%;
  margin-right: 1.5%;
}
.row .col12.nogutter {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}
.row .col12.nogutterleft, .row .col12.nogutterright {
  width: 98.5%;
}
.row .col12.nogutterleft {
  margin-left: 0;
}
.row .col12.nogutterright {
  margin-right: 0;
}
.row .col.nogutterleft {
  margin-left: 0;
}

/* TABLETTE */
/* FIN TABLETTE */
/* MOBILE */
@media screen and (max-width: 640px) {
  .row .col {
    width: 90%;
    margin-left: 5%;
    margin-right: 5%;
  }
  .row .col.nogutter {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
  .row .col.nogutterleft {
    width: 95%;
    margin-left: 0;
    margin-right: 5%;
  }
  .row .col.nogutterright {
    width: 95%;
    margin-left: 5%;
    margin-right: 0;
  }
}

/* ===== Catégories (1er niveau) — tuiles image uniformes =====
   S'appuie sur l'ossature .home_carousel (_carouselIas.scss) pour le head,
   les flèches et le .home_carousel_track (scroll-snap + carouselIas.js). */
.home_categories {
  margin-top: 40px;
}
.home_categories .cat_tile {
  flex: 0 0 150px;
  width: 150px;
  margin: 0;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
  transition: transform var(--hover-dur) var(--hover-ease), box-shadow var(--hover-dur) var(--hover-ease);
}
.home_categories .cat_tile .cat_tile_img {
  display: block;
  width: 100%;
  height: 104px;
  border-radius: 14px;
  overflow: hidden;
  background: var(--cat-color, var(--bg));
}
.home_categories .cat_tile .cat_tile_img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.home_categories .cat_tile .cat_tile_name {
  display: block;
  text-align: center;
  /* Poids 500 (retour PO) : la fonte doit suivre -> Satoshi-Medium, pas Satoshi-Bold. */
  font-family: "Satoshi-Medium";
  font-weight: 500;
  font-size: 14px;
  line-height: 1.25;
  color: var(--ink);
}
.home_categories .cat_tile:hover {
  transform: translateY(var(--hover-lift-tile));
}
.home_categories .cat_tile:hover .cat_tile_img {
  box-shadow: 0 7px 18px rgba(var(--cat-rgb, 209, 250, 148), 0.16);
}
.home_categories .cat_tile:active {
  transform: scale(var(--hover-press));
}

/* Desktop : n'afficher que des tuiles ENTIÈRES (fraction exacte de la piste). La piste porte
   déjà container-type:inline-size (cf. _carouselIas.scss) -> N s'adapte à sa largeur réelle.
   L'image (.cat_tile_img) garde sa hauteur fixe : les tuiles s'élargissent en bannières. */
@media (min-width: 901px) {
  .home_categories .home_carousel_track .cat_tile {
    width: auto;
    min-width: 0;
  }
  @container (min-width:1240px) {
    .home_categories .home_carousel_track .cat_tile {
      flex: 0 0 calc((100% - 80px) / 6);
    } /* 6 tuiles */
  }
  @container (min-width:960px) and (max-width:1239.98px) {
    .home_categories .home_carousel_track .cat_tile {
      flex: 0 0 calc((100% - 64px) / 5);
    } /* 5 tuiles */
  }
  @container (min-width:700px) and (max-width:959.98px) {
    .home_categories .home_carousel_track .cat_tile {
      flex: 0 0 calc((100% - 48px) / 4);
    } /* 4 tuiles */
  }
  @container (max-width:699.98px) {
    .home_categories .home_carousel_track .cat_tile {
      flex: 0 0 calc((100% - 32px) / 3);
    } /* 3 tuiles */
  }
}
@media (max-width: 900px) {
  .home_categories {
    margin-top: 30px;
  }
  /* Le track passe déjà edge-to-edge (voir _carouselIas.scss). Marges de début/fin
     via 1re et dernière tuile (padding de fin ignoré sur conteneur flex scrollable).
     En % (pas en vw) : la piste vaut 100% du parent, donc 5% = la gouttière du wrapper,
     sans l'erreur de la barre de défilement (cf. commentaire dans _carouselIas.scss). */
  .home_categories .home_carousel_track > .cat_tile:first-child {
    margin-left: 5%;
  }
  .home_categories .home_carousel_track > .cat_tile:last-child {
    margin-right: 5%;
  }
  .home_categories .cat_tile {
    flex: 0 0 30%;
    width: 30%;
  }
  .home_categories .cat_tile .cat_tile_img {
    height: 26vw;
  }
}
@media (max-width: 520px) {
  .home_categories .cat_tile {
    flex: 0 0 38%;
    width: 38%;
  }
  .home_categories .cat_tile .cat_tile_img {
    height: 32vw;
  }
}
/* prefers-reduced-motion : géré par les tokens --hover-lift-tile/--hover-press (0/1) dans _variables.scss. */
/* ===== Home : rythme vertical UNIFORME (retour PO) =====
   UNE seule règle pour toute la page :
        …bloc précédent ── 32px ── TITRE ── 12px ── bloc ── 32px ── TITRE suivant…
   Donc : chaque section majeure ne porte QUE sa marge HAUTE (32px, bas = 0) et chaque
   en-tête de section a 12px sous lui. Base propre -> écarts prévisibles, identiques que
   <main> soit en flow (desktop) ou en flex (mobile, pas de fusion de marges).
   Les composants ne doivent PAS redéclarer ces écarts (on les neutralise ici). */
body.page-template-template-home {
  /* --- Écart STANDARD entre blocs majeurs : 32px (marge HAUTE seule). --- */
  /* Pas de padding vertical propre : la séparation vient UNIQUEMENT du rythme. */
  /* Le thème pose un global `main section{margin-bottom:32px}` : les <section> IMBRIQUÉES
     (les .clv_block des teasers classement/modèles) héritaient donc d'un bas fantôme de
     32px, qui allongeait .clv_duocol (392px pour un bloc de 360px) et faussait le rythme.
     Le rythme est piloté ici, pas par ce global. */
  /* --- Écart TITRE -> BLOC : 12px partout. --- */
  /* Carrousels : la piste porte déjà un padding-top de 13px (respiration du halo de survol,
     cf. _carouselIas.scss) qui FAIT l'écart titre->cartes. L'en-tête n'ajoute donc rien —
     sinon on cumulerait (13 + n). Si ce padding rebouge, c'est ici qu'il faut réajuster. */
  /* Groupe « Explore par catégorie » : son titre de section coiffe 3 carrousels ; on garde
     le même 12px sous le titre, et les carrousels du groupe restent SERRÉS entre eux
     pour se lire comme un seul bloc. */
  /* La ligne « dernière MAJ modèle » COMPLÈTE le bloc modèles : elle lui reste collée
     (12px) au lieu de l'écart standard, sinon elle se lit comme un bloc autonome. */
  /* Bas de page : la newsletter enchaîne sur le même écart (son margin-top propre a été
     retiré du composant — retour PO). */
}
body.page-template-template-home .home_carousel,
body.page-template-template-home .hct,
body.page-template-template-home .home_flagship,
body.page-template-template-home .home_models,
body.page-template-template-home .home_hub,
body.page-template-template-home .home_explore,
body.page-template-template-home #home_seo_links {
  margin-top: 32px;
  margin-bottom: 0;
}
body.page-template-template-home .home_flagship {
  padding-top: 0;
  padding-bottom: 0;
}
body.page-template-template-home .clv_block {
  margin-bottom: 0;
}
body.page-template-template-home .hct .hct_head,
body.page-template-template-home .home_flagship .hf_head,
body.page-template-template-home .home_models .hm_head {
  margin-bottom: 12px;
}
body.page-template-template-home .home_hub .clv_sec_head {
  margin-bottom: 12px; /* Nouveaux modèles · Comparaisons populaires (blocs du hub, PO 2026-09-21) */
}
body.page-template-template-home #home_seo_links h2 {
  margin-bottom: 12px;
}
body.page-template-template-home .home_carousel .home_carousel_head {
  margin-bottom: 0;
}
body.page-template-template-home .home_explore {
  margin-bottom: 0;
}
body.page-template-template-home .home_explore + .home_carousel {
  margin-top: 12px;
}
body.page-template-template-home #newsletter_bottom {
  margin-top: 32px;
}

@media (max-width: 900px) {
  body.page-template-template-home {
    /* main = flex pour garder la sentinelle #hdr_sentinel en tête (header) ;
       l'ordre des sections suit le desktop. */
    /* Écart standard resserré sur petit écran (marges NON fusionnées en flex). */
    /* la ligne reste collée au bloc modèles */
  }
  body.page-template-template-home main {
    display: flex;
    flex-direction: column;
  }
  body.page-template-template-home main > #hdr_sentinel {
    order: -2;
  }
  body.page-template-template-home .home_carousel,
  body.page-template-template-home .hct,
  body.page-template-template-home .home_flagship,
  body.page-template-template-home .home_models,
  body.page-template-template-home .home_hub,
  body.page-template-template-home .home_explore,
  body.page-template-template-home #home_seo_links {
    margin-top: 26px;
    margin-bottom: 0;
  }
  body.page-template-template-home .home_explore + .home_carousel {
    margin-top: 12px;
  }
  body.page-template-template-home #newsletter_bottom {
    margin-top: 26px;
  }
}
/* ============================================================================
   TEST PO — TITRES DE BLOC de la home en Satoshi-Variable 400 / 42px.
   42px est VOLONTAIREMENT HORS de la gamme fermée (10/12/14/16/18/20/22/24), et ce
   n'est pas un oubli : au-dessus de 24 rien n'a jamais été arbitré, c'est la zone
   ouverte — et ce test est précisément ce qui servira à trancher. Ne pas « ramener
   dans la gamme » pour respecter la règle : ici la règle ne dit rien, elle attend
   une décision.
   (Le 24px d'une version précédente venait d'une hésitation du PO lue comme une
   contrainte ; sa demande réelle est de VOIR ce que rend 42px.)

   POSÉ ICI et non dans les 5 composants : c'est un TEST que le PO peut refuser.
   Un bloc unique se retire d'un coup ; 5 éditions dispersées se retirent mal.
   _homeLayout est importé EN DERNIER (app.scss:85), d'où les égalités de
   spécificité qui tournent en notre faveur.

   ⚠️ LES SÉLECTEURS SONT CEUX DU CSS COMPILÉ, pas ceux du SCSS source : les règles
   sont nichées et gagnent des classes en chemin. `.hm_head h2` compile en
   `.clv.clv--home.home_models .hm_head h2` (0,4,1) — une règle écrite `.hm_head h2`
   (0,1,1) aurait perdu le duel SANS RIEN SIGNALER, et le PO aurait jugé une page
   à moitié modifiée. Vérifié rule par rule dans app.css avant d'écrire.

   NE CHANGENT PAS (hiérarchie posée en 1.6.506, elle doit survivre au test) :
   - sous-titres Image/Texte/Marketing : exclus PAR CONSTRUCTION via
     `:not(.home_carousel--sub)`, et non par l'ordre des règles — leur protection
     actuelle ne tient qu'à l'ordre du fichier, on ne s'appuie pas dessus ;
   - sous-blocs « Top IA du moment », « Populaires en France », « Modèles IA » :
     ce sont des <h3> dans .clv_head, aucune de ces règles ne les atteint.

   Couvre aussi le mobile : les surcharges de _carouselIas.scss (142-144) et de
   _seoLinks.scss (31) sont battues par spécificité ou par ordre d'import, donc
   rien à modifier là-bas — un test doit se retirer en un seul endroit.
   ============================================================================ */
.home_carousel:not(.home_carousel--sub) .home_carousel_head h2,
.home_carousel:not(.home_carousel--sub) .hc_title_txt,
.home_explore .home_explore_head h2,
.clv.clv--home .hct_head h2,
.home_flagship .hf_head h2,
.clm.clm--home.home_models .hm_head h2,
.clv.clv--home.home_hub .clv_sec_title,
#home_seo_links h2 { /* Explore toutes les catégories d'IA */
  font-family: "Satoshi-Variable";
  font-weight: 400;
  font-size: 42px;
  /* SANS UNITÉ, volontairement : l'interligne suit la taille tout seul, donc le cap mobile
     n'a rien à recaper sur cette propriété — une valeur en px demanderait une SECONDE valeur
     à maintenir en parallèle, et c'est exactement ce qu'on répare ici.
     CE QU'ON RÉPARE : le thème pose un GLOBAL `h2{ font-size:32px; line-height:45px }` — un
     interligne ABSOLU. Les titres de carrousel, d'explore et du bloc SEO y échappent parce
     qu'ils déclarent leur propre `line-height:1.15` ; les 3 teasers (.hct_head/.hf_head/
     .hm_head) n'en déclarent AUCUN et héritaient donc de 45px À TOUTE TAILLE — 45px d'interligne
     pour un texte de 22px, soit 20px de vide sous un titre d'une seule ligne.
     ⚠️ DÉFAUT ANTÉRIEUR À CE TEST, pas un oubli du cap mobile : ces 3 titres étaient déjà en
     22px/45px avant, sur desktop comme sur mobile. Le test l'a seulement rendu visible.
     La vraie correction est de scoper le global `h2{}` (même motif que `article{padding-bottom}`
     et `aside{position:fixed}`) : hors périmètre, signalé à la TdC. */
  line-height: 1.15;
}

/* — MOBILE : la TAILLE seule redescend à 22px (retour PO « en mobile on laisse tout en 22px »).
     La famille et la graisse (Satoshi-Variable / 400) RESTENT : c'est l'objet du test, et le PO
     n'a parlé que de la taille. Les titres mobiles seront donc plus légers qu'avant (800/900).
     Le cap vit ICI et pas dans _carouselIas.scss : les règles ci-dessus battent déjà ses
     surcharges mobiles (142-144), donc compter sur elles ne produirait rien.
     `.hc_title_txt` est répété : c'est lui qui porte la taille du titre à picto — l'oublier
     ferait repartir « Tendances du moment » à une autre taille que son conteneur (piège du
     tour précédent). Sous-titres (18px) et sous-blocs (20px) NON concernés : « tout en 22 »
     vise les titres de BLOC, pas la page. */
@media (max-width: 900px) {
  .home_carousel:not(.home_carousel--sub) .home_carousel_head h2,
  .home_carousel:not(.home_carousel--sub) .hc_title_txt,
  .home_explore .home_explore_head h2,
  .clv.clv--home .hct_head h2,
  .home_flagship .hf_head h2,
  .clm.clm--home.home_models .hm_head h2,
  .clv.clv--home.home_hub .clv_sec_title,
  #home_seo_links h2 {
    font-size: 22px;
  }
}
/* — ÉCART ENTRE BLOCS : 32 -> 48px (retour PO « espacer davantage »).
     Ce test CHANGE DÉLIBÉRÉMENT le rythme vertical 32/12 validé en 1.6.506 : à 42px, les
     titres mangeaient la respiration entre les blocs. 48 = le pas suivant sur la même trame
     de 8, pas une valeur inventée.
     DESKTOP UNIQUEMENT : en mobile le rythme est à 26px et les titres redescendent à 22px,
     il n'y a rien à desserrer — élargir là-bas serait un effet de bord non demandé.
     Sélecteur préfixé par `body.page-template-template-home` pour égaler la règle de 32px
     (0,2,1) qu'il doit battre ; à spécificité égale, c'est la position en fin de fichier qui
     tranche. */
@media (min-width: 901px) {
  body.page-template-template-home {
    /* SOUS-carrousels : 32px, pas 48 (arbitrage PO). On retrouve une hiérarchie d'espacement
       — 48 entre blocs MAJEURS, 32 entre SOUS-blocs — là où le rythme d'origine appliquait
       une valeur unique à tout le monde. 32 est le pas précédent sur la même trame de 8.
       ⚠️ Le PREMIER sous-carrousel garde ses 12px : il est tenu par
       `.home_explore + .home_carousel` (3 classes) qui BAT ce sélecteur-ci (2 classes), donc
       la règle du dessous ne l'atteint pas — c'est voulu, ces 12px sont un rapport
       titre -> contenu (« Image » sous « Explore par catégorie »), pas un écart entre blocs.
       Vérifié sur le CSS compilé avant d'écrire, pas sur la source. */
  }
  body.page-template-template-home .home_carousel,
  body.page-template-template-home .hct,
  body.page-template-template-home .home_flagship,
  body.page-template-template-home .home_models,
  body.page-template-template-home .home_hub,
  body.page-template-template-home .home_explore,
  body.page-template-template-home #home_seo_links {
    margin-top: 48px;
  }
  body.page-template-template-home .home_carousel--sub {
    margin-top: 32px;
  }
}