/* Le heros « Photo and ink » (th_banniere « photo », piste PHOTO du 16/10/2026), charge par core/blocs/_heros_photo.blade.php.
   Option 1 de retours/heros/OPTIONS.md (maquettes/heros.css, lignes 7 a 83), choisie par Quentin : la photo confirmee occupe
   les deux tiers cote fin et se fond dans l'encre cote debut ; le texte est toujours sur l'encre pure ; la photo n'est voilee
   nulle part ailleurs (le voile gris du theme, .banner::before, n'existe pas ici) ; une lueur orange monte du coin bas debut ;
   un filet orange degrade ferme le bas. Marque : Montserrat (titres en 600, jamais un gras simule), orange #FF8400, encre
   #1F222B. Tout en proprietes logiques : sous /ar (dir="rtl" sur la section) la mise en page se retourne, la photo jamais.
   Les fuites du theme sont neutralisees (style.css : a:hover opacite .9, a:focus et a:active orange).

   Le crochet de l'etape B (build-1016/photo/CONTRAT.md) : --heros-sous, la hauteur dont la photo, l'encre, la lueur et le
   filet continuent SOUS le bas du heros, derriere le bloc qui le suit ; 0 par defaut. La boite du heros ne change jamais de
   taille avec lui (aucun decalage de mise en page) : seul ce qui est peint deborde. --heros-ecart : l'air entre la derniere
   ligne du heros et le bloc qui le suit quand ce bloc le chevauche (classe heros--suivi, posee par le serveur). */

.heros{--h-encre:#1F222B;--h-orange:#FF8400;--h-clair:#D5D9E0;--heros-sous:0px;--heros-ecart:60px;position:relative;isolation:isolate;overflow:hidden;padding-top:84px;font-family:Montserrat,sans-serif}
.heros *,.heros *::before,.heros *::after{box-sizing:border-box}
.heros__int{position:relative;z-index:2;display:grid}
.heros__texte{min-width:0}
.heros__surtitre{display:flex;align-items:center;gap:12px;margin:0 0 18px;font-size:13px;font-weight:600;line-height:1.4;letter-spacing:.12em;text-transform:uppercase;color:var(--h-orange)}
.heros__surtitre::before{content:"";flex:none;width:28px;height:2px;border-radius:2px;background:currentColor}
.heros[dir=rtl] .heros__surtitre,html[lang=zh] .heros__surtitre,html[lang=ja] .heros__surtitre,html[lang=ru] .heros__surtitre{letter-spacing:.04em}
.heros[dir=rtl] .heros__surtitre,html[lang=zh] .heros__surtitre,html[lang=ja] .heros__surtitre{letter-spacing:0}
.heros .heros__titre{margin:0;font-family:Montserrat,sans-serif;font-size:48px;font-weight:600;line-height:1.12;letter-spacing:-.01em;color:#fff;text-wrap:balance;overflow-wrap:break-word}
.heros .heros__titre span,.heros .heros__titre strong,.heros .heros__titre b{font-weight:inherit}
/* La phrase sous le titre : justifiee, avec coupure des mots, comme tout texte courant du site (Quentin, 12/10/2026) et
   comme la phrase de la bande vive (revue finale du 16/10/2026, M2) ; sa derniere ligne reste au debut (a droite sous /ar).
   Le gras que les anciennes bannieres posaient sur un mot (« Thanks ») ne ressort pas, comme dans la maquette approuvee. */
.heros .heros__chapo{margin:20px 0 0;max-width:620px;font-size:18px;font-weight:400;line-height:1.6;color:var(--h-clair);text-align:justify;-webkit-hyphens:auto;hyphens:auto;text-wrap:pretty}
.heros .heros__chapo strong,.heros .heros__chapo b{font-weight:inherit;color:inherit}
.heros .heros__chapo a,.heros .heros__chapo a:focus,.heros .heros__chapo a:active{color:#fff;text-decoration:underline;text-underline-offset:3px;opacity:1}
.heros .heros__chapo a:hover{color:var(--h-orange);opacity:1}
.heros__actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin:32px 0 0}
.heros__actions .btn,.heros__actions .btn:hover,.heros__actions .btn:focus,.heros__actions .btn:active{opacity:1;text-decoration:none}
.heros__lien,.heros__lien:focus,.heros__lien:active{font-size:16px;font-weight:600;line-height:1.4;color:#fff;text-decoration:underline;text-underline-offset:4px;opacity:1}
.heros__lien:hover{color:var(--h-orange);text-decoration:underline;opacity:1}
.heros__lien:focus-visible,.heros-ancre:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:2px}
.heros__recherche{width:100%;max-width:640px;margin:30px 0 0}
.heros__recherche .recherche-onglets{max-width:none;margin:0}
.heros__recherche .recherche-bande__champ{text-align:start}

/* Les sections de la page en liens d'ancre, avec l'icone du menu (/brand-protection : Watch, Act, Plan & manage, Trademarks). */
.heros-ancres{display:flex;flex-wrap:wrap;gap:12px 22px;margin:30px 0 0;padding:0;list-style:none}
.heros-ancres li{margin:0;padding:0}
.heros-ancres li::before{content:none}
.heros-ancre,.heros-ancre:hover,.heros-ancre:focus,.heros-ancre:active{display:inline-flex;align-items:center;gap:9px;font-size:16px;font-weight:600;line-height:1.3;color:#fff;text-decoration:none;opacity:1}
.heros-ancre:hover .heros-ancre__texte{text-decoration:underline;text-underline-offset:4px}
.heros-ancre__icone{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:rgba(255,132,0,.16);color:var(--h-orange)}
.heros-ancre__icone svg{width:18px;height:18px}

/* ---------- Photo et encre ---------- */
.heros--photo{min-height:600px;background:var(--h-encre);color:#fff}
/* La lueur, sur l'encre : elle descend avec --heros-sous (le crochet). */
.heros--photo::before{content:"";position:absolute;inset:0 0 calc(-1 * var(--heros-sous)) 0;z-index:1;pointer-events:none;background:radial-gradient(680px 420px at 22% calc(100% + 50px),rgba(255,132,0,.30),transparent 70%)}
.heros--photo[dir=rtl]::before{background:radial-gradient(680px 420px at 78% calc(100% + 50px),rgba(255,132,0,.30),transparent 70%)}
/* Le filet orange du bas, degrade : au bas de ce qui est peint (le milieu de la bande qui suit, avec le crochet). */
.heros--photo::after{content:"";position:absolute;inset:auto 0 calc(-1 * var(--heros-sous)) 0;z-index:3;height:4px;pointer-events:none;background:linear-gradient(90deg,var(--h-orange),rgba(255,132,0,.55) 45%,rgba(255,132,0,0))}
.heros--photo[dir=rtl]::after{background:linear-gradient(-90deg,var(--h-orange),rgba(255,132,0,.55) 45%,rgba(255,132,0,0))}
/* La photo : deux tiers cote fin, toute la hauteur peinte. Le fondu vers l'encre est cote debut ; une ombre en haut garde
   l'en-tete blanc du site lisible. Sous /ar le fondu se retourne, la photo non. */
.heros__media{position:absolute;inset-block:0 calc(-1 * var(--heros-sous));inset-inline-end:0;z-index:0;width:66%;margin:0;background:var(--h-encre)}
.heros__media picture{display:contents}
.heros__media img{display:block;width:100%;height:100%;max-width:none;object-fit:cover}
.heros__media::after{content:"";position:absolute;inset:0;background:linear-gradient(to right,var(--h-encre) 0%,rgba(31,34,43,.88) 18%,rgba(31,34,43,.42) 48%,rgba(31,34,43,.08) 78%,rgba(31,34,43,0) 100%),linear-gradient(to bottom,rgba(31,34,43,.78) 0,rgba(31,34,43,0) 180px)}
.heros--photo[dir=rtl] .heros__media::after{background:linear-gradient(to left,var(--h-encre) 0%,rgba(31,34,43,.88) 18%,rgba(31,34,43,.42) 48%,rgba(31,34,43,.08) 78%,rgba(31,34,43,0) 100%),linear-gradient(to bottom,rgba(31,34,43,.78) 0,rgba(31,34,43,0) 180px)}
/* Le debord (crochet) : la boite du heros garde sa taille ; l'encre continue dessous par une ombre pleine decalee de
   --heros-sous (une ombre se peint hors de la boite seulement), la photo, la lueur et le filet par leurs propres bords. */
.heros--suivi{overflow:visible;box-shadow:0 var(--heros-sous) 0 var(--h-encre)}
/* Le texte : sur l'encre pure, la colonne s'arrete avant que la photo devienne vive (44 % de la largeur, 600 px au plus). */
.heros--photo .heros__int{grid-template-columns:minmax(0,min(600px,44vw));align-content:center;min-height:516px;padding-block:56px 76px}
.heros--sans-photo .heros__int{grid-template-columns:minmax(0,720px)}
/* Suivi d'un bloc qui le chevauche (crochet) : le heros raccourcit, le bloc commence a --heros-ecart sous la derniere ligne. */
.heros--suivi{min-height:0}
.heros--suivi .heros__int{min-height:420px;padding-block:72px var(--heros-ecart);align-content:end}

/* L'ancienne bande « features » du theme apres un heros photo (avant l'etape B) : elle suit le heros sans le chevaucher,
   comme dans les maquettes du 16/10 (style.css la remonte de 260 px sur une banniere du theme). Le repere d'une ancre ou du
   constructeur peut s'intercaler. */
.heros--photo + .section--features-banner,.heros--photo + .bloc-cible + .section--features-banner,.heros--photo + .bloc-ancre + .section--features-banner{margin-top:0;padding-top:72px}

/* ---------- Tablette et telephone : la photo en haut, sous l'en-tete ; le texte dessous, sur l'encre ---------- */
@media (max-width:1247px){
  .heros .heros__titre{font-size:42px}
}
@media (max-width:991px){
  .heros{--heros-ecart:48px}
  .heros .heros__titre{font-size:36px}
  .heros--photo{min-height:0}
  .heros__media{inset:0 0 auto 0;width:100%;height:400px}
  .heros--suivi .heros__media{inset:0 0 auto 0}
  .heros__media::after,.heros--photo[dir=rtl] .heros__media::after{background:linear-gradient(to bottom,rgba(31,34,43,.78) 0,rgba(31,34,43,.12) 110px,rgba(31,34,43,.18) 52%,var(--h-encre) 100%)}
  .heros--photo .heros__int{grid-template-columns:minmax(0,1fr);min-height:0;padding-block:250px 48px}
  .heros--suivi .heros__int{min-height:0;padding-block:250px var(--heros-ecart)}
  .heros--photo::before{background:radial-gradient(520px 360px at 12% calc(100% + 40px),rgba(255,132,0,.26),transparent 70%)}
  .heros--photo[dir=rtl]::before{background:radial-gradient(520px 360px at 88% calc(100% + 40px),rgba(255,132,0,.26),transparent 70%)}
  .heros--sans-photo .heros__int{padding-block:56px 48px}
}
@media (max-width:767px){
  .heros{--heros-ecart:40px}
  .heros .heros__titre{font-size:31px;line-height:1.16}
  .heros__surtitre{margin-bottom:14px;font-size:12px}
  .heros .heros__chapo{margin-top:14px;font-size:16px}
  .heros__actions{margin-top:24px;gap:14px 22px}
  .heros__actions .btn{width:100%;justify-content:center}
  .heros__recherche{margin-top:22px}
  .heros__media{height:330px}
  .heros--photo .heros__int,.heros--suivi .heros__int{padding-block-start:190px}
  .heros--photo .heros__int{padding-block-end:44px}
  .heros-ancres{gap:12px 20px;margin-top:24px}
  .heros-ancre,.heros-ancre:hover,.heros-ancre:focus,.heros-ancre:active{font-size:15px}
  .heros-ancre__icone{width:32px;height:32px}
  .heros-ancre__icone svg{width:16px;height:16px}
  /* La recherche reste d'une ligne (comme l'accueil et la bande d'encre) : bouton a cote du champ. */
  .heros .recherche-bande__champ:not(.recherche-bande__champ--liste){flex-wrap:nowrap;gap:8px}
  .heros .recherche-bande__loupe{display:block}
  .heros .recherche-bande__champ:not(.recherche-bande__champ--liste) input{flex:1 1 auto;height:54px;padding:0 4px;font-size:16px}
  .heros .recherche-bande__champ .recherche-bande__bouton{flex:none;height:50px;padding:0 16px}
  .heros .recherche-onglets__ecritures{margin-inline-start:auto}
  .heros--photo + .section--features-banner,.heros--photo + .bloc-cible + .section--features-banner,.heros--photo + .bloc-ancre + .section--features-banner{padding-top:48px}
}
@media (max-width:390px){
  .heros .heros__titre{font-size:29px}
}

/* ---------- Etape B (16/10/2026) : la bande « Icon strip » qui chevauche le heros (cartes-hero.css, CONTRAT.md) ----------
   Le serveur imprime sur la section, quand une bande la suit (HerosPhoto::suite, App\Blocs\CartesHero::sous), jusqu'ou le
   heros peint sous sa boite a chaque palier de largeur : --heros-sous-xl (1248 px et plus), -l (1012 a 1247), -t (768 a
   1011), -p (576 a 767), -s (390 a 575), -xs (moins de 390). C'est une estimation par les rangees et la longueur des textes,
   toujours entre le milieu du panneau et le bas de la bande : la bande dessine la fin exacte (son fond blanc et le filet
   orange au milieu de son panneau, en CSS). Sur un ordinateur (992 px et plus) la photo descend avec elle ; en dessous, la
   photo reste sous l'en-tete (mise en page approuvee) et ce sont l'encre et la lueur qui descendent.
   Le heros passe au-dessus de l'encre de secours de la bande (z-index 0) et sous son fond blanc (z-index 2) ; son propre
   filet du bas s'efface : la bande le dessine au milieu de son panneau. */
.heros--suivi{z-index:1;--heros-sous:var(--heros-sous-xl,0px)}
.heros--suivi::after{content:none}
@media (max-width:1247px){.heros--suivi{--heros-sous:var(--heros-sous-l,0px)}}
@media (max-width:1011px){.heros--suivi{--heros-sous:var(--heros-sous-t,0px)}}
@media (max-width:767px){.heros--suivi{--heros-sous:var(--heros-sous-p,0px)}}
@media (max-width:575px){.heros--suivi{--heros-sous:var(--heros-sous-s,0px)}}
@media (max-width:389px){.heros--suivi{--heros-sous:var(--heros-sous-xs,0px)}}

/* ---------- Revue du 16/10/2026 : sous 992 px aussi, la photo finit au milieu de la bande ----------
   Note de Quentin (« make the picture go lower so it ends on the middle of the icon strip B », a toutes les largeurs). La
   photo du haut garde son cadrage approuve (sous l'en-tete, 330 px sur un telephone, 400 sur une tablette) ; un second calque
   de la meme photo (.heros__prolonge : meme fichier, memes srcset et sizes, aucun telechargement de plus), en « cover » sur
   toute la hauteur peinte, la continue derriere le texte puis autour de la bande, jusqu'a son milieu ou la bande pose le
   blanc (cartes-hero.css). Le texte reste sur l'encre : un voile de .92 derriere lui ; sous sa derniere ligne le voile tombe
   a .3 et la photo reparait autour de la bande. La photo du haut se fond dans ce calque (masque) au lieu de l'encre pleine :
   aucune couture a sa base. A partir de 992 px le calque est cache : la photo elle-meme descend (--heros-sous). Depuis la
   revue finale (Q6, en fin de feuille), de 768 a 991 px aussi : le calque ne sert plus que sur un telephone. */
.heros__prolonge{display:none}
@media (max-width:991px){
  .heros--suivi .heros__prolonge{display:block;position:absolute;inset:0 0 calc(-1 * var(--heros-sous)) 0;z-index:-1;overflow:hidden;margin:0;background:var(--h-encre);pointer-events:none}
  .heros--suivi .heros__prolonge picture{display:contents}
  .heros--suivi .heros__prolonge img{display:block;width:100%;height:100%;max-width:none;object-fit:cover}
  .heros--suivi .heros__prolonge::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(31,34,43,.92) 0,rgba(31,34,43,.92) calc(100% - var(--heros-sous) - var(--heros-ecart)),rgba(31,34,43,.3) calc(100% - var(--heros-sous) + 8px),rgba(31,34,43,.3) 100%)}
  .heros--suivi .heros__media{-webkit-mask-image:linear-gradient(to bottom,#000 72%,transparent);mask-image:linear-gradient(to bottom,#000 72%,transparent)}
  .heros--suivi .heros__media::after,.heros--suivi[dir=rtl] .heros__media::after{background:linear-gradient(to bottom,rgba(31,34,43,.78) 0,rgba(31,34,43,.12) 110px,rgba(31,34,43,.18) 52%,rgba(31,34,43,.92) 100%)}
}

/* Piste REV (etape 2, 16/10/2026) : sur un telephone, un libelle de bouton long (« Открыть учётную запись реселлера » de
   /ru/reseller-partner-program) passe a la ligne dans le bouton, centre, au lieu de toucher ses bords (390 px) ou de
   deborder de l'ecran (320 px : 11 px de defilement de cote). Les libelles courts restent sur une ligne. */
@media (max-width:767px){
  .heros--photo .heros__actions .btn,.heros--photo .heros__actions .btn .btn__text{white-space:normal;text-align:center}
}
/* Piste REV (etape 2, 16/10/2026) : en japonais, le H1 se coupe aux limites de groupes de mots (« 国別ドメインの /
   リセラープログラム », pas « …のリ / セラー… »), comme les titres de la bande (cartes-hero.css). */
.heros--photo:lang(ja) .heros__titre{word-break:auto-phrase}

/* ---------- Revue finale du 16/10/2026 (REVUE-FINALE.md 4.1, M1) : le sur-titre sur l'encre pure sous 992 px ----------
   Le sur-titre commence 66 px (tablette, photo de 400 px) ou 56 px (telephone, 330 px) au-dessus du bas de la photo du haut,
   ou le voile n'atteignait l'encre pleine qu'a 100 % : l'orange y tombait a 2,56 a 4,47 de contraste. Le fondu atteint
   maintenant l'encre a 80 px (tablette) et 70 px (telephone) du bas : le texte est sur l'encre pure, comme sur un
   ordinateur (6,47). Les memes selecteurs que plus haut, ceux de heros--suivi compris ; seuls les arrets du degrade changent
   (ni marge, ni hauteur, ni cadrage, ni --heros-sous). Sur un telephone avec une bande, le masque de la photo du haut la fond
   toujours dans le calque qui la prolonge (voile de .92) : aucune couture. */
@media (max-width:991px){
  .heros__media::after,.heros--photo[dir=rtl] .heros__media::after,.heros--suivi .heros__media::after,.heros--suivi[dir=rtl] .heros__media::after{background:linear-gradient(to bottom,rgba(31,34,43,.78) 0,rgba(31,34,43,.12) 110px,rgba(31,34,43,.18) 45%,var(--h-encre) calc(100% - 80px),var(--h-encre) 100%)}
}
@media (max-width:767px){
  .heros__media::after,.heros--photo[dir=rtl] .heros__media::after,.heros--suivi .heros__media::after,.heros--suivi[dir=rtl] .heros__media::after{background:linear-gradient(to bottom,rgba(31,34,43,.78) 0,rgba(31,34,43,.12) 100px,rgba(31,34,43,.18) 45%,var(--h-encre) calc(100% - 70px),var(--h-encre) 100%)}
}
/* Q6 (reponse de Quentin, 16/10/2026) : de 768 a 991 px, une seule photo continue jusqu'au milieu de la bande. Le second
   calque (.heros__prolonge) la repetait a une autre echelle a cote de la bande : il est eteint a ces largeurs, et la photo
   du haut descend elle-meme jusqu'au bas de ce que le heros peint (--heros-sous, comme sur un ordinateur), en « cover »,
   sans masque. Son voile reprend en pixels ce que l'on voyait (l'ombre sous l'en-tete ; l'encre pure a 320 px, soit 80 px
   au-dessus de l'ancien bas de 400 px : le sur-titre commence a 334 px ; puis le voile de .92 du calque derriere le reste du
   texte, jusqu'a --heros-ecart sous sa derniere ligne ; puis .3 autour de la bande) ; la bande pose le blanc a son milieu
   (cartes-hero.css). Telephones (767 px et moins) et ordinateurs (992 px et plus) inchanges. */
@media (min-width:768px) and (max-width:991px){
  .heros--suivi .heros__prolonge{display:none}
  .heros--suivi .heros__media{inset:0 0 calc(-1 * var(--heros-sous)) 0;height:auto;-webkit-mask-image:none;mask-image:none}
  .heros--suivi .heros__media::after,.heros--suivi[dir=rtl] .heros__media::after{background:linear-gradient(to bottom,rgba(31,34,43,.78) 0,rgba(31,34,43,.12) 110px,rgba(31,34,43,.18) 180px,var(--h-encre) 320px,rgba(31,34,43,.92) 400px,rgba(31,34,43,.92) calc(100% - var(--heros-sous) - var(--heros-ecart)),rgba(31,34,43,.3) calc(100% - var(--heros-sous) + 8px),rgba(31,34,43,.3) 100%)}
}