/* Styles communs à toutes les applications clientes. Les couleurs, polices et arrondis viennent du thème
   du client (/client/theme.css) via des variables CSS ; valeurs neutres par défaut ci-dessous. */
:root {
  --police-titres: Georgia, serif;
  --police-texte: system-ui, -apple-system, 'Segoe UI', sans-serif;
  --c-fond: #ffffff; --c-surface: #f6f6f6; --c-carte: #ffffff; --c-carte-hi: #f0f0f0;
  --c-texte-fort: #111111; --c-texte: #222222; --c-texte-doux: #555555; --c-texte-pale: #777777;
  --c-bordure-fine: #e5e5e5; --c-bordure: #cccccc; --c-bordure-forte: #888888;
  --c-principal: #0F4C81; --c-principal-survol: #0c3d68; --c-sur-principal: #ffffff;
  --c-succes: #2e7d32; --c-succes-fond: rgba(46,125,50,.12); --c-alerte: #b26a00; --c-alerte-fond: rgba(178,106,0,.12);
  --c-danger: #c62828; --c-danger-texte: #c62828; --c-danger-fond: rgba(198,40,40,.1); --c-info: #0277bd; --c-info-fond: rgba(2,119,189,.1);
  --r-sm: 4px; --r-md: 12px; --r-lg: 20px; --focus: 0 0 0 3px rgba(15,76,129,.4);
  --ease: cubic-bezier(0.16, 0.84, 0.44, 1); --interligne-titres: 1.15;
  --largeur: 1280px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--c-fond); color: var(--c-texte); font-family: var(--police-texte); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: var(--c-principal); }
a:hover { color: var(--c-texte-fort); }
h1, h2, h3 { font-family: var(--police-titres); color: var(--c-texte-fort); margin: 0; line-height: var(--interligne-titres); }
h1, h2 { font-weight: 900; text-transform: uppercase; }
h3 { font-weight: 400; }
p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--r-sm); }
::selection { background: var(--c-principal); color: var(--c-sur-principal); }
.visuellement-cache { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.conteneur { max-width: var(--largeur); margin: 0 auto; padding: 0 24px; }
.pile { display: flex; flex-direction: column; gap: 16px; }
.ligne { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.entre { justify-content: space-between; }
.grille { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.doux { color: var(--c-texte-doux); }
.pale { color: var(--c-texte-pale); font-size: 13px; }
.fort { color: var(--c-texte-fort); font-weight: 700; }
.chiffre { font-family: var(--police-titres); font-weight: 900; color: var(--c-texte-fort); }
.sourcil { margin: 0 0 12px; color: var(--c-principal); font-size: 12px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; }
.etiquette { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--c-texte-doux); }

/* Boutons : un seul bouton principal par vue, les autres en contour */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: var(--r-sm); padding: 12px 20px; font-weight: 800; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; cursor: pointer; border: 1px solid transparent; transition: transform 120ms var(--ease), background 200ms; background: none; color: var(--c-texte-fort); }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; }
.btn-principal { background: var(--c-principal); color: var(--c-sur-principal); }
.btn-principal:hover { background: var(--c-principal-survol); color: var(--c-sur-principal); }
.btn-contour { border-color: var(--c-bordure-forte); color: var(--c-texte-fort); }
.btn-contour:hover { border-color: var(--c-texte-fort); color: var(--c-texte-fort); }
.btn-danger { border-color: var(--c-danger); color: var(--c-danger-texte); }
.btn-lien { padding: 4px 0; text-transform: none; letter-spacing: 0; font-weight: 600; color: var(--c-principal); text-decoration: underline; }
.btn-petit { padding: 8px 12px; font-size: 11px; }
.btn-large { width: 100%; padding: 16px; font-size: 14px; }

/* Cartes et choix */
.carte { background: var(--c-carte); border: 1px solid var(--c-bordure-fine); border-radius: var(--r-md); padding: 24px; }
.carte-survol { transition: transform 200ms var(--ease), background 200ms; }
.carte-survol:hover { transform: translateY(-3px); background: var(--c-carte-hi); }
.choix { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 20px; border-radius: var(--r-md); cursor: pointer; text-align: left; background: var(--c-carte); border: 1px solid var(--c-bordure-fine); color: var(--c-texte-fort); width: 100%; transition: background 200ms, border-color 200ms; }
.choix:hover { background: var(--c-carte-hi); }
.choix[aria-pressed="true"], .choix[aria-checked="true"], .choix.actif { background: var(--c-carte-hi); border-color: var(--c-principal); }
.choix[disabled] { opacity: .45; cursor: not-allowed; }
.choix-colonne { flex-direction: column; align-items: flex-start; gap: 8px; }
.puce { min-width: 44px; height: 40px; padding: 0 10px; border-radius: var(--r-sm); cursor: pointer; font-weight: 700; font-size: 12px; background: var(--c-surface); color: var(--c-texte); border: 1px solid var(--c-bordure); }
.puce[aria-pressed="true"] { background: var(--c-info); border-color: var(--c-info); color: #000; }
.badge { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 3px 10px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; border: 1px solid currentColor; white-space: nowrap; }
.badge-plein { border: 0; }
.badge-succes { color: var(--c-succes); background: var(--c-succes-fond); border-color: transparent; }
.badge-alerte { color: var(--c-alerte); background: var(--c-alerte-fond); border-color: transparent; }
.badge-danger { color: var(--c-danger-texte); background: var(--c-danger-fond); border-color: transparent; }
.badge-info { color: var(--c-info); background: var(--c-info-fond); border-color: transparent; }
.badge-neutre { color: var(--c-texte-doux); background: var(--c-carte-hi); border-color: transparent; }

/* Champs */
.champ { display: flex; flex-direction: column; gap: 6px; }
.champ > span, .champ > label { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--c-texte-doux); }
.saisie, .champ input, .champ select, .champ textarea { background: var(--c-carte); color: var(--c-texte-fort); border: 1px solid var(--c-bordure); border-radius: var(--r-sm); padding: 11px 12px; font-size: 15px; font-weight: 500; width: 100%; }
.champ textarea { min-height: 96px; resize: vertical; }
.champ input:focus, .champ select:focus, .champ textarea:focus, .saisie:focus { border-color: var(--c-principal); outline: none; box-shadow: var(--focus); }
.champ .aide { font-size: 12px; text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--c-texte-pale); }
.champ-erreur input, .champ-erreur select { border-color: var(--c-danger); }
.case { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; font-size: 14px; color: var(--c-texte); }
.case input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--c-principal); flex: none; }
.compteur { display: flex; align-items: center; justify-content: space-between; background: var(--c-carte); border: 1px solid var(--c-bordure); border-radius: var(--r-sm); padding: 3px; min-width: 0; max-width: 220px; }
.compteur button { width: 40px; height: 40px; background: var(--c-carte-hi); color: var(--c-texte-fort); border: 0; border-radius: var(--r-sm); font-size: 20px; cursor: pointer; }
.compteur button[disabled] { opacity: .35; cursor: not-allowed; }
.compteur output { font-family: var(--police-titres); font-weight: 900; font-size: 22px; color: var(--c-texte-fort); min-width: 40px; text-align: center; }

/* Messages */
.message { border-radius: var(--r-md); padding: 14px 16px; font-size: 14px; border: 1px solid; display: flex; gap: 12px; align-items: flex-start; }
.message-info { background: var(--c-info-fond); border-color: var(--c-info); color: var(--c-texte-fort); }
.message-alerte { background: var(--c-alerte-fond); border-color: var(--c-alerte); color: var(--c-texte-fort); }
.message-erreur { background: var(--c-danger-fond); border-color: var(--c-danger); color: var(--c-texte-fort); }
.message-succes { background: var(--c-succes-fond); border-color: var(--c-succes); color: var(--c-texte-fort); }
.chargement { padding: 48px; text-align: center; color: var(--c-texte-pale); }

/* En-tête et pied du site public */
.entete { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--c-fond) 66%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--c-bordure-fine); }
.entete .conteneur { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; padding-top: 12px; padding-bottom: 12px; }
.entete .logo img { height: 50px; width: auto; }
.entete nav { display: flex; flex-wrap: wrap; gap: 8px 24px; flex: 1 1 360px; }
.entete nav a { color: var(--c-texte); text-decoration: none; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.entete nav a:hover, .entete nav a[aria-current="page"] { color: var(--c-texte-fort); }
.langues { display: flex; align-items: center; gap: 2px; }
.langues button { background: none; border: 0; cursor: pointer; padding: 6px 4px; min-height: 32px; font-size: 11px; font-weight: 600; letter-spacing: .06em; color: var(--c-texte-pale); }
.langues button[aria-pressed="true"] { color: var(--c-texte); }
.langues span { color: var(--c-bordure); font-size: 11px; }
.menu-bouton { display: none; background: none; border: 1px solid var(--c-bordure); color: var(--c-texte-fort); border-radius: var(--r-sm); width: 44px; height: 44px; cursor: pointer; }
.pied { border-top: 1px solid var(--c-bordure-fine); padding: 64px 0 32px; }
.pied h3 { font-family: var(--police-texte); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--c-texte-pale); margin-bottom: 4px; }
.pied a { color: var(--c-texte); text-decoration: none; }
.pied a:hover { color: var(--c-texte-fort); text-decoration: underline; }
.pied .colonne { display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.pied .bas { border-top: 1px solid var(--c-bordure-fine); margin-top: 40px; padding-top: 24px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 12px; color: var(--c-texte-pale); }
.pied .bas a { color: var(--c-texte-pale); }
.bulle-whatsapp { position: fixed; right: 24px; bottom: 24px; z-index: 30; display: flex; align-items: center; gap: 10px; background: var(--c-carte); border: 1px solid var(--c-bordure); color: var(--c-texte-fort); text-decoration: none; padding: 10px 18px 10px 10px; border-radius: 999px; box-shadow: 0 8px 24px rgba(0,0,0,.6); }
.bulle-whatsapp .rond { width: 40px; height: 40px; border-radius: 50%; background: #25D366; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 22px; }
.bulle-whatsapp strong { font-size: 14px; display: block; line-height: 1.2; }
.bulle-whatsapp small { font-size: 12px; color: var(--c-texte-doux); }

@media (max-width: 860px) {
  .menu-bouton { display: inline-flex; align-items: center; justify-content: center; margin-left: auto; }
  .entete nav { display: none; flex-basis: 100%; flex-direction: column; gap: 14px; padding: 8px 0 12px; }
  .entete nav.ouvert { display: flex; }
  .entete .btn-reserver { display: none; }
  .bulle-whatsapp .texte { display: none; }
  .bulle-whatsapp { padding: 8px; }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } }
.maj-initiale { display: inline-block; }
.maj-initiale::first-letter { text-transform: uppercase; }