/* ==========================================================================
   BON CADEAU (07/10/2026) — feuille SÉPARÉE de site.css, chargée seulement par
   les pages qui montrent la carte (inc/bon-cadeau.php, hp_bon_cadeau_style) :
   /bon-cadeau/ et la page centrale /cadeau-grands-parents/ (son calendrier des
   fêtes et sa section « Comment offrir » sont en fin de fichier).
   Pourquoi : site.css bloque l'affichage de TOUTES les pages. Ces ~11 ko
   (2 ko transférés) y faisaient passer le LCP simulé de l'accueil mobile de
   1,8–2,2 s à 2,3 s (Lighthouse 13.5.0, 07/10/2026), pour un style qu'une
   seule page utilise. Même principe que espace.css.
   ========================================================================== */

:root {
  /* Le bon cadeau (07/10/2026). À l'écran, la carte se dessine à la taille
     de son cadre (unités cqi : la même carte sert d'exemple dans l'en-tête et
     de vraie carte) ; sur le papier, AUCUN texte sous 18 pt : c'est une
     personne âgée qui la lit, souvent sans ses lunettes au moment où on la
     lui tend. --nuit-marque : la feuille d'impression du site passe --nuit au
     noir pur ; le talon de la carte, lui, garde le vrai bleu de la marque. */
  --nuit-marque: #0D274D;
  --taille-carte-occasion: clamp(17px, 3.6cqi, 26px);
  --taille-carte-nom: clamp(30px, 7.4cqi, 54px);
  --taille-carte-nom-long: clamp(24px, 5.2cqi, 40px);
  --taille-carte-texte: clamp(15px, 2.6cqi, 20px);
  --taille-carte-etiquette: clamp(12px, 1.9cqi, 15px);
  --taille-carte-bon: clamp(20px, 4cqi, 30px);
  --taille-carte-marque: clamp(14px, 2.4cqi, 18px);
  --taille-carte-print-occasion: 20pt;
  --taille-carte-print-nom: 34pt;
  --taille-carte-print-nom-long: 24pt;
  --taille-carte-print-bon: 22pt;
  --taille-carte-print-titre: 22pt;
  --taille-carte-print-texte: 18pt;
  --filet-carte-print: 0.5mm;
  --largeur-talon-print: 58mm;
  --encoche-print: 8mm;
}

/* --- Bon cadeau (07/10/2026) ---------------------------------------------- */
/* /bon-cadeau/ (page-bon-cadeau.php) et la carte (partials/bon-carte.php).
   La carte est un vrai bon, à talon : le corps blanc pour la personne qui le
   reçoit, le talon « Bon pour » dans la couleur du modèle, la perforation en
   pointillés et deux encoches. La marque passe par Fraunces et son italique
   en accent (« vous décrochez » de l'accueil), le bleu nuit, le corail —
   aucune image. Trois modèles, trois variables : --talon (le fond du talon),
   --talon-accent (son italique) et --accent (l'occasion, dans le corps). */

.bon-cadeau__grille {
  margin-top: var(--gap-s);
}

.bon-cadeau__exemple {
  display: grid;
  gap: var(--gap-s);
  margin: 0;
}

.bon-cadeau__exemple .bon-carte--recto {
  /* Posé sur la table, un peu de travers : un objet, pas un formulaire. */
  transform: rotate(-1.5deg);
  box-shadow: var(--ombre-carte);
}

.bon-cadeau__exemple figcaption {
  font-size: var(--taille-petit);
  color: var(--texte-clair);
}

.bon-cadeau__consigne {
  margin-top: var(--gap-m);
  padding: var(--gap-s);
  background: var(--creme-ombre);
  border: 1px solid var(--sauge-texte);
  border-radius: var(--rayon-s);
  font-size: var(--taille-corps-m);
  line-height: 1.6;
}

.bon-cadeau__consigne p + p {
  margin-top: var(--gap-xs);
}

.bon-cadeau__feuille {
  margin-top: var(--gap-m);
}

.bon-cadeau__form {
  margin-top: var(--gap-m);
  padding: var(--gap-m);
  background: var(--blanc);
  border-radius: var(--rayon);
  box-shadow: var(--ombre-carte);
}

.bon-cadeau__envoi {
  margin-top: var(--gap-m);
}

.champ select {
  width: 100%;
  margin-top: 6px;
  padding: 12px var(--gap-s);
  background: var(--blanc);
  border: 1px solid var(--voile-nuit-18);
  border-radius: var(--rayon-s);
  font-family: var(--police-corps);
  font-size: var(--taille-corps);
  color: var(--texte);
}

.champ__label span {
  font-weight: 400;
  color: var(--texte-clair);
}

.champ--choix {
  margin: var(--gap-s) 0 0;
  padding: 0;
  border: 0;
}

.champ--choix legend {
  padding: 0;
}

.champ--choix label {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-xs);
  min-height: 44px;
  margin-right: var(--gap-m);
  font-size: var(--taille-corps-m);
  color: var(--texte);
}

.champ--choix input {
  width: 20px;
  height: 20px;
  accent-color: var(--nuit);
}

.modele::after {
  content: '';
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--talon);
}

/* Les modèles : valables pour la pastille du formulaire et pour la carte. */
.modele--nuit,
.feuille--nuit {
  --talon: var(--nuit-marque);
  --talon-accent: var(--corail-clair);
  --accent: var(--corail-texte);
}

.modele--corail,
.feuille--corail {
  --talon: var(--corail-texte);
  --talon-accent: var(--creme);
  --accent: var(--corail-texte);
}

.modele--sauge,
.feuille--sauge {
  --talon: var(--sauge-texte);
  --talon-accent: var(--creme);
  --accent: var(--sauge-texte);
}

/* --- La carte -------------------------------------------------------------- */

.feuille {
  --fond-encoche: var(--creme);   /* ce qu'on voit à travers l'encoche */
  --encoche: 5cqi;
  container-type: inline-size;
}

.feuille--carte {
  --fond-encoche: var(--blanc);
  max-width: 860px;
  margin: 0 auto;
  padding: var(--gap-m);
  background: var(--blanc);
  border-radius: var(--rayon);
  box-shadow: var(--ombre-carte);
}

.bon-carte--recto {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34%;
  border-radius: var(--rayon-s);
  overflow: hidden;   /* les encoches mordent dans le bord */
}

.bon-carte__corps {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2.2cqi;
  padding: 6cqi 5.5cqi;
  background: var(--blanc);
  border: 1px solid var(--voile-nuit-18);
  border-right: 0;
  border-radius: var(--rayon-s) 0 0 var(--rayon-s);
}

.bon-carte__occasion {
  font-family: var(--police-display);
  font-size: var(--taille-carte-occasion);
  font-style: italic;
  line-height: 1.2;
  color: var(--accent);
}

.bon-carte__destinataire {
  font-family: var(--police-display);
  font-size: var(--taille-carte-nom);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--nuit-marque);
  text-wrap: balance;
  overflow-wrap: anywhere;
}

.bon-carte__destinataire--long {
  font-size: var(--taille-carte-nom-long);
}

.bon-carte__explication,
.bon-carte__message,
.bon-carte__signature {
  font-size: var(--taille-carte-texte);
  line-height: 1.42;
  color: var(--nuit-marque);
  text-wrap: pretty;
  overflow-wrap: anywhere;
}

.bon-carte__message {
  font-family: var(--police-display);
  font-style: italic;
}

.bon-carte__signature {
  font-weight: 600;
}

.bon-carte__signature span {
  font-weight: 400;
}

/* Le talon. Les deux encoches sont des disques de la couleur du fond, à
   cheval sur la perforation ; le recto (overflow: hidden) n'en garde que la
   moitié qui mord dans la carte. */
.bon-carte__talon {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 3cqi;
  padding: 6cqi 4.5cqi 5cqi 5cqi;
  background: var(--talon);
  border-left: 2px dashed var(--voile-creme-55);
  color: var(--creme);
}

.bon-carte__talon::before,
.bon-carte__talon::after {
  content: '';
  position: absolute;
  left: calc(var(--encoche) / -2 - 1px);
  width: var(--encoche);
  height: var(--encoche);
  border-radius: 50%;
  background: var(--fond-encoche);
  border: 1px solid var(--voile-nuit-18);
}

.bon-carte__talon::before {
  top: calc(var(--encoche) / -2);
}

.bon-carte__talon::after {
  bottom: calc(var(--encoche) / -2);
}

.bon-carte__bon-pour {
  display: flex;
  align-items: center;
  gap: 0.6em;
  font-size: var(--taille-carte-etiquette);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--talon-accent);
}

.bon-carte__bon-pour::before {
  content: '';
  width: 1.4em;
  border-top: 1.5px solid var(--talon-accent);
}

.bon-carte__bon {
  font-family: var(--police-display);
  font-size: var(--taille-carte-bon);
  font-weight: 500;
  line-height: 1.15;
  color: var(--creme);
  text-wrap: balance;
}

.bon-carte__bon em {
  font-style: italic;
  color: var(--talon-accent);
}

.bon-carte__marque {
  font-family: var(--police-display);
  font-size: var(--taille-carte-marque);
  font-weight: 600;
  color: var(--creme);
}

/* Le pli : deux traits et un mot entre eux, PAS un trait barré d'un mot sur
   fond blanc — le fond ne s'imprime pas, le trait traverserait le texte. */
.bon-carte__pli {
  display: flex;
  align-items: center;
  gap: var(--gap-xs);
  margin: var(--gap-m) 0;
  font-size: var(--taille-mini);
  color: var(--texte-clair);
}

.bon-carte__pli::before,
.bon-carte__pli::after {
  content: '';
  flex: 1;
  border-top: 2px dashed var(--voile-nuit-18);
}

/* La partie de celui qui offre : les pastilles numérotées de l'accueil. */
.bon-carte--verso {
  display: flex;
  flex-direction: column;
  gap: var(--gap-s);
}

.bon-carte__verso-titre {
  font-family: var(--police-display);
  font-size: var(--taille-h4);
  font-weight: 500;
  color: var(--nuit-marque);
  text-wrap: balance;
}

.bon-carte__verso-titre em {
  font-style: italic;
  color: var(--accent);
}

.bon-carte__etapes {
  display: grid;
  gap: var(--gap-xs);
  padding: 0;
  list-style: none;
  counter-reset: etape;
  font-size: var(--taille-corps-l);
  line-height: 1.5;
  color: var(--nuit-marque);
}

.bon-carte__etapes li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.7em;
  align-items: baseline;
  counter-increment: etape;
}

.bon-carte__etapes li::before {
  content: counter(etape);
  display: inline-grid;
  place-items: center;
  width: 1.7em;
  height: 1.7em;
  border-radius: 50%;
  background: var(--nuit-marque);
  color: var(--creme);
  font-weight: 600;
}

.bon-carte__conditions,
.bon-carte__adresse {
  font-size: var(--taille-corps-l);
  line-height: 1.5;
  color: var(--nuit-marque);
}

.bon-carte__adresse {
  display: flex;
  align-items: center;
  gap: var(--gap-xs);
}

.bon-carte__logo {
  flex: none;
  width: 39px;
  height: 36px;
}

/* Carte étroite (téléphone) : le talon passe sous le corps, la perforation
   devient horizontale, les encoches mordent sur les côtés. */
@container (max-width: 520px) {
  .bon-carte--recto {
    grid-template-columns: minmax(0, 1fr);
  }

  .bon-carte__corps {
    gap: var(--gap-xs);
    padding: var(--gap-m) var(--gap-s);
    border-right: 1px solid var(--voile-nuit-18);
    border-bottom: 0;
    border-radius: var(--rayon-s) var(--rayon-s) 0 0;
  }

  .bon-carte__talon {
    --encoche: 22px;
    gap: var(--gap-xs);
    padding: var(--gap-s);
    border-left: 0;
    border-top: 2px dashed var(--voile-creme-55);
  }

  .bon-carte__talon::before,
  .bon-carte__talon::after {
    top: calc(var(--encoche) / -2 - 1px);
    bottom: auto;
  }

  .bon-carte__talon::before {
    left: calc(var(--encoche) / -2);
  }

  .bon-carte__talon::after {
    left: auto;
    right: calc(var(--encoche) / -2);
  }
}

@media (max-width: 600px) {
  .feuille--carte,
  .bon-cadeau__form {
    padding: var(--gap-s);
  }
}

/* À l'impression : la feuille seule, une page A4, le pli EXACTEMENT au milieu
   du papier. Les marges de page sont égales en haut et en bas (@page, plus
   haut) : deux moitiés égales de la zone imprimable tombent donc pile de part
   et d'autre du milieu de la feuille. Le demi-millimètre retiré à la hauteur
   évite qu'un arrondi ne pousse une seconde page, blanche.
   Le talon s'imprime en couleur (print-color-adjust) : sans cela, le
   navigateur supprime les fonds et le talon disparaît. */
@media print {
  .bon-cadeau__entete,
  .bon-cadeau__creer {
    display: none !important;
  }

  .bon-cadeau__feuille {
    margin: 0;
  }

  .feuille--carte {
    --fond-encoche: #fff;
    display: grid;
    /* minmax(0, 1fr) et non 1fr : un texte trop long DÉBORDE (le contrôle le
       voit) au lieu d'agrandir sa moitié et de décaler le pli. */
    grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr);
    max-width: none;
    height: calc(297mm - 2 * var(--marge-print) - 0.5mm);
    margin: 0;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    break-inside: avoid;
  }

  .feuille--carte .bon-carte--recto {
    grid-template-columns: minmax(0, 1fr) var(--largeur-talon-print);
    margin-bottom: 4mm;
    border-radius: 3mm;
  }

  .bon-carte__corps {
    gap: 2.5mm;
    padding: 6mm 7mm;
    border: var(--filet-carte-print) solid var(--nuit-marque);
    border-right: 0;
    border-radius: 3mm 0 0 3mm;
  }

  .bon-carte__talon {
    --encoche: var(--encoche-print);
    gap: 4mm;
    padding: 7mm 6mm 6mm 7mm;
    border-left: 0.6mm dashed #fff;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .bon-carte__talon::before,
  .bon-carte__talon::after {
    border: var(--filet-carte-print) solid var(--nuit-marque);
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .bon-carte__occasion {
    font-size: var(--taille-carte-print-occasion);
  }

  .bon-carte__destinataire {
    font-size: var(--taille-carte-print-nom);
  }

  .bon-carte__destinataire--long {
    font-size: var(--taille-carte-print-nom-long);
  }

  .bon-carte__bon {
    font-size: var(--taille-carte-print-bon);
  }

  .bon-carte__verso-titre {
    font-size: var(--taille-carte-print-titre);
  }

  .bon-carte__explication,
  .bon-carte__message,
  .bon-carte__signature,
  .bon-carte__bon-pour,
  .bon-carte__marque,
  .bon-carte__etapes,
  .bon-carte__conditions,
  .bon-carte__adresse,
  .bon-carte__pli {
    font-size: var(--taille-carte-print-texte);
    line-height: 1.3;
  }

  .bon-carte__pli {
    margin: 0;
    color: #000;
  }

  /* « BON POUR » tient sur une ligne dans le talon de 58 mm, à 18 pt. */
  .bon-carte__bon-pour {
    gap: 0.4em;
    letter-spacing: 0.08em;
  }

  .bon-carte__bon-pour::before {
    width: 0.7em;
  }

  .bon-carte__pli::before,
  .bon-carte__pli::after {
    border-top: 0.4mm dashed #000;
  }

  .bon-carte--verso {
    justify-content: center;
    gap: 3.5mm;
    padding: 4mm 8mm 0;
  }

  .bon-carte__etapes {
    gap: 2.5mm;
  }

  .bon-carte__etapes li::before {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .bon-carte__logo {
    width: 11mm;
    height: auto;
  }
}

/* --- La page centrale des cadeaux (/cadeau-grands-parents/) ---------------- */

.cadeaux__grille {
  margin-top: var(--gap-s);
}

/* Le calendrier des prochaines fêtes : des dates CALCULÉES (inc/fetes.php),
   la plus proche en premier, sa date en corail. */
.calendrier-fetes {
  padding: var(--gap-m);
  background: var(--blanc);
  border-radius: var(--rayon);
  box-shadow: var(--ombre-carte);
}

.calendrier-fetes__titre {
  display: flex;
  align-items: center;
  gap: var(--gap-xs);
  font-size: var(--taille-mini);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--corail-texte);
}

.calendrier-fetes__titre::before {
  content: '';
  width: 22px;
  border-top: 1.5px solid var(--corail-texte);
}

.sans-coupure {
  white-space: nowrap;
}

.calendrier-fetes__regle--tete {
  margin-top: var(--gap-xs);
}

.calendrier-fetes__liste {
  display: grid;
  margin-top: var(--gap-xs);
  padding: 0;
  list-style: none;
}

.calendrier-fetes__fete {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px var(--gap-s);
  align-items: baseline;
  padding: 14px 0;
  border-top: 1px solid var(--voile-nuit-10);
}

.calendrier-fetes__fete:first-child {
  border-top: 0;
}

.calendrier-fetes__nom {
  font-family: var(--police-display);
  font-size: var(--taille-h5);
  font-weight: 500;
  color: var(--nuit);
}

.calendrier-fetes__nom a {
  color: inherit;
  text-decoration-color: var(--corail);
  text-underline-offset: 3px;
}

.calendrier-fetes__date {
  font-size: var(--taille-petit);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--nuit);
}

.calendrier-fetes__fete:first-child .calendrier-fetes__date {
  color: var(--corail-texte);
}

.calendrier-fetes__regle {
  grid-column: 1 / -1;
  font-size: var(--taille-mini);
  color: var(--texte-clair);
}

@media (max-width: 420px) {
  .calendrier-fetes {
    padding: var(--gap-s);
  }

  .calendrier-fetes__fete {
    grid-template-columns: minmax(0, 1fr);
  }

  .calendrier-fetes__date {
    text-align: left;
  }
}

/* « Comment offrir Hello Pamy » : trois pastilles, le bouton, la carte. */
.cadeaux__offrir-grille {
  display: grid;
  gap: var(--gap-l);
  align-items: center;
}

@media (min-width: 1000px) {
  .cadeaux__offrir-grille {
    grid-template-columns: minmax(0, 1fr) minmax(0, 560px);
  }
}

.cadeaux__etapes {
  display: grid;
  gap: var(--gap-s);
  margin-top: var(--gap-m);
  padding: 0;
  list-style: none;
  counter-reset: cadeau;
}

/* Le contenu de chaque point est UN <span> : dans une grille, texte, <strong>
   et lien deviendraient chacun une case (vu au banc le 07/10). */
.cadeaux__etapes li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: baseline;
  font-size: var(--taille-corps-l);
  line-height: 1.55;
  color: var(--texte);
  counter-increment: cadeau;
}

.cadeaux__etapes li::before {
  content: counter(cadeau);
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--nuit);
  color: var(--creme);
  font-size: var(--taille-petit);
  font-weight: 600;
}

.cadeaux__badge {
  margin-top: var(--gap-s);
}