/* =========================================================================
   MsCollab — feuille de style du site public.

   Reprise du <style> de reference/site-reference.html (§6.1) : valeurs de
   palette, échelle typographique, rayons, ombres et animations inchangées.
   Seules adaptations apportées, autorisées au §6.1 :
     - polices Google Fonts → @font-face WOFF2 auto-hébergées ;
     - le reste (structure, classes, valeurs) est identique au caractère près.
   ========================================================================= */

@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/bricolage-grotesque-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/manrope-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root{
  --ink:#161431; --muted:#514d78; --soft:#676298; --faint:#a9a5c4; --body:#4b4869;
  --bg:#fcfbff; --wash:#f6f4ff; --line:#ebe7f7; --chip:#f3f1fd;
  --blue:#2b7fd4; --pink:#e0479c; --purple:#a233f0; --orange:#e8703a;
  --green:#149e83; --indigo:#5a4fe0; --violet:#6b4df6;
  /* Couleurs d'accent utilisées pour du TEXTE : versions assombries, même
     teinte, contraste ≥ 4,5:1 sur blanc et sur chaque tuile (WCAG 2.1 AA,
     audit du 2026-10-07). Les versions claires ci-dessus restent pour les
     fonds, dégradés et décors. */
  --blue-t:#246bb2; --pink-t:#c2217a; --purple-t:#9920ef; --orange-t:#b14515;
  --green-t:#0f7561; --indigo-t:#5a4fe0; --violet-t:#6546f6;
  --tile-blue:#e6f0fb; --tile-pink:#ffe6f0; --tile-green:#e2f6f1;
  --tile-orange:#fff0e0; --tile-purple:#f1e8fd; --tile-indigo:#e8eafc;
  --grad-cta:linear-gradient(100deg,#2370c4,#b23fb8); /* blanc ≥ 4,9:1 sur tout le dégradé */
  --grad-text:linear-gradient(100deg,#2b7fd4,#e0479c 50%,#a233f0);
  --r-card:28px; --r-tile:26px; --r-block:44px; --r-block-sm:40px; --r-pill:100px;
  --sh-soft:0 6px 18px rgba(23,22,48,.08);
  --sh-lift:0 10px 24px rgba(23,22,48,.12);
  --sh-cta:0 12px 30px rgba(107,77,246,.30);
  --sh-nav:0 8px 26px rgba(23,22,48,.08);
  --sh-photo:0 20px 48px rgba(23,22,48,.18);
}

/* Palette « Encre » et « Océan » (§7.2.5, écran Mise en page) : mêmes
   variables, valeurs différentes. Le thème par défaut est « Aurora »
   (valeurs ci-dessus). Activé en posant data-theme sur <html>. */
:root[data-theme="encre"]{
  --blue:#2c5aa0; --pink:#8a5a9e; --purple:#5a4b8a; --orange:#b0672e;
  --green:#1a7a63; --indigo:#3d3a7a; --violet:#4a3f8a;
  --tile-blue:#e2e8f2; --tile-pink:#ece2f0; --tile-green:#dfeeea;
  --tile-orange:#f2e6dc; --tile-purple:#e6e2f0; --tile-indigo:#e0e0ee;
  --grad-cta:linear-gradient(100deg,#2c5aa0,#5a4b8a);
  --blue-t:#2c5aa0; --pink-t:#7d528f; --purple-t:#5a4b8a; --orange-t:#905426;
  --green-t:#186f5a; --indigo-t:#3d3a7a; --violet-t:#4a3f8a;
  --grad-text:linear-gradient(100deg,#2c5aa0,#8a5a9e 50%,#5a4b8a);
}
:root[data-theme="ocean"]{
  --blue:#0f7d9e; --pink:#2b8fa8; --purple:#1c6b8c; --orange:#2ea0a0;
  --green:#0e8f7a; --indigo:#155e75; --violet:#0e7490;
  --tile-blue:#e0f2f6; --tile-pink:#e3f2f2; --tile-green:#def2ec;
  --tile-orange:#dff2f0; --tile-purple:#e0eef2; --tile-indigo:#dcecf0;
  --grad-cta:linear-gradient(100deg,#0f7d9e,#0d8370);
  --blue-t:#0d708e; --pink-t:#227083; --purple-t:#1c6b8c; --orange-t:#217272;
  --green-t:#0b7564; --indigo-t:#155e75; --violet-t:#0e708b;
  --grad-text:linear-gradient(100deg,#0f7d9e,#2b8fa8 50%,#1c6b8c);
}

/* Arrondis « Net » et « Très arrondi » (§7.2.5). Défaut : « Doux » ci-dessus. */
:root[data-radius="net"]{
  --r-card:10px; --r-tile:10px; --r-block:18px; --r-block-sm:16px; --r-pill:10px;
}
:root[data-radius="tres-arrondi"]{
  --r-card:36px; --r-tile:34px; --r-block:56px; --r-block-sm:52px; --r-pill:100px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink); overflow-x:hidden;
  font-family:'Manrope',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:'Bricolage Grotesque','Manrope',sans-serif; font-weight:800; margin:0}
a{color:inherit; text-decoration:none}
a:hover{opacity:.8}
a:focus-visible,button:focus-visible{outline:3px solid var(--violet); outline-offset:3px; border-radius:6px}
img{max-width:100%; height:auto}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.shell{max-width:1400px; margin:0 auto; padding:16px}

/* ---------- Animations (toutes désactivées si prefers-reduced-motion, ou si l'interrupteur de mise en page est éteint) ---------- */
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes floatA{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-12px) rotate(-3deg)}}
@keyframes floatB{0%,100%{transform:translateY(0) rotate(3deg)}50%{transform:translateY(-14px) rotate(3deg)}}
@keyframes floatC{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-9px) rotate(-2deg)}}
@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes spinR{from{transform:rotate(0)}to{transform:rotate(-360deg)}}
@keyframes floatD{0%,100%{transform:translateY(0) rotate(2deg)}50%{transform:translateY(-10px) rotate(2deg)}}
@keyframes blob{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(26px,-18px) scale(1.08)}66%{transform:translate(-20px,14px) scale(.95)}}
@keyframes wiggle{0%,92%,100%{transform:rotate(0)}95%{transform:rotate(-3deg)}98%{transform:rotate(3deg)}}

@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important}
  html{scroll-behavior:auto}
}
:root[data-animations="off"] *{animation:none !important; transition:none !important}

/* ---------- En-tête collant ----------
   ATTENTION : aucun ancêtre de .nav ne doit porter overflow:hidden,
   sinon position:sticky est neutralisé. ---------------------------------- */
.nav{
  position:sticky; top:16px; z-index:50; margin:0 6px -58px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  background:rgba(255,255,255,.78); border:1px solid #fff; border-radius:var(--r-pill);
  padding:9px 10px 9px 20px; backdrop-filter:blur(14px); box-shadow:var(--sh-nav);
}
.nav__logo{display:flex; align-items:center}
.nav__links{display:flex; gap:6px; font-size:14px; font-weight:600; color:var(--muted)}
.nav__links a{padding:8px 15px; border-radius:var(--r-pill)}
.nav__links a:hover{background:#fff; opacity:1}
.nav__cta{
  background:var(--ink); color:#fff; padding:11px 22px; border-radius:var(--r-pill);
  font-size:13.5px; font-weight:700; white-space:nowrap; animation:wiggle 6s ease-in-out infinite;
}
.nav__burger{display:none}

/* ---------- Halos décoratifs ---------- */
.blob{position:absolute; border-radius:50%; filter:blur(20px); pointer-events:none}
.blob--1{top:-140px; left:-120px; width:560px; height:560px;
  background:radial-gradient(circle,#c9c0ff 0%,rgba(201,192,255,0) 68%); animation:blob 16s ease-in-out infinite}
.blob--2{top:-90px; right:-130px; width:520px; height:520px;
  background:radial-gradient(circle,#ffc6de 0%,rgba(255,198,222,0) 68%); animation:blob 19s ease-in-out infinite reverse}
.blob--3{bottom:-190px; left:40%; width:600px; height:600px; filter:blur(24px);
  background:radial-gradient(circle,#b9f0e2 0%,rgba(185,240,226,0) 68%); animation:blob 22s ease-in-out infinite}

/* ---------- Hero ---------- */
.hero{position:relative; border-radius:var(--r-block); overflow:hidden; padding:80px 22px 84px; background:var(--wash)}
.hero__grid{position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,600px);
  gap:44px; align-items:center; padding:44px 40px 0}
.hero__col{display:flex; flex-direction:column; gap:24px}
.pills{display:flex; flex-wrap:wrap; gap:8px}
.pill{background:#fff; border-radius:var(--r-pill); padding:8px 15px; font-size:12.5px; font-weight:800;
  box-shadow:0 6px 18px rgba(23,22,48,.07)}
.pill--1{color:var(--violet-t); transform:rotate(-2deg)}
.pill--2{color:var(--green-t); transform:rotate(1.5deg)}
.pill--3{color:var(--orange-t); transform:rotate(-1deg)}
.hero__title{font-size:clamp(40px,5.4vw,76px); line-height:.94; letter-spacing:-.045em; max-width:14ch}
.grad{display:inline-block; background:var(--grad-text); -webkit-background-clip:text; background-clip:text;
  color:transparent; transform:rotate(-1.5deg)}
.hero__lead{margin:0; font-size:17.5px; line-height:1.6; color:var(--muted); max-width:48ch}
.actions{display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-top:4px}
.actions--center{justify-content:center; margin-bottom:80px}
.btn{border-radius:var(--r-pill); font-weight:700; font-size:15.5px; padding:17px 32px; display:inline-block;
  transition:transform .18s ease; border:0; font-family:inherit; cursor:pointer}
/* Bouton présenté comme un lien (« Afficher le numéro / l'e-mail ») */
.link-button{background:none; border:0; padding:0; font:inherit; color:var(--blue-t); cursor:pointer;
  text-decoration:underline; text-underline-offset:2px}
/* Lien d'évitement : visible seulement au focus clavier (WCAG 2.4.1) */
.skip-link{position:absolute; left:16px; top:-60px; z-index:100; background:var(--ink); color:#fff;
  padding:12px 18px; border-radius:12px; font-weight:700}
.skip-link:focus{top:16px}
main:focus{outline:none}
.btn--primary{background:var(--grad-cta); color:#fff; box-shadow:var(--sh-cta)}
.btn--primary:hover{transform:translateY(-2px); opacity:1}
.btn--ghost{background:#fff; color:var(--ink); box-shadow:var(--sh-soft)}

/* ---------- Hero : « Double orbite » ----------
   Zone de 600 × 560 « unités » (--u) : 1 unité = 1 px en desktop, la zone
   rétrécit proportionnellement sur mobile (unités de conteneur, sans point
   de rupture). Positions des icônes : cos/sin de i/n × 360° (départ −90°),
   --i par :nth-child, --n par la classe orbit--nN — aucun style inline
   (CSP). Chaque pastille tourne en sens inverse de son anneau, à la même
   vitesse : les icônes restent droites. */
.orbit{position:relative; width:min(600px,100%); aspect-ratio:600/560; justify-self:center;
  container-type:inline-size}
@media (max-width:640px){.orbit{overflow:hidden}}
.orbit__stage{--u:calc(100cqw / 600); position:absolute; inset:0}
.orbit__rings{position:absolute; inset:0; z-index:1}
.orbit__ring{position:absolute; left:50%; top:50%; width:calc(var(--r) * 2); height:calc(var(--r) * 2);
  margin:calc(var(--r) * -1) 0 0 calc(var(--r) * -1); border:2px dashed #b9aefc; border-radius:50%;
  will-change:transform; animation:spin var(--dur) linear infinite}
.orbit__ring--inner{--r:calc(160 * var(--u)); --chip:calc(50 * var(--u)); --dur:30s}
.orbit__ring--outer{--r:calc(238 * var(--u)); --chip:calc(44 * var(--u)); --dur:50s; animation-name:spinR}
.orbit__item{--a:calc(var(--i) / var(--n) * 360deg - 90deg); position:absolute;
  left:calc(50% + var(--r) * cos(var(--a))); top:calc(50% + var(--r) * sin(var(--a)));
  width:var(--chip); height:var(--chip); margin:calc(var(--chip) / -2) 0 0 calc(var(--chip) / -2)}
.orbit__item:nth-child(1){--i:0} .orbit__item:nth-child(2){--i:1} .orbit__item:nth-child(3){--i:2} .orbit__item:nth-child(4){--i:3}
.orbit__item:nth-child(5){--i:4} .orbit__item:nth-child(6){--i:5} .orbit__item:nth-child(7){--i:6} .orbit__item:nth-child(8){--i:7}
.orbit__item:nth-child(9){--i:8} .orbit__item:nth-child(10){--i:9} .orbit__item:nth-child(11){--i:10} .orbit__item:nth-child(12){--i:11}
.orbit--n1{--n:1} .orbit--n2{--n:2} .orbit--n3{--n:3} .orbit--n4{--n:4} .orbit--n5{--n:5} .orbit--n6{--n:6}
.orbit--n7{--n:7} .orbit--n8{--n:8} .orbit--n9{--n:9} .orbit--n10{--n:10} .orbit--n11{--n:11} .orbit--n12{--n:12}
.orbit__chip{display:flex; align-items:center; justify-content:center; width:100%; height:100%;
  background:#fff; border:1px solid #ebe8f7; border-radius:30%; box-shadow:0 8px 20px rgba(23,22,48,.10);
  animation:spinR var(--dur) linear infinite}
.orbit__ring--outer .orbit__chip{animation-name:spin}
.orbit__chip img{width:60%; height:60%; display:block}
.orbit:hover .orbit__ring, .orbit:hover .orbit__chip{animation-play-state:paused}
.orbit__portrait{position:absolute; z-index:2; left:50%; top:50%; box-sizing:content-box;
  width:calc(250 * var(--u)); height:calc(250 * var(--u)); margin:calc(-135 * var(--u)) 0 0 calc(-135 * var(--u));
  border:calc(10 * var(--u)) solid #fff; border-radius:50%; overflow:hidden; background:#e9e5fa;
  box-shadow:var(--sh-photo); object-fit:cover}
.orbit__portrait img{display:block; width:100%; height:100%; object-fit:cover}
/* Substitut tant qu'aucune photo n'est renseignée (§6.3, note intégrateur) */
.orbit__portrait--placeholder{display:flex; align-items:center; justify-content:center;
  background:linear-gradient(150deg,#e6f0fb,#f6e9fb); color:var(--soft); font-size:13px; font-weight:700}
.stickers{position:absolute; inset:0; z-index:3; pointer-events:none}
.sticker{position:absolute; background:#fff; border-radius:var(--r-pill); white-space:nowrap;
  font-family:'Manrope',sans-serif; font-weight:800; font-size:max(11px, calc(17 * var(--u)));
  padding:calc(12 * var(--u)) calc(22 * var(--u)); box-shadow:var(--sh-lift)}
.sticker--1{top:calc(48 * var(--u)); left:calc(6 * var(--u)); transform:rotate(-3deg); animation:floatA 7s ease-in-out infinite}
.sticker--2{top:calc(118 * var(--u)); right:calc(6 * var(--u)); transform:rotate(-2deg); animation:floatC 8s ease-in-out infinite}
.sticker--3{bottom:calc(118 * var(--u)); left:calc(6 * var(--u)); transform:rotate(3deg); animation:floatB 9s ease-in-out infinite}
.sticker--4{bottom:calc(38 * var(--u)); right:calc(14 * var(--u)); transform:rotate(2deg); animation:floatD 11s ease-in-out infinite}
.sticker--blue{color:var(--blue-t)}
.sticker--orange{color:var(--orange-t)}
.sticker--pink{color:var(--pink-t)}
.sticker--green{color:var(--green-t)}
.sticker--purple{color:var(--purple-t)}
.sticker--dark{background:#161431; color:#fff; box-shadow:0 10px 24px rgba(23,22,48,.18)}

/* ---------- Questions fréquentes ---------- */
.faq{max-width:860px; margin:0 auto; display:flex; flex-direction:column; gap:12px}
.faq__item{background:#fff; border-radius:var(--r-tile); box-shadow:var(--sh-soft)}
.faq__item summary{cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between;
  gap:16px; min-height:44px; padding:18px 24px; font-weight:800; font-size:16px}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{content:"+"; flex:none; font-size:22px; color:var(--blue-t)}
.faq__item[open] summary::after{content:"−"}
.faq__item p{margin:0; padding:0 24px 20px; color:var(--body); line-height:1.65}

/* ---------- Titres de section ---------- */
.sec{padding:80px 22px 0}
.sec--stats{padding-top:56px}
.sec__head{text-align:center; margin-bottom:34px}
.sec__title{font-size:44px; letter-spacing:-.04em; margin-bottom:10px}
.sec__sub{margin:0; font-size:16.5px; color:var(--muted)}
.kicker{font-size:12.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--soft)}
#references{padding:70px 0 0}
#references > .kicker{text-align:center; margin:0 0 22px}
#actus .kicker{margin-bottom:10px}
.logos__track--static{animation:none}
.nav__logo img{height:28px; width:auto}
.foot__brand img{height:22px; width:auto}
.blob--contact-1{top:-160px; left:-80px; width:520px; height:520px; animation-duration:18s}
.blob--contact-2{bottom:-200px; right:-90px; top:auto; width:540px; height:540px; filter:blur(22px); animation-duration:21s}

/* ---------- Missions ---------- */
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.mission{position:relative; overflow:hidden; border-radius:var(--r-card); padding:32px; transition:transform .18s ease}
.mission:hover{transform:translateY(-6px) rotate(-1deg)}
.mission__num{position:absolute; top:-18px; right:6px; font-family:'Bricolage Grotesque',sans-serif;
  font-size:96px; font-weight:800; color:#fff; opacity:.55; letter-spacing:-.05em; line-height:1}
.mission__icon{position:relative; width:44px; height:44px; border-radius:15px; background:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:16px; margin-bottom:20px}
.mission__icon-svg{width:20px; height:20px}
.svg-sprite{position:absolute; width:0; height:0; overflow:hidden}
.mission__title{position:relative; font-family:'Bricolage Grotesque',sans-serif; font-size:21px; font-weight:800;
  letter-spacing:-.025em; margin-bottom:8px}
.mission__desc{position:relative; font-size:14.5px; line-height:1.6; color:var(--body)}

/* ---------- Chiffres clés ---------- */
.grid4{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.stat{border-radius:var(--r-tile); padding:30px 26px; text-align:center}
.stat__n{font-family:'Bricolage Grotesque',sans-serif; font-size:46px; font-weight:800; letter-spacing:-.045em}
.stat__label{font-size:13.5px; font-weight:700; color:var(--body); margin-top:4px}
.stat__wink{font-size:12.5px; color:var(--soft); margin-top:6px}

/* ---------- Classes utilitaires d'accent ----------
   La CSP du site interdit 'unsafe-inline' sur style-src (§9 du cahier des
   charges) : les style="background:var(--tile-blue)" du fichier de
   référence, licites dans un aperçu statique, sont donc silencieusement
   ignorés par le navigateur une fois servis par l'application. Ces classes
   reproduisent exactement les mêmes valeurs (mêmes variables CSS, donc
   compatibles avec les thèmes Encre/Océan de l'écran Mise en page) sans
   recourir au style inline. */
.tile--blue{background:var(--tile-blue)}
.tile--pink{background:var(--tile-pink)}
.tile--green{background:var(--tile-green)}
.tile--orange{background:var(--tile-orange)}
.tile--purple{background:var(--tile-purple)}
.tile--indigo{background:var(--tile-indigo)}
.ink--blue{color:var(--blue-t)}
.ink--pink{color:var(--pink-t)}
.ink--green{color:var(--green-t)}
.ink--orange{color:var(--orange-t)}
.ink--purple{color:var(--purple-t)}
.ink--indigo{color:var(--indigo-t)}

/* ---------- Références ---------- */
.logos{overflow:hidden; padding:6px 0}
.logos__track{display:flex; width:max-content; align-items:center; animation:marquee 32s linear infinite}
.logos__item{display:flex; align-items:center; justify-content:center; height:56px; padding:0 34px}
.logos__item img{max-height:40px; width:auto; filter:grayscale(1); opacity:.6}
.apps{display:flex; flex-wrap:wrap; justify-content:center; gap:9px; margin-top:26px; padding:0 22px}
.apps span{font-size:12.5px; font-weight:700; color:var(--muted); background:var(--chip);
  padding:8px 16px; border-radius:var(--r-pill)}

/* ---------- Actus ---------- */
.news__head{display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-bottom:28px}
.news__title{font-size:40px; letter-spacing:-.04em}
.news__lead{margin:10px 0 0; font-size:16px; color:var(--muted); max-width:56ch}
.news__cta{background:#fff; color:var(--ink); padding:14px 26px; border-radius:var(--r-pill);
  font-weight:700; font-size:14.5px; box-shadow:var(--sh-soft); white-space:nowrap}
.card{display:flex; flex-direction:column; gap:14px; background:#fff; border:1px solid var(--line);
  border-radius:var(--r-tile); padding:28px; transition:transform .18s ease, box-shadow .18s ease}
.card:hover{transform:translateY(-4px); box-shadow:0 14px 34px rgba(23,22,48,.08); opacity:1}
.card__meta{display:flex; align-items:center; gap:10px}
.tag{font-size:12px; font-weight:800; padding:6px 12px; border-radius:var(--r-pill)}
.card__date{font-size:12.5px; color:var(--soft)}
.card__title{font-family:'Bricolage Grotesque',sans-serif; font-size:19px; font-weight:800;
  letter-spacing:-.02em; line-height:1.25}
.card__excerpt{font-size:14.5px; line-height:1.6; color:var(--muted)}
.card__more{font-size:13.5px; font-weight:700; color:var(--blue-t); margin-top:auto}
.news__all{display:flex; justify-content:center; margin-top:26px}
.news__all a{font-size:14px; font-weight:700; color:var(--muted); display:inline-flex; align-items:center; min-height:44px}

/* ---------- Contact ---------- */
.contact{padding:70px 6px 6px}
.contact__box{position:relative; overflow:hidden; border-radius:var(--r-block-sm); padding:86px 48px;
  text-align:center; display:flex; flex-direction:column; align-items:center; gap:16px; background:var(--wash)}
.contact__box>*:not(.blob){position:relative}
.contact__pill{background:#fff; border-radius:var(--r-pill); padding:9px 18px; font-size:13px; font-weight:800;
  color:var(--blue-t); box-shadow:0 8px 22px rgba(23,22,48,.08); transform:rotate(-2deg)}
.contact__title{font-size:56px; letter-spacing:-.045em; max-width:18ch; line-height:1}
.contact__lead{margin:0; font-size:17px; color:var(--muted); max-width:50ch; line-height:1.6}
.contact__actions{display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:10px}
.contact__actions .btn{padding:18px 34px; font-size:16px}
.contact__actions .btn--primary{animation:wiggle 7s ease-in-out infinite}
.contact__meta{display:flex; gap:28px; margin-top:20px; font-size:14px; font-weight:600; color:var(--muted);
  flex-wrap:wrap; justify-content:center}
.contact__meta a{color:var(--blue-t)}
/* Zones tactiles d'au moins 44 px (audit SEO/visuel du 2026-10-07) */
.contact__meta a, .contact__meta .link-button, .foot__links a{display:inline-flex; align-items:center; min-height:44px}

/* ---------- Pied de page ---------- */
.foot{display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between; align-items:center;
  padding:26px 16px 30px; font-size:13.5px; color:var(--soft)}
.foot__brand{display:flex; align-items:center; gap:12px}
.foot__links{display:flex; gap:22px; font-weight:600}
.foot--legal{margin-top:60px}
.foot__legal{flex-basis:100%; margin:0; font-size:12px; line-height:1.5; color:var(--soft)}

/* ---------- Mentions légales ---------- */
.legal-sec{padding-top:56px}
.legal-sec .sec__head{text-align:left; max-width:70ch}
.legal-sec .sec__title{font-size:36px}
.legal-body{max-width:70ch; font-size:15px; line-height:1.7; color:var(--body)}
.legal-body h2{font-family:'Bricolage Grotesque',sans-serif; font-size:20px; margin:32px 0 10px}

/* ---------- Points de rupture ---------- */
@media (max-width:1150px){
  .hero__grid{grid-template-columns:minmax(0,1fr)}
  .grid3{grid-template-columns:1fr 1fr}
  .nav__links{display:none}
  .nav__links--always{display:flex}
  .nav__burger{display:flex; align-items:center; justify-content:center; width:44px; height:44px; flex:none;
    border:0; background:var(--chip); border-radius:14px; cursor:pointer; font-size:18px; color:var(--muted)}
  .nav__burger[aria-expanded="true"]+.nav__links{
    display:flex; position:absolute; top:64px; left:0; right:0; flex-direction:column;
    background:#fff; border-radius:24px; padding:12px; box-shadow:var(--sh-nav)}
}
@media (max-width:760px){
  .grid3{grid-template-columns:1fr}
  .grid4{grid-template-columns:1fr 1fr}
  .hero{padding:76px 16px 56px; border-radius:32px}
  .hero__grid{padding:32px 6px 0; gap:36px}
  .sec{padding:60px 16px 0}
  .sec__title{font-size:32px}
  .contact__box{padding:56px 22px; border-radius:32px}
  .contact__title{font-size:36px}
  .news__title{font-size:30px}
}