/* Charte HospitalitIA — IA pour les métiers de l'hospitalité
   Qualité, accessible. Chargée après les styles de chaque page : elle a le dernier mot. */

:root {
  /* Couleurs de la charte */
  --bg: #F6F0E6;            /* Lin : fond */
  --bg-card: #FFFFFF;       /* Carte */
  --ink: #1D1D1B;           /* Encre */
  --ink-soft: #5E5A54;      /* Encre douce */
  --terracotta: #B0532E;    /* Terracotta foncé : boutons et accents (texte blanc lisible dessus) */
  --terracotta-dark: #93431F;
  --green: #17433B;         /* Vert sapin : couleur principale de la marque */
  --green-soft: #E1EBE7;    /* Vert doux : fonds d'encarts */
  --line: #E4DDD1;          /* Filets et séparations */
  --field: #8C8378;         /* Bordure des champs de saisie */

  /* Température des prospects */
  --chaud: #B0532E;
  --tiede: #8A5A0F;
  --froid: #4F6F80;

  /* Formes */
  --r-s: 10px; --r-m: 12px; --r-l: 18px; --r-pill: 999px;
  --shadow: 0 2px 12px rgba(23, 67, 59, .07);
}

/* Typographie : Outfit partout (police compagnon du logo) */
body, h1, h2, h3.serif, .group-title, .gift-title, .hotel-name, .stat .n { font-family: 'Outfit', -apple-system, 'Segoe UI', sans-serif; }
body { font-size: 16px; line-height: 1.625; }
h1 { font-weight: 500; line-height: 1.17; color: var(--green); }
h2 { font-weight: 500; font-size: 26px; line-height: 1.23; color: var(--green); }
.group-title, .gift-title { font-size: 20px; line-height: 1.3; font-weight: 500; color: var(--green); }
p.lead, .lead { font-size: 16px; line-height: 1.625; }
.item-text, .quote, .gift p, .task p, .section-sub, .instead, .fine { font-size: 14px; line-height: 1.57; }
.brand, .step-label, .gift-kicker, .prompt-label, .badge, .gain {
  font-size: 13px; line-height: 18px; font-weight: 600; letter-spacing: .04em;
}

/* En-tête : logo HospitalitIA + accroche */
.brand { flex-wrap: wrap; gap: 8px 16px; text-transform: none; letter-spacing: .01em; font-weight: 500; }
.brand-logo { display: block; height: 44px; width: auto; }
.brand-tag { border-left: 1px solid var(--line); padding-left: 16px; }
.symbol-hero { display: block; height: 64px; width: auto; margin: 4px auto 18px; }
.brand-dot { display: none; }

/* Bannière d'accueil (texte réel + arche connectée en SVG).
   Mêmes proportions que l'ancienne image (851 x 315) sur ordinateur, empilée sur mobile. */
.hb{position:relative;overflow:hidden;container-type:inline-size;aspect-ratio:851/315;background:#FFFFFF;border-radius:18px;box-shadow:0 8px 28px rgba(23,67,59,.10);font-family:'Outfit',system-ui,sans-serif;text-align:left;margin:0 0 22px}
.hb .hb-txt{position:absolute;left:6.6%;top:50%;transform:translateY(-50%);width:60%}
.hb .hb-k{display:block;font-size:max(11px,1.53cqw);line-height:1.3;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:#B0532E;margin-bottom:1.9cqw}
.hb .hb-titre{font-family:inherit;font-size:5.64cqw;line-height:1.08;font-weight:500;letter-spacing:-.01em;color:#17433B;margin:0;text-wrap:balance}
.hb .hb-titre em{font-style:normal;color:#C8613A}
.hb .hb-sous{font-size:max(14px,2.35cqw);line-height:1.4;font-weight:300;color:#5E5A54;margin:2.1cqw 0 0}
.hb .hb-arche{position:absolute;right:5.4%;bottom:-4cqw;height:104.8%;width:auto;display:block}
@media (max-width:560px){
  .hb{aspect-ratio:auto;padding:26px 22px 132px;border-radius:14px}
  .hb .hb-txt{position:relative;left:auto;top:auto;transform:none;width:auto}
  .hb .hb-k{font-size:11px;margin-bottom:10px}
  .hb .hb-titre{font-size:28px}
  .hb .hb-sous{font-size:15px;margin-top:10px}
  .hb .hb-arche{right:22px;bottom:-12px;height:128px}
}

/* Cartes : coins arrondis, ombre unique très douce, jamais de contour dur */
.card, .end, .task, .pitem, .stat { border-radius: var(--r-l); box-shadow: var(--shadow); }
.option, .quote, .prompt, .rule, .gift { border-radius: var(--r-m); }
.hero-img { border-radius: var(--r-l); }

/* Champs de saisie */
input[type=text], input[type=email], input[type=password], input[type=search], textarea, select {
  border-radius: var(--r-s); border-color: var(--field);
}
input:focus, textarea:focus, select:focus { border-color: var(--terracotta); box-shadow: 0 0 0 3px color-mix(in srgb, var(--terracotta) 18%, transparent); }

/* Boutons en pastille */
button.btn, a.btn, .btn, .copy, .chip, .scale button { border-radius: var(--r-pill); }
.btn-primary, .btn:not(.btn-ghost) { background: var(--terracotta); color: #fff; }
.btn-primary:not(:disabled):hover, .btn:not(.btn-ghost):hover { background: var(--terracotta-dark); }
.btn-ghost { background: var(--green-soft); color: var(--green); border: none; }
.btn-ghost:hover { color: var(--green); background: color-mix(in srgb, var(--green) 14%, var(--green-soft)); }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--terracotta) 45%, transparent); outline-offset: 2px; }
input:focus-visible, textarea:focus-visible, select:focus-visible { outline: none; }

footer { font-size: 13px; line-height: 1.5; }

/* Encart cadeau : fond vert doux plutôt qu'un contour pointillé */
.gift { border: none; background: var(--green-soft); }

/* Checklist : « à ne jamais confier » en terracotta plutôt qu'en rouge */
:root { --no: #93431F; --no-soft: #F3E2D8; --code-bg: #F1EBE1; }

/* Affichage toujours clair.
   « only light » demande aux navigateurs de ne pas assombrir le site d'eux-mêmes,
   et les blocs ci-dessous annulent les versions sombres prévues dans chaque page. */
:root { color-scheme: only light; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #F6F0E6; --bg-card: #FFFFFF; --ink: #1D1D1B; --ink-soft: #5E5A54; --line: #E4DDD1;
    --green: #17433B; --green-soft: #E1EBE7; --field: #8C8378; --shadow: 0 2px 12px rgba(23, 67, 59, .07);
    --error: #B3261E; --no: #93431F; --no-soft: #F3E2D8; --code-bg: #F1EBE1;
  }
}
:root[data-theme="dark"] {
  --bg: #F6F0E6; --bg-card: #FFFFFF; --ink: #1D1D1B; --ink-soft: #5E5A54; --line: #E4DDD1;
  --green: #17433B; --green-soft: #E1EBE7; --field: #8C8378; --shadow: 0 2px 12px rgba(23, 67, 59, .07);
  --error: #B3261E; --no: #93431F; --no-soft: #F3E2D8; --code-bg: #F1EBE1;
}