/* ═══════════════════════════════════════════════════════════════════════════
   socle.css — le socle commun des sites vitrines (MonitForge, Soléclat).

   Mêmes neutres, mêmes rayons, mêmes ombres, mêmes composants : c'est l'air de
   famille entre les deux marques. Chaque site ne redéfinit que son accent et son
   entête (sa propre feuille). Aucune ressource externe : police du système.
   Mobile d'abord ; paliers à 640, 720, 900 et 1000 px.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Jetons ── */
:root {
  /* Accent : redéfini par chaque site */
  --accent: #2563EB;
  --accent-fonce: #1D4ED8;
  --accent-clair: #60A5FA;
  --accent-lavis: #EAF1FE;
  --accent-ombre: rgba(37, 99, 235, .28);
  --accent-entete: #60A5FA;

  /* Neutres communs */
  --texte: #172033;
  --texte-doux: #475467;
  --texte-discret: #636E81;
  --fond: #F6F8FA;
  --surface: #FFFFFF;
  --bordure: #E3E8EE;
  --bordure-champ: #C9D1DB;
  --ok: #15803D;
  --ok-lavis: #EAF7EE;
  --erreur: #B42318;
  --erreur-lavis: #FDEBEC;

  /* La nuit : hauts de page, encarts, pied de page */
  --nuit: #070D1C;
  --nuit-2: #0E1830;
  --nuit-texte: #F1F5F9;
  --nuit-doux: #A8B3C7;
  --nuit-bord: rgba(148, 163, 184, .22);

  /* Entête : redéfini par chaque site */
  --entete-fond: rgba(7, 13, 28, .86);
  --entete-fond-plein: #070D1C;
  --entete-texte: #F1F5F9;
  --entete-doux: #A8B3C7;
  --entete-bord: rgba(148, 163, 184, .18);
  --entete-survol: rgba(255, 255, 255, .07);

  --police: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
  --r-petit: 8px;
  --r: 14px;
  --r-grand: 22px;
  --ombre: 0 24px 70px rgba(15, 23, 42, .12);
  --ombre-douce: 0 8px 24px rgba(15, 23, 42, .07);
  --largeur: 1160px;
  --gouttiere: 20px;
  --hauteur-entete: 68px;
  --transition: 160ms ease;
}

/* ── 2. Base ── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--hauteur-entete) + 12px); }
body { margin: 0; font-family: var(--police); font-size: 1.0625rem; line-height: 1.6; color: var(--texte); background: var(--fond); -webkit-font-smoothing: antialiased; }
img, svg, video { max-width: 100%; }
img, video { display: block; height: auto; }
a { color: var(--accent); text-underline-offset: 3px; }
a:hover { color: var(--accent-fonce); }
:focus-visible { outline: 3px solid var(--accent-clair); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { margin: 0 0 .55em; line-height: 1.12; letter-spacing: -.02em; color: inherit; }
h1 { font-size: clamp(2.25rem, 5.4vw, 4.3rem); font-weight: 700; line-height: 1.04; letter-spacing: -.03em; }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); font-weight: 700; }
h3 { font-size: 1.22rem; font-weight: 700; letter-spacing: -.01em; }
p { margin: 0 0 1em; }

.lien-evitement { position: absolute; left: 12px; top: -80px; z-index: 100; padding: 10px 14px; border-radius: var(--r-petit); background: var(--surface); color: var(--texte); box-shadow: var(--ombre-douce); }
.lien-evitement:focus { top: 12px; }
.visuellement-cache { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.conteneur { width: min(var(--largeur), 100% - 2 * var(--gouttiere)); margin-inline: auto; }
.conteneur--etroit { width: min(780px, 100% - 2 * var(--gouttiere)); }

.surtitre { margin: 0 0 14px; font-size: .78rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.chapo { max-width: 60ch; font-size: clamp(1.08rem, 1.6vw, 1.22rem); line-height: 1.6; color: var(--texte-doux); }
.accent { color: var(--accent); }

/* ── 3. Boutons ── */
.bouton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 20px; border: 1.5px solid transparent; border-radius: var(--r-petit); font: 700 .98rem/1.2 var(--police); text-decoration: none; cursor: pointer; transition: background var(--transition), border-color var(--transition), transform var(--transition), color var(--transition); }
.bouton svg { width: 18px; height: 18px; flex: none; }
.bouton--principal { background: var(--accent); color: #FFFFFF; box-shadow: 0 12px 30px var(--accent-ombre); }
.bouton--principal:hover { background: var(--accent-fonce); color: #FFFFFF; transform: translateY(-1px); }
.bouton--contour { background: var(--surface); border-color: var(--bordure-champ); color: var(--texte); }
.bouton--contour:hover { border-color: var(--accent); color: var(--accent); }
.bouton--contour-clair { background: rgba(255, 255, 255, .04); border-color: rgba(241, 245, 249, .35); color: var(--nuit-texte); }
.bouton--contour-clair:hover { border-color: var(--nuit-texte); color: #FFFFFF; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.actions--centre { justify-content: center; }

/* ── 4. Entête ── */
.entete { position: sticky; top: 0; z-index: 50; background: var(--entete-fond); color: var(--entete-texte); border-bottom: 1px solid var(--entete-bord); -webkit-backdrop-filter: saturate(140%) blur(14px); backdrop-filter: saturate(140%) blur(14px); }
.entete__inner { display: flex; align-items: center; gap: 16px; min-height: var(--hauteur-entete); }
.marque { display: inline-flex; align-items: center; gap: 10px; color: inherit; font-size: 1.22rem; font-weight: 700; letter-spacing: -.02em; text-decoration: none; }
.marque:hover { color: inherit; }
.marque__signe { width: 34px; height: 34px; flex: none; color: var(--accent-entete); }
.marque__accent { color: var(--accent-entete); }
.nav { margin-left: auto; }
.nav__liste { display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; }
.nav__liste a { display: inline-block; padding: 8px 12px; border-radius: var(--r-petit); color: var(--entete-doux); font-size: .96rem; font-weight: 600; text-decoration: none; }
.nav__liste a:hover, .nav__liste a[aria-current="page"] { background: var(--entete-survol); color: var(--entete-texte); }
.nav__liste a.entete__panel { margin-left: 8px; border: 1.5px solid var(--entete-bord); color: var(--entete-texte); }
.burger { display: none; margin-left: auto; width: 44px; height: 44px; padding: 0; place-content: center; gap: 5px; border: 1px solid var(--entete-bord); border-radius: var(--r-petit); background: transparent; color: var(--entete-texte); cursor: pointer; }
.burger span { display: block; width: 20px; height: 2px; border-radius: 2px; background: currentColor; transition: transform var(--transition), opacity var(--transition); }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 899px) {
  .burger { display: inline-grid; }
  .nav { display: none; position: absolute; top: 100%; left: 0; right: 0; padding: 10px var(--gouttiere) 18px; background: var(--entete-fond-plein); border-bottom: 1px solid var(--entete-bord); }
  .nav.est-ouvert { display: block; }
  .nav__liste { flex-direction: column; align-items: stretch; gap: 2px; }
  .nav__liste a { display: block; padding: 12px; }
  .nav__liste a.entete__panel { margin: 8px 0 0; text-align: center; }
}

/* ── 5. Haut de page (de nuit par défaut) ── */
.haut-de-page { position: relative; isolation: isolate; overflow: hidden; padding: 72px 0 64px; background: radial-gradient(1000px 600px at 75% 15%, var(--nuit-2), var(--nuit) 70%); color: var(--nuit-texte); }
.haut-de-page::before { content: ""; position: absolute; inset: 0; z-index: -2; background-image: linear-gradient(rgba(96, 165, 250, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(96, 165, 250, .06) 1px, transparent 1px); background-size: 48px 48px; }
.haut-de-page h1 { max-width: 18ch; color: var(--nuit-texte); }
.haut-de-page .chapo { color: var(--nuit-doux); }
.haut-de-page .surtitre, .haut-de-page .accent { color: var(--accent-clair); }
.haut-de-page--grand { display: flex; align-items: center; min-height: min(82vh, 760px); padding: 96px 0; }
.haut-de-page__video { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.haut-de-page__voile { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(7, 13, 28, .94) 0%, rgba(7, 13, 28, .8) 45%, rgba(7, 13, 28, .35) 100%); }
@media (max-width: 720px) { .haut-de-page__voile { background: rgba(7, 13, 28, .8); } }

/* Bouton pause des vidéos de fond (créé par site.js) */
.video-pause { position: absolute; right: 16px; bottom: 16px; z-index: 2; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: rgba(7, 13, 28, .55); color: #FFFFFF; font-size: 13px; letter-spacing: -1px; cursor: pointer; opacity: .7; transition: opacity var(--transition); }
.video-pause:hover, .video-pause:focus-visible { opacity: 1; }

/* ── 6. Sections ── */
.section { padding: clamp(56px, 8vw, 92px) 0; }
.section--blanche { background: var(--surface); }
.section--nuit { background: var(--nuit); color: var(--nuit-texte); }
.section__entete { max-width: 760px; margin-bottom: 40px; }
.section__entete--centre { margin-inline: auto; text-align: center; }
.section__intro { color: var(--texte-doux); font-size: 1.1rem; }
.phrase-forte { margin: 48px 0 0; text-align: center; font-size: clamp(1.25rem, 2.4vw, 1.75rem); font-weight: 600; letter-spacing: -.01em; }
.phrase-forte .tiret { color: var(--accent); }
.deux-colonnes { display: grid; gap: 40px; align-items: start; }
@media (min-width: 960px) { .deux-colonnes { grid-template-columns: 1.1fr .9fr; } }

/* ── 7. Grilles et cartes ── */
.grille { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 720px) { .grille--2, .grille--3, .grille--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .grille--3 { grid-template-columns: repeat(3, 1fr); } .grille--4 { grid-template-columns: repeat(4, 1fr); } }
.carte { display: flex; flex-direction: column; gap: 10px; padding: 26px; background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--r); box-shadow: var(--ombre-douce); }
.carte h3, .carte__titre { margin: 0; font-size: 1.22rem; }
.carte p { margin: 0; color: var(--texte-doux); }
.carte__icone { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: var(--accent-lavis); color: var(--accent); }
.carte__icone svg { width: 24px; height: 24px; }
.carte__lien { margin-top: auto; padding-top: 8px; font-weight: 700; text-decoration: none; }
.carte--grande { padding: 34px; }
.carte--grande h3 { font-size: 1.5rem; }

/* ── 8. Étapes ── */
.etapes { display: grid; gap: 20px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 720px) { .etapes--3, .etapes--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .etapes--3 { grid-template-columns: repeat(3, 1fr); } .etapes--4 { grid-template-columns: repeat(4, 1fr); } }
.etape { padding: 26px; background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--r); }
.etape h3 { margin-bottom: 8px; }
.etape p { margin: 0; color: var(--texte-doux); }
.etape__num { display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: 14px; border-radius: 10px; background: var(--accent); color: #FFFFFF; font-weight: 800; }

/* ── 9. Encarts, listes ── */
.encart { padding: clamp(26px, 4vw, 40px); background: var(--accent-lavis); border-radius: var(--r-grand); }
.encart p:last-child { margin-bottom: 0; }
.encart--nuit { background: radial-gradient(800px 400px at 85% 0%, var(--nuit-2), var(--nuit) 75%); color: var(--nuit-texte); border: 1px solid var(--nuit-bord); }
.encart--nuit p { color: var(--nuit-doux); }
.encart--nuit .surtitre { color: var(--accent-clair); }
.encart__grille { display: grid; gap: 24px; align-items: center; }
@media (min-width: 900px) { .encart__grille { grid-template-columns: 1fr auto; } }
.liste-coches { display: grid; gap: 10px; margin: 18px 0 0; padding: 0; list-style: none; }
.liste-coches li { position: relative; padding-left: 30px; }
.liste-coches li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--accent); font-weight: 800; }
.bandeau-final { text-align: center; }
.bandeau-final p { max-width: 56ch; margin-inline: auto; color: var(--texte-doux); }

/* ── 10. Formulaire ── */
.contact { display: grid; gap: 28px; align-items: start; }
@media (min-width: 960px) { .contact { grid-template-columns: 1.5fr 1fr; } }
.contact__aside { display: grid; gap: 20px; }
.formulaire { display: grid; gap: 18px; padding: clamp(22px, 4vw, 34px); background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--r); box-shadow: var(--ombre-douce); }
.champ { display: grid; gap: 6px; margin: 0; }
.champ label { font-size: .95rem; font-weight: 600; }
.facultatif { color: var(--texte-discret); font-weight: 400; }
.champ input, .champ select, .champ textarea { width: 100%; min-height: 46px; padding: 11px 13px; border: 1.5px solid var(--bordure-champ); border-radius: var(--r-petit); background: #FFFFFF; color: var(--texte); font: inherit; }
.champ textarea { min-height: 150px; resize: vertical; }
.champ input:focus, .champ select:focus, .champ textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-ombre); }
.champs-double { display: grid; gap: 18px; }
@media (min-width: 640px) { .champs-double { grid-template-columns: 1fr 1fr; } }
.pot-de-miel { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.formulaire__mention { margin: 0; color: var(--texte-discret); font-size: .88rem; }
.retour { margin: 0; padding: 14px 16px; border-radius: var(--r-petit); font-weight: 600; }
.retour--ok { background: var(--ok-lavis); color: var(--ok); }
.retour--erreur { background: var(--erreur-lavis); color: var(--erreur); }

/* ── 11. Pied de page ── */
.pied { padding: 64px 0 28px; background: var(--nuit); color: var(--nuit-doux); font-size: .95rem; }
.pied__grille { display: grid; gap: 32px; }
@media (min-width: 800px) { .pied__grille { grid-template-columns: 1.6fr 1fr 1fr 1fr; } }
.pied .marque { color: var(--nuit-texte); }
.pied .marque__signe, .pied .marque__accent { color: var(--accent-clair); }
.pied__baseline { max-width: 34ch; margin: 14px 0 0; }
.pied__titre { margin: 0 0 14px; color: var(--nuit-texte); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; }
.pied__liste { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pied a { color: var(--nuit-doux); text-decoration: none; }
.pied a:hover { color: var(--nuit-texte); }
.pied__bas { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--nuit-bord); font-size: .85rem; }
.pied__bas p { margin: 0; }

/* ── 12. Fenêtre vidéo ── */
.fenetre-video { width: 100%; max-width: min(1100px, 94vw); padding: 0; overflow: visible; border: 0; background: transparent; }
.fenetre-video::backdrop { background: rgba(3, 7, 18, .84); }
.fenetre-video video { width: 100%; aspect-ratio: 16 / 9; border-radius: var(--r); background: #000000; box-shadow: 0 30px 90px rgba(0, 0, 0, .6); }
.fenetre-video__fermer { position: absolute; top: -50px; right: 0; width: 42px; height: 42px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #FFFFFF; font-size: 28px; line-height: 1; cursor: pointer; }
.fenetre-video__fermer:hover { background: rgba(255, 255, 255, .26); }

/* ── 13. Pages légales ── */
.texte-legal { max-width: 780px; }
.texte-legal h2 { margin: 40px 0 12px; font-size: 1.35rem; }
.texte-legal p, .texte-legal li { color: var(--texte-doux); line-height: 1.7; }
.texte-legal__maj { margin-top: 40px; color: var(--texte-discret); font-size: .9rem; }

/* ── 14. Moins d'animations ── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}