/* ==========================================================================
   Quatrième Pouvoir · 4epouvoir.media
   Feuille de styles unique du site.

   Repères
   - Les maquettes sont dessinées sur une largeur de 1920. --u vaut un point
     de maquette : calc(670 * var(--u)) = 670 pt de la maquette, quelle que
     soit la largeur d'écran (plafonnée à 1920 px).
   - Les titres utilisent Social Gothic (Adobe Fonts). Tant que le kit n'est
     pas branché (voir assets/js/site.js), la classe .no-sg sur <html> active
     une police de secours : Archivo condensé, en capitales.
   - En dessous de 1024 px de large, la mise en page passe en version mobile
     (fin du fichier).
   ========================================================================== */

@font-face {
  font-family: "Archivo";
  src: url("/assets/fonts/archivo-var.woff2") format("woff2-variations"),
       url("/assets/fonts/archivo-var.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("/assets/fonts/archivo-italic-var.woff2") format("woff2-variations"),
       url("/assets/fonts/archivo-italic-var.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: italic;
  font-display: swap;
}

:root {
  --rose: #ff004d;
  --noir: #000;
  --gris: #eaeaea;
  --blanc: #fffdfe;
  --gris-champ: #afafaf;
  --gris-fonction: #a5a5a5;
  --gris-legal: #e2e2e2;
  --sbw: 0px;
  --u: calc(min(100vw - var(--sbw), 1920px) / 1920);
  --ease: cubic-bezier(.22, .61, .36, 1);
  --f-display: "social-gothic", "Archivo", sans-serif;
  --f-text: "Archivo", "Arial Narrow", Arial, sans-serif;
  --dscale: 1;
  --nav-h: calc(150 * var(--u));
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--blanc);
  color: var(--noir);
  font-family: var(--f-text);
  font-stretch: 75%;
  font-weight: 400;
  font-size: max(15px, calc(25 * var(--u)));
  line-height: 1.3;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
}
[hidden] { display: none !important; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
picture { display: block; }
picture img { width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
strong, b { font-weight: 700; }
.rose { color: var(--rose); }
.blanc { color: #fff; }
.noir { color: var(--noir); }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: fixed; left: 12px; top: -60px; z-index: 200;
  background: var(--noir); color: #fff; padding: 10px 16px; border-radius: 8px;
  font-weight: 600; text-decoration: none; transition: top .2s var(--ease);
}
.skip:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--rose); outline-offset: 3px; }
.bg-noir :focus-visible, .bg-rose :focus-visible { outline-color: #fff; }
::selection { background: var(--rose); color: #fff; }

/* ---------- Typographie ---------- */
/* Titres Social Gothic : --fs = taille de maquette (en u) */
.d {
  font-family: var(--f-display);
  font-weight: 600;
  font-stretch: 100%;
  font-size: calc(var(--fs, 163) * var(--u) * var(--dscale));
  line-height: calc(var(--fs, 163) * var(--u) * 1.393);
  letter-spacing: 0;
  white-space: nowrap;
}
html.no-sg { --dscale: 1.12; }
html.no-sg .d {
  font-family: var(--f-text);
  font-stretch: 62%;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -.004em;
}
/* Archivo condensé */
.t25 { font-size: max(14px, calc(25 * var(--u))); line-height: 1.5; }
.t40 { font-size: max(16px, calc(40 * var(--u))); line-height: 1.2; }
.t64 { font-size: max(19px, calc(64 * var(--u))); line-height: 1.2; }
.t100 { font-size: calc(100 * var(--u)); line-height: 1.07; font-weight: 600; }
.t104 { font-size: calc(104 * var(--u)); line-height: 1.03; font-weight: 700; }
/* Échelle V2 : 68 (titres de section), 44 (texte important), 28 (texte courant), 18 (légendes) */
.t18 { font-size: max(12px, calc(18 * var(--u))); line-height: 1.2; }
.t28 { font-size: max(14px, calc(28 * var(--u))); line-height: 1.2; }
.t44 { font-size: max(17px, calc(44 * var(--u))); line-height: 1.2; }
.t68 { font-size: calc(68 * var(--u)); line-height: 1.1; font-weight: 600; }
.b { font-weight: 700; }
.sb { font-weight: 600; }
.it { font-style: italic; }
.nw { white-space: nowrap; }

/* ---------- Compositions (lockups) ----------
   Chaque ligne est posée aux coordonnées de la maquette :
   --x = gauche, --y = haut (boîte de texte), --r = bord droit. */
.lk { position: relative; }
.lk > .ln, .ln.abs {
  position: absolute;
  left: calc(var(--x) * var(--u));
  top: calc(var(--y) * var(--u));
  white-space: nowrap;
  margin: 0;
}
.lk > .ln.ra, .ln.abs.ra {
  left: auto;
  right: calc((1920 - var(--r)) * var(--u));
  text-align: right;
}
.lk > .ln.wrap { white-space: normal; width: calc(var(--w) * var(--u)); }
.s { position: relative; }
.frame {
  position: relative;
  width: min(100%, 1920px);
  margin-inline: auto;
  height: calc(var(--h) * var(--u));
}
.bg-noir { background: var(--noir); color: #fff; }
.bg-rose { background: var(--rose); color: var(--noir); }
.bg-blanc { background: var(--blanc); color: var(--noir); }

/* ---------- Bulles (boutons) ----------
   Corps arrondi + queue de bulle à droite (.q-d) ou à gauche (.q-g),
   géométrie relevée sur la planche de Louann. */
.bulle {
  --bg: var(--rose);
  --fg: #fff;
  --hb: var(--noir);
  --hf: #fff;
  --h: calc(47 * var(--u));
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: max(36px, var(--h));
  padding: 0 calc(21 * var(--u));
  border-radius: calc(max(36px, var(--h)) * .355);
  background: var(--bg);
  color: var(--fg);
  font-family: var(--f-text);
  font-stretch: 75%;
  font-weight: 600;
  font-size: max(13px, calc(25 * var(--u)));
  letter-spacing: .01em;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.bulle::after {
  content: "";
  position: absolute;
  top: 0;
  width: calc(max(36px, var(--h)) * .372);
  height: 100%;
  background: inherit;
  transition: background-color .2s var(--ease);
}
.bulle.q-d { margin-right: calc(max(36px, var(--h)) * .372); }
.bulle.q-d::after {
  left: calc(100% - 1px);
  clip-path: polygon(0 30.4%, 100% 25.6%, 100% 44.2%, 0 67.9%);
}
.bulle.q-g { margin-left: calc(max(36px, var(--h)) * .372); }
.bulle.q-g::after {
  right: calc(100% - 1px);
  clip-path: polygon(100% 30.4%, 0 25.6%, 0 44.2%, 100% 67.9%);
}
.bulle:hover, .bulle:focus-visible, .bulle.is-on { background: var(--hb); color: var(--hf); }
.bulle.large { --h: calc(63 * var(--u)); padding: 0 calc(24 * var(--u)); }
.bulle.b-noir { --bg: var(--noir); --fg: #fff; --hb: var(--rose); --hf: #fff; }
.bulle.b-blanc { --bg: #fff; --fg: var(--noir); --hb: var(--rose); --hf: #fff; }
.bulle.b-contact { --bg: var(--noir); --fg: #fff; --hb: #fff; --hf: var(--noir); }
.bulle.ui { font-stretch: 100%; font-weight: 600; }

/* Pastilles (onglets d'offres) */
.pastille {
  display: inline-flex; align-items: center; justify-content: center;
  height: max(32px, calc(57 * var(--u)));
  padding: 0 calc(12 * var(--u));
  border-radius: 999px;
  background: #fff;
  color: var(--noir);
  font-stretch: 75%;
  font-weight: 700;
  font-size: max(13px, calc(28 * var(--u)));
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.onglets .pastille { width: calc(var(--pw, 204) * var(--u)); }
.pastille:hover, .pastille:focus-visible, .pastille[aria-expanded="true"] { background: var(--rose); color: #fff; }

/* ---------- Barre de navigation ---------- */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  height: var(--nav-h);
  pointer-events: none;
  --nav-c: var(--rose);
}
.nav .frame { height: 100%; }
.nav a, .nav button { pointer-events: auto; }
.nav__logo {
  position: absolute;
  left: calc(103 * var(--u));
  top: calc(50 * var(--u));
  width: calc(58 * var(--u));
  min-width: 36px;
  color: var(--nav-c);
  transition: color .3s var(--ease);
}
.nav__logo svg { width: 100%; height: auto; }
.pied__logo img { width: 100%; height: auto; }
.nav__liens {
  position: absolute;
  left: calc(50% - 9.5 * var(--u));
  top: calc(80 * var(--u));
  transform: translate(-50%, -50%);
  display: flex;
  gap: calc(65 * var(--u));
}
.nav__liens a, .pied__liens a {
  font-family: var(--f-text);
  font-stretch: 100%;
  font-weight: 600;
  font-size: max(13px, calc(25 * var(--u)));
  line-height: 1.5;
  color: var(--nav-c);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .01em;
  white-space: nowrap;
  transition: color .3s var(--ease), opacity .2s var(--ease);
}
.nav__liens a:hover, .nav__liens a[aria-current="page"] { text-decoration: underline; text-underline-offset: .25em; text-decoration-thickness: .08em; }
.nav__brief {
  position: absolute;
  right: calc((1920 - 1819) * var(--u));
  top: calc(57 * var(--u));
}
.nav .bulle { --bg: var(--rose); --fg: #fff; --hb: var(--noir); --hf: #fff; }
.nav__burger { display: none; }
/* Fond de la barre une fois la page défilée (évite le texte qui passe sous les liens) */
.nav::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: max(64px, calc(140 * var(--u)));
  background: var(--nav-bg, var(--blanc));
  opacity: 0;
  transition: opacity .15s linear, background-color .3s var(--ease);
  pointer-events: none;
}
body.nav-fond .nav::before { opacity: 1; }
body[data-nav="noir"] .nav { --nav-bg: var(--noir); }
body[data-nav="rose"] .nav { --nav-bg: var(--rose); }
/* Thèmes selon la section survolée */
body[data-nav="rose"] .nav { --nav-c: var(--noir); }
body[data-nav="rose"] .nav .bulle { --bg: var(--noir); --hb: #fff; --hf: var(--noir); }
body[data-nav="noir"] .nav .bulle { --hb: #fff; --hf: var(--noir); }

/* ---------- Pied de page + bloc de fin ---------- */
.fin { --h: 1230; }
.fin .badge {
  position: absolute;
  left: calc((1383 - 147) * var(--u));
  top: calc((688 - 147) * var(--u));
  width: calc(294 * var(--u));
  transform: rotate(13deg);
  pointer-events: none;
}
.pied__logo {
  position: absolute;
  left: calc(95 * var(--u));
  top: calc(997 * var(--u));
  width: calc(179 * var(--u));
  min-width: 90px;
}
.pied__linkedin {
  position: absolute;
  right: calc((1920 - 1828) * var(--u));
  top: calc(996 * var(--u));
  width: calc(63 * var(--u));
  min-width: 32px;
  color: var(--rose);
  transition: color .2s var(--ease);
}
.pied__linkedin:hover, .pied__linkedin:focus-visible { color: #fff; }
.pied__linkedin:hover svg .in, .pied__linkedin:focus-visible svg .in { fill: var(--noir); }
.pied__liens {
  position: absolute;
  right: calc((1920 - 1828) * var(--u));
  top: calc(1152 * var(--u));
  display: flex;
  gap: calc(40 * var(--u));
}
.pied__liens a { color: var(--rose); }
.pied__liens a:hover, .pied__liens a:focus-visible, .pied__liens a[aria-current="page"] { color: #fff; }
.pied__legal {
  position: absolute;
  right: calc((1920 - 1828) * var(--u));
  top: calc(1150 * var(--u));
  font-size: max(12px, calc(25 * var(--u)));
  line-height: 1.5;
  color: var(--gris-legal);
  white-space: nowrap;
}

/* ---------- Apparitions ---------- */
.rv { opacity: 0; transform: translateY(calc(40 * var(--u))); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.rv.is-in { opacity: 1; transform: none; }
.num { font-variant-numeric: tabular-nums lining-nums; }

/* ==========================================================================
   ACCUEIL
   ========================================================================== */
.acc-hero { --h: 1080; }
.acc-adresse { --h: 1080; }

/* 3 textes qui se remplacent au même endroit (section bloquée) */
.pin3 { position: relative; height: 250vh; height: 250svh; }
.pin3__scene {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  overflow: hidden;
}
.pin3__item {
  position: absolute;
  left: calc(100 * var(--u));
  top: calc(50% - 97 * var(--u));
  width: calc(900 * var(--u));
  opacity: 0;
  transform: translateY(calc(50 * var(--u)));
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.pin3__item.is-on { opacity: 1; transform: none; }
.pin3__item.is-past { transform: translateY(calc(-50 * var(--u))); }

/* Photo fixe + textes qui montent.
   La photo reste sous le bandeau de navigation (--bande) et se réduit
   légèrement si la fenêtre est basse, pour rester entière à l'écran. */
.cible {
  position: relative;
  --bande: max(64px, calc(140 * var(--u)));
  --ph: min(calc(953 * var(--u)), calc(100svh - var(--bande) - 32px));
  --pm: calc((100svh - var(--bande) - var(--ph)) / 2);
}
.cible__grille { position: relative; width: min(100%, 1920px); margin-inline: auto; display: grid; grid-template-columns: calc(690 * var(--u)) 1fr; }
.cible__photo {
  position: sticky;
  top: calc(var(--bande) + var(--pm));
  height: var(--ph);
  margin: calc(var(--bande) + var(--pm)) 0 var(--pm);
  align-self: start;
}
.cible__photo img { width: 100%; height: 100%; object-fit: cover; }
.cible__textes { position: relative; }
.cible__panneau { position: relative; height: 100vh; height: 100svh; }
.cible__bloc {
  position: sticky;
  top: max(calc(var(--bande) + 12px), calc(var(--bande) + (100svh - var(--bande) - 940 * var(--u)) / 2 + (var(--top) - 140) * var(--u)));
  height: calc(var(--bh) * var(--u));
}
.cible__bloc .ln { position: absolute; left: calc((var(--x) - 690) * var(--u)); top: calc(var(--y) * var(--u)); white-space: nowrap; }
.cible__bloc .ln.wrap { white-space: normal; width: calc(var(--w) * var(--u)); }
.cible__bloc .ln.d { --fs: 105; }
/* Même lecture que sur mobile : cible principale mise en avant, puis cible
   secondaire en mineur (photo plus petite, texte à côté), puis le bouton */
.cible__seconde {
  display: grid;
  grid-template-columns: calc(200 * var(--u)) calc(600 * var(--u));
  gap: calc(30 * var(--u));
  align-items: center;
  margin-top: calc(32 * var(--u));
  color: #4a4a4a;
}
.cible__photo-b img { aspect-ratio: 4 / 5; object-fit: cover; }
.cible__seconde .t28 { margin: 0; }
.cible__cta { margin-top: calc(32 * var(--u)); }

.acc-rarete { --h: 1252; }
.acc-chiffres { --h: 1268; }
.acc-charte { --h: 1748; }
.chiffre-legende { font-size: max(12px, calc(18 * var(--u))); line-height: 1.2; margin-right: calc(6 * var(--u)); }

/* Bandeau de logos */
.logos {
  position: absolute;
  left: 0; right: 0;
  top: calc(954 * var(--u));
  display: grid;
  gap: calc(40 * var(--u));
  overflow: hidden;
}
.logos__ligne { overflow: hidden; height: calc(64 * var(--u)); }
.logos__piste {
  display: flex;
  width: max-content;
  height: 100%;
  animation: defile var(--duree, 36s) linear infinite;
}
.logos__serie { display: flex; align-items: center; gap: calc(54 * var(--u)); padding-right: calc(54 * var(--u)); height: 100%; }
.logos__serie.blanc { color: #fff; }
.logos__serie.rose { color: var(--rose); }
.logo-media { height: calc(var(--lh, 52) * var(--u)); width: auto; flex: none; }
.logo-texte {
  font-family: var(--f-text);
  font-stretch: 75%;
  font-weight: 800;
  font-size: calc(46 * var(--u));
  line-height: 1;
  white-space: nowrap;
  letter-spacing: -.01em;
}
@keyframes defile { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ==========================================================================
   RÉSEAU
   ========================================================================== */
.res-hero { --h: 860; }
.res-univers { padding-bottom: calc(190 * var(--u)); }
.res-contenu { width: calc(1720 * var(--u)); margin-inline: auto; }
.univers { border-top: 1px solid rgba(0, 0, 0, .16); }
.univers__ligne {
  display: grid;
  grid-template-columns: calc(370 * var(--u)) 1fr;
  align-items: center;
  min-height: calc(124 * var(--u));
  padding: calc(26 * var(--u)) 0;
  border-bottom: 1px solid rgba(0, 0, 0, .16);
}
.univers__nom, .res-leviers__titre {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: calc(32 * var(--u) * var(--dscale));
  line-height: 1.08;
  text-transform: uppercase;
}
html.no-sg .univers__nom, html.no-sg .res-leviers__titre { font-family: var(--f-text); font-stretch: 62%; font-weight: 800; }
.univers__logos { display: flex; flex-wrap: wrap; align-items: center; gap: calc(26 * var(--u)) calc(38 * var(--u)); }
.univers__logos li { display: flex; }
.univers__logos .logo-media { width: calc(var(--lw) * var(--u)); height: calc(var(--lh) * var(--u)); color: var(--noir); }
.res-leviers { display: flex; align-items: center; flex-wrap: wrap; gap: calc(20 * var(--u)) calc(40 * var(--u)); margin-top: calc(80 * var(--u)); }
.res-leviers__liste { display: flex; flex-wrap: wrap; gap: calc(16 * var(--u)); }
.res-leviers__liste li {
  display: inline-flex; align-items: center;
  height: max(34px, calc(56 * var(--u)));
  padding: 0 calc(24 * var(--u));
  border: max(1.5px, calc(2.5 * var(--u))) solid var(--noir);
  border-radius: 999px;
  font-weight: 600;
  font-size: max(13px, calc(25 * var(--u)));
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}
.res-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px calc(40 * var(--u)); margin-top: calc(110 * var(--u)); }

/* ==========================================================================
   OFFRES
   ========================================================================== */
.off-hero { --h: 1058; }
.off-media { --h: 1082; }
.off-print { --h: 1100; }
.off-digital { --h: 1019; }
.off-brand { --h: 1067; }
.off-process { --h: 2052; }

.onglets {
  position: absolute;
  left: 0; right: 0;
  top: calc(var(--top) * var(--u));
  height: calc(400 * var(--u));
}
.onglet {
  position: absolute;
  left: calc(var(--cx) * var(--u));
  top: 0;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  width: calc(400 * var(--u));
}
.onglet__texte {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows .4s var(--ease), opacity .4s var(--ease);
  width: 100%;
}
.onglet__texte > div { overflow: hidden; }
.onglet__texte p {
  padding-top: calc(var(--dp, 38.6) * var(--u));
  text-align: center;
  color: #fff;
  font-size: max(14px, calc(28 * var(--u)));
  line-height: 1.2;
}
.onglet__texte.is-open { grid-template-rows: 1fr; opacity: 1; }

/* Carrousel des formats print */
.carrousel { position: absolute; inset: 0; }
.carrousel__slide {
  position: absolute; inset: 0;
  opacity: 0; visibility: hidden;
  transition: opacity .5s var(--ease), visibility 0s linear .5s;
}
.carrousel__slide.is-on { opacity: 1; visibility: visible; transition: opacity .5s var(--ease), visibility 0s; }
.carrousel__fleche {
  position: absolute;
  top: calc(500 * var(--u));
  width: calc(90 * var(--u));
  height: calc(95 * var(--u));
  min-width: 44px; min-height: 44px;
  display: grid; place-items: center;
  color: var(--noir);
  transition: color .2s var(--ease);
  z-index: 2;
}
.carrousel__fleche svg { width: calc(26 * var(--u)); min-width: 14px; height: auto; overflow: visible; }
.carrousel__fleche:hover, .carrousel__fleche:focus-visible { color: var(--rose); }
.carrousel__fleche.prec { left: calc((508 - 45) * var(--u)); }
.carrousel__fleche.suiv { left: calc((1342 - 45) * var(--u)); }
.format-visuel { position: absolute; top: calc(305 * var(--u)); left: calc(591 * var(--u)); width: calc(672 * var(--u)); height: calc(478 * var(--u)); }
.format-visuel svg { width: 100%; height: 100%; overflow: visible; }
.carrousel__pos { position: absolute; left: calc(1180 * var(--u)); top: calc(242 * var(--u)); font-size: max(13px, calc(25 * var(--u))); color: #777; }

/* Téléphone + vidéo */
.telephone {
  position: absolute;
  left: calc(583 * var(--u));
  top: calc(297 * var(--u));
  width: calc(303 * var(--u));
  height: calc(575 * var(--u));
  border: calc(10 * var(--u)) solid var(--noir);
  border-radius: calc(79 * var(--u));
  overflow: hidden;
  background: #111;
}
.telephone video, .telephone img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }

/* Bandeau « chaque contenu porte sa mention » */
.mention {
  position: absolute; left: 0; right: 0;
  top: calc(962 * var(--u));
  overflow: hidden;
  height: calc(52 * var(--u));
  display: flex; align-items: center;
}
.mention__piste { display: flex; width: max-content; animation: defile 48s linear infinite; }
.mention__piste span {
  font-weight: 700;
  font-size: max(12px, calc(25 * var(--u)));
  text-transform: uppercase;
  white-space: nowrap;
  padding-right: calc(10 * var(--u));
}
.mention__piste span:nth-child(odd) { color: var(--rose); }
.mention__piste span:nth-child(even) { color: #fff; }

/* Étapes « 1 brief, 1 contrat, 1 bilan » */
.etapes { position: absolute; left: calc(403 * var(--u)); top: calc(1123 * var(--u)); width: calc(1200 * var(--u)); }
.etape { display: grid; grid-template-columns: calc(143 * var(--u)) 1fr; align-items: start; min-height: calc(143 * var(--u)); }
.etape__n { color: #fff; text-align: left; --fs: 104; }
.etape__t { padding-top: calc(16 * var(--u)); }
.etape__t strong { display: block; color: var(--noir); font-weight: 700; font-size: max(17px, calc(44 * var(--u))); line-height: 1.5; }
.etape__t span { display: block; color: #fff; font-size: max(14px, calc(28 * var(--u))); line-height: 1.2; }

/* ==========================================================================
   CHARTE
   ========================================================================== */
.cha-hero { --h: 2031; }
.cha-secteurs { --h: 1178; }

.doctrine { position: absolute; left: calc(380 * var(--u)); top: calc(1272 * var(--u)); width: calc(1200 * var(--u)); }
.doctrine li { display: grid; grid-template-columns: calc(162 * var(--u)) 1fr; min-height: calc(146 * var(--u)); }
.doctrine__n { --fs: 104; width: calc(92 * var(--u)); text-align: center; }
.doctrine__t { padding-top: calc(17 * var(--u)); }
.doctrine__t strong { display: block; color: var(--rose); font-weight: 700; font-size: max(17px, calc(44 * var(--u))); line-height: 1.5; }
.doctrine__t span { display: block; font-size: max(14px, calc(28 * var(--u))); line-height: 1.2; }

/* Lignes Compatible / Sous réserve / Incompatible */
.secteurs { position: absolute; left: 0; right: 0; top: calc(368 * var(--u)); }
.secteur {
  position: relative;
  height: calc(146 * var(--u));
  overflow: hidden;
  cursor: pointer;
}
.secteur__piste {
  position: absolute;
  top: 0; left: 0;
  display: flex;
  align-items: flex-start;
  height: calc(146 * var(--u));
  transform: translateX(var(--tx, 0px));
  transition: transform .4s var(--ease);
  will-change: transform;
}
.secteur__mot { color: #fff; padding: 0; background: none; border: 0; cursor: pointer; }
.secteur__mot.d { --fs: 105; }
.secteur__texte {
  flex: none;
  width: calc(1529 * var(--u));
  margin-left: calc(26 * var(--u));
  padding-top: calc(2 * var(--u));
  font-size: max(14px, calc(28 * var(--u)));
  line-height: 1.2;
  color: #fff;
  white-space: normal;
}
.secteur__texte em { font-style: italic; }
.secteur:hover .secteur__mot, .secteur.is-pin .secteur__mot { color: #fff; }
.secteur.is-pin .secteur__mot { text-decoration: none; }
.citation { position: absolute; left: calc(1057 * var(--u)); top: calc(825.4 * var(--u)); font-weight: 600; font-size: max(14px, calc(28 * var(--u))); line-height: 1.43; }
.citation span { display: block; white-space: nowrap; }
.citation span + span { margin-left: calc(280 * var(--u)); }

/* Les 6 règles : cartes empilées */
.regles {
  position: relative;
  width: min(100%, 1920px);
  margin-inline: auto;
  height: calc(366 * var(--u));
  overflow: hidden;
}
.regles__titre {
  position: absolute; left: 0; top: 0;
  width: calc(735 * var(--u)); height: 100%;
  background: var(--rose);
  color: #fff;
}
.regles__titre h2 { position: absolute; left: calc(85 * var(--u)); top: calc(59.6 * var(--u)); font-weight: 600; font-size: calc(68 * var(--u)); line-height: 1.25; }
.regles__titre h2 span { display: block; }
.regles__titre h2 span + span { text-align: right; width: calc(412 * var(--u)); }
.carte {
  position: absolute;
  top: 0;
  left: calc(var(--l) * var(--u));
  width: calc(734 * var(--u));
  height: 100%;
  background: var(--c);
  color: #fff;
  transition: left .5s var(--ease), width .5s var(--ease);
  overflow: hidden;
}
.carte.is-open { left: 0; width: calc(var(--fin) * var(--u)); z-index: 10; }
.carte__btn {
  position: absolute; inset: 0;
  display: block;
  text-align: left;
  cursor: pointer;
}
.carte__n { position: absolute; left: calc(75 * var(--u)); top: calc(133 * var(--u)); --fs: 104; color: #fff; }
.carte__txt {
  position: absolute;
  left: calc(214 * var(--u));
  top: calc(108.8 * var(--u));
  font-size: max(14px, calc(28 * var(--u)));
  line-height: 1.2;
  white-space: nowrap;
}
.carte__txt strong { display: block; font-weight: 700; font-size: max(17px, calc(44 * var(--u))); line-height: 1.45; margin-bottom: calc(10 * var(--u)); }
.carte__txt > span { display: block; }
@media (min-width: 1024px) {
  .carte__txt { transition: opacity .3s var(--ease) .2s; }
  .carte:not(.is-open):not(:last-child) .carte__txt { opacity: 0; transition-delay: 0s; }
  .carte:last-child:not(.is-open) .carte__txt { width: calc(290 * var(--u)); white-space: normal; }
  .carte:last-child:not(.is-open) .carte__txt br { display: none; }
}

/* ==========================================================================
   CONTACTS
   ========================================================================== */
.con-hero { --h: 2076; }
.equipe { position: absolute; left: 0; right: 0; top: calc(1396 * var(--u)); }
.membre { position: absolute; left: calc(var(--x) * var(--u)); top: 0; width: calc(300 * var(--u)); }
.membre__photo { width: calc(227 * var(--u)); height: calc(292 * var(--u)); overflow: hidden; background: var(--gris); }
.membre__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.membre__fonction { position: absolute; top: calc(302 * var(--u)); left: 0; color: var(--gris-fonction); font-size: max(13px, calc(25 * var(--u))); line-height: 1.5; white-space: nowrap; }
.membre__levier { position: absolute; top: calc(336 * var(--u)); left: 0; color: var(--rose); font-weight: 700; font-size: max(13px, calc(25 * var(--u))); line-height: 1.5; white-space: nowrap; }
.membre__mail { position: absolute; top: calc(374 * var(--u)); left: 0; font-size: max(13px, calc(25 * var(--u))); line-height: 1.5; white-space: nowrap; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.membre__mail:hover, .membre__mail:focus-visible { color: var(--rose); }
.rejoindre { position: absolute; left: calc(1147 * var(--u)); top: calc(1903 * var(--u)); }
.rejoindre .bulle { --h: calc(64 * var(--u)); gap: calc(40 * var(--u)); padding: 0 calc(26 * var(--u)); font-weight: 700; }
.rejoindre .bulle .q { text-transform: none; }
.rejoindre .bulle .cta { color: var(--noir); transition: color .2s var(--ease); }
.rejoindre .bulle:hover .cta, .rejoindre .bulle:focus-visible .cta { color: #fff; }

/* ==========================================================================
   PAGES DE TEXTE LONG (CGV, mentions légales, confidentialité)
   ========================================================================== */
.leg-hero { --h: 820; }
.texte-long {
  width: min(100% - 32px, calc(1180 * var(--u)));
  margin: 0 auto;
  padding: 0 0 calc(220 * var(--u));
  font-size: max(16px, calc(28 * var(--u)));
  line-height: 1.5;
}
.texte-long .chapo { font-size: max(18px, calc(44 * var(--u))); line-height: 1.3; margin-bottom: calc(60 * var(--u)); }
.texte-long .outils { display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: center; margin-bottom: calc(70 * var(--u)); }
.texte-long .version { color: #6b6b6b; }
.texte-long h2 {
  font-weight: 700;
  font-size: max(20px, calc(44 * var(--u)));
  line-height: 1.2;
  margin: calc(80 * var(--u)) 0 calc(24 * var(--u));
  scroll-margin-top: calc(var(--nav-h) + 20px);
}
.texte-long h2::before { content: ""; display: block; width: calc(60 * var(--u)); min-width: 32px; height: 4px; background: var(--rose); margin-bottom: calc(18 * var(--u)); }
.texte-long h3 { font-weight: 700; font-size: max(17px, calc(30 * var(--u))); line-height: 1.3; margin: calc(44 * var(--u)) 0 calc(12 * var(--u)); }
.texte-long p { margin: 0 0 1em; }
.texte-long ul { margin: 0 0 1em; }
.texte-long ul li { position: relative; padding-left: 1.2em; margin-bottom: .45em; }
.texte-long ul li::before { content: ""; position: absolute; left: 0; top: .62em; width: .5em; height: .5em; border-radius: 50%; background: var(--rose); }
.texte-long a:not(.bulle) { color: var(--rose); text-underline-offset: .15em; }
.texte-long .encadre { background: var(--gris); border-radius: 18px; padding: calc(36 * var(--u)) calc(44 * var(--u)); margin: 0 0 calc(50 * var(--u)); }
.texte-long .encadre p:last-child { margin-bottom: 0; }
.texte-long .encadre .etiquette { display: block; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--rose); margin-bottom: .4em; font-size: .85em; }
.table-wrap { overflow-x: auto; margin: 0 0 1.4em; -webkit-overflow-scrolling: touch; }
.texte-long table { border-collapse: collapse; width: 100%; font-size: .9em; line-height: 1.4; }
.texte-long th, .texte-long td { text-align: left; vertical-align: top; padding: .65em .8em; border-bottom: 1px solid #d8d8d8; }
.texte-long th { font-weight: 700; background: var(--noir); color: #fff; }
.texte-long table.sommaire td { border: 0; padding: .3em .8em .3em 0; }
.texte-long table.sommaire a { color: var(--noir); text-decoration: none; }
.texte-long table.sommaire a:hover { color: var(--rose); text-decoration: underline; }

/* ==========================================================================
   FORMULAIRE « VOTRE BRIEF » (calque plein écran)
   ========================================================================== */
.brief {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  opacity: 0;
  transition: opacity .4s var(--ease);
  background: rgba(255, 253, 254, .8);
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
  backdrop-filter: blur(18px) saturate(1.1);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.brief.is-visible { display: block; }
.brief.is-open { opacity: 1; }
.brief__zone {
  position: relative;
  width: min(100%, 1920px);
  min-height: 100%;
  margin-inline: auto;
}
.brief__panneau {
  position: relative;
  margin-left: calc(781 * var(--u));
  width: calc(1109 * var(--u));
  padding: calc(137.7 * var(--u)) 0 calc(60 * var(--u));
}
.brief__titre { text-align: right; margin-right: calc(18 * var(--u)); }
.brief__titre span { display: block; font-weight: 600; font-size: calc(68 * var(--u)); line-height: 1.01; }
.brief__titre span:last-child { margin-right: calc(113 * var(--u)); }
.brief form { margin-top: calc(47.9 * var(--u)); margin-left: calc(20 * var(--u)); width: calc(1069 * var(--u)); }
.champ { display: block; margin-bottom: calc(26 * var(--u)); }
.champ input, .champ textarea {
  display: block;
  width: 100%;
  height: max(44px, calc(64 * var(--u)));
  padding: 0 calc(14 * var(--u));
  border: 0;
  border-radius: 0;
  background: var(--gris);
  color: var(--noir);
  font-family: var(--f-text);
  font-stretch: 75%;
  font-size: max(16px, calc(28 * var(--u)));
  line-height: 1.2;
  -webkit-appearance: none;
  appearance: none;
  transition: box-shadow .2s var(--ease);
}
.champ textarea { height: calc(164 * var(--u)); min-height: 120px; padding-top: calc(11.6 * var(--u)); resize: vertical; }
.champ input::placeholder, .champ textarea::placeholder { color: var(--gris-champ); opacity: 1; }
.champ input:focus, .champ textarea:focus { outline: none; box-shadow: inset 0 0 0 3px var(--rose); }
.leviers { border: 0; margin: calc(-5 * var(--u)) 0 calc(90 * var(--u)); padding: 0; }
.leviers legend { padding: 0 0 0 calc(14 * var(--u)); color: var(--gris-champ); font-size: max(16px, calc(28 * var(--u))); line-height: 1.2; }
.leviers__liste { display: grid; grid-template-columns: calc(316 * var(--u)) calc(226 * var(--u)) calc(273 * var(--u)) auto; align-items: center; margin-top: calc(24.4 * var(--u)); }
.case { display: inline-flex; align-items: center; gap: calc(17 * var(--u)); color: var(--gris-champ); font-size: max(16px, calc(28 * var(--u))); line-height: 1.2; cursor: pointer; }
.case input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.case i {
  flex: none;
  width: max(20px, calc(35 * var(--u)));
  height: max(20px, calc(36 * var(--u)));
  background: var(--gris);
  position: relative;
  transition: background-color .2s var(--ease);
}
.case i::after {
  content: ""; position: absolute; inset: 22% 18%;
  border: solid #fff; border-width: 0 0 3px 3px;
  transform: rotate(-45deg) scale(0);
  transform-origin: center;
  transition: transform .2s var(--ease);
}
.case input:checked + i { background: var(--rose); }
.case input:checked + i::after { transform: rotate(-45deg) scale(1); }
.case input:checked ~ span { color: var(--noir); }
.case input:focus-visible + i { outline: 3px solid var(--rose); outline-offset: 3px; }
.brief__actions { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: calc(30 * var(--u)); }
.brief__rgpd { max-width: calc(640 * var(--u)); color: #6b6b6b; font-size: max(13px, calc(22 * var(--u))); line-height: 1.4; }
.brief__rgpd a { color: inherit; }
.brief__envoyer .bulle { --h: calc(56 * var(--u)); padding: 0 calc(30 * var(--u)); }
.brief__fermer {
  position: fixed;
  top: max(14px, calc(40 * var(--u)));
  left: max(14px, calc(40 * var(--u)));
  z-index: 3;
  display: inline-flex; align-items: center; gap: 10px;
  height: 44px; padding: 0 16px 0 12px;
  border-radius: 999px;
  background: var(--noir); color: #fff;
  font-weight: 600; font-size: 15px; text-transform: uppercase; letter-spacing: .02em;
  transition: background-color .2s var(--ease);
}
.brief__fermer:hover, .brief__fermer:focus-visible { background: var(--rose); }
.brief__fermer svg { width: 14px; height: 14px; }
.brief__statut { margin-top: calc(26 * var(--u)); font-size: max(16px, calc(32 * var(--u))); line-height: 1.3; min-height: 1.3em; }
.brief__statut.ok { color: var(--noir); font-weight: 700; }
.brief__statut.erreur { color: var(--rose); font-weight: 600; }
.brief .honey { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
body.brief-ouvert { overflow: hidden; }

/* ---------- Page « merci » / 404 ---------- */
.simple { min-height: 100vh; min-height: 100svh; display: grid; place-items: center; padding: 160px 24px 80px; text-align: center; }
.simple .d { white-space: normal; }
.simple p { margin-top: 28px; font-size: max(17px, calc(40 * var(--u))); }
.simple .bulle { margin-top: 36px; }


/* ---------- Compléments ---------- */
.menu-mobile { display: none; }
.brief:target { display: block; opacity: 1; }
.decale { display: block; margin-left: calc(521 * var(--u)); }
.septante { display: flex; align-items: baseline; gap: calc(6 * var(--u)); }
.septante .t18 { white-space: nowrap; }
.chiffre .t18, .gros .chiffre-legende, .petit .chiffre-legende { white-space: nowrap; }
.gros .d, .petit .d, .chiffre .d { display: block; }
.liste-formats li { display: block; }
.liste-formats strong { font-weight: 700; }
.cha-regles { padding-bottom: calc(265 * var(--u)); }
.sommaire-nav { margin-bottom: calc(40 * var(--u)); }
.sommaire-liste { columns: 2; column-gap: calc(60 * var(--u)); font-size: .9em; line-height: 1.35; }
.sommaire-liste li { break-inside: avoid; margin-bottom: .45em; }
.sommaire-liste a { color: var(--noir) !important; text-decoration: none; }
.sommaire-liste a:hover { color: var(--rose) !important; text-decoration: underline; }
.texte-long table.def td:first-child { width: 34%; }
.texte-long .table-wrap table { min-width: 560px; }
.texte-long .table-wrap table.def { min-width: 0; }
.page-legal .texte-long > p:first-child { margin-top: 0; }
.leg-hero + .s .texte-long { padding-top: calc(10 * var(--u)); }

/* ==========================================================================
   MOUVEMENT RÉDUIT
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; scroll-behavior: auto !important; }
  .logos__piste, .mention__piste { animation: none !important; transform: none !important; }
  .rv { opacity: 1; transform: none; }
}

/* ==========================================================================
   VERSION MOBILE ET TABLETTE (< 1024 px)
   Pas de maquette mobile livrée : adaptation qui garde la hiérarchie,
   les couleurs et les effets (le survol devient un toucher).
   ========================================================================== */
@media (max-width: 1023px) {
  :root { --m: calc((100vw - var(--sbw)) / 390); --nav-h: 72px; }
  body { font-size: 16px; }
  .frame { height: auto; }
  .lk > .ln, .ln.abs, .lk > .ln.ra, .ln.abs.ra { position: static; left: auto; right: auto; top: auto; width: auto; }
  .d { font-size: calc(var(--mfs, 54) * var(--m) * var(--dscale)); line-height: 1.12; white-space: normal; }
  html.no-sg .d { line-height: 1.04; }
  .t40 { font-size: 17px; }
  .t64 { font-size: 21px; line-height: 1.25; }
  .t100 { font-size: calc(36 * var(--m)); }
  .t104 { font-size: calc(36 * var(--m)); }
  .t18 { font-size: 13px; }
  .t28 { font-size: 16px; }
  .t44 { font-size: 19px; line-height: 1.25; }
  .t68 { font-size: calc(34 * var(--m)); line-height: 1.12; }
  .pad { padding-left: 20px; padding-right: 20px; }

  /* Navigation */
  .nav { height: var(--nav-h); pointer-events: auto; background: transparent; }
  .nav__logo { left: 16px; top: 14px; width: 46px; }
  .nav__liens { display: none; }
  .nav__brief { right: 72px; top: 18px; }
  .nav .bulle { --h: 36px; font-size: 13px; padding: 0 12px; }
  .nav__burger {
    display: grid; place-items: center;
    position: absolute; right: 12px; top: 12px;
    width: 48px; height: 48px;
    color: var(--nav-c);
  }
  .nav__burger svg { width: 28px; height: 28px; }
  .menu-mobile {
    position: fixed; inset: 0; z-index: 60;
    background: var(--rose); color: #fff;
    display: flex; flex-direction: column; justify-content: center;
    padding: 90px 28px 40px;
    gap: 6px;
    opacity: 0; visibility: hidden;
    transition: opacity .3s var(--ease), visibility 0s linear .3s;
  }
  .menu-mobile.is-open { opacity: 1; visibility: visible; transition: opacity .3s var(--ease), visibility 0s; }
  .menu-mobile a.lien { --mfs: 58; color: #fff; text-decoration: none; }
  .menu-mobile a.lien[aria-current="page"] { color: var(--noir); }
  .menu-mobile .bulle { align-self: flex-start; margin-top: 26px; --bg: var(--noir); --hb: #fff; --hf: var(--noir); font-size: 15px; --h: 44px; padding: 0 18px; }
  .menu-mobile__fermer { position: absolute; right: 12px; top: 12px; width: 48px; height: 48px; display: grid; place-items: center; color: #fff; }
  .menu-mobile__fermer svg { width: 26px; height: 26px; }
  .menu-mobile__bas { margin-top: auto; display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13px; text-transform: uppercase; font-weight: 600; }
  .menu-mobile__bas a { color: #fff; text-decoration: none; opacity: .9; }

  /* Bloc de fin + pied */
  .fin .frame { padding: 90px 20px 34px; }
  .fin .lk { display: flex; flex-direction: column; }
  .fin .lk .ln { --mfs: 60; }
  .fin .lk .ln.l2 { padding-left: 14%; }
  .fin .badge { position: relative; left: auto; top: auto; width: 150px; margin: 28px 0 0 auto; }
  .pied { display: grid; grid-template-columns: 1fr auto; gap: 26px 16px; margin-top: 50px; }
  .pied__logo, .pied__linkedin, .pied__liens, .pied__legal { position: static; }
  .pied__logo { width: 110px; }
  .pied__linkedin { width: 40px; align-self: start; }
  .pied__liens { grid-column: 1 / -1; flex-wrap: wrap; gap: 12px 22px; }
  .pied__liens a { font-size: 13px; }
  .pied__legal { grid-column: 1 / -1; white-space: normal; font-size: 12px; }

  .rv { transform: translateY(24px); }

  /* Accueil */
  .acc-hero .frame { padding: 120px 20px 70px; }
  .acc-hero .lk { display: flex; flex-direction: column; }
  .acc-hero .lk .ln.d { --mfs: 58; }
  .acc-hero .l-quatrieme { padding-left: 34%; }
  .acc-hero .l-pouvoir { align-self: flex-end; }
  .acc-hero .l-des { padding-left: 22%; }
  .acc-hero .l-sous { margin-top: 18px; white-space: normal; font-size: 17px; line-height: 1.35; }
  .acc-adresse .frame { padding: 50px 20px 80px; display: grid; gap: 34px; }
  .acc-adresse .ln.wrap { width: auto; }
  .acc-adresse .chiffre { text-align: right; }
  .acc-adresse .chiffre .d { --mfs: 120; line-height: 1; }
  .pin3 { height: 260vh; height: 260svh; }
  .pin3__item { left: 20px; right: 20px; width: auto; top: 38%; font-size: 22px; }
  /* Votre cible : photo puis texte, sans effet collant (lecture naturelle au doigt) */
  .cible { padding: 8px 0 72px; }
  .cible__grille { display: block; }
  .cible__photo { position: relative; top: auto; width: 100%; height: auto; aspect-ratio: 4 / 5; max-height: 76svh; margin: 0; }
  .cible__textes { padding: 26px 20px 0; }
  .cible__panneau { display: contents; }
  .cible__bloc { display: inline; position: static; height: auto; }
  .cible__bloc .ln { display: inline; position: static; white-space: normal; width: auto !important; }
  .cible__bloc .ln.d { --mfs: 42; }
  .cible__bloc--fin { display: block; margin-top: 4px; }
  .cible__bloc--fin .ln.cible__detail { display: flex; flex-direction: column; }
  .cible__principale { margin-top: 18px; font-size: 20px; line-height: 1.3; }
  .cible__seconde { position: static; width: auto; display: grid; grid-template-columns: 42% 1fr; gap: 16px; align-items: center; margin-top: 28px; }
  .cible__seconde .t28 { margin: 0; font-size: 15px; line-height: 1.4; }
  .cible__cta { margin-top: 26px; }
  .acc-rarete .frame { padding: 80px 20px 40px; }
  .acc-rarete .lk { display: flex; flex-direction: column; }
  .acc-rarete .lk .ln.d { --mfs: 46; }
  .acc-rarete .l-peu { align-self: flex-end; }
  .acc-rarete .t44 { margin-top: 14px; font-size: 18px; }
  .acc-chiffres .frame { padding: 40px 20px 60px; display: grid; grid-template-columns: 1fr 1fr; gap: 30px 16px; }
  .acc-chiffres .gros { grid-column: 1 / -1; }
  .acc-chiffres .gros .d { --mfs: 130; line-height: 1; }
  .acc-chiffres .petit { text-align: left; }
  .acc-chiffres .petit .d { --mfs: 52; line-height: 1.05; }
  .acc-chiffres .chiffre-legende { font-size: 15px; }
  .acc-charte .frame { padding: 60px 20px 70px; display: flex; flex-direction: column; gap: 14px; }
  .acc-charte .t68 { font-size: calc(36 * var(--m)); white-space: normal; }
  .acc-charte .bulle { align-self: flex-start; margin: 10px 0 18px; }
  .acc-charte .septante .d { --mfs: 120; line-height: 1; }
  .acc-charte .acc-reseau { margin-top: 34px; }
  .logos { position: relative; top: auto; margin: 50px -20px 0; gap: 22px; }
  .logos__ligne { height: 34px; }
  .logo-media { height: calc(var(--lh, 52) * 0.6px); width: calc(var(--lw, 160) * 0.6px) !important; }
  .logos__serie { gap: 30px; padding-right: 30px; }
  .logo-texte { font-size: 26px; }

  /* Réseau */
  .res-hero .frame { padding: 130px 20px 44px; }
  .res-hero .lk { display: flex; flex-direction: column; }
  .res-hero .lk .ln.d { --mfs: 66; }
  .res-hero .l2 { align-self: flex-end; text-align: right; }
  .res-hero .l3 { margin-top: 26px; font-size: 19px; line-height: 1.3; }
  .res-univers { padding-bottom: 80px; }
  .res-contenu { width: auto; margin: 0 20px; }
  .univers__ligne { grid-template-columns: 1fr; gap: 16px; min-height: 0; padding: 22px 0 24px; }
  .univers__nom, .res-leviers__titre { font-size: calc(24 * var(--m) * var(--dscale)); }
  .univers__logos { gap: 16px 24px; }
  .univers__logos .logo-media { width: calc(var(--lw) * .82 * var(--m)) !important; height: calc(var(--lh) * .82 * var(--m)); }
  .res-leviers { margin-top: 40px; gap: 14px; }
  .res-leviers__liste { gap: 8px; }
  .res-leviers__liste li { height: 36px; padding: 0 14px; font-size: 14px; border-width: 1.5px; }
  .res-actions { margin-top: 44px; gap: 14px 18px; }

  /* Offres */
  .off-hero .frame { padding: 130px 20px 80px; }
  .off-hero .lk { display: flex; flex-direction: column; }
  .off-hero .lk .ln.d { --mfs: 64; }
  .off-hero .l2 { align-self: flex-end; }
  .off-hero .l3 { padding-left: 18%; }
  .off-media .frame, .off-brand .frame { padding: 70px 20px 60px; }
  .off-media .lk, .off-brand .lk { display: flex; flex-direction: column; }
  .onglets { position: static; height: auto; margin-top: 34px; display: grid; gap: 14px; }
  .onglet { position: static; transform: none; width: auto; align-items: flex-start; }
  .onglet__texte p { text-align: left; padding-top: 12px; font-size: 17px; }
  .pastille, .onglets .pastille { font-size: 16px; height: 42px; padding: 0 20px; width: auto; }
  .off-print .frame, .off-digital .frame { padding: 70px 20px 60px; }
  .carrousel { position: relative; min-height: 640px; margin-top: 18px; }
  .carrousel__slide { position: absolute; inset: 0 0 auto 0; }
  .carrousel__slide .ln { display: block; }
  .format-visuel { position: relative; top: auto; left: auto; width: 100%; height: auto; aspect-ratio: 672 / 478; margin: 12px 0 18px; }
  .carrousel__fleche { top: calc(11px + (100vw - 40px) * .3557); width: 44px; height: 44px; background: rgba(255,253,254,.86); border-radius: 50%; z-index: 2; }
  .carrousel__fleche.prec { left: -6px; }
  .carrousel__fleche.suiv { left: auto; right: -6px; }
  .carrousel__fleche svg { width: 14px; }
  .carrousel__pos { position: static; display: block; margin-top: 6px; }
  .carrousel__slide .bulle, .off-digital .bulle { margin-top: 18px; }
  .off-digital .contenu { display: grid; grid-template-columns: 42% 1fr; gap: 18px; align-items: end; margin-top: 18px; }
  .telephone { position: relative; left: auto; top: auto; width: 100%; height: auto; aspect-ratio: 303 / 575; border-width: 5px; border-radius: 34px; }
  .off-digital .liste-formats { position: static !important; width: auto !important; font-size: 15px; }
  .mention { position: relative; top: auto; margin: 40px -20px 0; height: 34px; }
  .mention__piste span { font-size: 13px; }
  .off-process .frame { padding: 80px 20px 70px; }
  .off-process .lk { display: flex; flex-direction: column; }
  .off-process .lk .ln.d { --mfs: 66; }
  .off-process .l2 { padding-left: 26%; }
  .off-process .l3 { padding-left: 12%; }
  .etapes { position: static; width: auto; margin-top: 40px; }
  .etape { grid-template-columns: 56px 1fr; min-height: 0; margin-bottom: 22px; }
  .etape__n.d { --mfs: 46; line-height: 1; }
  .etape__t strong, .etape__t span { font-size: 17px; }
  .off-process .contacts-btn { position: static !important; margin-top: 16px; }

  /* Charte */
  .cha-hero .frame { padding: 130px 20px 70px; }
  .cha-hero .lk.titre { display: flex; flex-direction: column; }
  .cha-hero .lk.titre .ln.d { --mfs: 50; }
  .cha-hero .l2 { padding-left: 20%; }
  .cha-hero .l3 { align-self: flex-end; }
  .cha-hero .doctrine-tete { display: flex; flex-direction: column; gap: 18px; margin-top: 70px; }
  .doctrine { position: static; width: auto; margin-top: 30px; }
  .doctrine li { grid-template-columns: 48px 1fr; min-height: 0; margin-bottom: 26px; }
  .doctrine__n.d { --mfs: 44; line-height: 1; padding-top: 4px; }
  .doctrine__t strong, .doctrine__t span { font-size: 17px; }
  .cha-secteurs .frame { padding: 70px 20px 60px; }
  .cha-secteurs .lk.titre { display: flex; flex-direction: column; }
  .secteurs { position: static; margin-top: 30px; }
  .secteur { height: auto; overflow: visible; border-top: 1px solid rgba(255,255,255,.25); padding: 8px 0; }
  .secteur__piste { position: static; display: block; height: auto; transform: none !important; }
  .secteur__mot { display: block; width: 100%; text-align: left; }
  .secteur__mot.d { --mfs: 52; }
  .secteur__texte { width: auto; margin: 0; display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .4s var(--ease), opacity .4s var(--ease); font-size: 16px; }
  .secteur__texte > span { overflow: hidden; }
  .secteur.is-pin .secteur__texte { grid-template-rows: 1fr; opacity: 1; padding: 4px 0 14px; }
  .citation { position: static; text-align: left; margin-top: 34px; font-size: 18px; }
  .citation span { white-space: normal; display: inline; }
  .citation span + span { margin-left: 0; }
  .regles { height: auto; overflow: visible; display: grid; }
  .regles__titre { position: relative; width: 100%; height: auto; padding: 26px 20px; }
  .regles__titre h2 { position: static; font-size: 34px; }
  .regles__titre h2 span + span { width: auto; text-align: left; }
  .carte { position: relative; left: auto !important; width: 100% !important; height: auto; }
  .carte__btn { position: relative; inset: auto; display: grid; grid-template-columns: 56px 1fr; gap: 10px; padding: 14px 20px; }
  .carte__n { position: static; }
  .carte__n.d { --mfs: 50; line-height: 1; }
  .carte__txt { position: static; width: auto; white-space: normal; font-size: 16px; display: grid; grid-template-rows: auto 0fr; transition: grid-template-rows .4s var(--ease); align-self: center; }
  .carte__txt > span { overflow: hidden; }
  .carte.is-open .carte__txt, .carte.m-open .carte__txt { grid-template-rows: auto 1fr; }

  /* Contacts */
  .con-hero .frame { padding: 130px 20px 70px; }
  .con-hero .lk.titre { display: flex; flex-direction: column; }
  .con-hero .lk.titre .ln.d { --mfs: 56; }
  .con-hero .l1 { padding-left: 28%; }
  .con-hero .l3 { align-self: flex-end; }
  .con-hero .l4 { padding-left: 10%; }
  .con-hero .lk.inter { display: flex; flex-direction: column; margin-top: 60px; }
  .con-hero .lk.inter .l2 { padding-left: 22%; }
  .equipe { position: static; display: grid; grid-template-columns: 1fr 1fr; gap: 30px 16px; margin-top: 30px; }
  .membre { position: static; width: auto; }
  .membre__photo { width: 100%; height: auto; aspect-ratio: 227 / 292; }
  .membre__fonction, .membre__levier, .membre__mail { position: static; display: block; white-space: normal; font-size: 14px; }
  .membre__fonction { margin-top: 8px; }
  .membre__levier { margin-top: 4px; }
  .rejoindre { position: static; margin-top: 44px; }
  .rejoindre .bulle { --h: auto; height: auto; flex-wrap: wrap; justify-content: flex-start; gap: 4px 14px; padding: 12px 16px; white-space: normal; font-size: 15px; }

  /* Textes longs */
  .leg-hero .frame { padding: 130px 20px 50px; }
  .leg-hero .lk { display: flex; flex-direction: column; }
  .leg-hero .lk .ln.d { --mfs: 50; }
  .leg-hero .l2 { padding-left: 14%; }
  .texte-long { width: auto; margin: 0 20px; padding-bottom: 80px; overflow-wrap: break-word; }
  .texte-long a { overflow-wrap: anywhere; }
  .leg-hero .lk .ln.d { --mfs: 44; }
  .texte-long .encadre { padding: 20px; }

  /* Formulaire */
  .brief__panneau { margin: 0; width: auto; padding: 86px 20px 40px; }
  .brief__titre { text-align: left; margin: 0; }
  .brief__titre span { font-size: calc(40 * var(--m)); }
  .brief__titre span:last-child { margin: 0; }
  .brief form { width: auto; margin: 26px 0 0; }
  .champ { margin-bottom: 12px; }
  .champ textarea { height: 140px; }
  .leviers { margin-bottom: 18px; }
  .leviers__liste { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .brief__actions { flex-direction: column-reverse; align-items: flex-start; }
  .brief__rgpd { max-width: none; }
  .brief__envoyer .bulle { --h: 48px; font-size: 16px; }
  .brief__fermer { left: auto; right: 14px; }
  .brief { background: rgba(255, 253, 254, .94); }
}

@media (max-width: 1023px) {
  /* compléments mobile */
  .menu-mobile { display: flex; }
  br.br-d { display: none; }
  .decale { display: inline; margin: 0; }
  .septante { flex-wrap: wrap; gap: 6px 12px; }
  .septante .t18 { white-space: normal; font-size: 15px; }
  .chiffre .t18, .gros .chiffre-legende, .petit .chiffre-legende { white-space: normal; margin-top: 4px !important; margin-right: 0 !important; }
  .acc-hero .l-quatrieme { order: 1; } .acc-hero .l-pouvoir { order: 2; } .acc-hero .l-regie { order: 3; }
  .acc-hero .l-des { order: 4; } .acc-hero .l-ind { order: 5; } .acc-hero .l-sous { order: 6; }
  .acc-hero .lk .ln.d { --mfs: 52; }
  .acc-rarete .lk .ln.d { --mfs: 41; }
  .fin .lk .ln { --mfs: 50; }
  .cha-hero .l1 { order: 1; } .cha-hero .l3 { order: 2; } .cha-hero .l2 { order: 3; } .cha-hero .l4 { order: 4; }
  .con-hero .lk.titre .l1 { order: 1; } .con-hero .lk.titre .l3 { order: 2; } .con-hero .lk.titre .l2 { order: 3; } .con-hero .lk.titre .l4 { order: 4; }
  .cha-regles { padding-bottom: 0; }
  .sommaire-liste { columns: 1; }
  .ln.abs.liste-formats { position: static; }
  .carrousel__slide .ln.abs { position: static; }
  .nav::before { height: var(--nav-h); }
  .lk > .ln.d { white-space: normal; text-wrap: balance; }
  .lk > .ln.t18, .lk > .ln.t25, .lk > .ln.t28, .lk > .ln.t44, .ln.abs.t25, .ln.abs.t28, .ln.abs.t44 { white-space: normal; }
  .acc-hero .l-quatrieme { padding-left: 0; align-self: flex-end; }
  .acc-chiffres .ln { width: auto !important; text-align: left !important; }
  .acc-chiffres .chiffre-legende { text-align: left !important; }
}

@media (max-width: 1023px) and (min-width: 700px) {
  :root { --m: calc((100vw - var(--sbw)) / 600); }
  .equipe { grid-template-columns: repeat(3, 1fr); }
  .cible__grille { display: grid; grid-template-columns: 44% 1fr; gap: 32px; align-items: start; padding: 0 28px; }
  .cible__photo { position: sticky; top: calc(var(--nav-h) + 16px); aspect-ratio: 690 / 953; max-height: calc(100svh - var(--nav-h) - 32px); }
  .cible__textes { padding: 12px 0 0; }
}

/* écart « porte  un nom » (maquette) */
.ecart { margin-left: calc(31 * var(--u)); }
@media (max-width: 1023px) { .ecart { margin-left: 0; } }

/* ==========================================================================
   VERSION 3 : finitions desktop, tablette et mobile
   ========================================================================== */
@media (min-width: 1024px) {
  /* un peu d'air après le dernier écran de « Votre cible » */
  .cible__panneau:last-child { height: calc(100vh + 90 * var(--u)); height: calc(100svh + 90 * var(--u)); }
}
@media (max-width: 1023px) {
  /* unité mobile plafonnée par la hauteur (téléphone à l'horizontale) */
  :root { --m: min(calc((100vw - var(--sbw)) / 390), calc(100vh / 680)); }
  /* zones tactiles d'au moins 44 px */
  .bulle { --h: 44px; font-size: 15px; padding: 0 18px; }
  .bulle.large { --h: 46px; padding: 0 20px; }
  .nav .bulle { --h: 38px; font-size: 14px; padding: 0 14px; }
  .menu-mobile .bulle { --h: 48px; font-size: 16px; padding: 0 20px; }
  .off-process .contacts-btn .bulle { --h: 44px !important; }
  .pied__liens a { display: inline-block; padding: 6px 0; font-size: 14px; }
  .menu-mobile__bas a { display: inline-block; padding: 8px 0; font-size: 14px; }
  /* lisibilité */
  .t18 { font-size: 14px; }
  .acc-adresse .chiffre .t18 { font-size: 15px; }
  .pin3 { height: 220vh; height: 220svh; }
  .pin3__item { top: 32%; font-size: 25px; line-height: 1.28; }
  .menu-mobile a.lien { --mfs: 50; }
  /* encoches et bords arrondis (iPhone) */
  .nav__logo { left: max(16px, env(safe-area-inset-left)); }
  .nav__burger { right: max(12px, env(safe-area-inset-right)); }
  .nav__brief { right: calc(max(12px, env(safe-area-inset-right)) + 60px); }
  .menu-mobile { padding-left: max(28px, env(safe-area-inset-left)); padding-right: max(28px, env(safe-area-inset-right)); padding-bottom: max(40px, env(safe-area-inset-bottom)); }
}
@media (max-width: 1023px) and (min-width: 700px) {
  :root { --m: min(calc((100vw - var(--sbw)) / 600), calc(100vh / 680)); }
  /* tablette : textes un cran au-dessus du téléphone */
  body { font-size: 17px; }
  .t18 { font-size: 15px; }
  .t28 { font-size: 18px; }
  .t44 { font-size: 23px; }
  .pin3__item { font-size: 31px; }
  .cible__principale { font-size: 24px; }
  .cible__seconde .t28 { font-size: 17px; }
  .res-hero .l3 { font-size: 23px; }
  .res-leviers__liste li { height: 42px; font-size: 16px; padding: 0 18px; }
}
/* Tableaux des textes légaux : une fiche par ligne sur téléphone */
@media (max-width: 699px) {
  .texte-long .table-wrap table.fiches { min-width: 0; }
  .texte-long table.fiches thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .texte-long table.fiches, .texte-long table.fiches tbody, .texte-long table.fiches tr, .texte-long table.fiches td { display: block; width: 100%; }
  .texte-long table.fiches tr { border: 1px solid #d8d8d8; border-top: 4px solid var(--rose); padding: 6px 14px 10px; margin-bottom: 14px; }
  .texte-long table.fiches td { border: 0; padding: 6px 0; }
  .texte-long table.fiches td[data-label]::before { content: attr(data-label); display: block; font-weight: 700; font-size: .82em; text-transform: uppercase; letter-spacing: .02em; color: #6b6b6b; margin-bottom: 2px; }
}

/* ==========================================================================
   MENTION « RÉGIE NON EXCLUSIVE » (Loopsider, Period) : astérisque + note
   ========================================================================== */
.nx { display: flex; align-items: flex-start; flex: none; }
.nx::after {
  content: "*";
  font-family: var(--f-text);
  font-stretch: 75%;
  font-weight: 700;
  font-size: calc(var(--nx-fs, 34) * var(--u));
  line-height: .72;
  margin-left: calc(4 * var(--u));
}
.univers__logos .nx { --nx-fs: 28; }
.note-nx { font-size: max(12px, calc(18 * var(--u))); line-height: 1.3; opacity: .62; }
.res-univers .note-nx { margin-top: calc(24 * var(--u)); }
@media (max-width: 1023px) {
  .nx::after { font-size: 19px; margin-left: 2px; }
  .univers__logos .nx::after { font-size: calc(18 * var(--m)); }
  .lk > .ln.note-nx { white-space: normal; }
  .note-nx { font-size: 12px; }
  .res-univers .note-nx { margin-top: 14px; }
}