/* Hector Notes — feuille de style commune */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Archivo", system-ui, sans-serif;
  background: #ffffff;
}
body[data-page="home"] { background: #e2ded6; }

a {
  color: #17233f;
  text-decoration: underline;
  text-underline-offset: 3px;
}
a:hover { color: #ce4318; }
body[data-page="home"] a:hover { color: #ec3013; }

img { max-width: 100%; }

/* Adaptation mobile de la page d'accueil */
@media (max-width: 760px) {
  [data-gut]  { padding-left: 22px !important; padding-right: 22px !important; }
  [data-vpad] { padding-top: 52px !important; padding-bottom: 52px !important; }
  [data-bleed] { margin-right: 0 !important; }

  /* Les colonnes ont un plancher de largeur qui les tient côte à côte en grand.
     Sous 344 px de viewport ce plancher dépasse la place disponible et fait
     déborder la page vers la droite. En pile il n'a plus d'objet : les colonnes
     prennent la largeur qu'on leur donne. Le formulaire garde le sien, lui, qui
     sert à autre chose — empêcher que le champ et le bouton se serrent. */
  [data-col] { min-width: 0 !important; }

  /* Les captures vont de bord à bord. Sur un écran étroit la gouttière de 22 px
     ne fait que rétrécir une image déjà à la limite du lisible, sans rien
     séparer. Le parent occupe le viewport moins ses deux gouttières : lui
     rendre ces 44 px cale l'image exactement sur les bords. L'ombre portée
     part avec, puisqu'il n'y a plus de bord où la poser. */
  .hn-shot {
    width: calc(100% + 44px) !important;
    max-width: none !important;
    margin-left: -22px !important;
    margin-right: -22px !important;
    box-shadow: none !important;
  }

  /* Les trois piliers passent en pile. Les filets qui les séparaient en
     colonnes deviennent alors des traits verticaux perdus à gauche, et le
     retrait de 30 px décale les deux derniers par rapport au premier.
     Seul le filet horizontal a encore un sens : il sépare les piliers. */
  [data-piliers] > div {
    padding-left: 0 !important;
    padding-right: 0 !important;
    border-left: 0 !important;
  }
}

/* États interactifs du formulaire d'inscription */
.hn-field:hover { border-color: #ce4318; }
.hn-field:focus {
  outline: none;
  border-color: #ce4318;
  box-shadow: 0 0 0 3px rgba(206, 67, 24, .5);
}

/* Bouton secondaire : les deux questions facultatives posées une fois
   l'inscription enregistrée. Sobre, pour ne pas rivaliser avec l'appel à
   l'action principal dont il prend la place. */
.hn-btn2 {
  align-self: flex-start;
  border: 0;
  border-radius: 0;
  background: #16233d;
  color: #ffffff;
  padding: 11px 18px;
  font: 800 15px Archivo, system-ui, sans-serif;
  cursor: pointer;
}
.hn-btn2:hover { background: #ce4318; }
.hn-btn2:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(22, 35, 61, .45);
}
.hn-btn2[disabled] { opacity: .55; cursor: default; }

.hn-btn:hover  { background: #ab3411; }
.hn-btn:active { background: #8f2c0e; }
.hn-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(22, 35, 61, .45);
}

/* La signature et le prix sont groupés dans le balisage pour former la seconde
   ligne de l'en-tête sur mobile. En grand écran l'en-tête tient sur une ligne :
   le groupe s'efface de la mise en page et ses deux éléments redeviennent des
   enfants directs de la barre, avec la marge automatique du prix qui le pousse
   à droite comme avant. */
[data-entete-bas] { display: contents; }

/* Bascule de langue, dans la barre d'en-tête */
.hn-lang {
  display: flex;
  gap: 9px;
  align-items: baseline;
  font: 800 11px Archivo, system-ui, sans-serif;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.hn-lang [aria-current] { color: #16233d; }
.hn-lang [aria-hidden]  { color: rgba(22, 35, 61, .3); }
.hn-lang a {
  color: rgba(22, 35, 61, .5);
  text-decoration: none;
}
.hn-lang a:hover {
  color: #ce4318;
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 760px) {
  /* L'en-tête tient sur deux lignes : la marque, le prix et la bascule en
     haut, la signature en dessous. Sans cet ordre, les quatre éléments se
     répartissent l'espace au petit bonheur — le prix et la bascule ayant tous
     deux une marge automatique, ils flottaient au milieu de la ligne.
     Le prix garde la sienne, qui le pousse à droite ; la bascule le suit. */
  /* Deux lignes, chacune tenue par ses deux bords : la marque à gauche et la
     bascule à droite, puis la signature à gauche et le prix à droite. La
     signature française fait 281 px — sous 430 px de large elle ne laisse pas
     la place au prix, qui descend alors seul à la ligne, toujours à droite. */
  [data-entete] { flex-wrap: wrap; column-gap: 14px; }
  [data-entete] .hn-lang { order: 2; margin-left: auto; }
  [data-entete-bas] {
    order: 3;
    display: flex;
    flex: 1 0 100%;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 14px;
    row-gap: 6px;
    margin-top: 8px;
  }
}

/* Césure des titres : lignes équilibrées, jamais de mot seul en dernière ligne.
   Les styles des titres sont en inline, mais aucun ne fixe text-wrap. */
h1, h2, h3 { text-wrap: balance; }

/* Découpage des titres. Chaque groupe de mots choisi à la main est un bloc :
   il occupe sa propre ligne. text-wrap: balance ne joue qu'à l'intérieur d'un
   groupe — filet de sécurité aux largeurs où un groupe ne tient plus, où il se
   répartit alors proprement plutôt que de lâcher un mot seul.
   Un simple <br> ne convenait pas : il désactive balance sur tout le titre.
   En dessous de 900 px la place manque pour un découpage pensé en grand écran :
   les groupes se remettent à la suite et le titre s'équilibre d'un bloc. */
.hn-phrase { display: block; text-wrap: balance; }
@media (max-width: 900px) {
  .hn-phrase { display: inline; }
}