/*
 * Feuille de style du site meta-systeme.fr.
 * 1. Polices hébergées sur le site (licence SIL OFL, fichiers et licences dans assets/fonts/), mêmes familles que la
 *    maquette V4 (qui les chargeait chez Google) : Newsreader (italique, axe optique) et Public Sans.
 * 2. Règles globales du <helmet> de la maquette, recopiées telles quelles.
 * 3. Ajouts du site : commandes visibles seulement avec JavaScript, mode calme sans JavaScript, bandeau de
 *    consentement, pages légales.
 * Les survols et les valeurs dépendant de la largeur sont dans v4_genere.css (produit par bin/outils/convertir_v4.py).
 */

/* 1. Polices */
@font-face { font-family: 'Public Sans'; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url("../fonts/public-sans-latin-wght-normal-29KbApT.woff2") format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Public Sans'; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url("../fonts/public-sans-latin-ext-wght-normal-S6ClAuw.woff2") format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Newsreader'; font-style: normal; font-display: swap; font-weight: 200 800;
  src: url("../fonts/newsreader-latin-opsz-normal-Fay8EF3.woff2") format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Newsreader'; font-style: italic; font-display: swap; font-weight: 200 800;
  src: url("../fonts/newsreader-latin-opsz-italic-P-b7e28.woff2") format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Newsreader'; font-style: normal; font-display: swap; font-weight: 200 800;
  src: url("../fonts/newsreader-latin-ext-opsz-normal-NC2DH1O.woff2") format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Newsreader'; font-style: italic; font-display: swap; font-weight: 200 800;
  src: url("../fonts/newsreader-latin-ext-opsz-italic-YTB0w6j.woff2") format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* 2. Règles globales de la maquette (balise <style> de son <helmet>) */
html{scroll-behavior:smooth;scroll-padding-top:92px}
body{margin:0;background:#F4F2EB;color:#233B31;font-family:'Public Sans',system-ui,sans-serif;font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;text-wrap:pretty}
a{color:#244E40}a:hover{color:#8F4A31}
h1,h2,h3,p{margin:0}
button,input,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid #AE6246;outline-offset:4px;border-radius:4px}
::selection{background:#D8E2CC}
summary::-webkit-details-marker{display:none}
dialog::backdrop{background:rgba(32,56,43,.38);backdrop-filter:blur(6px)}

/* 3. Ajouts du site */

/* Commandes qui n'ont de sens qu'avec JavaScript (mode calme, menu, lecture des scènes…) : masquées sans lui. */
html:not(.js) .js-seulement { display: none !important; }

/* Sans JavaScript, « réduire les animations » est respecté par le CSS seul ; avec JavaScript, le mode calme de la
   maquette pose --tr et --micro sur la page. Le défilement doux est coupé dans les deux cas. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  :root { --tr: 0s; --micro: 0s; }
}
html.calme { scroll-behavior: auto; }

/* Bouton d'envoi du formulaire réel : même survol que les boutons pleins de la maquette. */
.sv-envoi:hover { background: #1B3D31 !important; }

/* Bandeau de consentement (présent seulement si un conteneur de mesure est configuré). */
.consentement { position: fixed; z-index: 60; left: 16px; right: 16px; bottom: 16px; max-width: 560px; margin-left: auto;
  background: #FAF9F4; color: #233B31; border: 1px solid #E0E3D7; border-radius: 20px; padding: 20px 22px;
  box-shadow: 0 30px 80px rgba(17,40,26,.25); display: grid; gap: 10px; font-size: 14px; line-height: 1.6; }
.consentement[hidden] { display: none; }
.consentement-titre { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #244E40; }
.consentement-boutons { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 6px; }
.consentement-bouton { background: transparent; color: #233B31; border: 1px solid #244E40; border-radius: 999px;
  padding: 12px 18px; min-height: 44px; font-size: 14px; font-weight: 500; cursor: pointer; }
.consentement-bouton:hover { background: #EAECE2; }

/* Pages légales, dans la typographie de la maquette. */
.page-legale { max-width: 800px; margin: 0 auto; padding: clamp(40px,6vw,80px) clamp(20px,5vw,72px) clamp(56px,7vw,100px);
  display: flex; flex-direction: column; gap: 28px; line-height: 1.65; }
.page-legale h1 { font-size: clamp(34px,4.2vw,56px); font-weight: 400; letter-spacing: -.045em; line-height: 1.04; }
.page-legale h2 { font-size: clamp(22px,2.2vw,28px); font-weight: 400; letter-spacing: -.03em; line-height: 1.2; }
.page-legale .bloc-legal { display: flex; flex-direction: column; gap: 8px; scroll-margin-top: 90px; }
.page-legale p { font-size: 16px; color: #233B31; overflow-wrap: anywhere; }
.page-legale code { font-size: .9em; background: #EAECE2; padding: 1px 5px; border-radius: 4px; }

/* Écart volontaire avec la maquette, sous 360 px seulement : la V4 déborde à 320 px (en-tête : logo, « Calme » et
   « Menu » font 349 px ; barre de la vidéo en pause : 333 px ; mesuré le 22/10/2026 sur la maquette et sur le site).
   Marges et espacements de l'en-tête réduits, barre de la vidéo autorisée à passer à la ligne ; rien d'autre ne change. */
@media (max-width: 359.98px) {
  [data-ref="rootRef"] > header > div { padding-left: 16px !important; padding-right: 16px !important; gap: 8px !important; }
  [data-ref="rootRef"] > header > div > div:last-child { gap: 6px !important; }
  [data-ref="rootRef"] > header > div > div:last-child button { padding-left: 9px !important; padding-right: 9px !important; }
  /* Barre de la vidéo : « Illustration », « Reprendre » et « Revoir » (333 px insécables) passent sur deux lignes. */
  [data-ref="flowRef"] > div > div:nth-child(2) { flex-wrap: wrap !important; }
}