/* ==========================================================================
 * Anniva — identité visuelle commune (style « crème & corail », octobre 2026)
 * S'active avec <body class="an"> + les polices Fraunces (titres) et Nunito Sans
 * (texte) chargées depuis Google Fonts. Se pose par-dessus Bootstrap 5.3.
 * --------------------------------------------------------------------------*/
:root{
  --an-creme:#FFF7EC;        /* fond */
  --an-papier:#FFFDF8;       /* barres, encarts clairs */
  --an-blanc:#FFFFFF;
  --an-encre:#3B2A24;        /* texte */
  --an-gris:#6E5A50;         /* texte secondaire (6:1 sur le fond) */
  --an-ligne:#F0E2CF;        /* bordures */
  --an-ligne-champ:#E7CDB8;
  --an-corail:#B8432A;       /* accent : boutons, liens forts (5:1 sous texte blanc) */
  --an-corail-fonce:#8A2E17;
  --an-corail-pale:#FCE4D8;
  --an-bougie:#F2C14E;       /* décor */
  --an-peche:#F4A27A;        /* décor */
  --an-rayon:24px;
  --an-ombre:0 1px 2px rgba(90,40,20,.08),0 8px 24px rgba(90,40,20,.06);
  --an-titre:"Fraunces",Georgia,serif;
  --an-texte:"Nunito Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
}

body.an{background:var(--an-creme);color:var(--an-encre);font-family:var(--an-texte);font-size:16px;line-height:1.5}
.an h1,.an h2,.an .an-titre{font-family:var(--an-titre);font-weight:600;letter-spacing:-.02em;color:var(--an-encre)}
.an a{color:var(--an-corail-fonce)}
.an a:hover{color:#5E1D0D}
.an a.btn{color:var(--bs-btn-color)}            /* un lien en forme de bouton garde la couleur du bouton */
.an a.btn:hover{color:var(--bs-btn-hover-color)}
.an .text-muted{color:var(--an-gris)!important}

/* --- Bootstrap aux couleurs d'Anniva ------------------------------------ */
.an .btn{border-radius:999px;font-weight:700;padding:.6rem 1.25rem}
.an .btn-sm{padding:.4rem .9rem}
.an .btn-lg{padding:.8rem 1.6rem}
.an .btn-primary{--bs-btn-bg:var(--an-corail);--bs-btn-border-color:var(--an-corail);--bs-btn-hover-bg:var(--an-corail-fonce);--bs-btn-hover-border-color:var(--an-corail-fonce);--bs-btn-active-bg:var(--an-corail-fonce);--bs-btn-active-border-color:var(--an-corail-fonce);--bs-btn-disabled-bg:var(--an-corail);--bs-btn-disabled-border-color:var(--an-corail);--bs-btn-focus-shadow-rgb:184,67,42}
.an .btn-outline-primary,.an .btn-outline-secondary{--bs-btn-color:var(--an-encre);--bs-btn-bg:var(--an-blanc);--bs-btn-border-color:var(--an-ligne-champ);--bs-btn-hover-color:var(--an-encre);--bs-btn-hover-bg:#FBEFE3;--bs-btn-hover-border-color:var(--an-ligne-champ);--bs-btn-active-color:var(--an-encre);--bs-btn-active-bg:#F8E6D9;--bs-btn-active-border-color:var(--an-ligne-champ);border-width:1.5px;font-weight:600}
.an .btn-link{color:var(--an-corail-fonce);font-weight:600}
.an .form-control,.an .form-select{border-radius:12px;border:1.5px solid var(--an-ligne-champ);background-color:var(--an-blanc);min-height:46px;color:var(--an-encre)}
.an .form-control:focus,.an .form-select:focus,.an .form-check-input:focus{border-color:var(--an-corail);box-shadow:0 0 0 .2rem rgba(184,67,42,.18)}
.an .form-check-input:checked{background-color:var(--an-corail);border-color:var(--an-corail)}
.an .form-label{font-weight:600}
.an .alert{border-radius:16px;border:none}
.an .alert-success{background:#E6F2E1;color:#2F4D1B}
.an .alert-danger{background:#FBE1DA;color:#7A1F0D}
.an .alert-warning{background:#FFF0CC;color:#5C4200}
.an .alert-info{background:#FFF4E6;color:#5E3A2C}
.an .modal-content{border:none;border-radius:var(--an-rayon);background:var(--an-papier)}
.an .modal-header,.an .modal-footer{border:none}

.an .card{border:none;border-radius:var(--an-rayon);box-shadow:var(--an-ombre)}
.an .form-control-plaintext{color:var(--an-encre)}
.an .table{--bs-table-bg:transparent}

/* --- Pages simples (inscription, mot de passe, désinscription…) ----------- */
.an-etroit{max-width:500px;margin:0 auto;width:100%}
.an-titre-page{font-size:clamp(28px,4.5vw,40px);line-height:1.12;margin-bottom:.5rem}
.an-ico-rond{width:48px;height:48px;border-radius:14px;background:var(--an-corail-pale);color:var(--an-corail-fonce);display:flex;align-items:center;justify-content:center;flex:none}

/* --- En-tête -------------------------------------------------------------- */
.an-entete{background:var(--an-papier);border-bottom:1px solid var(--an-ligne)}
.an-entete .an-cadre{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding-top:14px;padding-bottom:14px}
.an-logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--an-encre)!important}
.an-logo-ico{width:40px;height:40px;border-radius:12px;background:var(--an-corail);color:#fff;display:flex;align-items:center;justify-content:center}
.an-logo-nom{font-family:var(--an-titre);font-size:26px;font-weight:700;letter-spacing:-.5px}
.an-nav{display:flex;flex-wrap:wrap;align-items:center;gap:4px}
.an-nav a{padding:10px 14px;border-radius:999px;color:var(--an-encre);text-decoration:none;font-weight:600}
.an-nav a:hover{background:#FBEFE3;color:var(--an-encre)}
.an-nav a[aria-current="page"]{background:#F8E6D9;color:#5E1D0D}
.an-nav a.btn-primary,.an-nav a.btn-primary:hover{color:#fff;font-weight:700}
.an-nav a.btn-primary{background:var(--an-corail)}
.an-nav a.btn-primary:hover{background:var(--an-corail-fonce)}
.an-nav .an-nav-discret{color:var(--an-gris);font-weight:400}

/* --- Mise en page --------------------------------------------------------- */
.an-cadre{max-width:1080px;margin:0 auto;padding-left:20px;padding-right:20px}
.an-page{padding-top:40px;padding-bottom:64px;display:flex;flex-direction:column;gap:40px}
.an-carte{background:var(--an-blanc);border-radius:var(--an-rayon);box-shadow:var(--an-ombre);padding:24px}
.an-sous-titre{color:var(--an-gris);font-size:18px;margin:0}
.an-pied{border-top:1px solid var(--an-ligne);color:var(--an-gris);font-size:14px;padding:24px 0}

/* --- Avatars, pastilles --------------------------------------------------- */
.an-av{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;flex:none}
.an-av-l{width:48px;height:48px;font-size:20px}
.av-0{background:#FCE4D8;color:#8A2E17}.av-1{background:#E6EEDB;color:#3C5A1E}.av-2{background:#E3E4F6;color:#2F3577}
.av-3{background:#DCEFEE;color:#1E5552}.av-4{background:#F9DDE7;color:#7D1D45}.av-5{background:#F1E6DA;color:#5E3A2C}
.av-fete{background:#F6E7B8;color:#6B4E00}
.an-chip{display:inline-block;padding:4px 12px;border-radius:999px;background:#F5EEE6;color:#5E3A2C;font-size:14px;font-weight:700;white-space:nowrap}
.an-chip-fete{background:#FBF1D4;color:#6B4E00}
.an-chip-jour,.an-chip-fort{background:var(--an-corail);color:#fff}
.an-chip-doux{background:#FFF1E2;color:#7A4210}

/* --- « Bientôt » ---------------------------------------------------------- */
.an-prochains{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}
.an-prochain{background:var(--an-blanc);border-radius:var(--an-rayon);padding:20px;display:flex;flex-direction:column;gap:14px;box-shadow:var(--an-ombre)}
.an-prochain-jour{background:var(--an-corail-pale)}
.an-prochain-haut{display:flex;align-items:center;justify-content:space-between;gap:8px}
.an-prochain-nom{font-family:var(--an-titre);font-size:22px;font-weight:600;line-height:1.2}
.an-prochain-detail{color:var(--an-gris)}
.an-prochain-jour .an-prochain-detail{color:#5E3A2C}

/* --- Liste par mois ------------------------------------------------------- */
.an-liste{padding:8px 20px 12px}
.an-mois{margin:18px 0 2px;font-family:var(--an-texte);font-size:14px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:var(--an-corail-fonce)}
.an-ligne{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;padding:12px 0;border-bottom:1px solid #F3E7DA}
.an-groupe .an-ligne:last-child{border-bottom:none}
.an-ligne-qui{flex:1 1 180px;min-width:0}
.an-ligne-nom{font-weight:700}
.an-ligne-date{color:var(--an-gris);font-size:15px}
.an-actions{display:flex;gap:4px;margin:0}
.an-ico-btn{width:44px;height:44px;border:none;border-radius:12px;background:transparent;color:var(--an-gris);display:flex;align-items:center;justify-content:center;cursor:pointer}
.an-ico-btn:hover{background:#FBEFE3;color:var(--an-encre)}
.an-ico-btn:focus-visible{outline:2px solid var(--an-corail);outline-offset:2px}
.an-recherche{flex:0 1 340px;min-width:220px;display:flex;align-items:center;gap:10px;min-height:48px;padding:0 16px;background:var(--an-blanc);border:1.5px solid #EBD9C6;border-radius:999px;color:var(--an-gris);margin:0}
.an-recherche input{flex:1;min-width:0;border:none;outline:none;background:transparent;font:inherit;color:var(--an-encre)}
.an-recherche:focus-within{border-color:var(--an-corail)}

/* --- Premières dates (carte #guide de log.php) ----------------------------- */
.an-etapes{display:flex;align-items:center;gap:10px;color:var(--an-gris);font-weight:700;font-size:15px}
.an-etapes-barre{display:flex;gap:4px}
.an-etapes-barre span{width:28px;height:8px;border-radius:999px;background:var(--an-ligne)}
.an-etapes-barre span.on{background:var(--an-corail)}
.an-rassure{display:flex;gap:14px;align-items:flex-start;background:var(--an-papier);border:1px solid var(--an-ligne);border-radius:18px;padding:16px}
.an legend.form-label{float:none;font-size:1rem;margin-bottom:.5rem}
.an-date .form-select{padding-left:10px;padding-right:24px;background-position:right 6px center}
.an-options summary{cursor:pointer;font-weight:700;color:var(--an-corail-fonce);width:max-content;max-width:100%}
.an-options summary:focus-visible{outline:2px solid var(--an-corail);outline-offset:2px;border-radius:6px}

/* --- Téléphone : « Bientôt » défile horizontalement, menu compact -------- */
@media (max-width:576px){
  .an-page{padding-top:28px;gap:32px}
  .an-nav a{padding:8px 10px;font-size:15px}
  .an-prochains{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(210px,78%);overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -20px;padding:2px 20px 10px}
  .an-prochain{scroll-snap-align:start}
  .an-rassure{padding:14px}
  .an-rassure .an-ico-rond{display:none}
}

/* --- Page d'accueil : aperçu du produit (HTML, pas une image) ------------- */
.an-apercu{position:relative;max-width:460px;margin:0 auto 40px}
.an-apercu-ecran{background:var(--an-blanc);border-radius:var(--an-rayon);overflow:hidden;box-shadow:0 2px 4px rgba(90,40,20,.06),0 24px 48px rgba(90,40,20,.12)}
.an-apercu-barre{display:flex;gap:6px;padding:12px 16px;background:var(--an-papier);border-bottom:1px solid var(--an-ligne)}
.an-apercu-barre span{width:10px;height:10px;border-radius:50%;background:#EBD9C6}
.an-apercu-corps{padding:14px 14px 40px}             /* place pour l’e-mail qui chevauche le bas */
.an-apercu-titre{font-family:var(--an-titre);font-size:20px;font-weight:600;margin:0 0 6px 8px}
.an-apercu-ligne{display:flex;align-items:center;gap:12px;padding:10px;border-radius:16px}
.an-apercu-jour{background:var(--an-corail-pale)}
.an-apercu-qui{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3}
.an-apercu-qui strong{font-size:17px}
.an-apercu-qui span{color:var(--an-gris);font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.an-apercu-jour .an-apercu-qui span{color:#5E3A2C}
.an-apercu .an-chip{font-size:13px}
.an-apercu-mail{position:absolute;left:-20px;right:48px;bottom:-34px;display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--an-blanc);border:1px solid var(--an-ligne);border-radius:18px;box-shadow:0 14px 34px rgba(90,40,20,.18)}
.an-apercu-mail .an-logo-ico{width:38px;height:38px;border-radius:11px}
.an-apercu-mail-txt{display:flex;flex-direction:column;min-width:0;font-size:14px;line-height:1.35}
.an-apercu-mail-de{font-weight:700}
.an-apercu-mail-de span{font-weight:400;color:var(--an-gris)}
.an-apercu-mail-txt strong{font-weight:600}
@media (max-width:576px){.an-apercu-mail{left:10px;right:10px}}

/* --- Page d'accueil : « Aujourd'hui, on fête… » --------------------------- */
section.an-fdj{position:relative;z-index:1;margin-top:-56px;padding:0 0 1rem}
.an-fdj-carte{display:grid;gap:18px;padding:24px 28px}
.an-fdj-haut{display:flex;align-items:center;gap:16px}
.an-fdj-date{margin:0;color:var(--an-corail-fonce);font-size:14px;font-weight:800;letter-spacing:1px;text-transform:uppercase}
.an-fdj-titre{margin:2px 0 0;font-size:clamp(22px,3vw,30px);line-height:1.2}
.an-fdj-titre a{color:var(--an-corail);text-decoration:none;border-bottom:2px solid #F4C9B6}
.an-fdj-titre a:hover{color:var(--an-corail-fonce);border-bottom-color:var(--an-corail)}
.an-fdj-semaine{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.an-fdj-semaine a{display:flex;flex-direction:column;padding:10px 14px;border-radius:16px;background:var(--an-creme);color:var(--an-encre);text-decoration:none;min-width:0}
.an-fdj-semaine a:hover{background:#FBEFE3;color:var(--an-encre)}
.an-fdj-quand{font-size:13px;font-weight:600;color:var(--an-gris)}
.an-fdj-nom{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.an-fdj-pied{margin:0;color:var(--an-gris);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 16px}
.an-fdj-lien{display:inline-flex;align-items:center;gap:6px;font-weight:700;text-decoration:none;white-space:nowrap}
@media (max-width:767px){.an-fdj-semaine{grid-template-columns:repeat(3,minmax(0,1fr))}.an-fdj-carte{padding:20px}section.an-fdj{margin-top:-24px}}

/* --- Frise animée (serpentins de fête, page d'accueil) -------------------- */
.an-frise{display:block;width:100%;height:auto;pointer-events:none}
.an-frise path{fill:none;stroke-linecap:round}
.an-frise .f-bougie{stroke:var(--an-bougie);stroke-width:20;opacity:.9}
.an-frise .f-peche{stroke:var(--an-peche);stroke-width:13;opacity:.85}
.an-frise .f-corail{stroke:#D8603F;stroke-width:7;opacity:.8}
@media (prefers-reduced-motion:no-preference){
  .an-frise path{stroke-dasharray:1;stroke-dashoffset:1;animation:an-dessin 2.4s cubic-bezier(.45,.05,.25,1) forwards}
  .an-frise .f-peche{animation-delay:.25s}
  .an-frise .f-corail{animation-delay:.5s}
  .an-frise-flotte{animation:an-flotte 9s ease-in-out 2.6s infinite alternate}
  .an-apercu-mail{animation:an-arrivee .7s cubic-bezier(.2,.8,.2,1) 1.1s both}   /* l'e-mail « arrive » */
}
@keyframes an-arrivee{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}
@keyframes an-dessin{to{stroke-dashoffset:0}}
@keyframes an-flotte{from{transform:translateY(0)}to{transform:translateY(-8px)}}

.visually-hidden-focusable:not(:focus):not(:focus-within){position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important}