/* La bande « Vivid ink » (piste VIF, 16/10/2026 ; choix de Quentin du 16/10/2026, option 2 des heros, retours/heros/OPTIONS.md
   et maquettes/heros.css), chargee par core/blocs/_bandeau_marque.blade.php quand un bloc pose « alignement » ou « visuel » :
   l'encre en degrade et deux lueurs orange (une forte derriere le visuel, une douce dans le coin bas du debut), le texte au debut
   avec un filet orange devant le surtitre, la carte du monde en points du cote fin (core/blocs/_bandeau_vif_carte), qui deborde
   un peu de sa colonne. Au telephone : le texte, puis la carte dessous avec deux ou trois pastilles. En arabe tout se retourne
   (dir="rtl" sur la section, proprietes logiques) sauf la carte : ses positions sont physiques (left/top), c'est de la geographie.
   Les fuites du theme sont neutralisees sur les liens et les pastilles (style.css : a:hover opacite .9, a:focus et a:active
   orange). Une bande sans ces reglages garde exactement l'aspect de bandeau-marque.css. */

/* 1. L'encre vive. Le bas de la bande reste a l'encre du site (#1F222B) : la carte des prix d'un guide de transfert
   (fiche-extension.css, .ext-prix__fond) prolonge cette encre sous sa moitie haute sans couture. */
.bandeau-marque--vif{overflow:hidden;background:radial-gradient(860px 560px at 78% 36%,rgba(255,132,0,.22),transparent 62%),radial-gradient(560px 380px at 4% 96%,rgba(255,132,0,.14),transparent 70%),linear-gradient(170deg,#262A35 0%,var(--bl-encre,#1F222B) 62%)}
.bandeau-marque--vif[dir=rtl]{background:radial-gradient(860px 560px at 22% 36%,rgba(255,132,0,.22),transparent 62%),radial-gradient(560px 380px at 96% 96%,rgba(255,132,0,.14),transparent 70%),linear-gradient(190deg,#262A35 0%,var(--bl-encre,#1F222B) 62%)}
/* Le guide de transfert : la lueur douce remonte, le bas reste d'encre unie sous la carte des prix. */
.bandeau-marque--vif.bandeau-marque--transfert{background:radial-gradient(860px 560px at 78% 36%,rgba(255,132,0,.22),transparent 62%),radial-gradient(520px 300px at 4% 40%,rgba(255,132,0,.12),transparent 70%),linear-gradient(170deg,#262A35 0%,var(--bl-encre,#1F222B) 62%)}
.bandeau-marque--vif.bandeau-marque--transfert[dir=rtl]{background:radial-gradient(860px 560px at 22% 36%,rgba(255,132,0,.22),transparent 62%),radial-gradient(520px 300px at 96% 40%,rgba(255,132,0,.12),transparent 70%),linear-gradient(190deg,#262A35 0%,var(--bl-encre,#1F222B) 62%)}

/* 2. Le texte au debut, le visuel cote fin. */
/* Le texte courant est justifie (regle de Quentin du 12/10/2026, jamais « start » sur un paragraphe) : une ligne seule (surtitre,
   lien) reste au debut, la phrase sous le titre se justifie ; le titre, lui, part du debut. */
.bandeau-marque--debut .bandeau-marque__int{display:grid;grid-template-columns:minmax(0,760px);align-items:center;gap:40px;max-width:1200px;min-height:420px;padding:44px 32px 60px;text-align:justify}
.bandeau-marque--debut .bandeau-marque__titre{text-align:start}
.bandeau-marque--debut .bandeau-marque__texte{-webkit-hyphens:auto;hyphens:auto}
.bandeau-marque--debut.bandeau-marque--visuel .bandeau-marque__int{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);min-height:460px}
.bandeau-marque--vif .bandeau-marque__texte-col{display:flex;flex-direction:column;align-items:center;min-width:0}
.bandeau-marque--debut .bandeau-marque__texte-col{align-items:flex-start}
.bandeau-marque--debut .bandeau-marque__surtitre{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.bandeau-marque--debut .bandeau-marque__surtitre::before{content:"";flex:none;width:28px;height:2px;border-radius:2px;background:currentColor}
/* Les titres en 600, la graisse chargee du site (style.css : Montserrat 300 a 600), jamais un gras simule. */
.bandeau-marque--vif .bandeau-marque__titre{max-width:none;font-size:46px;font-weight:600;line-height:1.12;letter-spacing:-.01em}
.bandeau-marque--vif .bandeau-marque__texte{max-width:620px;color:#D5D9E0}
.bandeau-marque--debut .bandeau-marque__recherche{max-width:600px}
.bandeau-marque--debut .bandeau-marque__recherche .recherche-onglets{max-width:none;margin:0}
.bandeau-marque--debut .bandeau-marque__liens{justify-content:flex-start}
/* La carte du monde interactive : un simple lien quand la carte en points est la. */
.bandeau-marque__carte-lien{margin:24px 0 0;font-size:16px;line-height:1.4}
/* Revue du 16/10/2026 : une etiquette de lien d'une ligne, pas du texte courant ; sur deux lignes (/domains a 390 px en anglais),
   la justification etirait la premiere (« Explore   the   world   map   of   domain »). Au debut, les deux lignes equilibrees. */
.bandeau-marque--debut .bandeau-marque__carte-lien{text-align:start;text-wrap:balance}
.bandeau-marque__carte-lien a,.bandeau-marque__carte-lien a:focus,.bandeau-marque__carte-lien a:active{font-weight:600;color:#fff;text-decoration:underline;text-underline-offset:4px;opacity:1}
.bandeau-marque__carte-lien a:hover{color:var(--bl-orange,#FF8400);opacity:1}
.bandeau-marque__carte-lien a:focus-visible{outline:2px solid #fff;outline-offset:3px}
/* Le visuel. Au centre (un visuel sans « alignement »), il vient sous le texte. */
.bandeau-marque__visuel{position:relative;min-width:0}
.bandeau-marque--vif:not(.bandeau-marque--debut) .bandeau-marque__visuel{width:min(680px,100%);margin-top:32px}
/* La carte du monde entiere un peu plus grande que sa colonne : ses bords sont l'ocean. */
.bandeau-marque--debut .bandeau-marque__visuel:not(:has(.bvif-carte--pays)){width:112%;margin-inline:-6%}
/* Le zoom d'un pays deborde du cote fin et se fond dans l'encre sur ses bords. Revue du 16/10/2026 : jamais au-dela de l'ecran
   (96 px au plus, la marge laissee par la bande moins 20 px pour une barre de defilement) : a 1280 px en arabe, les pastilles du
   Paraguay et de l'Afrique du Sud, posees du cote du debord, etaient coupees par le bord de la bande. */
.bandeau-marque--debut .bandeau-marque__visuel:has(.bvif-carte--pays){margin-inline-end:calc(-1 * clamp(0px, (100vw - 1200px) / 2 + 12px, 96px))}

/* 3. La carte en points. */
.bvif-carte{position:relative;width:100%}
.bvif-carte__svg{position:absolute;top:0;left:0;display:block;width:100%;height:100%;overflow:visible}
.bvif-carte--pays .bvif-carte__svg{-webkit-mask-image:radial-gradient(ellipse 58% 56% at 50% 50%,#000 62%,transparent 100%);mask-image:radial-gradient(ellipse 58% 56% at 50% 50%,#000 62%,transparent 100%)}
.bvif-carte__base{stroke:rgba(255,255,255,.16)}
.bvif-carte__region{stroke:rgba(255,132,0,.36)}
.bvif-carte__pays{stroke:var(--bl-orange,#FF8400);filter:drop-shadow(0 0 3px rgba(255,132,0,.85))}
.bvif-carte__onde{fill:none;stroke:var(--bl-orange,#FF8400);transform-box:fill-box;transform-origin:center}
.bvif-carte__onde--1{opacity:.55}
.bvif-carte__onde--2{opacity:.25;animation:bvif-onde 2.8s ease-out infinite}
@keyframes bvif-onde{0%{transform:scale(.6);opacity:.45}100%{transform:scale(1.25);opacity:0}}
@media (prefers-reduced-motion:reduce){.bvif-carte__onde--2{animation:none}}
/* Le point orange sous une pastille. */
.bvif-pin{position:absolute;left:var(--x);top:var(--y);z-index:1;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--bl-orange,#FF8400);box-shadow:0 0 0 4px rgba(255,132,0,.25),0 0 14px 2px rgba(255,132,0,.6);pointer-events:none}
/* La pastille blanche de l'accueil, posee sur son pays : au-dessus, dessous, a gauche ou a droite de son point. */
.bvif-puce{position:absolute;left:var(--x);top:var(--y);z-index:2;display:flex;align-items:center;gap:10px;height:46px;padding:0 14px 0 10px;border-radius:10px;background:#fff;color:var(--bl-texte,#505459);font-family:inherit;text-decoration:none;white-space:nowrap;opacity:1;box-shadow:0 18px 36px -14px rgba(0,0,0,.65),0 2px 6px rgba(0,0,0,.18);transform:translate(-50%,calc(-100% - 14px))}
/* Les fuites du theme sur un lien (style.css : a:hover opacite .9, a:focus et a:active orange) ; rien d'autre : une pastille
   posee dessous ou de cote ne saute pas au survol (etape B, 16/10/2026 : la position etait dans cette liste). */
a.bvif-puce:hover,a.bvif-puce:focus,a.bvif-puce:active{color:var(--bl-texte,#505459);text-decoration:none;opacity:1}
.bvif-puce[dir=rtl]{padding:0 10px 0 14px}
a.bvif-puce:hover{box-shadow:0 0 0 2px var(--bl-orange,#FF8400),0 18px 36px -14px rgba(0,0,0,.65)}
a.bvif-puce:focus-visible{outline:2px solid var(--bl-orange,#FF8400);outline-offset:3px}
.bvif-puce--bas{transform:translate(-50%,14px)}
.bvif-puce--gauche{transform:translate(calc(-100% - 14px),-50%)}
.bvif-puce--droite{transform:translate(14px,-50%)}
/* Revue du 16/10/2026 : une pastille du zoom posee dessus ou dessous reste dans la carte (--demi-o, sa demi-largeur sur un
   ordinateur, HerosVif::coteZoom) ; sans --demi-o, rien ne change. */
.bvif-puce--haut,.bvif-puce--bas{left:clamp(var(--demi-o,0px),var(--x),calc(100% - var(--demi-o,0px)))}
.bvif-puce__drapeau{--vif-drapeau-l:36px;--drapeau-l:36px}
.bvif-puce__tld{font-size:16px;font-weight:600;line-height:1.2;color:var(--bl-encre,#1F222B)}
.bvif-puce__prix{font-size:13px;font-weight:500;line-height:1.2;color:var(--bl-texte,#505459);font-variant-numeric:tabular-nums}
.bvif-masque{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* 4. Tablette : une seule colonne, le visuel sous le texte. */
@media (max-width:991px){
  .bandeau-marque--debut .bandeau-marque__int,.bandeau-marque--debut.bandeau-marque--visuel .bandeau-marque__int{grid-template-columns:minmax(0,1fr);gap:28px;min-height:0;padding:30px 24px 40px}
  .bandeau-marque--vif .bandeau-marque__titre{font-size:34px}
  .bandeau-marque--debut .bandeau-marque__visuel:not(:has(.bvif-carte--pays)){width:100%;margin-inline:0}
  .bandeau-marque--debut .bandeau-marque__visuel:has(.bvif-carte--pays){margin-inline-end:0}
  /* Sur une tablette la carte ne prend pas tout l'ecran : 600 px au plus, au debut, sous le texte. */
  .bandeau-marque--debut .bandeau-marque__visuel{max-width:600px}
  .bandeau-marque--vif{background:radial-gradient(620px 420px at 50% 74%,rgba(255,132,0,.2),transparent 64%),radial-gradient(420px 300px at 0% 20%,rgba(255,132,0,.1),transparent 70%),linear-gradient(175deg,#262A35 0%,var(--bl-encre,#1F222B) 62%)}
  .bandeau-marque--vif[dir=rtl]{background:radial-gradient(620px 420px at 50% 74%,rgba(255,132,0,.2),transparent 64%),radial-gradient(420px 300px at 100% 20%,rgba(255,132,0,.1),transparent 70%),linear-gradient(185deg,#262A35 0%,var(--bl-encre,#1F222B) 62%)}
}
/* 5. Telephone : la carte sous le texte, deux ou trois pastilles plus petites, toutes sous leur point ou au-dessus ; une
   pastille reste dans l'ecran (pas de defilement de cote a 390 px). */
@media (max-width:767px){
  .bandeau-marque--debut .bandeau-marque__int,.bandeau-marque--debut.bandeau-marque--visuel .bandeau-marque__int{gap:20px;padding:26px 20px 34px}
  .bandeau-marque--vif .bandeau-marque__titre{font-size:30px;line-height:1.16}
  .bandeau-marque--debut .bandeau-marque__surtitre{margin-bottom:12px}
  .bandeau-marque__carte-lien{margin-top:18px}
  .bvif-telephone-non{display:none}
  /* Au telephone, la pastille se pose sous ou au-dessus du point du pays (--px, --py : son centre), jamais sur le cote ; une
     pastille calculee (etape B, les actualites) donne sa demi-largeur (--demi) pour rester dans l'ecran. */
  .bvif-puce{left:clamp(var(--demi,64px),var(--px,var(--x)),calc(100% - var(--demi,64px)));top:var(--py,var(--y));height:38px;gap:8px;padding:0 10px 0 8px;border-radius:8px}
  .bvif-puce[dir=rtl]{padding:0 8px 0 10px}
  .bvif-puce--gauche,.bvif-puce--droite{transform:translate(-50%,12px)}
  /* Une pastille calculee (etape B) choisit son cote au telephone : au-dessus ou dessous de son point. */
  .bvif-puce.bvif-puce--tel-haut{transform:translate(-50%,calc(-100% - 12px))}
  .bvif-puce.bvif-puce--tel-bas{transform:translate(-50%,12px)}
  .bvif-puce__drapeau{--vif-drapeau-l:27px;--drapeau-l:27px}
  .bvif-puce__tld{font-size:14px}
  .bvif-puce__prix{font-size:12px}
  /* Revue du 16/10/2026 : une pastille plus large que la carte (une longue extension geographique italienne et son prix) passe
     sur deux lignes, l'extension au-dessus du prix, le drapeau sur les deux (HerosVif::telephone, classe bvif-puce--longue). */
  .bvif-puce.bvif-puce--longue{display:grid;grid-template-columns:auto auto;align-content:center;column-gap:8px;row-gap:1px;height:auto;min-height:38px;padding-block:6px}
  .bvif-puce--longue .bvif-puce__drapeau{grid-row:1 / span 2}
  .bvif-puce--longue .bvif-puce__tld,.bvif-puce--longue .bvif-puce__prix{grid-column:2}
}

/* 6. Etape B (16/10/2026) : la bande vive sans visuel (pages juridiques, articles : le degrade et les lueurs seulement), la
   liste des actualites, la carte des deux logos de /reforestation. */
/* Sans visuel, la bande garde sa hauteur de texte : pas de place reservee a une carte. */
.bandeau-marque--debut:not(.bandeau-marque--visuel) .bandeau-marque__int{min-height:0;padding-top:60px;padding-bottom:68px}
/* L'article : la bande s'aligne sur la colonne de lecture (.article.max-w-lg, 896 px), le titre un peu plus petit qu'un titre
   de page (un titre d'actualite est long), la date dessous ; un titre anglais sous une autre langue garde sa graisse. */
.bandeau-marque--article .bandeau-marque__int{grid-template-columns:minmax(0,1fr);max-width:944px;padding-left:24px;padding-right:24px}
.bandeau-marque--vif.bandeau-marque--article .bandeau-marque__titre{font-size:40px}
.bandeau-marque--article .bandeau-marque__titre > span[lang]{font-weight:inherit}
.bandeau-marque--article .bandeau-marque__texte{margin-top:14px;font-size:16px;color:#C9CED8}
/* /accreditations : un petit point orange sur chaque pays dont le registre a accredite Domgate. */
.bvif-pin--petit{width:7px;height:7px;margin:-3.5px 0 0 -3.5px;box-shadow:0 0 0 3px rgba(255,132,0,.22),0 0 10px 1px rgba(255,132,0,.55)}
/* La carte de texte long du theme (th_texte_long « carte » : .section--mt, -290 px faits pour chevaucher une banniere photo)
   ne couvre pas le titre sous la bande vive : le correctif S0 de la piste A (blocs.css), pour la bande claire, tenu ici pour
   la bande d'encre (les pages juridiques avant le brouillon « Document »). */
.bandeau-marque + .section--mt > .container > .section__content,
.bandeau-marque + .bloc-cible + .section--mt > .container > .section__content{margin-top:0}
/* /reforestation : la carte blanche des deux logos (le logo Domgate de l'en-tete, « + », le logo du partenaire), posee au
   milieu de la carte, comme .banner__partenaires de la banniere photo (blocs.css). */
.bvif-partenaire{position:absolute;left:50%;top:50%;z-index:2;display:flex;align-items:center;gap:28px;padding:22px 34px;border-radius:14px;background:#fff;box-shadow:0 18px 36px -14px rgba(0,0,0,.65),0 2px 6px rgba(0,0,0,.18);transform:translate(-50%,-50%)}
.bvif-partenaire__logo{display:block;line-height:0;color:var(--bl-encre,#1F222B)}
.bvif-partenaire__logo .svg-logo{width:170px;height:auto}
.bvif-partenaire__plus{font-size:30px;font-weight:300;line-height:1;color:var(--bl-encre,#1F222B)}
.bvif-partenaire img{display:block;width:132px;max-width:none;height:auto}
@media (max-width:991px){
  .bandeau-marque--debut:not(.bandeau-marque--visuel) .bandeau-marque__int{padding-top:40px;padding-bottom:48px}
  .bandeau-marque--vif.bandeau-marque--article .bandeau-marque__titre{font-size:32px}
}
@media (max-width:767px){
  .bandeau-marque--debut:not(.bandeau-marque--visuel) .bandeau-marque__int{padding-top:30px;padding-bottom:38px}
  .bandeau-marque--article .bandeau-marque__int{padding-left:20px;padding-right:20px}
  .bandeau-marque--vif.bandeau-marque--article .bandeau-marque__titre{font-size:27px}
  .bandeau-marque--article .bandeau-marque__texte{margin-top:10px;font-size:15px}
  .bvif-partenaire{gap:14px;padding:14px 18px;border-radius:10px}
  .bvif-partenaire__logo .svg-logo{width:112px}
  .bvif-partenaire__plus{font-size:22px}
  .bvif-partenaire img{width:86px}
}

/* 7. La page introuvable (revue du 16/10/2026) : la bande vive occupe tout le premier ecran, si bien que la bande de contact a photo
   qui la suit (en production aussi) n'y entre pas et que le titre reste l'element le plus grand (LCP) : sinon, la photo differee
   de la bande suivante devenait le LCP a 1280 et a 390. La bande commence sous l'en-tete pose sur elle (84 px, bandeau-marque.css) ; apres les regles de la tablette et du telephone, qui remettent la hauteur a zero. */
.bandeau-marque--erreur.bandeau-marque--debut .bandeau-marque__int{box-sizing:border-box;min-height:calc(100vh - 84px);min-height:calc(100svh - 84px)}