/* ============================================================
   ANIMONS — Design System v3 « vacances »
   Style inspiré des maquettes de référence :
   fonds bleu ciel / turquoise, gros titres blancs soulignés jaune,
   panneaux blancs très arrondis, tuiles à icônes pastel.
   ============================================================ */
/* ------------------------------------------------------------
   L'attribut `hidden` doit gagner, toujours.

   Le navigateur applique `display:none` à [hidden] par une règle de
   très faible priorité : n'importe quelle règle de classe qui fixe un
   `display` l’écrase, et l'élément reste visible alors que le code
   le croit caché. Le piège s'est refermé trois fois en une journée —
   sur un bouton « changer », sur un titre de rubrique et sur un
   panneau modal. Cette ligne le referme pour toutes les pages.
   ------------------------------------------------------------ */
[hidden]{ display:none !important; }

:root{
  --v3-blue:#4a93dc;
  --v3-blue-deep:#3a7bc4;
  --v3-sky:linear-gradient(165deg,#63abe9 0%,#4a93dc 55%,#3f83cc 100%);
  --v3-teal:#57bfaf;
  --v3-teal-grad:linear-gradient(165deg,#6fccbc 0%,#57bfaf 60%,#49ab9b 100%);
  --v3-yellow:#f7dd0d;
  --v3-ink:#1e2a3b;
  --v3-muted:#7b8694;
  --v3-card:#ffffff;
  --v3-line:#edf1f7;
  --v3-r-xl:30px;
  --v3-r-lg:24px;
  --v3-r-md:16px;
  --v3-shadow:0 18px 44px rgba(25,55,110,.16);
  --v3-shadow-sm:0 6px 18px rgba(25,55,110,.09);
}

/* ---------- Page ---------- */
.v3-body *{ box-sizing:border-box; }
.v3-body{
  margin:0;
  font-family:'Nunito',system-ui,sans-serif;
  background:var(--v3-sky);
  color:var(--v3-ink);
  min-height:100vh;
  padding:0 0 60px;
  overflow-x:clip;
}
.v3-body.teal{ background:var(--v3-teal-grad); }
.v3-wrap{ max-width:560px; margin:0 auto; padding:0 18px; }

/* ---------- En-tête héro (texte sur fond bleu) ---------- */
/* Titre, sur-titre et accroche centrés ; seul le bouton de retour reste à gauche. */
.v3-head{
  padding:44px 4px 26px;
  display:flex; flex-direction:column; align-items:center; text-align:center;
}
.v3-head > .v3-back,
.v3-head > .v3-back-row{ align-self:flex-start; }
.v3-back-row{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:6px; }

/* Bouton de retour : verre dépoli sur le fond coloré, pour laisser le titre
   être le seul élément vraiment blanc et plein de l'en-tête. */
.v3-back{
  display:inline-flex; align-items:center; gap:6px;
  font-family:'Nunito',system-ui,sans-serif;
  font-weight:900; font-size:13px; color:#fff;
  text-decoration:none; cursor:pointer;
  background:rgba(255,255,255,.17);
  border:1.5px solid rgba(255,255,255,.45);
  border-radius:999px; padding:.5em 1.05em .5em .8em;
  margin-bottom:8px;
  -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px);
  transition:background .16s, border-color .16s, transform .16s;
}
.v3-back::before{
  content:'‹'; font-size:1.5em; line-height:1; margin-top:-.16em;
  opacity:.9;
}
.v3-back:hover{
  background:rgba(255,255,255,.29);
  border-color:rgba(255,255,255,.75);
  transform:translateX(-2px);
}
.v3-back:active{ transform:translateX(-2px) scale(.97); }
.v3-eyebrow{
  color:rgba(255,255,255,.85);
  font-weight:900; font-size:13px;
  text-transform:uppercase; letter-spacing:.22em;
  margin-bottom:10px;
}
.v3-title{
  color:#fff; font-weight:900;
  font-size:clamp(30px,7.5vw,42px);
  line-height:1.12; letter-spacing:-.01em;
  margin:0;
}
/* Identité « double trait sport » — tous les gros titres du site */
.v3-title{ position:relative; display:inline-block; margin:8px 0 6px; }
.v3-title::before{ content:''; position:absolute; top:-7px; left:6%; width:34%; height:6px; border-radius:4px; background:#57bfaf; }
.v3-title::after{ content:''; position:absolute; bottom:-10px; right:6%; width:52%; height:6px; border-radius:4px; background:#fff; opacity:.9; }
.v3-sub{ color:rgba(255,255,255,.92); font-weight:800; font-size:15px; margin-top:12px; line-height:1.5; }

/* ---------- Image héro ---------- */
.v3-hero-img{
  display:block; width:100%;
  border-radius:var(--v3-r-xl);
  box-shadow:var(--v3-shadow);
  margin:4px 0 22px;
}

/* ---------- Panneau blanc ---------- */
.v3-panel{
  background:var(--v3-card);
  border-radius:var(--v3-r-xl);
  box-shadow:var(--v3-shadow);
  padding:20px 18px 24px;
}
.v3-panel-head{
  display:flex; align-items:center; gap:12px;
  padding-bottom:16px; margin-bottom:16px;
  border-bottom:2px solid var(--v3-line);
}
.v3-avatar{
  width:46px; height:46px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:22px; background:linear-gradient(135deg,#ffe9a8,#ffd75e);
  flex-shrink:0;
}
.v3-panel-title{ font-weight:900; font-size:19px; flex:1; }
.v3-panel-title small{ display:block; font-weight:800; font-size:12px; color:var(--v3-muted); margin-top:1px; }
.v3-iconbtn{
  width:42px; height:42px; border-radius:50%;
  border:2px solid var(--v3-line); background:#fff;
  font-size:16px; cursor:pointer; flex-shrink:0;
  transition:transform .15s;
}
.v3-iconbtn:hover{ transform:scale(1.08); }
.v3-iconbtn.on{ border-color:var(--v3-teal); }
.v3-iconbtn:disabled{ opacity:.5; cursor:default; }

/* ---------- Tuiles ---------- */
.v3-tiles{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.v3-tile{
  position:relative;
  background:#fff;
  border:2px solid var(--v3-line);
  border-radius:var(--v3-r-lg);
  padding:18px 16px 16px;
  text-decoration:none; color:var(--v3-ink);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s;
  min-height:118px;
  display:flex; flex-direction:column;
}
.v3-tile:hover{
  transform:translateY(-4px);
  border-color:transparent;
  box-shadow:var(--v3-shadow-sm);
}
.v3-tile .t{ font-weight:900; font-size:16px; line-height:1.25; }
.v3-tile .d{ font-weight:700; font-size:12.5px; color:var(--v3-muted); margin-top:4px; line-height:1.4; }
.v3-tile .ic{
  position:absolute; right:12px; bottom:12px;
  width:44px; height:44px; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  font-size:22px;
}
.ic.c1{ background:rgba(74,147,220,.14); }   /* bleu   */
.ic.c2{ background:rgba(87,191,175,.16); }   /* teal   */
.ic.c3{ background:rgba(247,221,13,.20); }   /* jaune  */
.ic.c4{ background:rgba(239,124,110,.16); }  /* corail */
.ic.c5{ background:rgba(154,119,224,.15); }  /* violet */
.ic.c6{ background:rgba(233,163,25,.18); }   /* doré   */

/* ---------- Carte « programme du jour » ---------- */
.v3-daycard{
  border-radius:var(--v3-r-lg);
  background:linear-gradient(150deg,#57a2e6 0%,#4a93dc 60%,#3f83cc 100%);
  color:#fff; padding:20px 18px;
  box-shadow:var(--v3-shadow-sm);
  margin-bottom:14px;
  position:relative; overflow:hidden;
}
.v3-daycard .dc-day{ font-weight:900; font-size:22px; line-height:1.15; }
.v3-daycard .dc-date{ font-weight:800; font-size:13px; opacity:.85; margin-bottom:12px; }
.v3-event{
  display:flex; gap:12px; align-items:baseline;
  padding:8px 0 8px 14px;
  border-left:5px solid var(--v3-yellow);
  margin-bottom:6px;
}
.v3-event.ev2{ border-color:#ef7c6e; }
.v3-event.ev3{ border-color:#9a77e0; }
.v3-event.ev4{ border-color:#57bfaf; }
.v3-event .e-t{ font-weight:900; font-size:15px; }
.v3-event .e-m{ font-weight:700; font-size:12.5px; opacity:.85; }
.v3-dots{ text-align:center; padding:6px 0 2px; }
.v3-dots span{
  display:inline-block; width:7px; height:7px; border-radius:50%;
  background:#d5dce6; margin:0 3px;
}
.v3-dots span.on{ background:#9aa7b8; }

/* ---------- Bannières & formulaires ---------- */
.v3-banner{
  background:rgba(87,191,175,.12);
  border:2px solid rgba(87,191,175,.45);
  border-radius:var(--v3-r-md);
  padding:12px 14px; font-weight:800; font-size:14px;
  margin-bottom:16px;
}
.v3-field{ display:block; font-weight:800; font-size:13px; margin:0 0 4px; }
.v3-input{
  width:100%; font-family:'Nunito'; font-weight:800; font-size:15px;
  padding:.65em .8em; border-radius:12px;
  border:2px solid var(--v3-line); background:#fff; color:var(--v3-ink);
  margin-bottom:12px; outline:none;
}
.v3-input:focus{ border-color:var(--v3-blue); }
.v3-btn{
  width:100%; font-family:'Nunito'; font-weight:900; font-size:15px;
  padding:.85em; border-radius:14px; border:none; cursor:pointer;
  background:var(--v3-blue); color:#fff;
  transition:transform .15s, background .15s;
}
.v3-btn:hover{ background:var(--v3-blue-deep); transform:translateY(-1px); }
.v3-btn.ghost{ background:transparent; border:2px solid var(--v3-line); color:var(--v3-ink); }

/* ---------- Toast ---------- */
.v3-toast{
  position:fixed; top:14px; left:50%;
  transform:translate(-50%,-90px);
  background:var(--v3-ink); color:#fff;
  font-weight:800; font-size:13px;
  padding:.7em 1.2em; border-radius:999px;
  box-shadow:0 12px 30px rgba(10,30,60,.35);
  transition:transform .35s cubic-bezier(.2,.9,.3,1.2);
  z-index:2000; max-width:92vw; text-align:center;
}
.v3-toast.show{ transform:translate(-50%,0); }

/* ---------- Animations d'arrivée ---------- */
@keyframes v3Up{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } }
.v3-anim{ animation:v3Up .5s ease both; }
.v3-anim.d1{ animation-delay:.06s; } .v3-anim.d2{ animation-delay:.12s; }
.v3-anim.d3{ animation-delay:.18s; } .v3-anim.d4{ animation-delay:.24s; }

@media (prefers-reduced-motion:reduce){ .v3-anim{ animation:none; } }


/* ============================================================
   ORDINATEUR — couche partagée
   ------------------------------------------------------------
   Ce fichier n'avait aucune règle d'écran : `.v3-wrap` valait
   560 px partout, du téléphone au 27 pouces. Les 45 pages qui
   l'utilisent s'affichaient donc en bandeau étroit au milieu
   d'un grand vide.

   La colonne s'élargit — mais avec mesure. Étirer une liste sur
   1 300 px ne la rend pas plus lisible : l'œil perd la ligne
   suivante et doit balayer la tête de gauche à droite. On monte
   à 720 puis 860 px, ce qui reste une longueur de ligne
   confortable, et on agrandit le titre en même temps, sinon la
   page semble seulement zoomée.

   La page d'accueil, elle, a sa propre mise en page en deux
   colonnes : elle ne dépend pas de ces règles.
   ============================================================ */
@media (min-width:900px){
  .v3-wrap{ max-width:720px; padding:0 24px; }
  .v3-head{ padding:56px 4px 32px; }
}
@media (min-width:1280px){
  .v3-wrap{ max-width:860px; }
}

/* Le clavier doit voir où il est : sur ordinateur, la tabulation
   sert vraiment (et elle est indispensable à qui n'utilise pas
   de souris). Le contour jaune passe sur le bleu comme sur le blanc. */
@media (hover:hover){
  a:focus-visible, button:focus-visible,
  input:focus-visible, select:focus-visible, textarea:focus-visible{
    outline:3px solid #ffc94d; outline-offset:2px;
  }
}