/*
Theme Name: Cadeaux Uniques
Theme URI: https://cadeauxuniques.fr
Description: Theme editorial pour cadeauxuniques.fr. Grille catalogue, palette terracotta et ivoire, sans-serif geometrique Outfit auto-hebergee. Aucun page builder, aucune classe partagee avec un autre site du parc. Jetons releves sur huckberry.com, goodeeworld.com et food52.com, voir DESIGN.md.
Author: La redaction Cadeaux Uniques
Version: 3.1.0
Template: hello-elementor
Requires PHP: 8.0
Text Domain: cadeauxuniques
*/

/* ==========================================================================
   0. Police
   ========================================================================== */

@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('assets/fonts/outfit-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   1. Jetons
   ========================================================================== */

:root {
  /* Couleur. L'encre est un brun tres fonce, pas un noir : releve a #251704
     sur goodeeworld.com. La chaleur du site vient de l'encre, de l'accent et
     des photos, jamais d'un fond creme jaune. */
  --cu-ivoire:      #F5F2ED;
  --cu-sable:       #EAE4DA;
  --cu-blanc:       #FFFFFF;
  --cu-encre:       #241A12;
  --cu-encre-2:     #5A4C40;
  --cu-encre-3:     #8A7A6B;
  --cu-terre:       #B24A24;
  --cu-terre-fonce: #8E3717;
  --cu-terre-pale:  #F0DDD1;
  --cu-terre-clair: #E9A583;
  --cu-nuit:        #2A1D14;
  --cu-ligne:       #DFD6C9;
  --cu-ligne-fine:  #E9E2D7;

  --cu-police: 'Outfit', 'Futura', 'Century Gothic', 'Segoe UI', system-ui, sans-serif;
  --cu-base: clamp(15.5px, 0.94rem + 0.16vw, 17px);

  /* Echelle de 4px, celle relevee sur huckberry.com. */
  --e1: 4px;   --e2: 8px;   --e3: 12px;  --e4: 16px;  --e5: 24px;
  --e6: 32px;  --e7: 48px;  --e8: 64px;
  --e9: clamp(64px, 46px + 4.2vw, 104px);

  /* Rayon zero sur le contenu. Les trois references sont a 0 ou 3px. */
  --r-controle: 2px;
  --r-pastille: 999px;

  --cu-large:  1280px;
  --cu-moyen:  920px;
  --cu-etroit: 680px;

  --sortie: cubic-bezier(.2, .8, .3, 1);
  --t-ui: 160ms var(--sortie);
  --t-entree: 420ms var(--sortie);
  --t-image: 900ms var(--sortie);

  --z-fond: 0; --z-contenu: 1; --z-flottant: 5; --z-entete: 60; --z-menu: 70;
}

/* ==========================================================================
   2. Base
   ========================================================================== */

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

html {
  font-size: var(--cu-base);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
}

body {
  margin: 0;
  background: var(--cu-ivoire);
  color: var(--cu-encre-2);
  font-family: var(--cu-police);
  font-size: 1rem;
  font-weight: 330;          /* releve : 300 chez Huckberry, 325 chez Food52 */
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video, iframe { max-width: 100%; display: block; }
img, video { height: auto; }

a { color: var(--cu-terre); text-decoration: none; transition: color var(--t-ui); }
a:hover { color: var(--cu-terre-fonce); }

h1, h2, h3, h4 {
  margin: 0 0 var(--e3);
  color: var(--cu-encre);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.025em;
  text-wrap: balance;
}
h1 { font-size: clamp(2rem, 1.5rem + 2vw, 3.25rem); line-height: 1.08; letter-spacing: -.03em; }
h2 { font-size: clamp(1.5rem, 1.25rem + 1.1vw, 2.2rem); }
h3 { font-size: clamp(1.15rem, 1.05rem + .45vw, 1.4rem); line-height: 1.25; letter-spacing: -.015em; }
h4 { font-size: 1.05rem; }

p { margin: 0 0 var(--e4); text-wrap: pretty; }
ul, ol { margin: 0 0 var(--e4); padding-left: 1.15em; }
li { margin-bottom: var(--e2); }
li::marker { color: var(--cu-terre); }
strong, b { font-weight: 600; color: var(--cu-encre); }

hr { border: 0; border-top: 1px solid var(--cu-ligne); margin: var(--e7) 0; }
::selection { background: var(--cu-terre-pale); color: var(--cu-encre); }

/* Un seul selecteur de focus pour tout le site. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--cu-terre);
  outline-offset: 3px;
}

.cu-saut {
  position: absolute; left: -9999px; z-index: var(--z-menu);
  padding: var(--e3) var(--e4);
  background: var(--cu-encre); color: #fff; font-weight: 600;
}
.cu-saut:focus { left: var(--e4); top: var(--e4); color: #fff; }

.cu-invisible {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* ==========================================================================
   3. Conteneurs et rythme vertical
   Une seule variable donne la respiration de toutes les sections du site.
   C'est ce qui produit des marges identiques d'une page a l'autre.
   ========================================================================== */

.cu-zone { width: 100%; max-width: var(--cu-large); margin-inline: auto; padding-inline: var(--e5); }
.cu-zone--moyen  { max-width: var(--cu-moyen); }
.cu-zone--etroit { max-width: var(--cu-etroit); }

.cu-bloc { padding-block: var(--e9); }
.cu-bloc--serre { padding-block: var(--e8); }
.cu-bloc--sable { background: var(--cu-sable); }
.cu-bloc--nuit  { background: var(--cu-nuit); color: #E7DCD2; }

.cu-tete { max-width: 56ch; margin-bottom: var(--e7); }
.cu-tete h2 { margin-bottom: var(--e3); }
.cu-tete p  { margin-bottom: 0; color: var(--cu-encre-2); font-size: 1.05rem; }

/* Etiquette en capitales. Au plus une pour trois sections. */
.cu-etiquette {
  display: block; margin-bottom: var(--e3);
  color: var(--cu-terre);
  font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
}

.cu-chapo { font-size: 1.12rem; line-height: 1.6; color: var(--cu-encre-2); max-width: 60ch; }
.cu-apres { margin: var(--e6) 0 0; }

/* ==========================================================================
   4. En-tete
   ========================================================================== */

.cu-entete {
  position: sticky; top: 0; z-index: var(--z-entete);
  background: color-mix(in srgb, var(--cu-ivoire) 88%, transparent);
  backdrop-filter: saturate(170%) blur(10px);
  -webkit-backdrop-filter: saturate(170%) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-ui);
}
.cu-entete.est-detachee { border-bottom-color: var(--cu-ligne); }
.cu-entete__barre { display: flex; align-items: center; gap: var(--e5); min-height: 4.25rem; }

.cu-marque {
  font-size: 1.15rem; font-weight: 700; letter-spacing: -.035em;
  color: var(--cu-encre); white-space: nowrap;
}
.cu-marque:hover { color: var(--cu-encre); }
.cu-marque em { font-style: normal; color: var(--cu-terre); }

.cu-nav { margin-left: auto; }
.cu-nav__liste { display: flex; align-items: center; gap: var(--e1); list-style: none; margin: 0; padding: 0; }
.cu-nav__liste > li { margin: 0; position: relative; }

.cu-nav__lien {
  display: inline-flex; align-items: center; gap: .3em;
  padding: .55rem .7rem;
  color: var(--cu-encre); font-size: .92rem; font-weight: 450;
  border-bottom: 2px solid transparent;
  transition: color var(--t-ui), border-color var(--t-ui);
}
.cu-nav__lien:hover { color: var(--cu-terre); border-bottom-color: var(--cu-terre); }
.cu-nav__lien[aria-current] { color: var(--cu-terre); border-bottom-color: var(--cu-terre); }
.cu-nav__lien svg { width: .6em; height: .6em; opacity: .5; transition: transform var(--t-ui); }
.cu-nav__element:hover .cu-nav__lien svg { transform: rotate(180deg); }

.cu-nav__panneau {
  position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%) translateY(-.3rem);
  min-width: 32rem; max-width: min(92vw, 42rem);
  padding: var(--e5);
  background: var(--cu-blanc);
  border: 1px solid var(--cu-ligne);
  box-shadow: 0 24px 48px -28px rgba(36, 26, 18, .35);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e1) var(--e4);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--t-ui), transform var(--t-ui), visibility var(--t-ui);
}
.cu-nav__element:hover .cu-nav__panneau,
.cu-nav__element:focus-within .cu-nav__panneau {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.cu-nav__panneau a {
  padding: .3rem 0; color: var(--cu-encre); font-size: .88rem;
  border-bottom: 1px solid transparent;
}
.cu-nav__panneau a:hover { color: var(--cu-terre); border-bottom-color: var(--cu-terre); }

.cu-burger {
  display: none; margin-left: auto; align-items: center; gap: var(--e2);
  padding: .5rem .75rem;
  background: transparent; color: var(--cu-encre);
  border: 1px solid var(--cu-ligne); border-radius: var(--r-controle);
  font-family: inherit; font-size: .85rem; font-weight: 500; cursor: pointer;
  transition: border-color var(--t-ui), color var(--t-ui);
}
.cu-burger:hover { border-color: var(--cu-terre); color: var(--cu-terre); }
.cu-burger__traits { display: grid; gap: 3px; }
.cu-burger__traits span { display: block; width: 14px; height: 1.5px; background: currentColor; transition: transform var(--t-ui), opacity var(--t-ui); }
.cu-burger[aria-expanded="true"] .cu-burger__traits span:nth-child(1) { transform: translateY(4.5px) rotate(45deg); }
.cu-burger[aria-expanded="true"] .cu-burger__traits span:nth-child(2) { opacity: 0; }
.cu-burger[aria-expanded="true"] .cu-burger__traits span:nth-child(3) { transform: translateY(-4.5px) rotate(-45deg); }

/* ==========================================================================
   5. Boutons et liens d'action
   ========================================================================== */

.cu-bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  padding: .8rem 1.4rem;
  font-family: inherit; font-size: .92rem; font-weight: 550; line-height: 1;
  white-space: nowrap;
  border: 1px solid transparent; border-radius: var(--r-controle);
  cursor: pointer;
  transition: background var(--t-ui), border-color var(--t-ui), color var(--t-ui);
}
.cu-bouton svg { width: 1em; height: 1em; flex: none; transition: transform var(--t-ui); }
.cu-bouton:hover svg { transform: translateX(2px); }

.cu-bouton--plein { background: var(--cu-terre); color: #FFF6F1; }
.cu-bouton--plein:hover { background: var(--cu-terre-fonce); color: #FFF6F1; }

.cu-bouton--contour { background: transparent; color: var(--cu-encre); border-color: var(--cu-encre); }
.cu-bouton--contour:hover { background: var(--cu-encre); color: var(--cu-ivoire); }

.cu-bouton--clair { background: #FFF6F1; color: var(--cu-nuit); }
.cu-bouton--clair:hover { background: #fff; color: var(--cu-nuit); }

.cu-sortant {
  display: inline-flex; align-items: center; gap: .35em;
  color: var(--cu-terre); font-size: .8rem; font-weight: 550;
}
.cu-sortant svg { width: .78em; height: .78em; flex: none; transition: transform var(--t-ui); }
.cu-sortant:hover svg { transform: translate(2px, -2px); }

/* ==========================================================================
   6. Carte produit
   Le composant le plus important du site : les 32 pages de rayon portent deux
   tiers des impressions. Aucun habillage, comme sur les trois references.
   L'image EST la carte.
   ========================================================================== */

.cu-grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--e7) var(--e5);
}
.cu-grille--large { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }

.cu-fiche { position: relative; display: flex; flex-direction: column; }

.cu-media {
  position: relative; overflow: hidden;
  background: var(--cu-sable);
  aspect-ratio: 4 / 5;
}
.cu-media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-image); }
.cu-media--carre   { aspect-ratio: 1 / 1; }
.cu-media--paysage { aspect-ratio: 4 / 3; }
.cu-media--bandeau { aspect-ratio: 21 / 9; }
.cu-media--portrait { aspect-ratio: 3 / 4; }

/* Le filet terracotta qui apparait sous l'image au survol. Rien ne se deplace,
   donc aucun decalage de grille. */
.cu-media::after {
  content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 2px;
  background: var(--cu-terre);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-entree);
}
.cu-fiche:hover .cu-media img,
.cu-fiche:focus-within .cu-media img { transform: scale(1.03); }
.cu-fiche:hover .cu-media::after,
.cu-fiche:focus-within .cu-media::after { transform: scaleX(1); }

.cu-media__defaut {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: var(--cu-terre-pale); color: var(--cu-terre-fonce);
  font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
}

.cu-fiche__corps { display: flex; flex-direction: column; flex: 1 1 auto; padding-top: var(--e4); }
.cu-fiche__rayon {
  margin-bottom: var(--e2);
  color: var(--cu-terre); font-size: .72rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
}
.cu-fiche__titre { margin: 0 0 var(--e2); font-size: 1rem; font-weight: 550; line-height: 1.32; letter-spacing: -.01em; }
.cu-fiche__titre a { color: var(--cu-encre); }
.cu-fiche:hover .cu-fiche__titre a { color: var(--cu-terre); }
.cu-fiche__extrait { margin: 0 0 var(--e3); color: var(--cu-encre-2); font-size: .88rem; }
.cu-fiche__pied { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: var(--e3); }
.cu-fiche__meta { color: var(--cu-encre-3); font-size: .78rem; }

/* Surface cliquable etendue, sans imbriquer de lien dans un lien. */
.cu-etendu::after { content: ""; position: absolute; inset: 0; z-index: var(--z-contenu); }
.cu-fiche__sortant { position: relative; z-index: var(--z-flottant); }

/* Vignette de rayon : la photo porte le nom. */
.cu-rayon { position: relative; display: block; overflow: hidden; }
.cu-rayon .cu-media { aspect-ratio: 3 / 4; }
.cu-rayon:hover .cu-media img { transform: scale(1.04); }
.cu-rayon__voile {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(26, 17, 10, .85) 0%, rgba(26, 17, 10, .35) 42%, rgba(26, 17, 10, 0) 72%);
}
.cu-rayon__texte { position: absolute; inset-inline: 0; bottom: 0; padding: var(--e4); color: #fff; }
.cu-rayon__nom { display: block; font-size: 1.05rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.2; }
.cu-rayon__compte { display: block; margin-top: 2px; font-size: .75rem; color: rgba(255, 255, 255, .78); }
.cu-rayon:hover .cu-rayon__nom { text-decoration: underline; text-underline-offset: 3px; }

/* ==========================================================================
   7. Pastilles de filtre
   ========================================================================== */

.cu-pastilles { display: flex; flex-wrap: wrap; gap: var(--e2); list-style: none; margin: 0; padding: 0; }
.cu-pastilles li { margin: 0; }
.cu-pastille {
  display: inline-flex; align-items: baseline; gap: .4em;
  padding: .45rem .85rem;
  color: var(--cu-encre); font-size: .85rem; font-weight: 450;
  border: 1px solid var(--cu-ligne); border-radius: var(--r-pastille);
  transition: border-color var(--t-ui), background var(--t-ui), color var(--t-ui);
}
.cu-pastille:hover { border-color: var(--cu-terre); background: var(--cu-terre-pale); color: var(--cu-terre-fonce); }
.cu-pastille__compte { color: var(--cu-encre-3); font-size: .74rem; font-variant-numeric: tabular-nums; }
.cu-pastille[aria-current] { background: var(--cu-encre); border-color: var(--cu-encre); color: var(--cu-ivoire); }
.cu-pastille[aria-current] .cu-pastille__compte { color: rgba(245, 242, 237, .7); }

/* ==========================================================================
   8. Bandeaux de page et hero
   ========================================================================== */

.cu-bandeau { padding-block: var(--e8) var(--e6); }
.cu-fil { margin-bottom: var(--e4); color: var(--cu-encre-3); font-size: .78rem; }
.cu-fil a { color: var(--cu-encre-2); }
.cu-fil a:hover { color: var(--cu-terre); }
.cu-fil span { margin-inline: .45em; opacity: .45; }

.cu-hero { position: relative; padding-block: var(--e9) var(--e8); overflow: hidden; }
.cu-duo {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(var(--e6), 3.2vw, var(--e9)); align-items: center;
}
.cu-duo--haut { align-items: start; }
.cu-duo--texte-large { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
.cu-hero p { max-width: 46ch; font-size: 1.12rem; color: var(--cu-encre-2); }
.cu-hero__actions { display: flex; flex-wrap: wrap; gap: var(--e3); margin-top: var(--e6); }

/* Trame de points a 4 %, uniquement derriere le hero. */
.cu-trame {
  position: absolute; inset: 0; z-index: var(--z-fond); pointer-events: none;
  background-image: radial-gradient(currentColor 1px, transparent 1px);
  background-size: 1.5rem 1.5rem;
  color: var(--cu-encre); opacity: .04;
  mask-image: linear-gradient(to bottom, #000 0%, transparent 76%);
}
.cu-hero > .cu-zone { position: relative; z-index: var(--z-contenu); }

.cu-signature { display: flex; align-items: center; gap: var(--e3); margin-top: var(--e5); color: var(--cu-encre-3); font-size: .84rem; }
.cu-signature__pastille {
  display: grid; place-items: center; flex: none;
  width: 2.1rem; height: 2.1rem; border-radius: 50%;
  background: var(--cu-terre-pale); color: var(--cu-terre-fonce);
  font-size: .72rem; font-weight: 700;
}
.cu-signature b { color: var(--cu-encre); font-weight: 600; }

/* ==========================================================================
   9. Prose
   ========================================================================== */

.cu-prose { font-size: 1.05rem; line-height: 1.75; color: var(--cu-encre-2); }
.cu-prose > * + * { margin-top: var(--e5); }
.cu-prose h2 { margin-top: var(--e8); margin-bottom: var(--e3); }
.cu-prose h3 { margin-top: var(--e6); margin-bottom: var(--e2); }
.cu-prose > h2:first-child, .cu-prose > h3:first-child { margin-top: 0; }
.cu-prose p, .cu-prose ul, .cu-prose ol { margin-bottom: 0; }
.cu-prose li + li { margin-top: var(--e2); }
.cu-prose img { margin-block: var(--e6); }
.cu-prose figure { margin: var(--e6) 0; }
.cu-prose figcaption { margin-top: var(--e2); color: var(--cu-encre-3); font-size: .84rem; }
.cu-prose a { font-weight: 500; border-bottom: 1px solid color-mix(in srgb, var(--cu-terre) 40%, transparent); }
.cu-prose a:hover { border-bottom-color: currentColor; }

/*
 * Certains articles anciens enveloppent leur lien dans un <u>. Le navigateur
 * dessine alors son propre soulignement noir PAR-DESSUS le filet terracotta
 * ci-dessus : deux traits de couleurs differentes sous le meme mot.
 *
 * La correction se fait ici et pas dans le contenu : ces articles portent des
 * liens vendus et ne se touchent pas. Un descendant ne peut pas annuler le
 * soulignement d'un ancetre en CSS, il faut donc viser le <u> lui-meme.
 */
.cu-prose u:has(a) { text-decoration: none; }
.cu-prose a u, .cu-prose a ins { text-decoration: none; }
.cu-prose table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.cu-prose th, .cu-prose td { padding: var(--e3) var(--e4); border-bottom: 1px solid var(--cu-ligne); text-align: left; }
.cu-prose th { background: var(--cu-sable); color: var(--cu-encre); font-weight: 600; }
.cu-prose__table { overflow-x: auto; margin-block: var(--e6); }

/* Encadres du gabarit d'article */
.cu-reponse {
  padding: var(--e5) var(--e6);
  background: var(--cu-terre-pale);
  border-left: none;
  font-size: 1.1rem; line-height: 1.6; color: var(--cu-encre);
}
.cu-reponse b { display: block; margin-bottom: var(--e2); font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--cu-terre-fonce); }
.cu-reponse p:last-child { margin-bottom: 0; }

.cu-sommaire { padding: var(--e5) var(--e6); background: var(--cu-blanc); border: 1px solid var(--cu-ligne); }
.cu-sommaire__titre { margin-bottom: var(--e3); font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--cu-terre); }
.cu-sommaire ol { margin: 0; padding-left: 1.1em; font-size: .95rem; columns: 2; column-gap: var(--e6); }
.cu-sommaire li { margin-bottom: var(--e2); break-inside: avoid; }
.cu-sommaire a { color: var(--cu-encre-2); }
.cu-sommaire a:hover { color: var(--cu-terre); }

.cu-encart {
  padding: var(--e5); background: var(--cu-sable);
  font-size: .98rem;
}
.cu-encart b:first-child { color: var(--cu-terre-fonce); }
.cu-encart p:last-child { margin-bottom: 0; }

.cu-partage { display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap; margin-top: var(--e4); }
.cu-partage span { color: var(--cu-encre-3); font-size: .78rem; }
.cu-partage a {
  display: inline-flex; align-items: center; gap: .35em;
  padding: .35rem .7rem;
  border: 1px solid var(--cu-ligne); border-radius: var(--r-pastille);
  color: var(--cu-encre-2); font-size: .78rem;
  transition: border-color var(--t-ui), color var(--t-ui);
}
.cu-partage a:hover { border-color: var(--cu-terre); color: var(--cu-terre); }

/* ==========================================================================
   10. Affiliation
   ========================================================================== */

.cu-affiliation {
  display: flex; gap: var(--e3); align-items: flex-start;
  margin-bottom: var(--e6); padding: var(--e3) var(--e4);
  background: var(--cu-terre-pale);
  color: #6B2E12; font-size: .85rem; line-height: 1.5;
}
.cu-affiliation svg { width: 1em; height: 1em; flex: none; margin-top: .3em; }
.cu-affiliation p { margin: 0; }
.cu-affiliation--pied { margin: 0; padding: 0; background: none; color: var(--cu-encre-3); font-size: .78rem; }

/* ==========================================================================
   11. Formulaire
   ========================================================================== */

.cu-bloc--nuit h2, .cu-bloc--nuit h3 { color: #fff; }
.cu-bloc--nuit p { color: rgba(231, 220, 210, .78); }
.cu-bloc--nuit .cu-etiquette { color: var(--cu-terre-clair); }
.cu-bloc--nuit a { color: var(--cu-terre-clair); }
.cu-bloc--nuit a:hover { color: #F7D2BE; }

.cu-formulaire { display: grid; gap: var(--e4); }
.cu-formulaire__duo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e4); }
.cu-champ { display: grid; gap: var(--e2); }
.cu-champ label { font-size: .84rem; font-weight: 550; }
.cu-champ input, .cu-champ textarea, .cu-champ select {
  width: 100%; padding: .7rem .85rem;
  font-family: inherit; font-size: .95rem; color: var(--cu-encre);
  background: var(--cu-blanc);
  border: 1px solid var(--cu-ligne); border-radius: var(--r-controle);
  transition: border-color var(--t-ui), box-shadow var(--t-ui);
}
.cu-champ input::placeholder, .cu-champ textarea::placeholder { color: var(--cu-encre-3); opacity: 1; }
.cu-champ input:hover, .cu-champ textarea:hover, .cu-champ select:hover { border-color: #C9BBA9; }
.cu-champ input:focus, .cu-champ textarea:focus, .cu-champ select:focus {
  outline: none; border-color: var(--cu-terre);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cu-terre) 25%, transparent);
}
.cu-champ textarea { min-height: 8rem; resize: vertical; }
.cu-champ--pot { position: absolute; left: -9999px; }

.cu-accord { display: flex; gap: var(--e3); align-items: flex-start; font-size: .84rem; line-height: 1.5; }
.cu-accord input { width: 1rem; height: 1rem; margin-top: .28em; flex: none; accent-color: var(--cu-terre); }

.cu-alerte { padding: var(--e3) var(--e4); font-size: .88rem; }
.cu-alerte--ok { background: #E4EFE1; color: #21401A; }
.cu-alerte--ko { background: #F7E1DB; color: #6B241A; }

/* ==========================================================================
   12. Pied de page
   ========================================================================== */

.cu-pied { padding-block: var(--e8) var(--e5); background: var(--cu-sable); font-size: .88rem; }
.cu-pied__grille { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: var(--e7); margin-bottom: var(--e7); }
.cu-pied h3 { margin-bottom: var(--e3); color: var(--cu-encre-3); font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.cu-pied ul { list-style: none; margin: 0; padding: 0; }
.cu-pied li { margin-bottom: var(--e2); }
.cu-pied a { color: var(--cu-encre-2); }
.cu-pied a:hover { color: var(--cu-terre); }
.cu-pied__intro { max-width: 34ch; margin-top: var(--e3); color: var(--cu-encre-2); }
.cu-pied__bas {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--e3) var(--e5); padding-top: var(--e4);
  border-top: 1px solid var(--cu-ligne);
  color: var(--cu-encre-3); font-size: .78rem;
}

/* ==========================================================================
   13. Pagination, FAQ, recherche, etats vides
   ========================================================================== */

.cu-pagination { display: flex; flex-wrap: wrap; gap: var(--e2); margin-top: var(--e8); }
.cu-pagination .page-numbers {
  display: inline-grid; place-items: center; min-width: 2.6rem; height: 2.6rem; padding-inline: .75rem;
  color: var(--cu-encre); font-size: .88rem; font-weight: 450;
  border: 1px solid var(--cu-ligne); border-radius: var(--r-controle);
  transition: border-color var(--t-ui), background var(--t-ui), color var(--t-ui);
}
.cu-pagination .page-numbers:hover { border-color: var(--cu-terre); color: var(--cu-terre); }
.cu-pagination .page-numbers.current { background: var(--cu-encre); border-color: var(--cu-encre); color: var(--cu-ivoire); }

.cu-faq { display: grid; gap: 0; border-top: 1px solid var(--cu-ligne); }
.cu-faq details { border-bottom: 1px solid var(--cu-ligne); }
.cu-faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e5);
  padding: var(--e5) 0;
  color: var(--cu-encre); font-size: 1.05rem; font-weight: 550; cursor: pointer; list-style: none;
  transition: color var(--t-ui);
}
.cu-faq summary:hover { color: var(--cu-terre); }
.cu-faq summary::-webkit-details-marker { display: none; }
.cu-faq summary::after { content: "+"; flex: none; color: var(--cu-terre); font-size: 1.5em; font-weight: 300; line-height: 1; transition: transform var(--t-ui); }
.cu-faq details[open] summary::after { transform: rotate(45deg); }
.cu-faq__corps { padding-bottom: var(--e5); color: var(--cu-encre-2); font-size: .98rem; max-width: 68ch; }
.cu-faq__corps p:last-child { margin-bottom: 0; }

.cu-recherche { display: flex; gap: var(--e2); max-width: 30rem; }
.cu-recherche input[type="search"] {
  flex: 1 1 auto; min-width: 0; padding: .7rem .9rem;
  font-family: inherit; font-size: .95rem; color: var(--cu-encre);
  background: var(--cu-blanc); border: 1px solid var(--cu-ligne); border-radius: var(--r-controle);
  transition: border-color var(--t-ui), box-shadow var(--t-ui);
}
.cu-recherche input[type="search"]::placeholder { color: var(--cu-encre-3); opacity: 1; }
.cu-recherche input[type="search"]:focus {
  outline: none; border-color: var(--cu-terre);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cu-terre) 25%, transparent);
}

.cu-vide { padding: var(--e8) var(--e5); background: var(--cu-blanc); border: 1px solid var(--cu-ligne); text-align: center; color: var(--cu-encre-2); }
.cu-vide p:last-child { margin-bottom: 0; }

/* ==========================================================================
   14. Mouvement
   Le contenu est visible par defaut. L'entree en scene s'ajoute par-dessus,
   elle ne conditionne jamais l'affichage.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
  .cu-revele.est-arme { opacity: 0; transform: translateY(10px); }
  .cu-revele.est-entree {
    opacity: 1; transform: none;
    transition: opacity var(--t-entree), transform var(--t-entree);
  }
}

/* ==========================================================================
   15. Adaptatif
   ========================================================================== */

@media (max-width: 1080px) {
  .cu-pied__grille { grid-template-columns: 1fr 1fr; gap: var(--e6); }
  .cu-nav__panneau { min-width: 24rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .cu-duo, .cu-duo--texte-large { grid-template-columns: 1fr; }
  .cu-duo > *:last-child { max-width: 32rem; }
  .cu-sommaire ol { columns: 1; }
}

@media (max-width: 840px) {
  .cu-burger { display: inline-flex; }
  .cu-entete__barre { position: relative; }
  .cu-nav {
    display: none; position: absolute; top: calc(100% + .5rem); left: 0; right: 0;
    max-height: calc(100dvh - 6rem); overflow-y: auto;
    padding: var(--e4);
    background: var(--cu-blanc); border: 1px solid var(--cu-ligne);
    box-shadow: 0 24px 48px -28px rgba(36, 26, 18, .35);
  }
  .cu-nav.est-ouverte { display: block; }
  .cu-nav__liste { flex-direction: column; align-items: stretch; gap: 0; }
  .cu-nav__lien { justify-content: space-between; padding: .7rem 0; border-bottom: 1px solid var(--cu-ligne-fine); }
  .cu-nav__lien:hover { border-bottom-color: var(--cu-terre); }
  .cu-nav__panneau {
    position: static; transform: none; opacity: 1; visibility: visible; pointer-events: auto;
    min-width: 0; max-width: none; padding: var(--e3) 0 var(--e4) var(--e4);
    border: 0; box-shadow: none; background: none;
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 620px) {
  .cu-zone { padding-inline: var(--e4); }
  .cu-grille { grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: var(--e6) var(--e3); }
  .cu-grille--large { grid-template-columns: 1fr; }
  .cu-formulaire__duo { grid-template-columns: 1fr; }
  .cu-pied__grille { grid-template-columns: 1fr; gap: var(--e6); }
  .cu-nav__panneau { grid-template-columns: 1fr; }
  .cu-reponse, .cu-sommaire, .cu-encart { padding: var(--e4); }
  .cu-faq summary { font-size: .98rem; gap: var(--e3); }
}

@media print {
  .cu-entete, .cu-pied, .cu-bloc--nuit, .cu-pagination, .cu-burger, .cu-partage { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
}