/* 123Noel.com — feuille de style principale
   Palette : rouge de Noël, vert sapin, or. Fond crème plutôt que blanc pur :
   les cartes, très colorées, s'y posent mieux que sur du blanc. */
:root{
  --rouge:#b3122a;
  --rouge-clair:#d4162f;
  --rouge-fonce:#8d0d20;
  --vert:#0d6b42;
  --vert-fonce:#0a5433;
  --or:#d9a441;
  --or-clair:#f6d9a0;
  --or-pale:#fdf4e5;
  --or-texte:#8a6414;
  /* Structure hors saison : le vert sapin ne tient pas douze mois sur un site
     dont seize catégories sur dix-huit ne sont pas hivernales. */
  --encre-band:#2a2622;
  /* Accent de la page : réécrit dans l en-tête selon la catégorie, sinon le mois.
     Les valeurs ci-dessous ne servent que si le PHP ne répond pas. */
  --accent:#b3122a;
  --accent-fonce:#8a0f21;
  --accent-pale:#fbedef;
  --bandeau:var(--vert);   /* l or quand il porte du texte : l or clair tombe a 2,25 sur fond blanc */
  --ink:#231f20;
  --body:#3f3a37;
  --muted:#5c554f;
  --line:#e9e0d5;
  --bg:#fffdfa;
  --bg-soft:#f7f1e8;
  --radius:14px;
  --maxw:1180px;
  --ombre:0 1px 2px rgba(60,40,20,.06),0 10px 30px rgba(60,40,20,.08);
  --ombre-forte:0 4px 10px rgba(60,40,20,.10),0 18px 46px rgba(60,40,20,.14);
  /* Georgia est présent sur tous les systèmes : on obtient une allure de faire-part
     sans charger une police distante, qui pisterait le visiteur au passage. */
  --titre:Georgia,"Iowan Old Style","Times New Roman",serif;
}
*{box-sizing:border-box}
/* Sans cette ligne, display:grid d'une classe l'emporte sur l'attribut hidden :
   le bloc « date de remise » resterait visible alors qu'il est masqué. */
[hidden]{display:none!important}
/* Le site est clair, quel que soit le thème du navigateur. Sans ces deux
   lignes, un Firefox ou un Windows en thème sombre peint en noir tout ce qui
   n'est pas couvert par la page — bandes au-dessus et au-dessous du contenu,
   zone de rebond au défilement — et grise les champs de formulaire. */
:root{color-scheme:light}
html{background:var(--bg);-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--body);
  font:400 16px/1.68 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
img{max-width:100%;height:auto}
a{color:var(--rouge);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{color:var(--ink);line-height:1.2;margin:0 0 .6em}
h1{font-family:var(--titre);font-size:clamp(1.9rem,4.2vw,2.8rem);font-weight:700;letter-spacing:-.015em}
h2{font-family:var(--titre);font-size:clamp(1.4rem,2.8vw,2rem);font-weight:700;letter-spacing:-.01em}
h3{font-size:1.06rem;font-weight:700}
p{margin:0 0 1rem}
ul,ol{margin:0 0 1rem;padding-left:1.3rem}
li{margin:.3rem 0}
.container{max-width:var(--maxw);margin:0 auto;padding:0 20px}
.muted{color:var(--muted);font-size:.93rem}
.plain{list-style:none;padding:0;margin:0}
.plain li{margin:.4rem 0}
.center{text-align:center}
.intro{font-size:1.08rem;color:#4a443f}
.picto{vertical-align:-.22em;flex:0 0 auto}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;background:#fff;padding:.6rem 1rem;z-index:99;border-radius:6px}
/* Anneau a deux tons : aucune couleur unique ne tient a la fois sur le creme,
   le rouge des boutons, le vert du bandeau et l encre du pied. */
:focus-visible{outline:3px solid var(--ink);outline-offset:2px;box-shadow:0 0 0 2px var(--or-clair)}

/* ---------- En-tête ---------- */
.site-header{background:#fff;position:sticky;top:0;z-index:40;box-shadow:0 1px 0 var(--line),0 6px 18px rgba(60,40,20,.05)}
.site-header .nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:76px}
.brand{display:flex;align-items:center;gap:.7rem;flex-shrink:0;color:var(--ink)}
.brand:hover{text-decoration:none}
.brand img{width:46px;height:46px;display:block;transform:rotate(-8deg);transition:transform .2s}
.brand:hover img{transform:rotate(-16deg) scale(1.05)}
.brand-text{display:flex;flex-direction:column;line-height:1.1}
.brand-text strong{font-family:var(--titre);font-size:1.5rem;font-weight:700;color:var(--rouge);letter-spacing:-.01em}
.brand-text small{font-size:.68rem;text-transform:uppercase;letter-spacing:.2em;color:var(--or-texte);font-weight:700}
#mainnav{display:flex;align-items:center;gap:.15rem;flex-wrap:wrap}
#mainnav a{color:var(--ink);font-weight:600;font-size:.94rem;padding:.55rem .7rem;border-radius:999px}
#mainnav a:hover{background:var(--accent-pale);color:var(--accent-fonce);text-decoration:none}
#mainnav .navyt{color:#fff;background:var(--rouge);margin-left:.4rem;display:inline-flex;align-items:center;gap:.35rem;padding:.55rem 1rem}
#mainnav .navyt:hover{background:var(--rouge-fonce);color:#fff}
/* Connexion : présent pour qui le cherche, effacé pour les autres. */
#mainnav .navcnx{color:var(--muted);font-size:.85rem;font-weight:600;padding:.55rem .6rem}
#mainnav .navcnx:hover{color:var(--rouge);background:var(--or-pale)}
.menu-toggle{display:none;background:#fff;border:1px solid var(--line);border-radius:999px;padding:.55rem 1rem;font-weight:700;cursor:pointer}

/* Bandeau des catégories : liseré doré au-dessus du vert sapin */
.bandeau-cats{background:var(--bandeau);border-top:2px solid var(--or)}
.bandeau-cats .container{display:flex;gap:.1rem;overflow-x:auto;scrollbar-width:none}
.bandeau-cats .container::-webkit-scrollbar{display:none}
.bandeau-cats a{color:#e9f7ef;font-size:.85rem;font-weight:600;padding:.6rem .75rem;white-space:nowrap;border-radius:0}
.bandeau-cats a:hover{background:rgba(255,255,255,.14);text-decoration:none;color:#fff}
.bandeau-cats .plus{color:var(--or-clair)}

/* ---------- Boutons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
  background:var(--accent);color:#fff!important;font-weight:700;
  padding:.78rem 1.5rem;border-radius:999px;border:2px solid var(--accent);
  text-align:center;cursor:pointer;font-size:1rem;line-height:1.3;
  box-shadow:0 2px 8px rgba(40,25,15,.22);
  transition:background .15s,border-color .15s,transform .1s,box-shadow .15s;
}
.btn:hover{background:var(--accent-fonce);border-color:var(--accent-fonce);text-decoration:none;box-shadow:0 4px 14px rgba(40,25,15,.28)}
.btn:active{transform:translateY(1px)}
.btn.small{padding:.42rem .95rem;font-size:.87rem;box-shadow:none}
.btn.large{padding:1rem 2.3rem;font-size:1.12rem}
.btn-vert{background:var(--vert);border-color:var(--vert);box-shadow:0 2px 8px rgba(10,84,51,.22)}
.btn-vert:hover{background:var(--vert-fonce);border-color:var(--vert-fonce)}
.btn-or{background:var(--or);border-color:var(--or);color:#402d06!important;box-shadow:0 2px 10px rgba(141,99,20,.28)}
.btn-or:hover{background:#c8942f;border-color:#c8942f;color:#402d06!important}
.btn-outline{background:transparent;color:var(--accent)!important;border-color:var(--accent);box-shadow:none}
.btn-outline:hover{background:var(--accent);color:#fff!important}
.btn-light{background:#fff;color:var(--rouge)!important;border-color:#fff}
.btn-light:hover{background:#fdf6ee;border-color:#fdf6ee}
.btn-outline-light{background:rgba(255,255,255,.08);color:#fff!important;border-color:rgba(255,255,255,.75);box-shadow:none}
.btn-outline-light:hover{background:rgba(255,255,255,.18);border-color:#fff}
.btn[disabled]{opacity:.6;cursor:not-allowed}

/* ---------- Fil d'Ariane ---------- */
.breadcrumb{padding:.9rem 20px;font-size:.86rem;color:var(--muted)}
.breadcrumb a{color:var(--muted)}
.breadcrumb a:hover{color:var(--rouge)}

/* ---------- Héros ---------- */
.hero{
  position:relative;overflow:hidden;color:#fff;text-align:center;
  padding:3.8rem 0 3.4rem;
  background:
    radial-gradient(900px 420px at 50% -10%,rgba(255,255,255,.18),transparent 70%),
    linear-gradient(165deg,#a81027 0%,#8d0d20 55%,#6d0a19 100%);
}
/* Étoiles : trois tailles semées, plutôt qu'une image de fond à télécharger */
.hero::before{
  content:"";position:absolute;inset:0;opacity:.5;
  background-image:
    radial-gradient(circle,rgba(255,255,255,.9) 0 1.4px,transparent 2px),
    radial-gradient(circle,rgba(246,217,160,.85) 0 1.1px,transparent 2px),
    radial-gradient(circle,rgba(255,255,255,.55) 0 .9px,transparent 2px);
  background-size:220px 180px,150px 240px,90px 120px;
  background-position:0 0,60px 90px,25px 40px;
}
.hero::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:5px;
  background:linear-gradient(90deg,var(--or),var(--or-clair),var(--or));
}
.hero .container{position:relative;z-index:2}
.hero h1{color:#fff;margin-bottom:.6rem;text-shadow:0 2px 18px rgba(0,0,0,.25)}
.hero .lead{font-size:1.14rem;color:#ffeede;max-width:60ch;margin:0 auto 1.8rem}
.hero-actions{display:flex;flex-wrap:wrap;gap:.9rem;justify-content:center}
.hero-points{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;margin-top:2.2rem}
.hero-points span{
  display:inline-flex;align-items:center;gap:.45rem;color:#ffeede;font-size:.9rem;font-weight:600;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);
  padding:.42rem .9rem;border-radius:999px;backdrop-filter:blur(2px);
}
.hero-points .picto{color:var(--or-clair)}

/* ---------- Sections ---------- */
.section{padding:3.4rem 0}
.section.soft{background:var(--bg-soft)}
.section-head{max-width:70ch;margin:0 auto 2.2rem;text-align:center}
.section-head p{color:var(--muted)}
/* Trois losanges dorés sous les titres de section */
.section-head h1::after,.section-head h2::after{
  content:"◆ ◆ ◆";display:block;margin:.55rem 0 0;
  color:var(--accent);font-size:.52rem;letter-spacing:.5em;text-indent:.5em;font-weight:400;
}

/* ---------- Grilles ---------- */
.grid{display:grid;gap:1.4rem}
.grid-cats{grid-template-columns:repeat(auto-fill,minmax(228px,1fr));gap:1.1rem}
/* La largeur suit le nombre de vedettes : une seule catégorie à la une ne doit
   pas s'étaler sur toute la page, trois doivent tenir sur une ligne. */
.grid-saison{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  max-width:calc(var(--colonnes,3) * 420px);margin-left:auto;margin-right:auto}
.grid-cartes{grid-template-columns:repeat(auto-fill,minmax(245px,1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}

/* ---------- En ce moment ---------- */
.saison-tete{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;flex-wrap:wrap;margin-bottom:1.5rem}
.saison-tete h2{margin:0 0 .15rem}
.saison-tete p{margin:0}

/* Vignette de catégorie : le titre se pose sur la photo */
.cat{
  display:block;background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--ombre);color:var(--body);
  transition:box-shadow .18s,transform .18s;
}
.cat:hover{box-shadow:var(--ombre-forte);transform:translateY(-4px);text-decoration:none}
.cat .vignette{position:relative;display:block;aspect-ratio:4/3;background:var(--bg-soft);overflow:hidden}
.cat .vignette img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s}
.cat:hover .vignette img{transform:scale(1.04)}
/* Pas de voile sur toute la vignette : il noircissait la photo pour protéger
   deux lignes de texte. Le fond sombre est porté par le bloc de titre seul, et
   s'arrête donc à la hauteur du texte — l'image reste claire au-dessus.
   Sous le texte, l'opacité ne descend jamais en dessous de 0,82 : même sur une
   photo entièrement blanche, le blanc du titre garde 9:1 de contraste. */
.cat .vignette::after{
  content:"";position:absolute;inset:auto 0 0 0;height:34%;
  background:linear-gradient(transparent,rgba(20,10,5,.35));
}
.cat .titre{
  position:absolute;left:0;right:0;bottom:0;z-index:2;padding:1.5rem 1rem 1rem;
  background:linear-gradient(rgba(20,10,5,0),rgba(20,10,5,.82) 30%,rgba(20,10,5,.93));
}
.cat .titre h3{
  margin:0;font-family:var(--titre);font-size:1.08rem;font-weight:700;color:#fff;
  text-shadow:0 1px 10px rgba(0,0,0,.55);line-height:1.25;
}
.cat .sous{
  display:block;margin-top:.4rem;color:#f0e6da;font-size:.87rem;line-height:1.45;
  text-shadow:0 1px 8px rgba(0,0,0,.7);
}
.cat .compte{
  position:absolute;right:.7rem;top:.7rem;z-index:2;background:var(--or);color:#402d06;
  font-size:.74rem;font-weight:800;padding:.22rem .66rem;border-radius:999px;letter-spacing:.01em;
}
/* Vignette « en ce moment » : plus grande, titre plus fort. Son bloc porte en
   plus une description, il est donc naturellement plus haut. */
.cat.vedette .vignette{aspect-ratio:16/10}
.cat.vedette .vignette::after{height:30%}
.cat.vedette .titre{padding:1.8rem 1.2rem 1.2rem}
.cat.vedette .titre h3{font-size:1.4rem}

/* Vignette de carte */
.carte{
  display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;box-shadow:var(--ombre);
  transition:box-shadow .18s,transform .18s;
}
.carte:hover{box-shadow:var(--ombre-forte);transform:translateY(-4px)}
.carte .vignette{position:relative;aspect-ratio:4/3;background:var(--bg-soft);display:block;overflow:hidden}
.carte .vignette img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s}
.carte:hover .vignette img{transform:scale(1.04)}
.carte .video-pastille{
  position:absolute;left:.6rem;top:.6rem;right:auto;max-width:calc(100% - 1.2rem);
  display:inline-flex;align-items:center;gap:.25rem;
  background:var(--or);color:#402d06;
  font-size:.72rem;font-weight:800;padding:.22rem .6rem;border-radius:999px;
  box-shadow:0 2px 6px rgba(0,0,0,.25);
}
.carte .video-pastille .picto{vertical-align:0}
.carte .rang{
  position:absolute;right:.6rem;top:.6rem;background:rgba(35,31,32,.86);color:#fff;
  font-size:.72rem;font-weight:800;padding:.22rem .6rem;border-radius:999px;
  box-shadow:0 2px 6px rgba(0,0,0,.25);
}
.carte .corps{padding:.95rem 1rem 1.1rem;display:flex;flex-direction:column;flex:1}
.carte h3{font-size:1rem;margin-bottom:.3rem;line-height:1.3}
.carte h3 a{color:var(--ink)}
.carte h3 a:hover{color:var(--accent)}
.carte p{font-size:.85rem;color:var(--muted);margin:0 0 .9rem}
.carte .actions{margin-top:auto;display:flex;gap:.4rem;flex-wrap:wrap}

/* ---------- Page d'une carte ---------- */
.carte-detail{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:2.6rem;align-items:start;padding:2.6rem 0}
.carte-detail .visuel{
  border-radius:var(--radius);overflow:hidden;background:#fff;padding:10px;
  border:1px solid var(--line);box-shadow:var(--ombre-forte);
}
.carte-detail .visuel img{display:block;width:100%;border-radius:8px}
.carte-detail .texte h1{margin-bottom:.35rem}
.carte-detail .texte h2{font-family:inherit;font-size:.86rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.09em;color:var(--rouge);margin:1.8rem 0 .8rem}
.video-wrap{position:relative;aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden;background:#000;margin:0 0 1.1rem;box-shadow:var(--ombre)}
.video-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-affiche{position:relative;display:block;width:100%;height:100%;border:0;padding:0;cursor:pointer;background:#000}
.video-affiche img{width:100%;height:100%;object-fit:cover;display:block;opacity:.82;transition:opacity .2s}
.video-affiche:hover img{opacity:.95}
.video-affiche .play{
  position:absolute;inset:0;margin:auto;width:78px;height:54px;border-radius:16px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(179,18,42,.94);color:#fff;
  box-shadow:0 6px 20px rgba(0,0,0,.35);transition:transform .15s,background .15s;
}
.video-affiche .play .picto{vertical-align:0;stroke-width:1.5}
.video-affiche:hover .play{background:var(--rouge-clair);transform:scale(1.07)}

/* Mention « carte animée et musicale » : discrète mais repérable, posée sur
   un fond doré pâle plutôt qu'écrite en gris au milieu du texte. */
.mention-musicale{
  display:flex;align-items:flex-start;gap:.5rem;margin:0 0 1.2rem;
  background:var(--or-pale);border-left:4px solid var(--or);
  padding:.7rem .9rem;border-radius:0 8px 8px 0;
  font-size:.92rem;line-height:1.55;color:#4a443f;
}
.mention-musicale .picto{color:var(--or-texte);margin-top:.15rem}
.mention-musicale strong{color:var(--ink)}

/* ---------- Étapes ---------- */
.etapes{counter-reset:etape;display:grid;gap:1.3rem;grid-template-columns:repeat(auto-fit,minmax(245px,1fr))}
.etape{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.6rem 1.4rem;box-shadow:var(--ombre)}
.etape::before{
  counter-increment:etape;content:counter(etape);
  display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;
  background:linear-gradient(145deg,var(--or),#c8942f);color:#402d06;font-family:var(--titre);
  font-weight:700;font-size:1.2rem;margin-bottom:.9rem;box-shadow:0 3px 10px rgba(141,99,20,.25);
}
.etape h3{margin-bottom:.35rem;font-size:1.05rem}
.etape p{color:var(--muted);font-size:.93rem;margin:0}

/* ---------- Formulaires ---------- */
.field{margin-bottom:1.1rem}
.field label{display:block;font-weight:700;color:var(--ink);margin-bottom:.35rem;font-size:.94rem}
.field input,.field select,.field textarea{
  width:100%;padding:.74rem .9rem;border:1px solid #8f8172;border-radius:10px;
  font:inherit;color:var(--body);background:#fff;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--or);border-color:var(--or)}
.field textarea{min-height:130px;resize:vertical}
.field .aide{font-size:.83rem;color:var(--muted);margin:.35rem 0 0}
.field-coche{display:flex;gap:.6rem;align-items:flex-start;margin-bottom:.8rem;font-size:.95rem}
.field-coche input{margin-top:.25rem;width:1.1rem;height:1.1rem;flex:0 0 auto;accent-color:var(--rouge)}
.deux{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.pot-de-miel{position:absolute;left:-9999px}

.alert{padding:.9rem 1.1rem;border-radius:10px;margin-bottom:1.2rem;font-weight:600}
.alert.ok{background:#e8f6ec;color:#146c2e;border:1px solid #bfe3c9}
.alert.err{background:#fdecec;color:#9b1c1c;border:1px solid #f5c6c6}
.alert.info{background:var(--or-pale);color:#7a5a12;border:1px solid #efdcb8}

.form-envoi{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.8rem;box-shadow:var(--ombre)}
.form-envoi h2{font-family:inherit;font-size:.86rem;font-weight:800;text-transform:uppercase;
  letter-spacing:.09em;color:var(--rouge);margin:1.8rem 0 .9rem;padding-bottom:.45rem;border-bottom:1px solid var(--line)}
.form-envoi h2:first-of-type{margin-top:0}
.amis{display:grid;gap:.7rem;margin-bottom:.5rem}
.ami{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:.6rem;align-items:center}
.ami input{width:100%;padding:.68rem .85rem;border:1px solid #8f8172;border-radius:10px;font:inherit}
.ami input:focus{outline:2px solid var(--or);border-color:var(--or)}
.ami-num{display:none}

/* ---------- Carte reçue ---------- */
.recue{max-width:800px;margin:0 auto;padding:2.6rem 0}
.recue .enveloppe{
  background:#fff;border-radius:20px;overflow:hidden;box-shadow:var(--ombre-forte);
  border:1px solid var(--line);border-top:5px solid var(--or);
}
.recue .ruban{
  background:linear-gradient(135deg,var(--rouge-clair),var(--rouge-fonce));
  color:#fff;padding:1.3rem 1.5rem;text-align:center;
}
.recue .ruban strong{font-family:var(--titre);font-size:1.4rem;font-weight:700;display:block}
.recue .ruban .de{display:flex;align-items:baseline;justify-content:center;gap:.5rem;flex-wrap:wrap;
  margin:.7rem 0 0;color:#ffeade;font-size:1.1rem}
/* Le prénom en doré sur le rouge : 3,9:1 au point le plus clair du dégradé,
   ce qui demande du gros texte — d'où la taille et la graisse, qui tombent
   bien puisque c'est justement le mot qu'on veut voir en premier. */
.recue .ruban .de .qui{font-family:var(--titre);font-size:1.45rem;font-weight:700;
  color:var(--or-clair);line-height:1.2}
/* Le coeur reste collé au prénom : seul sur sa ligne, quand un nom long passe
   à la ligne, il avait l'air d'une coquille. */
.recue .ruban .de .qui .picto{vertical-align:-.12em;margin-right:.35rem}
.recue .dedans{padding:1.8rem 1.8rem 2.2rem}
.recue .visuel-carte{
  display:block;width:100%;border-radius:10px;margin:0 0 1.6rem;
  border:8px solid #fff;box-shadow:0 2px 6px rgba(60,40,20,.12),0 14px 36px rgba(60,40,20,.16);
}
.recue .message{
  background:var(--or-pale);border-left:4px solid var(--or);padding:1.3rem 1.5rem;border-radius:0 12px 12px 0;
  font-family:var(--titre);font-size:1.12rem;line-height:1.75;color:#3a332c;
  white-space:pre-wrap;margin:0 0 1.2rem;
}
.recue .signature{text-align:right;font-family:var(--titre);font-style:italic;font-size:1.15rem;
  font-weight:700;color:var(--rouge);margin:0 0 1.8rem}
.recue h2{font-family:inherit;font-size:.86rem;font-weight:800;text-transform:uppercase;
  letter-spacing:.09em;color:var(--muted);margin:0 0 .8rem}

/* ---------- Bande d'appel ---------- */
.cta-band{background:var(--bandeau);color:#fff;padding:2.6rem 0;border-top:3px solid var(--or)}
.cta-band h2{color:#fff;margin-bottom:.3rem}
.cta-band p{color:#dbf0e5;margin:0}
.cta-inner{display:flex;align-items:center;justify-content:space-between;gap:1.6rem;flex-wrap:wrap}
.cta-actions{display:flex;gap:.7rem;flex-wrap:wrap}

/* ---------- Pied ---------- */
.site-footer{background:var(--ink);color:#c9c1b9;padding:2.8rem 0 1.4rem;font-size:.93rem;border-top:4px solid var(--or)}
.site-footer h3{color:#fff;font-size:.8rem;margin-bottom:.8rem;text-transform:uppercase;letter-spacing:.09em}
.site-footer a{color:#c9c1b9}
.site-footer a:hover{color:var(--or-clair);text-decoration:none}
.footer-brand{display:flex;align-items:center;gap:.6rem;font-family:var(--titre);font-size:1.25rem;color:#fff;margin-bottom:.6rem}
.footer-brand img{width:34px;height:34px;transform:rotate(-8deg)}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:2.4rem}
.footer-bottom{border-top:1px solid #3a3533;margin-top:2.2rem;padding-top:1.1rem;color:#8d8781;font-size:.84rem}
.footer-bottom p{margin:0}

/* ---------- Pagination ---------- */
.pagination{display:flex;gap:.35rem;flex-wrap:wrap;justify-content:center;margin:2.4rem 0 0}
.pagination a,.pagination span{
  padding:.5rem .9rem;border:1px solid var(--line);border-radius:10px;background:#fff;
  font-weight:600;font-size:.9rem;color:var(--ink);
}
.pagination .on{background:var(--accent);border-color:var(--accent);color:#fff}
.pagination a:hover{background:var(--accent-pale);border-color:var(--accent);text-decoration:none}

/* ---------- Questions fréquentes ---------- */
.faq details{border:1px solid var(--line);border-radius:12px;margin-bottom:.7rem;background:#fff}
.faq summary{padding:.95rem 1.2rem;font-weight:700;cursor:pointer;color:var(--ink);list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";float:right;color:var(--or-texte);font-weight:800;font-size:1.2rem;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq details p{padding:0 1.2rem 1.1rem;margin:0;color:var(--muted)}

/* ---------- Effet de neige ---------- */
.neige{position:fixed;inset:0;pointer-events:none;z-index:30;overflow:hidden}
.flocon{position:absolute;top:-12px;color:#fff;opacity:.72;text-shadow:0 1px 4px rgba(0,0,0,.18);animation:tombe linear infinite}
@keyframes tombe{
  0%{transform:translateY(-12px) translateX(0) rotate(0)}
  100%{transform:translateY(102vh) translateX(var(--derive,20px)) rotate(240deg)}
}
/* Système réglé sur « moins d'animations » : plus rien ne tombe, sauf si le
   back-office a demandé d'afficher l'effet malgré tout. */
@media (prefers-reduced-motion:reduce){
  body:not([data-anim-force]) .neige{display:none}
}

/* ---------- Téléphone ---------- */
@media(max-width:880px){
  .menu-toggle{display:block}
  #mainnav{display:none;position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:1px solid var(--line);
    flex-direction:column;align-items:stretch;padding:.6rem 20px 1rem;box-shadow:0 12px 24px rgba(60,40,20,.12)}
  #mainnav.open{display:flex}
  #mainnav a{padding:.75rem .6rem;border-radius:10px}
  #mainnav .navyt{justify-content:center;margin:.5rem 0 0}
  .site-header .nav{position:relative;min-height:64px}
  .brand img{width:40px;height:40px}
  .brand-text strong{font-size:1.28rem}
  .hero{padding:2.8rem 0 2.6rem}
  .carte-detail{grid-template-columns:1fr;gap:1.6rem;padding:1.6rem 0}
  .footer-grid{grid-template-columns:1fr;gap:1.8rem}
  .deux{grid-template-columns:1fr}
  .ami{grid-template-columns:1fr}
  .ami-num{display:block;font-size:.78rem;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
  .cta-inner{flex-direction:column;align-items:flex-start}
  .section{padding:2.4rem 0}
  .form-envoi,.recue .dedans{padding:1.2rem}
  .recue .ruban .de{font-size:1rem;gap:.45rem}
  .recue .ruban .de .qui{font-size:1.25rem}
  .recue{padding:1.4rem 0}
  /* 16 px minimum : en dessous, iOS zoome tout seul sur le champ touché */
  input,select,textarea{font-size:16px}
}