/* ==================================================================
   ECSplicite - Modele "Plateforme"
   Charte calquee sur la PLATEFORME d'apprentissage ECSplicite :
   degrade rose magenta -> orange, fond blanc/gris tres clair, cartes
   arrondies a en-tete degrade, accents vert lime + bleu ciel, sans-serif.
   Cible EXACTEMENT les memes classes que site-editorial.css (le HTML est
   genere une seule fois par layout.php + contenu.php) : changer de modele
   ne touche ni le contenu ni la BDD. Mobile-first. Polices locales (RGPD).
   ================================================================== */

/* --- Polices locales (aucun CDN tiers). Titres + corps = DM Sans
   (geometrique, proche de la plateforme). Pas de serif ici. --- */
@font-face { font-family:'DM Sans'; font-style:normal; font-weight:300 700; font-display:swap; src:url('../_font/dmsans-400.woff2') format('woff2'); }

:root {
  /* Signature plateforme : degrade magenta -> orange */
  --magenta:#e5006d;
  --orange:#f7941e;
  /* Le degrade porte du texte blanc (boutons, bandeaux) et sert de texte en
     degrade : il finit sur un orange fonce (#c25400) pour garder 4.5:1 en tout
     point (l'orange vif #f7941e tombait a 2.3:1). --grad-vif = version d'origine,
     reservee aux filets decoratifs. */
  --grad:linear-gradient(120deg, #e5006d 0%, #c25400 100%);
  --grad-vif:linear-gradient(120deg, #e5006d 0%, #f7941e 100%);
  --grad-soft:linear-gradient(120deg, #fde3ee 0%, #fdefd9 100%);

  /* Compat : on garde les noms historiques (--rose, --noir...) pour cibler
     les memes regles, mais repointes vers la palette plateforme. */
  --rose:#e5006d;          /* accent (filets, em, bordures) */
  --rose-fonce:#c2005d;    /* aplat de secours texte blanc (AA) */
  --or:#e07d0a;            /* accent chaud lisible (titres footer, badges) */
  --lime:#a5c015;          /* accent secondaire */
  --sky:#3bb0e5;           /* accent secondaire */

  --noir:#26262e;          /* texte principal + fond footer/stats */
  --blanc:#f5f5f7;         /* fond de page (gris tres clair) */
  --blanc-pur:#ffffff;     /* fond des cartes/champs */
  --gris:#6d6d7a;          /* texte secondaire (AA) */
  --gris-clair:#e7e7ee;    /* bordures, separateurs */
  --encre:#33333c;

  /* Titres : sans-serif ronde locale (pas de serif dans la plateforme) */
  --titre:'DM Sans', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  background-color:var(--blanc);
  color:var(--noir);
  font-family:'DM Sans', sans-serif;
  font-weight:300;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img { max-width:100%; height:auto; display:block; }
a { color:var(--rose-fonce); text-decoration:underline; text-underline-offset:3px; transition:color .2s; }
a:hover { color:var(--noir); }

/* --- Accessibilite --- */
.visually-hidden {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip-link {
  position:absolute; left:8px; top:-48px; z-index:1000;
  background:var(--noir); color:var(--blanc); padding:10px 16px;
  border-radius:4px; text-decoration:none; transition:top .2s;
}
.skip-link:focus { top:8px; color:var(--blanc); }
:focus-visible { outline:3px solid var(--rose-fonce); outline-offset:2px; }

.wrap { width:100%; max-width:1320px; margin:0 auto; padding:0 16px; }

/* --- Marque --- */
.brand {
  font-family:var(--titre); font-weight:900; font-size:20px;
  color:var(--noir); text-decoration:none; letter-spacing:-.01em;
}
.brand-ecs { color:var(--rose); }

/* ==================================================================
   HEADER + NAV (barre haute : logo + actions ; menu sur une 2e ligne)
   ================================================================== */
.site-header {
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--gris-clair);
}
.header-top { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:56px; }
.header-actions { display:flex; align-items:center; gap:10px; }

/* Burger (mobile) */
.nav-toggle {
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; background:none; border:1px solid var(--gris-clair);
  border-radius:6px; cursor:pointer; color:var(--noir);
}
.nav-toggle-bar, .nav-toggle-bar::before, .nav-toggle-bar::after {
  content:''; display:block; width:20px; height:2px; background:var(--noir); position:relative;
}
.nav-toggle-bar::before { position:absolute; top:-6px; }
.nav-toggle-bar::after  { position:absolute; top:6px; }

/* Selecteur de langue : dropdown CSS-only (<details>, sans JS) */
.lang-dd { position:relative; }
.lang-dd > summary {
  list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:7px;
  padding:7px 11px; font-size:13px; font-weight:600; letter-spacing:.5px;
  border:1px solid var(--gris-clair); border-radius:6px; background:var(--blanc-pur); color:var(--noir);
}
.lang-dd > summary::-webkit-details-marker { display:none; }
.lang-caret { width:0; height:0; border-left:4px solid transparent; border-right:4px solid transparent; border-top:5px solid var(--rose-fonce); transition:transform .2s; }
.lang-dd[open] .lang-caret { transform:rotate(180deg); }
.lang-dd > ul {
  position:absolute; right:0; top:calc(100% + 8px); min-width:172px; list-style:none;
  background:var(--blanc-pur); border:1px solid var(--gris-clair); border-radius:8px;
  box-shadow:0 14px 34px rgba(13,13,13,.14); padding:6px; z-index:120;
}
.lang-dd > ul a { display:block; padding:9px 12px; border-radius:5px; font-size:13.5px; color:var(--noir); text-decoration:none; }
.lang-dd > ul a:hover { background:var(--blanc); color:var(--rose-fonce); }
.lang-dd > ul a[aria-current="true"] { background:var(--noir); color:var(--blanc); }

/* Telephone + bouton contact */
.nav-tel { display:none; font-weight:600; font-size:14px; color:var(--noir); text-decoration:none; letter-spacing:.3px; white-space:nowrap; }
.nav-tel:hover { color:var(--rose-fonce); }
.nav-contact { padding:9px 16px; font-size:13px; }

/* Menu : 2e ligne pleine largeur, repliable en mobile */
.main-nav { display:none; border-top:1px solid var(--gris-clair); background:rgba(255,255,255,.45); }
.main-nav.open { display:block; }
.main-nav ul { list-style:none; }
.main-nav li { border-bottom:1px solid var(--gris-clair); }
.main-nav a { display:block; padding:13px 0; color:var(--noir); text-decoration:none; font-weight:500; font-size:14px; }
.main-nav a:hover, .main-nav a[aria-current="page"] { color:var(--rose-fonce); }

@media (min-width:860px) {
  .nav-toggle { display:none; }
  .nav-tel { display:inline; }
  .main-nav { display:block; }
  .main-nav ul.wrap { display:flex; gap:4px; }
  .main-nav li { border:0; }
  .main-nav a { padding:12px 14px; font-size:14px; letter-spacing:.2px; }
  .main-nav a[aria-current="page"] { border-bottom:2px solid var(--rose); }
}

/* ==================================================================
   SECTIONS / BANDS
   ================================================================== */
.band { padding:40px 0; }
.section-alt { background:var(--blanc-pur); }
.band.section + .band.section { padding-top:0; }

.kicker {
  font-size:12px; letter-spacing:4px; text-transform:uppercase; color:var(--rose-fonce);
  font-weight:700; display:flex; align-items:center; justify-content:center; gap:12px; margin-bottom:18px;
}
.kicker::before, .kicker::after { content:''; width:40px; height:3px; border-radius:3px; background:var(--grad-vif); }

.section-titre {
  font-family:var(--titre); font-weight:800; font-size:clamp(28px,5vw,44px);
  line-height:1.12; letter-spacing:-.02em; margin-bottom:24px; max-width:20ch;
}
.section-titre em {
  font-style:italic; font-weight:800;
  background:var(--grad); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:var(--magenta);
  /* L'italique deborde a droite : on elargit la boite pour que le clip
     n'ampute pas la derniere lettre (compense par une marge negative). */
  padding-right:.08em; margin-right:-.08em;
}
.section-lead { font-size:18px; color:var(--gris); max-width:60ch; margin-bottom:32px; }

/* Titre d'intro éditoriale : rendu identique a .section-titre dans ce theme.
   Prefixe [data-theme] pour l'emporter sur .intro-titre de blocs-extra.css. */
[data-theme="plateforme"] .intro-titre {
  font-family:var(--titre); font-weight:800; letter-spacing:-.02em;
}
[data-theme="plateforme"] .intro-titre em {
  font-style:italic; font-weight:800; color:var(--magenta);
  background:var(--grad); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  padding-right:.08em; margin-right:-.08em;
}

/* --- HERO --- */
.hero { padding:72px 0 56px; position:relative; overflow:hidden; }
.hero::before {
  content:''; position:absolute; top:-200px; right:-180px; width:620px; height:620px;
  border-radius:50%; pointer-events:none;
  background:radial-gradient(circle at 65% 35%, rgba(247,148,30,.16) 0%, rgba(229,0,109,.12) 42%, transparent 70%);
}
.hero-inner { position:relative; } /* largeur = .wrap (1320px), aligne sur le header */
.hero h1 {
  font-family:var(--titre); font-weight:800; line-height:1.06;
  font-size:clamp(38px,7.4vw,72px); letter-spacing:-.03em; margin-bottom:24px;
}
.hero h1 em {
  font-style:italic; font-weight:800; padding-right:.14em;
  background:var(--grad); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:var(--magenta);
}
.lead { font-size:clamp(18px,2.4vw,24px); color:var(--gris); max-width:58ch; line-height:1.55; }
.hero-cta { display:flex; flex-wrap:wrap; gap:14px; margin-top:36px; }

/* --- HERO CARROUSEL (diaporama : texte + image de fond + lien) --- */
.hero-carousel { position:relative; overflow:hidden; background:var(--blanc); }
.hcar-viewport { overflow:hidden; }
.hcar-track { display:flex; }
.hcar-track.is-anim { transition:transform .6s cubic-bezier(.4,0,.2,1); }
.hcar-slide {
  flex:0 0 100%; position:relative; min-height:480px;
  display:flex; align-items:center; padding:72px 0 64px;
}
.hcar-bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.hcar-slide.has-bg::after {
  content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(90deg, rgba(13,13,13,.74), rgba(13,13,13,.40) 58%, rgba(13,13,13,.12));
}
.hcar-inner { position:relative; z-index:2; }
.hcar-slide h1 {
  font-family:var(--titre); font-weight:900; line-height:1.04;
  font-size:clamp(40px,8vw,80px); letter-spacing:-.02em; margin-bottom:24px;
}
.hcar-slide h1 em { color:var(--rose); font-style:italic; font-weight:400; }
.hcar-slide .lead { font-size:clamp(18px,2.4vw,24px); color:var(--gris); max-width:58ch; line-height:1.55; }
.hcar-slide.has-bg .kicker { color:#fff; }
.hcar-slide.has-bg .kicker::before, .hcar-slide.has-bg .kicker::after { background:#fff; }
.hcar-slide.has-bg h1 { color:#fff; }
.hcar-slide.has-bg .lead { color:#ece8e1; }
/* Fleches */
.hcar-arrow {
  position:absolute; top:50%; transform:translateY(-50%); z-index:5;
  width:46px; height:46px; border-radius:50%; border:1px solid var(--gris-clair);
  background:rgba(255,255,255,.85); color:var(--noir); font-size:26px; line-height:1;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.hcar-arrow:hover { background:#fff; color:var(--rose-fonce); }
.hcar-prev { left:16px; }
.hcar-next { right:16px; }
/* Puces */
.hcar-dots { position:absolute; bottom:18px; left:0; right:0; z-index:5; display:flex; justify-content:center; gap:9px; }
.hcar-dot {
  width:10px; height:10px; border-radius:50%; border:0; padding:0; cursor:pointer;
  background:rgba(13,13,13,.28); box-shadow:0 0 0 1px rgba(255,255,255,.45);
}
.hcar-dot[aria-current="true"] { background:var(--rose-fonce); }
@media (max-width:680px) {
  .hcar-arrow { display:none; }
  .hcar-slide { min-height:400px; }
}

/* Héros avec image (2 colonnes) */
.hero-grid { display:grid; grid-template-columns:1fr; gap:32px; align-items:center; position:relative; }
.hero-media { margin:0; }
.hero-media img { width:100%; border-radius:14px; box-shadow:0 36px 70px -34px rgba(13,13,13,.45); }
@media (min-width:860px) { .hero-grid { grid-template-columns:1.05fr .95fr; gap:52px; } }

/* Héros plein écran : image OU vidéo de fond en boucle + overlay (texte clair) */
.hero-cover { padding:0; min-height:560px; display:flex; align-items:center; }
.hero-cover::before { display:none; } /* masque le halo rose du héros standard */
.hero-cover .hero-bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.hero-cover::after {
  content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(90deg, rgba(13,13,13,.78), rgba(13,13,13,.46) 58%, rgba(13,13,13,.18));
}
.hero-cover .hero-inner { position:relative; z-index:2; padding:84px 0; }
.hero-cover .kicker { color:#fff; }
.hero-cover .kicker::before, .hero-cover .kicker::after { background:#fff; }
.hero-cover h1 { color:#fff; }
.hero-cover h1 em { color:var(--rose); }
.hero-cover .lead { color:#ece8e1; }
@media (max-width:680px) { .hero-cover { min-height:460px; } .hero-cover .hero-inner { padding:60px 0; } }

/* Bloc média (image / illustration) */
/* La figure se réduit à la taille de l'image (fit-content) : la légende se cale
   sous la photo au lieu de courir sur toute la largeur de la bande. */
.media-band .media-fig { margin:0 auto; width:fit-content; max-width:100%; }
/* L'image n'est JAMAIS agrandie au-delà de sa taille réelle : étirée sur toute
   la largeur du .wrap (width:100%), une photo de 600 px ressortait énorme et
   pixelisée. width:auto la laisse à sa taille naturelle, max-width:100% la
   réduit quand elle déborde, et le plafond de 820 px empêche un portrait
   d'occuper tout l'écran (une photo 4:3 pleine largeur reste intacte). */
.media-fig img {
  display:block;
  width:auto;
  max-width:100%;
  height:auto;
  max-height:820px;
  margin-inline:auto;
  border-radius:14px;
}
/* Réglage « Largeur d'affichage » du bloc (blc_reglages['largeur'] -> classe
   .mw-* posée par contenu.php). Plafonds en min(100%, …) : sur mobile c'est le
   100% qui l'emporte, l'image ne déborde jamais de sa colonne.
   .mw-naturelle = comportement par défaut ci-dessus, aucune règle nécessaire. */
.media-band.mw-petite  .media-fig { max-width:min(100%, 460px); }
.media-band.mw-moyenne .media-fig { max-width:min(100%, 760px); }
/* Pleine largeur : seul mode qui ÉTIRE l'image (choix explicite de l'éditeur) ;
   le plafond de hauteur est levé, sinon l'image ne pourrait pas remplir. */
.media-band.mw-pleine .media-fig { width:100%; }
.media-band.mw-pleine .media-fig img { width:100%; max-height:none; }
.media-fig figcaption { font-size:14px; color:var(--gris); font-style:italic; margin-top:12px; text-align:center; }
.media-empty { color:var(--gris); font-style:italic; padding:34px; text-align:center; border:1px dashed var(--gris-clair); border-radius:10px; }

/* --- BOUTONS --- */
.btn {
  display:inline-block; padding:14px 30px; font-weight:700; font-size:16px;
  border-radius:999px; text-decoration:none; cursor:pointer; border:2px solid transparent;
  transition:transform .15s, box-shadow .2s, background .2s, color .2s; line-height:1;
}
.btn:hover { transform:translateY(-2px); }
.btn-rose { background:var(--grad); color:#fff; border-color:transparent; box-shadow:0 10px 26px rgba(229,0,109,.24); }
.btn-rose:hover { color:#fff; box-shadow:0 16px 34px rgba(229,0,109,.32); }
.btn-ghost { background:var(--blanc-pur); color:var(--rose-fonce); border-color:var(--gris-clair); }
.btn-ghost:hover { background:var(--blanc-pur); color:var(--magenta); border-color:var(--magenta); }
.btn-light { background:var(--blanc-pur); color:var(--rose-fonce); }
.btn-light:hover { background:#fff; color:var(--magenta); }

/* --- STATS --- */
.stats { background:var(--noir); color:var(--blanc); }
.stats-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:32px 24px; }
.stat { text-align:center; }
.stat-v {
  display:block; font-family:var(--titre); font-weight:800;
  font-size:clamp(26px,5.2vw,48px); line-height:1.05; white-space:nowrap;
  background:var(--grad); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:var(--magenta);
}
.stat-l { display:block; margin-top:10px; font-size:14px; letter-spacing:1px; text-transform:uppercase; color:#cfcabf; }
@media (min-width:760px) { .stats-grid { grid-template-columns:repeat(4,1fr); } }

/* --- CARDS (piliers, services, temoignages) --- */
.cards-3 { display:grid; grid-template-columns:1fr; gap:24px; }
@media (min-width:680px) { .cards-3 { grid-template-columns:repeat(2,1fr); } }
@media (min-width:980px) { .cards-3 { grid-template-columns:repeat(3,1fr); } }

.card {
  position:relative; background:var(--blanc-pur); border:1px solid var(--gris-clair);
  border-radius:16px; padding:34px 28px 30px; overflow:hidden;
  box-shadow:0 4px 20px rgba(38,38,46,.05);
  transition:transform .18s, box-shadow .18s;
}
.card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:5px; background:var(--grad-vif);
}
.card:hover { transform:translateY(-4px); box-shadow:0 20px 44px -22px rgba(229,0,109,.4); }
.card-num {
  font-family:var(--titre); font-weight:800; font-size:34px;
  color:var(--gris-clair); position:absolute; top:20px; right:22px;
}
.card h3 { font-family:var(--titre); font-weight:800; font-size:22px; margin-bottom:12px; }
.card-body { color:var(--gris); font-size:16px; }
.card-body p + p { margin-top:12px; }
.service-flag { font-size:36px; display:block; margin-bottom:12px; line-height:1; }

/* --- LOGOS --- */
.logos { background:var(--blanc-pur); overflow:hidden; }
.logos-titre { text-align:center; font-size:13px; letter-spacing:3px; text-transform:uppercase; color:var(--gris); margin-bottom:28px; }
/* Bandeau de logos defilant (gauche -> droite, boucle continue) */
.logos-marquee {
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.logos-track { display:flex; align-items:center; width:max-content; animation:logos-scroll 42s linear infinite; }
.logos-marquee:hover .logos-track { animation-play-state:paused; }
@keyframes logos-scroll { from { transform:translateX(-50%); } to { transform:translateX(0); } }
.logo {
  max-height:40px; width:auto; object-fit:contain; filter:grayscale(1); opacity:.6;
  transition:filter .2s, opacity .2s; flex:0 0 auto; margin-right:56px;
}
.logo:hover { filter:grayscale(0); opacity:1; }
@media (prefers-reduced-motion: reduce) {
  .logos-track { animation:none; flex-wrap:wrap; justify-content:center; width:auto; }
  .logo { margin:0 20px 16px; }
}

/* --- TEMOIGNAGES --- */
/* Cartes PORTRAIT (design plateforme) : photo/monogramme centré, anneau
   dégradé, note 5 étoiles, citation centrée. */
.temoignage {
  position:relative; background:var(--blanc-pur); border:1px solid var(--gris-clair); border-radius:18px;
  padding:34px 28px 28px; display:flex; flex-direction:column; align-items:center; text-align:center; gap:12px;
  box-shadow:0 6px 24px rgba(38,38,46,.06); transition:transform .18s, box-shadow .18s;
}
.temoignage:hover { transform:translateY(-5px); box-shadow:0 24px 48px -22px rgba(229,0,109,.42); }
/* Guillemet dégradé en filigrane, haut de carte */
.temoignage::after {
  content:'”'; position:absolute; top:8px; right:26px; font-family:var(--titre); font-weight:800;
  font-size:70px; line-height:1;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  opacity:.14; pointer-events:none;
}
/* Photo : anneau dégradé (technique double-background). Ordre : tout en haut. */
.tem-avatar {
  width:86px; height:86px; border-radius:50%; object-fit:cover; order:-3;
  border:3px solid transparent;
  background:linear-gradient(#fff,#fff) padding-box, var(--grad-vif) border-box;
  box-shadow:0 12px 26px -12px rgba(229,0,109,.55);
}
/* Note 5 étoiles, juste sous la photo */
.temoignage::before {
  content:'★★★★★'; order:-2; color:var(--orange); font-size:16px; letter-spacing:3px; line-height:1;
}
.temoignage blockquote { order:-1; font-family:var(--titre); font-style:italic; font-weight:500; font-size:18px; line-height:1.5; max-width:34ch; }
.temoignage figcaption { display:flex; flex-direction:column; gap:2px; padding-top:12px; border-top:1px solid var(--gris-clair); width:100%; }
.tem-nom { font-weight:800; }
.tem-role { font-size:14px; color:var(--magenta); font-weight:600; }

/* --- PROSE (texte / legal) --- */
/* Le conteneur prose garde la largeur du .wrap (1320px, centré comme les autres
   blocs) : on ne redéfinit PAS son max-width. On limite seulement la largeur de
   LECTURE du corps de texte (comme le sous-titre du hero). */
.prose-body, .prose > p, .prose > ul, .prose > ol { max-width:74ch; }
/* Page Qualiopi : contenu réglementaire (listes clé/valeur) sur toute la largeur du .wrap. */
[data-page="qualiopi"] .prose-body,
[data-page="qualiopi"] .prose > p,
[data-page="qualiopi"] .prose > ul,
[data-page="qualiopi"] .prose > ol { max-width:none; }
.prose p { margin-bottom:16px; color:var(--encre); }
.prose ul, .prose ol { padding-left:1.6em; margin-bottom:16px; color:var(--encre); }
.prose li { margin-bottom:7px; padding-left:4px; }
.prose ul { list-style:disc; }
.prose ol { list-style:decimal; }
.prose blockquote { border-left:3px solid var(--rose); padding-left:16px; margin-bottom:16px; font-style:italic; color:var(--gris); }
/* Article de blog : colonne de lecture centrée et plus étroite (format article). */
.prose-narrow { max-width:760px; }
.prose-narrow > p, .prose-narrow > ul, .prose-narrow > ol, .prose-narrow .prose-body { max-width:none; }
.prose p + p { margin-top:0; }
/* --- Texte riche (module « Texte », « Texte + média », pages légales) ------
   L'éditeur de l'admin (.adm-rte-area) style h3 / gras / italique ; le front
   doit rendre LA MÊME CHOSE, sinon la mise en forme « disparaît » à l'aperçu
   puis en ligne. <b> autant que <strong> : execCommand('bold') pose <b>, dont
   le font-weight:bolder de la feuille navigateur ne vaut que 400 sous un body
   en 300 — d'où un gras bien visible dans l'éditeur et invisible sur le site.
   <i>/<em> et <u> pour la même raison. */
.prose strong, .prose b { font-weight:700; }
.prose em, .prose i { font-style:italic; }
.prose u { text-decoration:underline; }
/* Bouton « H3 » de l'éditeur : sans règle, le reset * { margin:0 } laissait un
   sous-titre sans respiration ni typographie de titre (d'où « ça ne marche pas »). */
.prose h3 {
  font-family:var(--titre); font-weight:800; font-size:clamp(19px,2.4vw,24px);
  line-height:1.25; color:var(--noir); margin:34px 0 12px;
}
.prose h3:first-child { margin-top:0; }

/* --- CTA BAND --- */
.cta-band { background:var(--grad); color:#fff; text-align:center; }
.cta-band h2 { font-family:var(--titre); font-weight:800; font-size:clamp(26px,4vw,40px); margin-bottom:14px; }
.cta-band p { font-size:18px; margin-bottom:28px; opacity:.95; max-width:50ch; margin-left:auto; margin-right:auto; }
.cta-band a { color:var(--noir); }
.cta-band a.btn-light:hover { color:#fff; }

/* ==================================================================
   FORMULAIRE DE CONTACT
   ================================================================== */
.form-contact { max-width:620px; }
.form-row { margin-bottom:18px; display:flex; flex-direction:column; gap:6px; }
.form-row label { font-weight:500; font-size:15px; }
.form-row input, .form-row textarea {
  font-family:inherit; font-size:16px; padding:12px 14px; border:1.5px solid #8c8c9a; /* 3.3:1 (RGAA 3.3) */
  border-radius:10px; background:var(--blanc-pur); color:var(--noir); width:100%;
}
.form-row input:focus, .form-row textarea:focus { border-color:var(--magenta); outline:none; box-shadow:0 0 0 3px rgba(229,0,109,.16); }
.form-consent { flex-direction:row; flex-wrap:wrap; align-items:flex-start; gap:4px 10px; }
.form-consent input { width:auto; margin-top:5px; }
.form-consent label { font-weight:300; font-size:14px; color:var(--gris); }
.form-consent label { flex:1; }
.form-consent .rdv-conf, .form-consent .field-err { flex-basis:100%; padding-left:24px; font-size:14px; }
.form-ok { background:#e6f4ea; border:1px solid #97c9a9; color:#1d5631; padding:12px 16px; border-radius:6px; margin-bottom:18px; }
.form-err { background:#fdecea; border:1px solid #e0a59e; color:#8a2620; padding:12px 16px; border-radius:6px; margin-bottom:18px; }
.hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* ==================================================================
   FOOTER
   ================================================================== */
.site-footer { background:var(--noir); color:#cfcabf; padding:56px 0 28px; margin-top:0; }
.footer-grid { display:grid; grid-template-columns:1fr; gap:32px; }
.site-footer .brand { color:var(--blanc); }
.footer-tagline { font-family:var(--titre); font-style:italic; font-size:18px; color:#cfcabf; margin-top:10px; }
.site-footer h2 { font-size:13px; letter-spacing:2px; text-transform:uppercase; color:var(--or); margin-bottom:14px; }
.site-footer ul { list-style:none; }
.site-footer li { margin-bottom:8px; }
.site-footer a { color:#cfcabf; text-decoration:none; }
.site-footer a:hover { color:var(--blanc); text-decoration:underline; }
.footer-bottom { margin-top:36px; padding-top:20px; border-top:1px solid rgba(255,255,255,.12); font-size:14px; color:#9a958b; }
.footer-adresse { font-style:normal; line-height:1.8; color:#cfcabf; font-size:14px; }
.footer-adresse a { color:#cfcabf; }
.footer-social { display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:16px; }
.footer-social li { margin:0; }
.footer-social a { font-size:13px; letter-spacing:.5px; }
@media (min-width:760px) { .footer-grid { grid-template-columns:1.6fr 1fr 1fr 1.4fr; } }

/* ==================================================================
   ACTUALITES / BLOG (L5)
   ================================================================== */
.actu-card { display:flex; flex-direction:column; padding:0; overflow:hidden; }
.actu-thumb { display:block; position:relative; }
.actu-thumb img { width:100%; aspect-ratio:16/10; object-fit:cover; display:block; }
/* Badge source : ECS (article maison) / PP (flux propagANews) */
.actu-tag { display:inline-block; font-family:'DM Sans',sans-serif; font-weight:700; font-size:11px; letter-spacing:1px; line-height:1.4; padding:3px 9px; border-radius:3px; }
.actu-thumb .actu-tag { position:absolute; top:10px; left:10px; box-shadow:0 2px 6px rgba(0,0,0,.25); }
.actu-tag-row { padding:14px 24px 0; }
.actu-tag-ecs { background:var(--rose-fonce); color:var(--blanc-pur); }
.actu-tag-pp { background:var(--noir); color:var(--or); }
.actu-card .actu-date { padding:16px 24px 0; font-size:13px; letter-spacing:1px; text-transform:uppercase; color:var(--rose-fonce); font-weight:600; }
.actu-card h3 { padding:8px 24px 0; }
.actu-card h3 a { color:var(--noir); text-decoration:none; }
.actu-card h3 a:hover { color:var(--rose-fonce); }
.actu-card .card-body { padding:10px 24px 24px; }
.actu-hero { margin:0 0 28px; }
.actu-hero img { width:100%; max-height:420px; object-fit:cover; border-radius:8px; display:block; }
.actu-hero figcaption { font-size:13px; color:var(--gris); margin-top:8px; font-style:italic; }
.actu-date { font-size:14px; letter-spacing:1px; text-transform:uppercase; color:var(--rose-fonce); font-weight:600; }
.actu-faq { margin-top:40px; border-top:1px solid var(--gris-clair); padding-top:24px; }
.actu-faq h3 { font-family:var(--titre); font-size:20px; margin:18px 0 6px; }

/* ==================================================================
   BLOC FAQ (accordéon natif <details>/<summary> — accessible, sans JS)
   ================================================================== */
.faq-list { max-width:none; margin:32px 0 0; }
.faq-item {
  background:var(--blanc-pur); border:1px solid var(--gris-clair);
  border-radius:12px; margin-bottom:14px; overflow:hidden;
  transition:border-color .2s, box-shadow .2s;
}
.faq-item[open] { border-color:var(--rose); box-shadow:0 10px 30px rgba(233,30,99,.08); }
.faq-q {
  list-style:none; cursor:pointer; position:relative;
  padding:20px 56px 20px 24px;
  font-family:var(--titre); font-size:18px; font-weight:700; color:var(--noir);
}
.faq-q::-webkit-details-marker { display:none; }
.faq-q::after {
  content:'+'; position:absolute; right:22px; top:50%; transform:translateY(-50%);
  font-family:'DM Sans', sans-serif; font-weight:400; font-size:28px; line-height:1;
  color:var(--rose-fonce); transition:transform .2s;
}
.faq-item[open] .faq-q::after { content:'–'; }
.faq-q:hover { color:var(--rose-fonce); }
.faq-q:focus-visible { outline:3px solid var(--rose-fonce); outline-offset:-3px; border-radius:12px; }
.faq-a { padding:0 24px 22px; color:var(--gris); }
.faq-a p { margin-bottom:10px; }
.faq-a p:last-child { margin-bottom:0; }

/* ==================================================================
   EDITION EN FACADE (L4) — visible seulement pour un admin connecté
   ================================================================== */
.ecs-editbar {
  position:fixed; left:0; right:0; bottom:0; z-index:900;
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  background:var(--noir); color:var(--blanc); padding:10px 18px;
  box-shadow:0 -4px 20px -8px rgba(0,0,0,.5); font-size:14px;
}
.ecs-editbar-tag { font-weight:700; letter-spacing:1px; text-transform:uppercase; font-size:12px; color:var(--rose); }
.ecs-editbtn {
  background:var(--rose-fonce); color:#fff; border:0; border-radius:6px;
  padding:8px 14px; font:inherit; font-weight:600; cursor:pointer; text-decoration:none;
}
.ecs-editbtn:hover { background:#fff; color:var(--noir); }
.ecs-editstatus { color:#cfcabf; font-size:13px; }
.ecs-editstatus.err { color:#ff9a9a; }
body.ecs-editing { padding-bottom:60px; }
body.ecs-editing [data-ecs-edit] {
  outline:1px dashed rgba(233,30,99,.5); outline-offset:3px; cursor:text; transition:outline-color .15s;
}
body.ecs-editing [data-ecs-edit]:hover { outline-color:var(--rose); }
body.ecs-editing [data-ecs-edit]:focus { outline:2px solid var(--rose-fonce); background:rgba(233,30,99,.04); }
[data-ecs-edit].ecs-saving { opacity:.5; }

/* Barre d'outils flottante (type CKEditor) */
.ecs-toolbar {
  position:fixed; z-index:950; display:flex; align-items:center; gap:2px;
  background:var(--noir); border-radius:8px; padding:5px 6px;
  box-shadow:0 8px 24px -8px rgba(0,0,0,.55);
}
.ecs-tb-btn {
  min-width:30px; height:30px; padding:0 7px; border:0; border-radius:5px;
  background:transparent; color:#fff; font:600 14px/1 'DM Sans',sans-serif; cursor:pointer;
}
.ecs-tb-btn.ecs-tb-b { font-weight:800; }
.ecs-tb-btn.ecs-tb-i { font-style:italic; }
.ecs-tb-btn.ecs-tb-u { text-decoration:underline; }
.ecs-tb-btn:hover { background:var(--rose-fonce); }
.ecs-tb-sep { width:1px; height:18px; background:rgba(255,255,255,.2); margin:0 4px; }

/* Blocs : conteneur + contrôles + barres d'insertion (mode édition) */
body.ecs-editing .ecs-block { position:relative; }
body.ecs-editing .ecs-block { outline:1px dotted transparent; }
body.ecs-editing .ecs-block:hover { outline-color:rgba(194,24,91,.35); }
.ecs-blockctrl {
  position:absolute; top:8px; right:8px; z-index:80; display:none; gap:4px;
  background:var(--noir); border-radius:7px; padding:4px;
}
body.ecs-editing .ecs-block:hover > .ecs-blockctrl { display:flex; }
.ecs-bc-btn { width:30px; height:28px; border:0; border-radius:5px; background:transparent; color:#fff; cursor:pointer; font-size:13px; }
.ecs-bc-btn:hover { background:var(--rose-fonce); }
.ecs-bc-del:hover { background:#c0392b; }

.ecs-insert { position:relative; display:flex; justify-content:center; align-items:center; padding:6px 0; }
.ecs-insert-btn {
  background:var(--rose-fonce); color:#fff; border:0; border-radius:999px;
  padding:7px 18px; font:600 13px/1 'DM Sans',sans-serif; cursor:pointer; opacity:.4; transition:opacity .15s;
}
.ecs-insert:hover .ecs-insert-btn, .ecs-insert-btn:focus { opacity:1; }
.ecs-typemenu {
  position:absolute; top:100%; left:50%; transform:translateX(-50%); z-index:90;
  display:none; grid-template-columns:repeat(3,1fr); gap:8px; background:#fff;
  border:1px solid var(--gris-clair); border-radius:12px; padding:12px;
  box-shadow:0 16px 40px -12px rgba(0,0,0,.45); width:380px; max-width:92vw;
}
.ecs-type-card {
  display:flex; flex-direction:column; align-items:stretch; gap:7px; padding:8px;
  border:1px solid var(--gris-clair); border-radius:9px; background:#fff; cursor:pointer; transition:border-color .15s, transform .12s;
}
.ecs-type-card:hover { border-color:var(--rose); transform:translateY(-2px); }
.ecs-type-label { font:600 11px/1.2 'DM Sans',sans-serif; color:var(--gris); text-align:center; }
.ecs-type-card:hover .ecs-type-label { color:var(--rose-fonce); }
.ecs-type-preview { display:block; height:48px; background:var(--blanc); border-radius:5px; overflow:hidden; }

/* Mini-maquettes (wireframes dessinés en CSS) */
.tp { width:100%; height:100%; display:flex; box-sizing:border-box; padding:6px; }
.tp i, .tp b, .tp u { display:block; background:var(--gris-clair); }
.tp-hero { flex-direction:column; justify-content:center; gap:3px; }
.tp-hero .tp-h { height:8px; width:72%; background:var(--noir); border-radius:2px; }
.tp-hero .tp-s { height:4px; width:52%; border-radius:2px; }
.tp-hero .tp-btns { display:flex; gap:3px; margin-top:3px; }
.tp-hero .tp-btns i { width:16px; height:6px; border-radius:3px; }
.tp-hero .tp-btns i:first-child { background:var(--rose); }
.tp-stats { background:var(--noir); align-items:center; justify-content:space-around; }
.tp-stats i { width:8px; height:16px; background:var(--rose); border-radius:1px; }
.tp-cards { gap:4px; align-items:stretch; }
.tp-cards i { flex:1; background:#fff; border:1px solid var(--gris-clair); border-top:2px solid var(--rose); border-radius:2px; }
.tp-svc i { border-top-color:var(--or); }
.tp-quote i { border-top:1px solid var(--gris-clair); border-left:2px solid var(--rose); }
.tp-logos { align-items:center; justify-content:space-around; }
.tp-logos i { width:12px; height:8px; border-radius:1px; }
.tp-text { flex-direction:column; justify-content:center; gap:4px; }
.tp-text u { height:4px; border-radius:2px; }
.tp-text u:nth-child(1){ width:92%; } .tp-text u:nth-child(2){ width:80%; } .tp-text u:nth-child(3){ width:58%; }
.tp-cta { background:var(--rose-fonce); flex-direction:column; align-items:center; justify-content:center; gap:4px; }
.tp-cta .tp-h { height:6px; width:58%; background:#fff; border-radius:2px; }
.tp-cta i { width:26px; height:7px; background:#fff; border-radius:3px; }
.tp-form { flex-direction:column; justify-content:center; gap:4px; }
.tp-form u { height:7px; background:#fff; border:1px solid var(--gris-clair); border-radius:2px; }
.tp-form i { width:30px; height:7px; background:var(--rose); border-radius:3px; }
.tp-media { padding:5px; }
.tp-media i { flex:1; border-radius:3px; background:repeating-linear-gradient(45deg, var(--gris-clair), var(--gris-clair) 4px, #fff 4px, #fff 8px); }

/* --- Reduced motion --- */
@media (prefers-reduced-motion:reduce) {
  * { scroll-behavior:auto !important; transition:none !important; }
  .btn:hover, .card:hover { transform:none; }
}

/* ===== Inscription newsletter — bandeau éditorial rose (pied de page) ===== */
.nws-band { background:var(--noir); border-top:0; border-bottom:1px solid rgba(255,255,255,.1); padding:56px 0; }
.nws-signup { max-width:none; }
.nws-cols { display:grid; grid-template-columns:1fr; gap:22px 48px; align-items:center; }
@media (min-width:860px) { .nws-cols { grid-template-columns:0.82fr 1fr; } }
.nws-pitch .kicker { color:#fff; margin-bottom:10px; }
.nws-pitch .kicker::before, .nws-pitch .kicker::after { background:rgba(255,255,255,.65); }
.nws-title { font-family:var(--titre); font-weight:700; color:#fff; font-size:clamp(24px,3.4vw,34px); line-height:1.1; margin:0 0 8px; }
.nws-intro { color:rgba(255,255,255,.9); font-size:15px; line-height:1.55; margin:0; max-width:44ch; }
.nws-form { width:100%; }
.nws-line { display:flex; gap:12px; align-items:flex-end; }
.nws-field { display:flex; flex-direction:column; gap:5px; min-width:0; }
.nws-field-email { flex:1 1 auto; }
.nws-field-lng { flex:0 0 84px; }
.nws-field label { color:#fff; font-size:13px; font-weight:500; }
.nws-form input, .nws-form select { font-family:inherit; font-size:15px; padding:11px 13px; border:1px solid transparent; border-radius:8px; background:#fff; color:var(--noir); width:100%; }
.nws-form input::placeholder { color:#9b9b9b; }
.nws-form input:focus, .nws-form select:focus { outline:none; box-shadow:0 0 0 3px rgba(255,255,255,.5); }
.nws-more { margin:12px 0 0; }
.nws-more > summary { list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:7px; color:#fff; font-size:13.5px; font-weight:500; }
.nws-more > summary::-webkit-details-marker { display:none; }
.nws-more > summary::before { content:'+'; display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; border:1px solid rgba(255,255,255,.6); border-radius:50%; font-size:14px; line-height:1; }
.nws-more[open] > summary::before { content:'\2212'; }
.nws-opt { color:rgba(255,255,255,.7); font-size:12.5px; font-weight:300; }
.nws-grid2 { display:grid; grid-template-columns:1fr 1fr; gap:10px 12px; margin-top:12px; }
.nws-field-wide { grid-column:1 / -1; }
.nws-foot { display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-top:14px; }
.nws-consent { display:flex; align-items:flex-start; gap:9px; flex:1 1 100%; min-width:0; color:rgba(255,255,255,.85); font-size:13px; line-height:1.4; max-width:none; cursor:pointer; }
.nws-consent input { flex:0 0 auto; width:auto; margin-top:2px; accent-color:#fff; }
.nws-consent > span { flex:1 1 auto; }
.nws-band .nws-submit { background:var(--grad); color:#fff; border-color:transparent; white-space:nowrap; margin:0; flex:0 0 auto; box-shadow:0 8px 22px rgba(229,0,109,.28); }
.nws-band .nws-submit:hover { background:#fff; color:var(--magenta); border-color:#fff; }
.nws-band .form-required-note { color:rgba(255,255,255,.55); }
.nws-form .form-ok, .nws-form .form-err { margin-bottom:12px; }
@media (max-width:520px) { .nws-grid2 { grid-template-columns:1fr; } .nws-line { flex-wrap:wrap; } .nws-field-lng { flex:1 1 100%; } }

/* ==================================================================
   RGAA — controles d'arret (carrousel, logos) + restitution des
   erreurs de formulaire. Bloc commun aux trois themes.
   ================================================================== */
/* Bouton Pause / Lecture du carrousel (RGAA 13.8) */
.hcar-play {
  position:absolute; top:16px; right:16px; z-index:6;
  width:40px; height:40px; border-radius:50%; border:1px solid var(--gris-clair);
  background:rgba(255,255,255,.85); color:var(--noir); font-size:14px; line-height:1;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.hcar-play:hover, .hcar-play[aria-pressed="true"] { background:#fff; color:var(--rose-fonce); }

/* Bouton d'arret du bandeau de logos (RGAA 13.8) */
.logos { position:relative; }
.logos .wrap { text-align:center; }
.logos-pause {
  display:inline-flex; align-items:center; justify-content:center;
  margin-top:18px; width:36px; height:36px; border-radius:50%;
  border:1px solid var(--gris-clair); background:var(--blanc-pur,#fff);
  color:var(--gris); font-size:12px; line-height:1; cursor:pointer;
}
.logos-pause:hover, .logos-pause[aria-pressed="true"] { color:var(--rose-fonce); border-color:var(--rose-fonce); }
.logos-marquee.is-paused .logos-track { animation-play-state:paused; }

/* Champs obligatoires + erreurs reliees aux champs (RGAA 11.10) */
.form-required-note { font-size:13px; color:var(--gris); margin-bottom:14px; }
.req { color:var(--rose-fonce); font-weight:500; }
.form-err ul { margin:8px 0 0; padding-left:20px; }
.form-err a { color:inherit; text-decoration:underline; }
.field-err { display:block; margin-top:6px; font-size:13px; color:#8a2620; font-weight:500; }
[aria-invalid="true"] { border-color:#c0392b !important; box-shadow:0 0 0 3px rgba(192,57,43,.14); }

/* Pas de mouvement a stopper sous prefers-reduced-motion : controles inutiles */
@media (prefers-reduced-motion: reduce) {
  .hcar-play, .logos-pause { display:none; }
}

/* ============================================================
   PAGE CONTACT — mise en page en CARTES « 3 + 2 » alignees.
   Cible : body[data-page="contact"] (slug TECHNIQUE, stable quelle
   que soit la langue).
   Structure : intro editoriale -> 3 cartes multicanal (Par message /
   Assistant IA / Telephone) -> 2 cartes « Nous joindre » (coordonnees)
   + « Écrivez-nous » (formulaire).
   Toutes les cartes partagent UNE MEME grille 3 colonnes : les
   coordonnees occupent 1 colonne (calees sous la 1re carte), le
   formulaire 2 colonnes (cale sous les 2 autres) -> largeurs coherentes
   avec la rangee du haut. Les 2 cartes du bas sont a HAUTEUR EGALE.
   Colonnes FLEXIBLES (1fr) : aucune largeur fixe a ecraser (le bug
   d'origine venait de colonnes fixes de 632px). Empile < 1000px.
   ============================================================ */
/* Coordonnees et formulaire STYLISES EN CARTES, comme les 3 du dessus.
   Cibles robustes par :has() (deja employe ailleurs dans ce theme). */
body[data-page="contact"] main > .band.section:has(.wrap.prose) > .wrap.prose,
body[data-page="contact"] #contact > .wrap {
  max-width:760px;                       /* empile (<1000px) : colonne centree */
  background:var(--blanc-pur, #fff);
  border:1px solid var(--gris-clair, #e2ddd5);
  border-radius:16px;
  padding:30px 28px;
  box-shadow:0 4px 20px rgba(38, 38, 46, .05);
}
body[data-page="contact"] #contact .form-contact { max-width:none; margin:4px 0 0; }
/* Air entre cartes empilees (annule le padding-top:0 herite du theme). */
body[data-page="contact"] main > .band.section + .band.section { padding-top:24px; }

/* --- Desktop : UNE grille 3 colonnes partagee par toutes les rangees. --- */
@media (min-width:1000px) {
  body[data-page="contact"] main {
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    column-gap:22px;                 /* = gouttiere de .lt-multi -> alignement exact */
    row-gap:26px;
    max-width:1320px;                /* aligne la grille sur le .wrap du site */
    margin-left:auto;
    margin-right:auto;
    padding-left:16px;
    padding-right:16px;
    padding-bottom:56px;             /* respiration avant le footer (cartes non collees) */
    align-items:stretch;             /* -> les 2 cartes du bas a hauteur egale */
  }
  /* Par defaut, tout occupe la pleine largeur (intro + les 3 cartes)... */
  body[data-page="contact"] main > * { grid-column:1 / -1; }
  /* La section des 3 cartes utilise DIRECTEMENT la grille de main : on
     neutralise son .wrap interne (sinon double centrage / gouttieres
     decalees) pour que ses colonnes coincident avec celles du bas. */
  body[data-page="contact"] main > .band.section:has(.lt-multi) > .wrap { max-width:none; padding:0; }
  body[data-page="contact"] main > .band.section:has(.lt-multi) { padding-bottom:0; }
  /* Rangee du bas : coordonnees = 1 colonne (sous la 1re carte),
     formulaire = 2 colonnes (sous les 2 autres). */
  body[data-page="contact"] main > .band.section:has(.wrap.prose) { grid-column:1 / 2; }
  body[data-page="contact"] main > #contact { grid-column:2 / 4; }
  /* Ces sections deviennent des conteneurs flex pour que leur carte
     s'etire a la hauteur de la rangee (hauteurs egales). */
  body[data-page="contact"] main > .band.section:has(.wrap.prose),
  body[data-page="contact"] main > #contact {
    padding-top:0;
    padding-bottom:0;
    display:flex;
  }
  body[data-page="contact"] main > .band.section:has(.wrap.prose) > .wrap.prose,
  body[data-page="contact"] #contact > .wrap { max-width:none; width:100%; }
}