/* ══════════════════════════════════════════════════════════════════════════
   BANNIÈRE DE CONSENTEMENT  (partials/bandeau_cookies.ejs + js/consent.js)
   Reprise À L'IDENTIQUE de Whileresume (public/css/wr.css), aux couleurs de
   Hiring Notes — 08/11/2026.
   ══════════════════════════════════════════════════════════════════════════ */
.hn-consent {
  position: fixed;
  left: 0; right: 0; bottom: 0;

  /* ⚠️  AU-DESSUS DE LA BANNIÈRE « TÉLÉCHARGER L'APPLICATION ».

         Les deux vivent en bas d'écran. Le consentement bloque un
         traitement légal ; l'autre propose un téléchargement. En cas de
         recouvrement, c'est le premier qu'on doit pouvoir lire. */
  z-index: 1200;

  padding: 14px;
  display: flex;
  justify-content: center;
}

.hn-consent[hidden] { display: none; }

.hn-consent__box {
  width: 100%;
  max-width: 760px;
  background: #fff;
  border: 1px solid #ECEAF2;
  border-radius: 18px;
  box-shadow: 0 18px 50px -14px rgba(27, 27, 58, .28);
  padding: 20px 22px;
}

/* Le bloc de texte. Pas de style propre — il existe pour grouper le titre et
   la description — mais une classe posée dans un gabarit sans règle dans la
   feuille ne se distingue pas d'un oubli. */
.hn-consent__texte { display: block; }

.hn-consent__titre {
  margin: 0 0 6px;
  font-size: 15px; font-weight: 800; color: var(--navy, #1B1B3A);
}

.hn-consent__desc {
  margin: 0;
  font-size: 13.5px; line-height: 1.6; color: #3F3F5A;
}

.hn-consent__lien { color: var(--theme-link, #952E74); text-decoration: underline; }

/* ── Le détail par catégorie ── */
.hn-consent__detail { margin-top: 12px; }

/* ⚠️  LE `<summary>` EST MASQUÉ, PAS SUPPRIMÉ.

       Un `<details>` sans `<summary>` n'est plus pilotable au clavier et
       certains navigateurs en inventent un. On le garde, invisible et hors
       du parcours de tabulation : c'est le bouton « Gérer » qui ouvre. */
.hn-consent__summary-cache {
  display: block; height: 0; overflow: hidden;
  list-style: none; pointer-events: none;
}
.hn-consent__summary-cache::-webkit-details-marker { display: none; }

/* Les deux actions du panneau, à poids égal : « Tout refuser » ne doit pas
   paraître secondaire par rapport à « Enregistrer ». */
.hn-consent__panneau-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.hn-consent__panneau-actions .hn-consent-btn { flex: 1 1 auto; justify-content: center; }

.hn-consent__cats { margin: 12px 0; display: grid; gap: 10px; }

.hn-consent__cat { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.hn-consent__cat input { margin-top: 3px; flex: none; }

/* ⚠️  LA CASE DÉSACTIVÉE RESTE LISIBLE.

       `disabled` grise le texte dans certains navigateurs : on la remet au
       même contraste que les autres. Une ligne illisible donne
       l'impression d'un choix qu'on nous cache, alors qu'elle dit
       simplement qu'il n'y a pas de choix. */
.hn-consent__cat input:disabled + span { opacity: 1; }
.hn-consent__cat strong { display: block; font-size: 13.5px; color: var(--navy, #1B1B3A); }
.hn-consent__cat em { display: block; font-size: 12.5px; font-style: normal; color: #6B6B80; }

/* ── Les boutons ──
   Poids visuel équivalent : refuser doit être aussi simple qu'accepter.
   C'est la règle que la CNIL sanctionne le plus souvent. */
.hn-consent__actions {
  margin-top: 16px;
  display: flex; gap: 10px; justify-content: flex-end;
}
.hn-consent__actions .hn-consent-btn { flex: 0 0 auto; min-width: 140px; justify-content: center; }

/* ── Mobile ──
   Les deux boutons passent pleine largeur et s'empilent : à 390 px, deux
   boutons de 140 px côte à côte débordent, et l'un des deux se retrouve
   coupé — celui de droite, « Accepter », ce qui fausserait le choix. */
@media (max-width: 560px) {
  .hn-consent { padding: 10px; }
  .hn-consent__box { padding: 16px 16px 18px; border-radius: 16px; }
  /* ⚠️  `column`, PAS `column-reverse`.

         `column-reverse` inversait l'ordre du HTML : « Tout accepter » se
         retrouvait EN HAUT, donc lu en premier et le plus près du pouce.
         Les deux boutons ont beau faire la même taille, placer l'acceptation
         sous le doigt est un coup de pouce — exactement ce que la CNIL
         reproche.

         En colonne simple, le haut vers le bas reprend l'ordre gauche-droite
         du bureau : refuser, puis accepter. */
  .hn-consent__actions { flex-direction: column; }
  .hn-consent__actions .hn-consent-btn { width: 100%; min-width: 0; }
}

/* ⚠️  SUR UN ÉCRAN TRÈS BAS, LA BOÎTE DÉFILE.

       Un téléphone en paysage fait 340 px de haut : la bannière dépliée
       couvrirait l'écran entier, boutons compris hors champ. */
@media (max-height: 520px) {
  .hn-consent__box { max-height: 82vh; overflow-y: auto; }
}

/* ── Les boutons de la bannière ── (ceux de Whileresume : .wr-btn) */
.hn-consent-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 20px; border-radius: 11px;
  font: inherit; font-size: 13.5px; font-weight: 700; line-height: 1.2;
  border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  transition: background .18s ease, transform .18s ease, box-shadow .18s ease, border-color .18s ease, color .18s ease;
}
.hn-consent-btn--primary {
  background: var(--theme, #C73E9B); border-color: var(--theme, #C73E9B); color: #fff;
  box-shadow: 0 4px 14px rgba(199, 62, 155, .3);
}
.hn-consent-btn--primary:hover {
  background: var(--theme-hover, #952E74); border-color: var(--theme-hover, #952E74);
  transform: translateY(-2px); box-shadow: 0 6px 20px rgba(199, 62, 155, .38);
}
.hn-consent-btn--secondary { background: #fff; border-color: #E5E7EB; color: var(--navy, #1B1B3A); }
.hn-consent-btn--secondary:hover { border-color: var(--theme-clair, #E87FC4); color: var(--theme, #C73E9B); transform: translateY(-1px); }
.hn-consent-btn--sm { padding: 8px 14px; font-size: 12.5px; border-radius: 9px; }
.hn-consent-btn:focus-visible { outline: 2px solid var(--theme, #C73E9B); outline-offset: 2px; }

/* La bannière repose sur la police du site ; hors de tout gabarit, une police système. */
.hn-consent { font-family: inherit; }
.hn-consent p { margin-top: 0; }

/* Le lien « Cookies » du pied de page est un bouton : il garde l'allure d'un lien. */
button.lien-cookies {
  background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-align: left;
}
button.lien-cookies:hover { text-decoration: underline; }