/* ══════════════════════════════════════════════════════════════════════════
   Styles du site statique.
   page.css contient les surcharges de marque AMBE (bleu #0a96dc, CTA jaune
   #f5c400) et les utilitaires responsives, extraits du <helmet> du canvas.
   Il est éditable : c'est la feuille de style « marque » du site.
   ══════════════════════════════════════════════════════════════════════ */
/* page.css est lié directement dans le <head>. */

/* ── En-tête ────────────────────────────────────────────────────────────────
   Le canvas pilotait le fond du header par l'état React (transparent au-dessus
   du héros, plein après défilement). On le rejoue en CSS : les valeurs sont
   routées vers ces variables par le build, et site.js pose .solid au scroll. */
header {
  --hdr-bg: #fff;
  --hdr-border: var(--color-divider);
  --hdr-fg: var(--color-text);
}
body.home header {
  --hdr-bg: transparent;
  --hdr-border: transparent;
  --hdr-fg: #fff;
}
body.home header.solid,
body.home header.menu-open {
  --hdr-bg: #fff;
  --hdr-border: var(--color-divider);
  --hdr-fg: var(--color-text);
}

/* ── Blocs conditionnels pilotés en JS ──────────────────────────────────────
   Le build émet les branches sc-if dynamiques (menus, état « envoyé » du
   formulaire) dans <div data-if="clé" hidden>. site.js retire l'attribut. */
[data-if] { display: contents; }
[data-if][hidden] { display: none; }

/* Les menus déroulants sont positionnés par leur parent d'origine. */
[data-menu] { position: relative; }
[data-menu="services"] { position: static; }

/* ── Emplacements photo ─────────────────────────────────────────────────────
   Remplacent le composant <image-slot> du canvas. Pour poser une vraie photo,
   remplacer la div par <img src="…" alt="…"> ou lui donner un background-image. */
.img-slot {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 10px;
  pointer-events: none;
  background: repeating-linear-gradient(
    45deg,
    var(--color-accent-100),
    var(--color-accent-100) 14px,
    var(--color-accent-200) 14px,
    var(--color-accent-200) 28px
  );
}
/* Le libellé reste une pastille d'angle : il ne doit jamais recouvrir le
   contenu posé au-dessus de l'emplacement (titre du héros, notamment). */
.img-slot span {
  max-width: 32ch;
  padding: 4px 8px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--color-accent-400);
  color: var(--color-accent-800);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.35;
  text-align: left;
}

/* ── Accordéon FAQ ──────────────────────────────────────────────────────── */
[data-action="faq"] { cursor: pointer; }

/* ── Simulateur ───────────────────────────────────────────────────────────
   Tous ses styles vivent dans page.css, avec les paliers : une règle laissée
   ici l'emporterait sur eux (page.css est chargé AVANT ce fichier). */

/* ── Impression ─────────────────────────────────────────────────────────── */
@media print {
  /* On ne masque que les commandes qui n'ont pas de sens sur papier.
     Cibler [data-action] tout court masquait les questions de la FAQ
     (data-action="faq") et les formulaires (data-action="submit"). */
  header, .img-slot, .hero-video,
  [data-action="filter"], [data-action="mobile-toggle"], [data-action="scroll-simu"] { display: none !important; }
  body { background: #fff; }
  /* Toutes les réponses de la FAQ sont dépliées sur papier. */
  [data-action="faq"] + p { display: block !important; }
  /* Le héros s'imprimait en blanc sur blanc sur une page entière. */
  .hero { min-height: 0 !important; color: #0f1e2b !important; background: #fff !important; }
  .hero .hero-media, .hero > div[style*="linear-gradient"] { display: none !important; }
  .hero h1, .hero p, .hero span, .hero a { color: #0f1e2b !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 11px; }
}

/* Un emplacement photo se positionne dans son conteneur direct. */
*:has(> .img-slot) { position: relative; }

/* ── Compléments SEO / accessibilité ─────────────────────────────────────── */
picture { display: contents; }
.skip-link { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--cta, #f5c400); color: #0f1e2b; padding: 10px 14px; font-weight: 800; }
.skip-link:focus { left: 8px; }
.prose a { color: var(--color-accent-700); font-weight: 600; }
.prose a:hover { color: var(--color-accent-600); }

/* ── Photos en couleur ────────────────────────────────────────────────────
   Le design d'origine passait toutes les photos en noir et blanc (.grayscale,
   défini dans tokens.css). Choix du client : photos en couleur. Supprimer cette
   règle pour revenir au noir et blanc. */
.grayscale { filter: none; }

/* ── Héros : lent mouvement de caméra sur la photo (effet « Ken Burns ») ─────
   Donne du mouvement sans vidéo. Désactivé si l'utilisateur préfère moins
   d'animation (prefers-reduced-motion). */
body.home .hero-media picture img { animation: heroDrift 28s ease-in-out infinite alternate; transform-origin: 60% 40%; will-change: transform; }
@keyframes heroDrift { from { transform: scale(1.02) translate3d(0, 0, 0); } to { transform: scale(1.12) translate3d(-2%, -1.5%, 0); } }
@media (prefers-reduced-motion: reduce) { body.home .hero-media picture img { animation: none; } }

/* ── Vidéo du héros (accueil) ─────────────────────────────────────────────
   Clip Pexels (K Enagonio, licence Pexels), boucle aller-retour de 20 s sans
   son. L'image du héros reste en dessous en secours et sert d'affiche. */
body.home .hero-media:has(.hero-video) picture img { animation: none; }
@media (prefers-reduced-motion: reduce) { .hero-video { display: none; } }

/* ── Étoiles de notation ──────────────────────────────────────────────────
   Le jaune du CTA sur fond blanc tombe à 1,5:1 (WCAG demande 4,5:1).
   Sur fond clair on utilise une teinte foncée ; sur fond sombre, le jaune reste. */
/* Sur fond clair, le jaune du CTA tombe à 1,5:1 : on utilise un or foncé (4,5:1).
   Sur le héros sombre, le jaune d'origine est conservé. */
.stars { color: #8a6d00; letter-spacing: -1px; }
.hero-media ~ div .stars, section[style*="background:var(--color-accent)"] .stars { color: var(--cta, #f5c400); }

/* La vidéo apparaît en fondu quand elle est prête, l'image reste visible avant. */
.hero-video { opacity: 0; transition: opacity .8s ease-in; }
.hero-video.ready { opacity: 1; }
