/* ============================================================
   EchoFirst : modale « compte à rebours nouvelles dates » (V2)
   (js/compte-a-rebours.js). Porté du design Claude Design du
   15/09/2026 (« Popout compte à rebours ») : carte navy plein cadre,
   logo blanc, pastille, chiffres en dégradé séparés par « : »,
   formulaire d'alerte, pied de carte. Valeurs COPIÉES du design,
   jamais héritées d'une autre feuille : dépend seulement des
   variables de css/echofirst.css. Mobile-first, palier à 560 px.
   ============================================================ */

/* ---- voile ---- */
.car-back{
  position:fixed; inset:0; z-index:1100;          /* > .ins-back (400) et .ef-nav (90), < .ef-consent (1200) */
  background:rgba(8,24,48,.62);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  display:flex; align-items:flex-start; justify-content:center;
  padding:16px;
  overflow-y:auto;
  opacity:0; visibility:hidden;
  transition:opacity .35s, visibility .35s;
}
.car-back.open{ opacity:1; visibility:visible; }
.car-back[hidden]{ display:none !important; }     /* display:flex battrait l'UA [hidden] */
.car-back [hidden]{ display:none !important; }    /* idem pour les blocs .car-* en flex/grid */

/* ---- carte ---- */
.car-modal{
  position:relative; margin:auto;                 /* centrée quand elle tient, défilable sinon */
  width:min(100%,860px);
  border-radius:22px; overflow:hidden;
  color:#fff; text-align:center;
  background:linear-gradient(135deg,var(--navy-dark) 0%,var(--navy) 60%,#16508c 100%);
  box-shadow:0 40px 100px rgba(8,24,48,.5), 0 0 0 1px rgba(255,255,255,.08) inset;
  padding:clamp(28px,4.5vh,56px) clamp(18px,5vw,60px) clamp(24px,4vh,44px);
  transform:translateY(18px) scale(.985);
  transition:transform .45s var(--ease-out);
}
.car-back.open .car-modal{ transform:none; }
.car-modal > *{ position:relative; z-index:1; }

/* ---- bouton fermer : 44 px (cible tactile), premier du DOM ---- */
.car-close{
  position:absolute; top:12px; right:12px; z-index:2;
  width:44px; height:44px; border-radius:50%;
  border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.08);
  color:#fff; font:inherit; font-size:18px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .2s;
}
@media (hover:hover){ .car-close:hover{ background:rgba(255,255,255,.2); } }
.car-close:active{ transform:scale(.94); }
.car-close:focus-visible{ outline:3px solid var(--teal-vif); outline-offset:3px; }

/* ---- logo, pastille, titre ---- */
.car-brand{ display:flex; justify-content:center; margin-bottom:clamp(14px,2.5vh,26px); }
.car-brand img{ height:30px; width:auto; }
.car-badge{
  display:inline-flex; align-items:center; gap:9px;
  background:rgba(0,162,181,.16); border:1px solid rgba(79,210,224,.5);
  color:#9bebf4; font-size:12px; font-weight:600; letter-spacing:1.4px; text-transform:uppercase;
  padding:7px 16px; border-radius:30px;
}
.car-live{
  width:8px; height:8px; border-radius:50%; background:var(--teal-vif); flex-shrink:0;
  box-shadow:0 0 0 0 rgba(79,210,224,.6);
  animation:carPulse 1.8s infinite;
}
@keyframes carPulse{ 0%{ box-shadow:0 0 0 0 rgba(79,210,224,.55); } 70%{ box-shadow:0 0 0 9px rgba(79,210,224,0); } 100%{ box-shadow:0 0 0 0 rgba(79,210,224,0); } }
.car-title{
  margin:clamp(12px,2vh,22px) auto 0; max-width:620px;
  color:#fff; font-size:clamp(22px,3vw,32px); font-weight:700; line-height:1.15; letter-spacing:-.6px;
  text-wrap:pretty;
}
.car-title b{ color:var(--teal-vif); font-weight:700; }
/* Le titre reçoit le focus à l'ouverture (tabindex="-1") : cible PROGRAMMATIQUE,
   jamais atteinte au clavier ni à la souris. Pas d'anneau dessus. */
.car-title:focus,
.car-title:focus-visible{ outline:none; }
.car-title::after{ display:none; }                /* neutralise un filet décoratif global sur h2 (pages.css) */

/* ---- décompte : 4 blocs séparés par « : » ---- */
.car-count{
  display:grid; grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;
  align-items:start; gap:0;
  margin:clamp(16px,3.5vh,44px) auto 0; max-width:720px;
}
.car-unit{ position:relative; padding:0 4px; min-width:0; }
.car-sep{
  font-size:clamp(36px,min(6vw,10vh),68px); font-weight:300; line-height:1;
  color:rgba(79,210,224,.55); padding:0 clamp(4px,1vw,12px); align-self:start; margin-top:.02em;
}
.car-num{
  display:block; white-space:nowrap;               /* les boîtes par chiffre ne doivent JAMAIS passer à la ligne */
  /* Plafond 96 px et non 132 : la carte fait 860 px au plus (la maquette en faisait 1160),
     et au-delà de 1024 px d'écran les deux chiffres de chaque bloc (2 × 0,6 em) débordaient
     de leur colonne de ~150 px, le dernier sortant de la carte (constaté en prod le 15/09). */
  font-size:clamp(48px,min(8.5vw,14vh),96px); font-weight:800; line-height:.95;
  padding-bottom:.08em;
  background:linear-gradient(180deg,#fff 30%,var(--teal-vif));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  /* tabular-nums est INERTE sur Poppins (aucune fonctionnalité tnum) : la chasse
     fixe vient des boîtes par chiffre ci-dessous. Déclaré quand même, inoffensif. */
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1;
}
/* Un <span> par chiffre, boîte de largeur FIXE, pour que le décompte ne se
   recentre pas à chaque seconde. 0,6 em reproduit l'approche serrée du design
   (letter-spacing -4 px sur des chiffres de 132 px) : le « 4 » de Poppins 800
   mesure 0,66 em, ses voisins se chevauchent donc de quelques pixels, comme
   dans la maquette. `white-space:nowrap` ci-dessus interdit tout retour à la ligne. */
.car-num span{ display:inline-block; width:.6em; text-align:center; }
.car-num.is-tick{ animation:carTick .35s var(--ease-out); }
@keyframes carTick{ from{ transform:translateY(-6px); opacity:.4; } to{ transform:none; opacity:1; } }
.car-lab{
  display:block; margin-top:6px;
  font-size:clamp(9px,1.3vw,13px); font-weight:600; letter-spacing:1.6px; text-transform:uppercase;
  color:#C9D8EC; line-height:1.2;
}

/* ---- date ---- */
.car-date{ margin:clamp(12px,2.5vh,30px) 0 0; font-size:14px; color:#C9D8EC; font-weight:300; text-wrap:pretty; }
.car-date b{ color:#fff; font-weight:600; }

/* ---- formulaire d'alerte : prénom / nom, puis e-mail / bouton ---- */
.car-notify{ margin:clamp(16px,3vh,36px) auto 0; max-width:560px; }
.car-form{ display:grid; grid-template-columns:1fr; gap:10px; align-items:stretch; }
.car-fields{ display:contents; }
.car-input{
  width:100%; min-width:0; height:54px; padding:0 20px;
  border-radius:40px; border:1.5px solid rgba(255,255,255,.22); background:rgba(255,255,255,.08);
  color:#fff; font-family:inherit; font-size:16px;   /* 16 px : pas de zoom iOS à la saisie */
  outline:none; transition:border-color .2s, background .2s;
}
.car-input::placeholder{ color:rgba(201,216,236,.75); }
.car-input:focus{ border-color:var(--teal-vif); background:rgba(255,255,255,.12); }
.car-input:focus-visible{ outline:3px solid var(--teal-vif); outline-offset:3px; }
/* honeypot : hors écran, jamais dans le parcours Tab (tabindex=-1, aria-hidden) */
.car-hp{ position:absolute !important; left:-9999px !important; width:1px !important; height:1px !important; opacity:0; }
.car-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:54px; padding:0 28px; border-radius:40px; border:none;
  font-family:inherit; font-weight:600; font-size:15px; line-height:1.2; cursor:pointer; text-decoration:none;
  background:var(--teal); color:#fff;
  box-shadow:0 10px 26px rgba(0,162,181,.32);
  transition:background-color .2s, transform .2s, box-shadow .2s;
}
@media (hover:hover) and (pointer:fine){
  .car-btn:hover{ background:var(--teal-dark); transform:translateY(-2px); box-shadow:0 14px 32px rgba(0,162,181,.4); }
}
.car-btn:focus-visible{ outline:3px solid var(--teal-vif); outline-offset:3px; }
.car-btn:disabled{ opacity:.7; cursor:progress; transform:none; }
.car-btn svg{ width:18px; height:18px; flex:none; }
.car-hint{ margin:12px 0 0; font-size:12px; color:rgba(201,216,236,.7); }
.car-error{
  margin:12px 0 0; padding:10px 14px; border-radius:14px;
  background:rgba(255,120,120,.14); border:1px solid rgba(255,138,138,.5);
  color:#FFD1D1; font-size:13.5px; line-height:1.45;
}
.car-error a{ color:#fff; font-weight:600; text-decoration:underline; text-underline-offset:3px; }
.car-ok{
  display:flex; align-items:center; justify-content:center; gap:12px;
  background:rgba(52,211,153,.14); border:1px solid rgba(52,211,153,.45);
  border-radius:40px; padding:14px 22px; font-size:15px; font-weight:500;
}
.car-ok:focus{ outline:none; }
.car-ck{
  width:28px; height:28px; border-radius:50%; background:#34D399; color:var(--navy-dark);
  display:grid; place-items:center; flex:none;
}

/* ---- phase live : bouton vers le catalogue ---- */
.car-actions{ margin:clamp(16px,3vh,36px) auto 0; display:flex; justify-content:center; }

/* ---- pied ---- */
.car-foot{
  margin-top:clamp(16px,2.5vh,34px); padding-top:clamp(12px,2vh,22px);
  border-top:1px solid rgba(255,255,255,.12);
  display:flex; justify-content:center; gap:22px; flex-wrap:wrap;
  font-size:13px; color:#C9D8EC;
}
.car-foot a{ color:#C9D8EC; text-decoration:none; border-bottom:1px solid rgba(201,216,236,.35); transition:color .2s, border-color .2s; }
.car-foot a:hover{ color:#fff; border-color:#fff; }
.car-foot a:focus-visible{ outline:2px solid var(--teal-vif); outline-offset:3px; border-radius:2px; }

/* ---- bascule en place avant → live ---- */
.car-modal.car-swap > *{ animation:carIn .24s var(--ease-out) both; }
@keyframes carIn{ from{ opacity:0; transform:translateY(4px); } to{ opacity:1; transform:none; } }

/* ---- verrou de défilement compensé (js : html.car-lock + --car-sbw) ----
   Le verrou escamote la barre classique : le viewport s'élargit de sa largeur et la
   page saute. On rend ces pixels au flux ET à la nav fixe (deux référentiels).
   scrollbar-gutter:stable a été MESURÉ inopérant sous overflow:hidden. */
html.car-lock body{ padding-right:var(--car-sbw, 0px); }
html.car-lock .ef-nav{ right:var(--car-sbw, 0px); }

/* ---- ≥ 560 px : séparateurs, champs sur deux colonnes ---- */
@media (min-width:560px){
  .car-back{ padding:20px; }
  .car-modal{ border-radius:28px; }
  .car-close{ top:16px; right:16px; }
  .car-form{ grid-template-columns:1fr 1fr; }      /* [Prénom][Nom] / [E-mail][Me prévenir] : deux lignes, pas trois */
  .car-form .car-btn{ padding:0 18px; }
}
/* ---- < 560 px : pas de « : », quatre colonnes serrées ---- */
@media (max-width:559px){
  .car-count{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
  .car-sep{ display:none; }
  .car-num{ font-size:clamp(40px,12vw,64px); }
  .car-num span{ width:.58em; }
  .car-btn{ width:100%; }
}

/* ---- mouvement réduit : rien ne bouge, tout est instantané ---- */
@media (prefers-reduced-motion:reduce){
  .car-back, .car-back.open, .car-modal, .car-back.open .car-modal, .car-close, .car-btn, .car-input{ transition:none; }
  .car-modal, .car-back.open .car-modal{ transform:none; }
  .car-close:active{ transform:none; }
  .car-live{ animation:none; box-shadow:none; }
  .car-num.is-tick{ animation:none; }
  .car-modal.car-swap > *{ animation:none; }
}