/* ==========================================================================
   ClemManu's Airlines - base.css
   Jetons partages, polices auto-hebergees, primitives d'interface.
   Ce fichier est charge par la page invite ET par l'espace maries.
   Aucune ressource externe : polices locales uniquement (CSP stricte, RGPD).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Polices auto-hebergees (declarees UNE SEULE FOIS, ici)
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Playfair Display';
  src: url('../fonts/playfair-display-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Playfair Display';
  src: url('../fonts/playfair-display-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../fonts/cormorant-garamond-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../fonts/cormorant-garamond-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Great Vibes';
  src: url('../fonts/great-vibes-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   2. Jetons de conception
   -------------------------------------------------------------------------- */
:root {
  /* Charte */
  --bleu-profond: #1B6CB5;
  --bleu-ciel:    #6FC4DE;
  --bleu-pale:    #DFF3F7;
  --or-sable:     #C9A96A;
  --or-clair:     #E0CFA6;
  --encre:        #111111;
  --blanc:        #FFFFFF;
  --degrade-principal: linear-gradient(135deg, #1B6CB5 0%, #6FC4DE 48%, #DFF3F7 100%);

  /* Derives utilitaires */
  --encre-douce:  #3D4650;
  --encre-faible: #5C6672;
  --trait:        #D6DEE4;
  --bleu-sombre:  #14568F;   /* survol des aplats bleus */
  --succes:       #1F7A4D;
  --alerte:       #9A3412;
  --erreur:       #A11B1B;
  --attente:      #7A5A12;

  /* Typographie */
  --police-titre:  'Playfair Display', Georgia, 'Times New Roman', serif;
  --police-texte:  'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --police-prenom: 'Great Vibes', 'Segoe Script', cursive;

  --taille-xs: 0.8125rem;
  --taille-s:  0.9375rem;
  --taille-m:  1.125rem;
  --taille-l:  1.3125rem;
  --taille-xl: 1.625rem;
  --taille-xxl: 2.125rem;

  /* Rythme */
  --pas-1: 4px;
  --pas-2: 8px;
  --pas-3: 12px;
  --pas-4: 16px;
  --pas-5: 24px;
  --pas-6: 32px;
  --pas-7: 48px;

  /* Formes */
  --rayon-s: 8px;
  --rayon-m: 14px;
  --rayon-l: 22px;
  --ombre-carte: 0 10px 30px rgba(17, 45, 78, 0.18);
  --ombre-douce: 0 2px 10px rgba(17, 45, 78, 0.10);

  /* Cibles tactiles : public de 8 a 90 ans */
  --cible-min: 56px;

  --duree: 180ms;
}

/* --------------------------------------------------------------------------
   3. Remise a plat
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  font-family: var(--police-texte);
  font-size: var(--taille-m);
  line-height: 1.55;
  color: var(--encre);
  background: var(--bleu-pale);
  background-image: var(--degrade-principal);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--police-titre);
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 var(--pas-3);
}
h1 { font-size: var(--taille-xl); }
h2 { font-size: var(--taille-l); }
h3 { font-size: var(--taille-m); }

p { margin: 0 0 var(--pas-4); }

a { color: var(--bleu-sombre); }
a:hover { color: var(--bleu-profond); }

img, svg { max-width: 100%; }

button, input, textarea, select { font: inherit; color: inherit; }

/* Anneau de focus unique, visible sur fond clair comme sur fond bleu */
:focus-visible {
  outline: 3px solid var(--or-sable);
  outline-offset: 2px;
  border-radius: 4px;
}

[hidden] { display: none !important; }

.ca-invisible {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   4. Primitives partagees
   -------------------------------------------------------------------------- */

/* Conteneur : la page doit tenir de 320 a 430 px */
.ca-page {
  width: 100%;
  max-width: 430px;
  margin: 0 auto;
  padding: var(--pas-4) var(--pas-4) var(--pas-7);
}

/* Carte blanche */
.ca-carte {
  background: var(--blanc);
  border-radius: var(--rayon-m);
  box-shadow: var(--ombre-douce);
  padding: var(--pas-5) var(--pas-4);
}

/* Boutons : grande cible, contraste franc */
.ca-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--pas-2);
  width: 100%;
  min-height: var(--cible-min);
  padding: var(--pas-3) var(--pas-4);
  border: 2px solid transparent;
  border-radius: var(--rayon-l);
  background: var(--bleu-profond);
  color: var(--blanc);
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: var(--taille-s);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--duree) ease, transform var(--duree) ease;
}
.ca-btn:hover  { background: var(--bleu-sombre); }
.ca-btn:active { transform: translateY(1px); }
.ca-btn[disabled],
.ca-btn[aria-disabled='true'] {
  background: var(--trait);
  color: var(--encre-faible);
  cursor: not-allowed;
  transform: none;
}

.ca-btn--fantome {
  background: transparent;
  color: var(--bleu-sombre);
  border-color: var(--bleu-profond);
}
.ca-btn--fantome:hover { background: var(--bleu-pale); color: var(--bleu-sombre); }

.ca-btn--or {
  background: var(--or-sable);
  color: var(--encre);
}
.ca-btn--or:hover { background: var(--or-clair); color: var(--encre); }

.ca-btn--danger {
  background: transparent;
  color: var(--erreur);
  border-color: var(--erreur);
}

.ca-btn + .ca-btn { margin-top: var(--pas-3); }

/* Champs de saisie */
.ca-champ { margin-bottom: var(--pas-4); }

.ca-champ__etiquette {
  display: block;
  margin-bottom: var(--pas-2);
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: var(--taille-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--encre-douce);
}

.ca-champ__saisie {
  width: 100%;
  min-height: var(--cible-min);
  padding: var(--pas-3);
  border: 2px solid var(--trait);
  border-radius: var(--rayon-s);
  background: var(--blanc);
  color: var(--encre);
  font-size: var(--taille-m);
}
.ca-champ__saisie:hover { border-color: var(--or-clair); }
.ca-champ__saisie:focus { border-color: var(--bleu-profond); }
.ca-champ__saisie[aria-invalid='true'] { border-color: var(--erreur); }

.ca-champ__aide {
  display: block;
  margin-top: var(--pas-1);
  font-size: var(--taille-s);
  color: var(--encre-faible);
}

.ca-champ__erreur {
  display: block;
  margin-top: var(--pas-1);
  font-size: var(--taille-s);
  font-weight: 500;
  color: var(--erreur);
}
.ca-champ__erreur:empty { display: none; }

/* Case a cocher : cible large, jamais prechochee cote HTML */
.ca-case {
  display: flex;
  align-items: flex-start;
  gap: var(--pas-3);
  padding: var(--pas-3);
  border: 2px solid var(--trait);
  border-radius: var(--rayon-s);
  cursor: pointer;
}
.ca-case:hover { border-color: var(--or-sable); }
.ca-case input[type='checkbox'] {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  margin: 0;
  accent-color: var(--bleu-profond);
}
.ca-case__texte { font-size: var(--taille-s); }

/* Bandeaux d'information */
.ca-alerte {
  padding: var(--pas-3);
  border-left: 5px solid var(--or-sable);
  border-radius: var(--rayon-s);
  background: var(--bleu-pale);
  font-size: var(--taille-s);
}
.ca-alerte--erreur  { border-left-color: var(--erreur); background: #FDECEC; color: var(--erreur); }
.ca-alerte--succes  { border-left-color: var(--succes); background: #E9F6EF; color: var(--succes); }
.ca-alerte--attente { border-left-color: var(--attente); background: #FBF3DE; color: var(--attente); }

/* Filet decoratif dore */
.ca-filet {
  height: 2px;
  border: 0;
  margin: var(--pas-4) 0;
  background: linear-gradient(90deg, transparent, var(--or-sable), transparent);
}

/* Selecteur de langue, visible en permanence */
.ca-lang {
  display: inline-flex;
  border: 2px solid var(--or-sable);
  border-radius: 999px;
  overflow: hidden;
  background: var(--blanc);
}
.ca-lang__btn {
  min-width: 52px;
  min-height: 40px;
  padding: 0 var(--pas-3);
  border: 0;
  background: transparent;
  color: var(--encre-douce);
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: var(--taille-xs);
  letter-spacing: 0.1em;
  cursor: pointer;
}
.ca-lang__btn[aria-pressed='true'] {
  background: var(--or-sable);
  color: var(--encre);
}

/* Pied de page commun */
.ca-pied {
  margin-top: var(--pas-5);
  text-align: center;
  font-size: var(--taille-xs);
  color: var(--encre-douce);
}
.ca-pied a { color: var(--encre-douce); }

/* --------------------------------------------------------------------------
   5. Mouvement reduit
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}