/* Les cartes posees sur le bas du heros (th_element « bande » et « elevees », piste PHOTO, etape B, 16/10/2026 ; option B de
   retours/cartes-hero/OPTIONS.md, choisie par Quentin, et l'option A gardee pour plus tard). Chargee une fois par
   core/blocs/_bande_cartes.blade.php, dans la section de la bande. Plus de dessins de 120 px ni de texte centre : une icone
   de App\Theme\Icones par entree, le titre au debut de la ligne, le texte justifie (texte courant, Quentin 12/10/2026). Les
   cartes ne sont ni des liens ni des boutons : aucune fuite du theme a neutraliser. Sous /ar, dir="rtl" sur la section.

   Ce que la bande chevauche (classe posee par le serveur, App\Blocs\CartesHero::apres) :
   - « sur-photo » : le heros Photo and ink (heros--suivi). La bande commence au bas du heros ; la photo, l'encre et la lueur
     du heros continuent dessous (--heros-sous, heros-photo.css) ; la bande dessine la fin exacte : le filet orange du heros
     au milieu du panneau, puis le fond blanc de la page, qui couvre ce que le heros peint plus bas. Les deux calques sont
     ceux du conteneur, qui a exactement la hauteur du panneau : son milieu (50 %) est celui du panneau, quelle que soit la
     longueur des textes, le nombre de rangees, la langue ou une classe en plus qui change les marges de la section
     (/defensive-actions garde son « p-b-2x »). Ils debordent sur toute la largeur et la section les coupe (overflow hidden :
     aucun defilement de cote). Une couche d'encre, sous le heros, couvre le haut de la bande si le heros s'arretait plus
     haut (aucun blanc entre les deux).
     Ordre de peinture : ni la section ni le conteneur ne creent de contexte d'empilement ; l'encre (::before, z-index 0)
     passe sous le heros (z-index 1, heros-photo.css), le fond blanc et le filet (::after, z-index 2) dessus, le panneau
     (z-index 3) au-dessus de tout.
   - « sur-encre » : une bande d'encre de l'option 2 (core.blocs._bandeau_marque) : la bande continue l'encre jusqu'a son
     milieu (--ch-fond-haut, l'encre #1F222B sinon), sans filet.
   - « sur-theme » : une banniere photo du theme (th_banniere « centre ») : la bande monte sur son bord (96 / 72 / 52 px), la
     banniere raccourcit ; ces regles sont dans blocs.css (chargee dans <head> : la banniere ne se peint jamais haute pour
     retrecir ensuite).
   - sinon : une section ordinaire. */

.cartes-hero{--ch-orange:#FF8400;--ch-orange-texte:#B35C00;--ch-teinte:#FFF4E6;--ch-encre:#1F222B;--ch-texte:#505459;--ch-ligne:#E9EBF0;--ch-fond:#fff;--ch-pt:56px;--ch-pb:64px;
  position:relative;z-index:3;margin:0;padding:var(--ch-pt) 0 var(--ch-pb);background:transparent;font-family:Montserrat,sans-serif}
.cartes-hero *,.cartes-hero *::before,.cartes-hero *::after{box-sizing:border-box}
.cartes-hero>.container{position:relative}
.cartes-hero .cartes-hero__grille,.cartes-hero .cartes-hero__bande{position:relative;z-index:3}
.cartes-hero .cartes-hero__grille,.cartes-hero .cartes-hero__bande{margin:0;padding:0;list-style:none}
.cartes-hero .cartes-hero__grille>li,.cartes-hero .cartes-hero__bande>li{margin:0}
.cartes-hero .cartes-hero__grille>li::before,.cartes-hero .cartes-hero__bande>li::before{content:none}
.cartes-hero .cartes-hero__tete{display:flex;align-items:center;gap:14px;min-width:0}
.cartes-hero .cartes-hero__titre{flex:1 1 auto;min-width:0;margin:0;padding:0;font-family:Montserrat,sans-serif;font-size:18px;font-weight:600;line-height:1.3;color:var(--ch-encre);text-align:start;text-transform:none;letter-spacing:0;text-wrap:balance;overflow-wrap:break-word}
.cartes-hero .cartes-hero__titre::after,.cartes-hero .cartes-hero__titre::before{content:none}
.cartes-hero .cartes-hero__texte{margin:0;font-size:15px;font-weight:400;line-height:1.6;color:var(--ch-texte);text-align:justify;hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
.cartes-hero .icone{display:block;flex:none}
/* Japonais : les titres se coupent aux limites de groupes de mots ; le texte justifie garde la coupure ordinaire (une coupure
   aux groupes laisserait des lignes courtes que la justification etirerait en lettres espacees). */
.cartes-hero:lang(ja) .cartes-hero__titre{word-break:auto-phrase}
/* L'arabe se lit plus petit a taille egale : un cran au-dessus, interligne plus ouvert. */
.cartes-hero[dir=rtl] .cartes-hero__texte{font-size:16px;line-height:1.75}
.cartes-hero[dir=rtl] .cartes-hero__titre{font-size:20px;line-height:1.45}
.cartes-hero [dir=ltr] .cartes-hero__texte{font-size:15px;line-height:1.6}
.cartes-hero [dir=ltr] .cartes-hero__titre{font-size:18px;line-height:1.3}
/* Une entree d'une seule phrase (Featuresboxed, Partnership) : la phrase est le titre, un peu moins grande. */
.cartes-hero .cartes-hero__case--seule .cartes-hero__titre,.cartes-hero .cartes-hero__carte--seule .cartes-hero__titre{font-size:17px;line-height:1.4}
/* Un chiffre a la place de l'icone (les tuiles des revendeurs, CONTRAT.md) : le chiffre en grand, le titre dessous. */
.cartes-hero .cartes-hero__case--chiffre .cartes-hero__tete,.cartes-hero .cartes-hero__carte--chiffre .cartes-hero__tete{flex-direction:column;align-items:flex-start;gap:8px}
.cartes-hero .cartes-hero__chiffre{display:block;font-size:40px;font-weight:600;line-height:1.05;letter-spacing:-.01em;color:var(--ch-orange-texte);font-variant-numeric:tabular-nums;unicode-bidi:isolate;white-space:nowrap}

/* B. « bande » : un seul panneau blanc, filet orange en haut, les entrees en colonnes separees par un filet (le fond gris de
   1 px entre les cases) ; l'icone dans un carre teinte a cote du titre (le carre des cartes de services de l'accueil).
   Jusqu'a quatre entrees sur une ligne ; cinq ou six sur deux (trois, puis le reste a parts egales, sans case vide) ;
   au-dela, par trois. */
.cartes-hero--bande .cartes-hero__bande{display:grid;grid-template-columns:repeat(var(--ch-n,3),minmax(0,1fr));gap:1px;overflow:hidden;background:var(--ch-ligne);border:1px solid var(--ch-ligne);border-top:3px solid var(--ch-orange);border-radius:16px;box-shadow:0 30px 60px -36px rgba(31,34,43,.55),0 2px 8px -4px rgba(31,34,43,.08)}
.cartes-hero--bande .cartes-hero__case{display:flex;flex-direction:column;gap:12px;min-width:0;padding:28px 28px 30px;background:#fff}
.cartes-hero--bande .cartes-hero__icone{display:grid;place-content:center;flex:none;width:46px;height:46px;border-radius:12px;background:var(--ch-teinte);color:var(--ch-orange-texte);line-height:0}
.cartes-hero--bande .cartes-hero__icone .icone{width:24px;height:24px}
.cartes-hero--bande .cartes-hero__bande[data-n="5"],.cartes-hero--bande .cartes-hero__bande[data-n="6"]{grid-template-columns:repeat(6,minmax(0,1fr))}
.cartes-hero--bande .cartes-hero__bande[data-n="5"]>li:nth-child(-n+3),.cartes-hero--bande .cartes-hero__bande[data-n="6"]>li{grid-column:span 2}
.cartes-hero--bande .cartes-hero__bande[data-n="5"]>li:nth-child(n+4){grid-column:span 3}

/* A. « elevees » : une carte blanche par entree, l'icone dans un rond cercle d'orange au-dessus du titre ; trois par ligne,
   une ligne incomplete centree. */
.cartes-hero--elevees .cartes-hero__grille{display:flex;flex-wrap:wrap;justify-content:center;gap:24px}
.cartes-hero--elevees .cartes-hero__carte{display:flex;flex-direction:column;gap:12px;flex:0 1 calc((100% - 48px) / 3);min-width:0;padding:28px 28px 30px;background:#fff;border:1px solid var(--ch-ligne);border-radius:14px;box-shadow:0 26px 48px -30px rgba(31,34,43,.5),0 2px 8px -4px rgba(31,34,43,.08)}
.cartes-hero--elevees .cartes-hero__tete{flex-direction:column;align-items:flex-start;gap:18px}
.cartes-hero--elevees .cartes-hero__icone{display:grid;place-content:center;flex:none;width:56px;height:56px;border:2px solid var(--ch-orange);border-radius:50%;background:var(--ch-teinte);color:var(--ch-orange-texte);line-height:0}
.cartes-hero--elevees .cartes-hero__icone .icone{width:28px;height:28px}
.cartes-hero--elevees .cartes-hero__titre{font-size:19px}

/* ---------- Ce que la bande chevauche ---------- */
.cartes-hero--sur-photo,.cartes-hero--sur-encre{--ch-pt:0px;z-index:auto;overflow:hidden}
/* L'encre, du haut de la section jusqu'au milieu du panneau, sous le heros. */
.cartes-hero--sur-photo>.container::before,.cartes-hero--sur-encre>.container::before{content:"";position:absolute;inset:-600px -100vw 50% -100vw;z-index:0;background:var(--ch-fond-haut,var(--ch-encre));pointer-events:none}
/* Le fond blanc de la page, du milieu du panneau jusqu'en bas de la section, sur le heros. */
.cartes-hero--sur-photo>.container::after,.cartes-hero--sur-encre>.container::after{content:"";position:absolute;inset:50% -100vw -600px -100vw;z-index:2;background:var(--ch-fond);pointer-events:none}
/* Le filet orange du heros, au bas de ce qu'il peint, c'est-a-dire au milieu du panneau : les 4 px juste au-dessus du blanc,
   sur toute la largeur de l'ecran : le calque est centre sur le conteneur, lui-meme centre, donc l'image de 100vw placee a
   50 % commence au bord de l'ecran (le degrade part du bord de debut, comme le filet du heros). */
.cartes-hero--sur-photo>.container::after{top:calc(50% - 4px);background:linear-gradient(90deg,var(--ch-orange),rgba(255,132,0,.55) 45%,rgba(255,132,0,0)) 50% 0 / 100vw 4px no-repeat,linear-gradient(var(--ch-fond),var(--ch-fond)) 0 4px / 100% 100% no-repeat}
.cartes-hero--sur-photo[dir=rtl]>.container::after{background:linear-gradient(-90deg,var(--ch-orange),rgba(255,132,0,.55) 45%,rgba(255,132,0,0)) 50% 0 / 100vw 4px no-repeat,linear-gradient(var(--ch-fond),var(--ch-fond)) 0 4px / 100% 100% no-repeat}

/* ---------- Tablette (1011 px et moins, comme le conteneur du theme) : une colonne de lignes ---------- */
@media (max-width:1011px){
  .cartes-hero--bande .cartes-hero__bande,.cartes-hero--bande .cartes-hero__bande[data-n]{grid-template-columns:minmax(0,1fr)}
  .cartes-hero--bande .cartes-hero__bande[data-n]>li{grid-column:auto}
  .cartes-hero--elevees .cartes-hero__carte{flex-basis:calc((100% - 24px) / 2)}
}
/* ---------- Telephone : cases plus serrees, l'icone au debut de la ligne du titre ---------- */
@media (max-width:767px){
  .cartes-hero{--ch-pt:40px;--ch-pb:48px}
  .cartes-hero--sur-photo,.cartes-hero--sur-encre{--ch-pt:0px}
  .cartes-hero--bande .cartes-hero__case{padding:20px 20px 22px;gap:10px}
  .cartes-hero--bande .cartes-hero__icone{width:42px;height:42px;border-radius:10px}
  .cartes-hero--bande .cartes-hero__icone .icone{width:22px;height:22px}
  .cartes-hero .cartes-hero__titre,.cartes-hero .cartes-hero__case--seule .cartes-hero__titre,.cartes-hero .cartes-hero__carte--seule .cartes-hero__titre{font-size:17px}
  .cartes-hero[dir=rtl] .cartes-hero__titre{font-size:18px}
  .cartes-hero .cartes-hero__chiffre{font-size:34px}
  .cartes-hero--elevees .cartes-hero__grille{gap:14px}
  .cartes-hero--elevees .cartes-hero__carte{flex-basis:100%;padding:20px 20px 22px;gap:10px}
  .cartes-hero--elevees .cartes-hero__tete{flex-direction:row;align-items:center;gap:14px}
  .cartes-hero--elevees .cartes-hero__icone{width:46px;height:46px}
  .cartes-hero--elevees .cartes-hero__icone .icone{width:22px;height:22px}
}

/* ---------- Piste REV (revue du 16/10/2026) : les quatre tuiles de chiffres des revendeurs ---------- */
/* De 576 a 1011 px, deux colonnes de deux au lieu d'une colonne de quatre (environ 530 px de haut pour quatre chiffres courts).
   Classe posee par _th_element_bande quand le reglage « chiffres » est ecrit ; CartesHero::hauteur estime la meme grille
   (paliers « t » et « p »), pour que la photo du heros finisse toujours au milieu du panneau. */
@media (min-width:576px) and (max-width:1011px){
  .cartes-hero--chiffres.cartes-hero--bande .cartes-hero__bande[data-n="4"]{grid-template-columns:repeat(2,minmax(0,1fr))}
}