/* Héros v2, version B : « votre permis, en main » (heros-b.html).
   Une carte de marque Inter'Conduite, jamais une imitation du permis
   officiel : ni drapeau, ni étoile, ni numéro, ni champ administratif.
   Sans script ou en mouvement réduit : la carte est posée, inclinée,
   reflet immobile. heros-b.js anime trois niveaux séparés :
   .hb-pose (défilement), .hb-incl (souris ou oscillation), .hb-carte (entrée). */
.hb{
  --graphite:#0c0c0d; --lumiere:222,230,240;
  --ecrit:#f4f5f7; --ecrit-2:rgba(244,245,247,.66); --trait:rgba(255,255,255,.14);
  --carte-fond:#f8f5ef; --carte-filet:rgba(29,23,20,.14);
  --holo:conic-gradient(from 200deg at 50% 50%,#fff 0deg 20deg,#8fe3ff 34deg,#fff 48deg 110deg,#a6f0da 124deg,#fff 138deg 200deg,#b7cdff 214deg,#fff 228deg 290deg,#8fe3ff 304deg,#fff 318deg 360deg);
  position:relative;min-height:calc(100svh - var(--barre));display:grid;align-items:center;padding:clamp(36px,5vh,72px) 0;
  color:var(--ecrit);background:var(--graphite);isolation:isolate}
/* la barre prend le graphite du héros tant qu'elle le recouvre,
   heros-b.js pose .apres-heros quand le héros est passé : retour au papier */
.barre{transition:background-color .35s ease,border-color .35s ease,color .35s ease}
.barre:not(.apres-heros){background:var(--nuit);border-bottom-color:transparent;color:#f4f5f7}
/* le fond : une rosace guillochée (motif.py), centrée sur la carte, qui tourne très lentement.
   Fondue en haut pour que la barre graphite se raccorde sans couture. */
.hb-motif{position:absolute;inset:0;overflow:hidden;z-index:-1;pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 22%,#000 78%,transparent);mask-image:linear-gradient(to bottom,transparent,#000 22%,#000 78%,transparent)}
.hb-motif img{position:absolute;left:74%;top:50%;width:clamp(900px,84vw,1480px);height:auto;max-width:none;translate:-50% -50%;opacity:.1;animation:hb-tourne 300s linear infinite}
@keyframes hb-tourne{to{rotate:360deg}}
@media (prefers-reduced-motion:reduce){.hb-motif img{animation:none}}
/* à l'essai : un quadrillage à points aux croisements, éteint en ellipse autour de la carte.
   La rosace reste disponible avec ?motif=rosace (heros-b.js pose html.hb-rosace). */
.hb-motif::before{content:"";position:absolute;inset:0;--pas:72px;
  background-image:radial-gradient(circle,rgba(255,255,255,.42) 1.2px,transparent 1.8px),linear-gradient(rgba(255,255,255,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.09) 1px,transparent 1px);
  background-size:var(--pas) var(--pas);
  background-position:calc(74% + var(--pas) / 2) calc(50% + var(--pas) / 2),74% 50%,74% 50%;
  -webkit-mask-image:radial-gradient(ellipse 62% 78% at 74% 50%,#000 25%,transparent);mask-image:radial-gradient(ellipse 62% 78% at 74% 50%,#000 25%,transparent)}
.hb-motif img{display:none}
.hb-rosace .hb-motif img{display:block}
.hb-rosace .hb-motif::before{display:none}
.hb-grille{display:grid;grid-template-columns:minmax(0,40fr) minmax(0,60fr);align-items:center;gap:0 clamp(24px,3vw,56px)}
.hb-texte{container-type:inline-size;position:relative;z-index:2}
.hb-sur{font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--ecrit-2)}
.hb h1{font-family:var(--serif);font-weight:400;font-size:min(clamp(48px,25.85px + 6.154vw,128px),17.2cqi);line-height:.95;letter-spacing:-.03em;margin-top:clamp(18px,2.6vh,30px);color:var(--ecrit);text-wrap:wrap}
.hb h1 .l{display:block}
.hb h1 em{font-style:normal;color:var(--rouge)}
.hb-soutien{font-size:clamp(17px,15.4px + .28vw,20px);line-height:1.45;color:var(--ecrit-2);max-width:36ch;margin-top:clamp(22px,3.2vh,38px)}
.hb-agir{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;margin-top:clamp(26px,3.6vh,42px)}
.hb .hb-note{font-size:13px;padding:6px 10px;background:rgba(255,255,255,.08);color:var(--ecrit);box-shadow:inset 0 0 0 1px var(--trait)}

/* l'objet : spot blanc froid, ombre au sol, puis la carte en perspective */
.hb-objet{position:relative;justify-self:end;width:clamp(300px,37.5vw,624px);z-index:3}
.hb-spot{position:absolute;left:50%;top:50%;width:190%;aspect-ratio:1.5;transform:translate(-50%,-50%);pointer-events:none;z-index:-1;
  background:radial-gradient(closest-side,rgba(var(--lumiere),.22),rgba(var(--lumiere),.08) 50%,rgba(var(--lumiere),0) 100%)}
.hb-ombre{position:absolute;left:8%;right:8%;top:100%;height:15%;margin-top:4%;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(0,0,0,.9),rgba(0,0,0,.45) 45%,rgba(0,0,0,0));transform-origin:50% 0}
.hb-scene{perspective:1200px}
.hb-pose,.hb-incl,.hb-carte{transform-style:preserve-3d}
.hb-pose{transform:rotateX(6deg) rotateY(-12deg) rotateZ(-2deg)}
.hb-carte{position:relative;aspect-ratio:85.6/54}

/* chaque face garde 2 px transparents autour de la carte : le bord est
   dessiné dans la texture, lissé, jamais par la découpe de la couche 3D */
.hb-face{position:absolute;inset:0;border:2px solid transparent;border-radius:16px;background-clip:padding-box;overflow:hidden;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;container-type:inline-size;isolation:isolate}
.hb-recto{background-color:var(--carte-fond);color:var(--encre)}
.hb-recto::before{content:"";position:absolute;inset:2.3cqw;border:.32cqw solid var(--rouge);border-radius:1.6cqw;pointer-events:none;z-index:1}
.hb-verso{background-color:var(--rouge);transform:rotateY(180deg);display:grid;place-items:center}
.hb-verso img{width:38cqw;height:auto}

.hb-logo{position:absolute;left:5.6cqw;top:5.4cqw;width:16cqw;height:auto}
.hb-b{position:absolute;right:5.4cqw;top:2.4cqw;font-family:var(--serif);font-weight:400;font-size:19cqw;line-height:1;letter-spacing:-.02em;color:var(--rouge)}
.hb-macaron{position:absolute;left:5cqw;top:20.5cqw;width:25cqw;aspect-ratio:1}
.hb-macaron svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.hb-macaron text{font-family:var(--sans);font-size:10.4px;letter-spacing:.2em;text-transform:uppercase;fill:var(--encre)}
.hb-macaron .disque{position:absolute;inset:15%;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 .3cqw var(--rouge);display:grid;place-items:center}
.hb-macaron .disque b{font-family:var(--sans);font-weight:700;font-size:11cqw;line-height:1;color:var(--rouge);letter-spacing:-.04em;transform:translateY(-.15cqw)}
.hb-champs{position:absolute;left:36cqw;right:5.6cqw;top:21.5cqw;margin:0}
.hb-champs div{display:flex;align-items:baseline;justify-content:space-between;gap:2cqw;padding:1.15cqw 0 1.05cqw;border-bottom:1px solid var(--carte-filet)}
.hb-champs div:first-child{border-top:1px solid var(--carte-filet)}
.hb-champs dt{font-size:1.75cqw;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--cendre)}
.hb-champs dd{margin:0;font-size:2.55cqw;color:var(--encre);white-space:nowrap;text-align:right}
.hb-guilloche{position:absolute;left:2.3cqw;right:2.3cqw;bottom:2.3cqw;width:calc(100% - 4.6cqw);height:9.5cqw;max-width:none}

/* reflets : holographique très léger aux teintes froides (en multiply : le blanc du dégradé ne teinte rien,
   seules les bandes froides passent sur le blanc cassé), puis spéculaire blanc */
.hb-holo,.hb-spec{position:absolute;left:-50%;top:-50%;width:200%;height:200%;pointer-events:none;z-index:2}
.hb-holo{background:var(--holo);mix-blend-mode:multiply;opacity:.22;transform:translate(-6%,4%) rotate(-14deg)}
.hb-spec{background:radial-gradient(closest-side,rgba(255,255,255,.62),rgba(255,255,255,.2) 30%,rgba(255,255,255,0) 58%);transform:translate(-14%,-16%)}

@media (max-width:900px){
  .hb{min-height:0;align-items:start;padding:36px 0 64px}
  .hb-grille{grid-template-columns:minmax(0,1fr);gap:56px}
  /* la pose tourne le bord droit vers nous : la carte garde 4 % de large en moins pour tenir dans la gouttière */
  /* sous la carte, la rosace s'éteint avant le titre */
  .hb-motif{-webkit-mask-image:linear-gradient(to bottom,transparent,#000 10%,#000 40%,transparent 64%);mask-image:linear-gradient(to bottom,transparent,#000 10%,#000 40%,transparent 64%)}
  .hb-motif img{left:50%;top:24%;width:820px;opacity:.14}
  .hb-motif::before{--pas:44px;background-position:calc(50% + var(--pas) / 2) calc(24% + var(--pas) / 2),50% 24%,50% 24%;
    -webkit-mask-image:radial-gradient(ellipse 90% 40% at 50% 24%,#000 30%,transparent);mask-image:radial-gradient(ellipse 90% 40% at 50% 24%,#000 30%,transparent)}
  .hb-objet{order:-1;justify-self:center;width:94%;margin-top:8px}
  .hb h1{font-size:clamp(48px,25.85px + 6.154vw,128px);margin-top:14px}
  .hb-soutien{margin-top:20px}
  .hb-agir{margin-top:26px}
}

/* la section équipe arrive en feuille déchirée sur le noir du simulateur (dechirure.py) */
section.s.equipe{z-index:4}
.equipe::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:64px;pointer-events:none;
  background:url("heros-b-dechirure.svg") 0 100%/1800px 64px repeat-x}
@media (max-width:900px){.equipe::before{height:40px;background-size:1125px 40px}}