/* peaux/hero.css — bandeau d'accueil pleine page.
   Se charge APRES commun.css et peaux/halo.css.

   Le visuel de fond est un canvas peint par anim.js : la regle de Veille
   Claire en train de tourner. Il a remplace le 27 aout 2026 une boucle video
   de 561 ko qui ne racontait rien — le titre promet des choses qui tournent
   toutes seules, autant que le fond en soit une.

   Le voile degrade au-dessus est ce qui garde le titre lisible : sans lui le
   contraste tombe a 1,2. Il reste indispensable, meme sur un fond sombre.

   Les fichiers img/accueil/fond.jpg (274 ko) et fond.mp4 (561 ko) ne sont
   plus references par aucune page. Ils restent sur le disque : les effacer
   fermerait la porte au retour en arriere pour 835 ko de place. */

/* CORRECTION 26 aout 2026 — le hero rognait ses propres boutons.
   L'ancienne regle combinait justify-content:center, max-height:100svh et
   overflow:hidden. Des que le contenu depassait la hauteur de la fenetre,
   le debordement d'un conteneur flex centre part des DEUX cotes et se
   retrouvait coupe sans qu'aucun defilement puisse y donner acces : sur une
   fenetre de 790 px (portable courant), les deux boutons d'appel etaient
   purement invisibles.

   Le max-height est donc supprime : min-height suffit a produire l'effet
   « le titre occupe la page », et laisse le bloc grandir quand il le faut.
   overflow:hidden descend sur .hero-fond, qui est le seul element ayant
   besoin d'etre detoure — le fond, jamais le texte. */
.hero{
  position:relative;
  min-height:min(86svh, 820px);
  display:flex; flex-direction:column; justify-content:center;
  padding:88px 0 72px;
  border-bottom:1px solid var(--filet);
}

/* --- le fond --- */
.hero-fond{position:absolute; inset:0; z-index:0; pointer-events:none;
  overflow:hidden}

/* le visuel genere */
.fond-media{position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:72% 50%; opacity:.42}

/* Retour au couple video + image, regle a 0,42 d'opacite comme a l'origine.
   Le CSS ne peut pas mettre une video en pause : on masque donc celle qui ne
   doit pas servir. Reserve connue et assumee — le navigateur telecharge quand
   meme la video masquee. */
.fond-fixe{display:none}
@media (prefers-reduced-motion: reduce){
  .fond-anime{display:none}
  .fond-fixe{display:block}
}

/* Voile degrade : sans lui le titre passe par-dessus la partie lumineuse du
   visuel et devient illisible. Il assombrit la GAUCHE, ou se trouve le texte,
   et laisse la droite intacte, ou se trouve le sujet. C'est pour ca que le
   prompt demandait le sujet a droite et le vide a gauche. */
.hero-voile{
  position:absolute; inset:0; pointer-events:none;
  background:
    /* bande sombre sous le titre, sur toute sa longueur */
    linear-gradient(97deg,
      var(--papier) 4%,
      color-mix(in srgb, var(--papier) 88%, transparent) 30%,
      color-mix(in srgb, var(--papier) 62%, transparent) 62%,
      color-mix(in srgb, var(--papier) 28%, transparent) 88%,
      transparent 100%),
    /* voile general : c'est lui qui rend le texte lisible partout */
    linear-gradient(color-mix(in srgb, var(--papier) 30%, transparent),
                    color-mix(in srgb, var(--papier) 30%, transparent));
}


/* trame fine par-dessus : c'est elle qui evite l'effet « fond d'ecran » */
.hero-grille{
  position:absolute; inset:0;
  background-image:
    linear-gradient(color-mix(in srgb,var(--encre) 7%,transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb,var(--encre) 7%,transparent) 1px, transparent 1px);
  background-size:72px 72px;
  mask-image:radial-gradient(120% 90% at 50% 25%, #000 25%, transparent 78%);
}
/* fondu vers la suite de la page : la coupure nette trahit le montage */
.hero-fondu{position:absolute; left:0; right:0; bottom:0; height:34%;
  background:linear-gradient(transparent, var(--papier))}

/* --- le contenu --- */
.hero-dedans{position:relative; z-index:1; max-width:960px; margin:0 auto;
  padding:0 32px; width:100%}
.hero h1{
  font-size:clamp(44px, 8.2vw, 94px); line-height:.98; letter-spacing:-.05em;
  max-width:15ch; margin:0; font-weight:600;
}
.hero .sous-titre{font-size:clamp(18px,2.1vw,23px); max-width:30em; margin-top:26px}
.hero-actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:38px}
.hero-actions a{
  font:600 14.5px/1 var(--serif); letter-spacing:-.01em; text-decoration:none;
  padding:15px 26px; border-radius:999px; border:1px solid var(--filet-actif);
}
.hero-actions a.plein{
  background:var(--encre); color:var(--papier); border-color:transparent;
}
.hero-actions a.plein:hover{background:#fff}
.hero-actions a.vide:hover{background:color-mix(in srgb,var(--encre) 8%,transparent)}

.hero-repere{
  position:absolute; left:50%; bottom:26px; transform:translateX(-50%); z-index:1;
  font:500 11px/1 var(--mono); letter-spacing:.2em; text-transform:uppercase;
  color:var(--gris); display:flex; flex-direction:column; align-items:center; gap:9px;
}
.hero-repere::after{
  content:""; width:1px; height:34px;
  background:linear-gradient(var(--gris), transparent);
  animation:respire 2.6s ease-in-out infinite;
}
@keyframes respire{50%{opacity:.25; transform:scaleY(.6)}}

/* le bandeau et les onglets flottent au-dessus du hero */
.hero ~ .feuille{padding-top:0}
.sur-hero{position:relative; z-index:2; max-width:960px; margin:0 auto;
  padding:0 32px; width:100%}
.sur-hero .bandeau{border-bottom:0; padding:30px 0 10px}
.sur-hero .onglets{border-bottom:0}

@media (max-width:720px){
  .hero{padding:64px 0 58px; min-height:min(80svh,660px)}
  .sur-hero{padding:0 20px}
  .hero-dedans{padding:0 20px}
  .sur-hero .bandeau{padding:22px 0 8px}
  .hero .sous-titre{margin-top:18px; font-size:17px; line-height:1.6}
  .hero-actions{margin-top:26px; gap:9px}
  .hero-actions a{padding:13px 18px; font-size:13.5px}
  .hero-repere{bottom:16px}
}

/* mouvement reduit */
@media (prefers-reduced-motion: reduce){
  .hero-repere::after{animation:none}
}

/* ===== variante retenue : le titre occupe la page ===== */
/* Le conteneur NE bouge PAS : bandeau, onglets et texte gardent le meme bord
   gauche que toutes les autres pages du site, donc rien ne saute quand on
   change d'onglet. */
.hero{padding:80px 0 68px}
/* Même largeur et même décalage que .feuille, sinon le bandeau et le reste de
   la page ne partageraient plus le même bord gauche. */
.hero-dedans, .sur-hero{
  max-width:1030px; padding:0 32px;
  /* width:auto est indispensable : ces deux blocs portent width:100% plus
     haut dans ce fichier, et 100 % du parent PLUS deux marges de 32 fait
     deborder la boite de 64 px des que max-width ne la bride plus, donc sous
     1 100 px de fenetre. Mesure avant correction : 32 px de debordement
     horizontal a 1 000 comme a 900. */
  width:auto;
  margin-left:max(32px, calc((100% - 1030px) * .19));
  margin-right:32px;
}

/* --- le titre occupe la page --- */
.hero h1{
  font-size:clamp(46px, 9.4vw, 132px);
  line-height:.92;
  letter-spacing:-.055em;
  font-weight:650;
  /* SEUL le titre deborde, et uniquement vers la DROITE : le bord gauche
     reste celui du reste du site. La marge negative vaut la place libre a
     droite du conteneur, moins une gouttiere de securite — elle tombe a zero
     sous ~1020px, donc aucun debordement possible sur petit ecran. */
  max-width:none;
  /* Le débord se calcule depuis le bord droit RÉEL du conteneur, pas depuis une
     demi-largeur codée en dur : le 512px d'avant supposait un conteneur de
     1 024 et ignorait le décalage. En reprenant le même max() que la marge
     gauche, le titre s'arrête toujours à 70 px du bord de la fenêtre, quel que
     soit l'écran. */
  margin-right:calc(-1 * max(0px,
    100vw - max(32px, calc((100vw - 1030px) * .19)) - 1030px - 70px));
}

/* le chapeau s'aligne sur le titre sans devenir illisible */
.hero .sous-titre{
  font-size:clamp(18px,1.65vw,25px);
  max-width:34ch;
  margin-top:30px;
}
.hero-actions{margin-top:42px}
.hero-actions a{padding:17px 30px; font-size:15px}


@media (max-width:900px){
  .hero h1{font-size:clamp(40px,8.6vw,74px); max-width:16ch; line-height:.96;
           margin-right:0}
  .hero .sous-titre{max-width:32ch; margin-top:22px}
  .sommaire{display:block}
}
@media (max-width:720px){
  /* Meme correction que .feuille : ces deux blocs portent le meme decalage
     proportionnel, et donc le meme plancher de 32 px inutile sur telephone. */
  .hero-dedans, .sur-hero{padding:0 20px; margin-left:0; margin-right:0}
  .hero{padding:60px 0 54px}
  .hero-actions{margin-top:28px}
  .hero-actions a{padding:13px 18px; font-size:13.5px}
}

/* ---------- adaptation a la HAUTEUR de la fenetre ----------
   Supprimer le max-height garantit que rien n'est plus jamais coupe, mais
   sur un portable de 790 px le hero mesure 947 px : les boutons passent
   sous la ligne de flottaison. On ne peut pas tout garder — le titre a
   132 px, quatre lignes de chapeau et deux boutons ne tiennent pas dans
   790 px. Ce qu'on choisit de sacrifier, c'est la TAILLE du titre, pas la
   presence des boutons : un titre a 96 px reste une affiche, un bouton
   invisible n'est plus rien.

   Les paliers sont en hauteur de fenetre et non en largeur, parce que
   c'est la hauteur qui manque : un 1920x800 a le meme probleme qu'un
   1280x800, et aucune media query de largeur ne les distingue. */
@media (min-width:901px) and (max-height:900px){
  .hero{padding:52px 0 44px; min-height:min(94svh, 820px)}
  .hero h1{font-size:clamp(44px, 7vw, 96px)}
  .hero .sous-titre{font-size:clamp(17px,1.4vw,20px); margin-top:22px}
  .hero-actions{margin-top:30px}
  .hero-actions a{padding:14px 26px; font-size:14.5px}
  .sur-hero .bandeau{padding:22px 0 8px}
}
@media (min-width:901px) and (max-height:760px){
  .hero{padding:40px 0 34px}
  .hero h1{font-size:clamp(40px, 6vw, 80px)}
  .hero .sous-titre{margin-top:18px; max-width:40ch}
  .hero-actions{margin-top:24px}
}