/* =========================================================
   MYGICIEL — Homepage
   Design tokens issus de Figma (my_giciel / site_web_rendering)
   ========================================================= */

:root {
  /* Couleurs */
  --navy-500: #101f3c;
  --navy-400: #1a3463;
  --navy-200: #4878cf;
  --orange:   #e99700;
  --white:    #ffffff;
  --offwhite: #fbfbfb;
  --black:    #0c0c0c;
  --grey-20:  #333333;
  --grey-30:  #4d4d4d;
  --grey-num: #adabc3;
  --peach-96: #f7f6f3;
  --form-bg:  #f5f5f5;

  /* Dégradé bleu foncé */
  --grad-dark: radial-gradient(120% 90% at 50% 0%, #1a3463 0%, #101f3c 70%);

  /* Typo */
  --f-head: "Bai Jamjuree", sans-serif;
  --f-body: "Montserrat", sans-serif;
  --f-dm:   "DM Sans", sans-serif;
  --f-man:  "Manrope", sans-serif;

  /* Layout */
  --max: 1440px;
  --nav-h: 140px;           /* hauteur du navbar : ~53px d'air au-dessus et en dessous du logo (34px) */
  --pad: 200px;              /* padding horizontal desktop du hero/why-us */
  --pad-white: 125px;        /* padding horizontal des sections blanches */
  /* Rayons — une échelle à cinq crans plutôt qu'une valeur unique : l'arrondi
     se lit relativement à la taille de l'élément, une pastille et un grand
     panneau ne peuvent pas partager le même. Les valeurs intermédiaires
     (5, 10, 14, 20, 23, 25 px) qui traînaient dans la feuille n'étaient pas
     une échelle mais des one-shots accumulés : elles se voient à peine mais
     garantissent la dérive. Choisir un cran, ne pas réinventer une valeur. */
  --radius: 4px;             /* contrôles : boutons, champs (token Figma) */
  --r-sm:   8px;             /* petits médias, badges, pastilles carrées */
  --r-md:  12px;             /* cartes — le cran dominant du site */
  --r-lg:  16px;             /* grands panneaux et grands médias */
  --r-xl:  24px;             /* grands blocs éditoriaux */
  --shadow: 0 4px 2px -0.25px rgba(12,12,13,.10), 0 4px 2px -0.25px rgba(12,12,13,.05);
}

/* ---------- Reset ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--f-body);
  color: var(--black);
  background: var(--white);
  overflow-x: hidden;
  line-height: 1.4;
}
img { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }

.accent { color: var(--orange); }

/* Visible uniquement pour les lecteurs d'écran */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- Titres de section ---------- */
.section-title {
  font-family: var(--f-head);
  font-weight: 700;
  text-align: center;
  line-height: 1.5;
}
.section-title--dark  { color: var(--navy-400); font-size: clamp(30px, 4.6vw, 46px); }
.section-title--left  { text-align: left; width: 100%; }

/* =========================================================
   NAVBAR — transparente, sticky, thème adaptatif (JS)
   ========================================================= */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  width: 100%;
  height: var(--nav-h);
  background: transparent;
  transition: background .3s ease;
  /* Fond "verre dépoli" activé : la barre a un fond visible, elle catche donc les clics.
     (Si tu repasses en fond 100% transparent, remets les 3 lignes pointer-events ci-dessous.) */
}
/* Pour un navbar 100% transparent, dé-commente pour laisser passer les clics dans le vide :
.navbar, .navbar__inner { pointer-events: none; }
.logo, .nav, .nav-toggle { pointer-events: auto; }
*/
.navbar__inner {
  max-width: var(--max);
  margin: 0 auto;
  height: 100%;
  padding: 0 var(--pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
/* Thème appliqué par main.js selon la section derrière la barre */
.navbar--dark .logo,
.navbar--dark .nav__link { color: var(--white); }
.navbar--dark .nav-toggle span { background: var(--white); }

.navbar--light .logo,
.navbar--light .nav__link { color: var(--navy-500); }
.navbar--light .nav-toggle span { background: var(--navy-500); }

/* Verre dépoli adaptatif ACTIVÉ.
   IMPORTANT : le flou est porté par ::before, pas par .navbar directement.
   Sinon backdrop-filter ferait du navbar un "containing block" et casserait
   le position:fixed du menu mobile. */
.navbar--dark::before,
.navbar--light::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}
.navbar--dark::before  { background: rgba(16,31,60,.72); }
.navbar--light::before { background: rgba(255,255,255,.72); }
.logo { display: flex; align-items: center; gap: 10px; color: var(--white); }

/* Logo image adaptatif : deux fichiers, le thème du navbar en affiche un seul.
   --on-dark  = logo affiché sur fond FONCÉ (donc ta version claire/blanche)
   --on-light = logo affiché sur fond CLAIR (donc ta version foncée/bleue) */
.logo__img { height: 38px; width: auto; display: none; }
.navbar--dark  .logo__img--on-dark  { display: block; }
.navbar--light .logo__img--on-light { display: block; }


.nav { display: flex; align-items: center; gap: 33px; }

/* Bouton croix : caché en desktop, visible dans le panneau mobile (voir media 992) */
.nav-close {
  display: none;
  position: absolute;
  top: 40px; right: 28px;
  background: none; border: 0; cursor: pointer;
  color: var(--white);
  padding: 6px; line-height: 0;
}
.nav-close:hover { color: var(--orange); }
.nav__link {
  font-family: var(--f-body);
  font-size: 18px;
  color: var(--white);
  display: inline-flex; align-items: center; gap: 8px;
  transition: color .2s ease;
}
.nav__link:hover { color: var(--orange); }
.nav__link svg { transition: transform .2s ease; }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none; border: 0; cursor: pointer;
  padding: 6px;
}
.nav-toggle span {
  width: 26px; height: 2px; background: var(--white);
  transition: transform .3s ease, opacity .3s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* =========================================================
   ZONE SOMBRE (hero + why us)
   ========================================================= */
.dark-top { background: var(--grad-dark); position: relative; z-index: 0; padding-top: var(--nav-h); }

/* Motif décoratif (pattern_v2) sur les fonds bleu foncé, derrière le contenu.
   Remplace l'URL Figma par ton fichier local : url('../img/patterns/pattern_v2.png')
   (chemin en ../ car cette règle est dans le CSS, pas dans le HTML). */
.dark-top::before,
.footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url('../img/pattern.svg') 
  center / cover no-repeat;
  opacity: .12;
  pointer-events: none;
  z-index: -1;
}

/* ---------- HERO ---------- */
.hero {
  max-width: var(--max);
  margin: 0 auto;
  padding: 64px var(--pad);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}
.hero__content {
  display: flex; flex-direction: column; align-items: center;
  gap: 24px;
  padding: 60px 0 40px;
  text-align: center;
}
.hero__title {
  font-family: var(--f-head);
  font-weight: 700;
  color: var(--white);
  font-size: clamp(38px, 6vw, 68px);
  line-height: 1.15;
  max-width: 30ch;
}
/* Coupe le titre en deux lignes : "Nous construisons" / "votre logiciel sur
   mesure". Le passage à la ligne est porté par le span, pas par un <br> ni par
   une largeur calculée au caractère près — chaque partie se replie ensuite
   librement sur les petits écrans. */
.hero__title .accent { display: block; }
/* ---------- Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f-head);
  font-weight: 700;
  font-size: 22px;
  padding: 20px 36px;
  border-radius: var(--radius);
  border: 0; cursor: pointer;
  transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn--orange { background: var(--orange); color: var(--black); }
.btn--orange:hover { filter: brightness(1.05); box-shadow: 0 10px 24px rgba(233,151,0,.35); }
.btn--navy { background: var(--navy-500); color: var(--white); }
.btn--navy:hover { box-shadow: 0 10px 24px rgba(16,31,60,.35); }


/* ---------- WHY US ---------- */
/* =========================================================
   VOUS VOUS RECONNAISSEZ ? (dans la zone sombre)
   ========================================================= */
/* Section claire : pas de max-width sur la section elle-même, sinon la bande
   pêche s'arrêterait à 1440px au lieu de filer d'un bord à l'autre. C'est le
   contenu intérieur qui est bridé. */
.pains {
  background: var(--peach-96);
  padding: 64px var(--pad-white);
  display: flex; flex-direction: column; align-items: center;
  gap: 50px;
}
.pains__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  width: 100%; max-width: 1040px;
}
.pain-card {
  background: var(--white);
  border-radius: var(--r-md);
  box-shadow: var(--shadow);
  padding: 30px 26px;
  display: flex; flex-direction: column; align-items: center;
  gap: 18px;
  text-align: center;
}
.pain-card img { width: 88px; height: 88px; object-fit: contain; flex-shrink: 0; }
.pain-card p {
  font-family: var(--f-body); font-weight: 500;
  color: var(--grey-20); font-size: 17px; line-height: 1.5;
}

/* =========================================================
   SUR MESURE — texte à gauche, mockup à droite
   ========================================================= */
/* La section EST la grille, il n'y a pas d'élément intérieur où loger la
   largeur maximale : elle est portée par les colonnes, et non par la section,
   sinon la bande pêche s'arrêterait à 1440px au lieu de filer d'un bord à
   l'autre. */
/* =========================================================
   AVANT / APRÈS (illustration)
   ========================================================= */
.beforeafter {
  background: var(--white);
  padding: 64px var(--pad-white);
  display: flex; flex-direction: column; align-items: center;
  gap: 40px;
}
.beforeafter__head { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; max-width: 1100px; }
.beforeafter__cta { font-family: var(--f-body); font-weight: 600; font-size: clamp(17px, 2.2vw, 21px); color: var(--grey-20); }
.beforeafter__pic { display: block; width: 100%; }
.beforeafter__img { display: block; width: 100%; max-width: 1160px; height: auto; margin: 0 auto; }
@media (max-width: 760px) {
  .beforeafter { padding: 40px 16px; }
  .beforeafter__img { max-width: 460px; }
}

/* =========================================================
   MANIFESTE — bande d'accroche pleine largeur
   ========================================================= */
.manifesto {
  background: var(--grad-dark);
  padding: 90px var(--pad-white);
  text-align: center;
}
.manifesto__line {
  font-family: var(--f-head); font-weight: 700;
  color: var(--white);
  font-size: clamp(28px, 4.2vw, 46px);
  line-height: 1.25;
  max-width: 1000px; margin: 0 auto;
}
@media (max-width: 760px) {
  .manifesto { padding: 60px 20px; }
}

.tailor {
  background: var(--peach-96);
  padding: 64px var(--pad-white);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 570px));
  justify-content: center;
  gap: 60px;
  align-items: center;
}
.tailor__text { display: flex; flex-direction: column; gap: 24px; }
.tailor__lead {
  font-family: var(--f-head); font-weight: 700;
  color: var(--orange); font-size: clamp(20px, 2.4vw, 26px);
}
.tailor__claim {
  font-family: var(--f-body); font-weight: 500;
  color: var(--grey-20); font-size: clamp(17px, 1.8vw, 20px); line-height: 1.6;
  max-width: 42ch;
}
.tailor__outro {
  font-family: var(--f-body); font-weight: 400;
  color: var(--grey-30); font-size: clamp(16px, 1.7vw, 18px); line-height: 1.7;
  max-width: 42ch;
}
.tailor__media img { width: 100%; height: auto; }

.why-us {
  background: var(--white);
  padding: 64px var(--pad-white);
  display: flex; flex-direction: column; align-items: center;
  gap: 50px;
}
.why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px 64px;
  width: 100%;
  max-width: 1040px;
}
.why-card {
  display: flex; flex-direction: column; align-items: center;
  gap: 20px; text-align: center;
}
.hex {
  width: 144px; height: 133px;
  display: grid; place-items: center;
  position: relative;
}
.hex::before {
  content: "";
  position: absolute; 
  inset: 0;
  display: none; /* fond hexagone retiré */
}

.hex img { position: relative; height: 88px; width: auto; }
.why-card__body { display: flex; flex-direction: column; align-items: center; }
.why-card__title {
  font-family: var(--f-head);
  font-weight: 700;
  color: var(--navy-500);
  font-size: 26px;
  line-height: 1.5;
  margin: 0;
}
/* Texte explicatif : toujours visible, sans survol ni animation */
.why-card__desc {
  font-family: var(--f-body);
  font-weight: 500;
  color: var(--grey-20);
  font-size: 16px;
  line-height: 1.6;
  max-width: 34ch;
  margin-top: 16px;
}

/* Pastilles de mentions secondaires : citer sans donner le poids d'une carte.
   Partagé par "Un logiciel qui vous fait gagner" et "Exemples" — les deux
   sections étant sur fond clair, leur mise en forme est identique. */
.why-more,
.features__more {
  display: flex; flex-wrap: wrap;
  justify-content: center; align-items: center;
  gap: 14px;
  max-width: 900px;
}
/* Pas de remplissage : la même règle sert une section blanche et une section
   pêche, un fond blanc disparaîtrait sur l'une. Le contour suffit et reste
   valable quel que soit le fond. */
.why-more li,
.features__more li {
  font-family: var(--f-body); font-weight: 500;
  color: var(--grey-30); font-size: 15px;
  background: none;
  border: 1px solid #d4d2e3;
  border-radius: 100px;
  padding: 9px 18px;
}
/* Sélecteur à deux classes : sinon la règle ci-dessus, plus spécifique,
   réimposerait le filet et la taille de texte sur la pastille de clôture. */
.why-more .why-more__end,
.features__more .features__more-end {
  font-family: var(--f-head); font-weight: 700;
  color: var(--orange); font-size: 18px;
  background: none; border: 0; padding: 9px 4px;
}

/* Illustration « du tableur à l'application », en clôture de la section.
   Fond transparent : elle se pose directement sur le blanc. La variante
   mobile (portrait, écran au premier plan) est servie par le <picture>,
   cf. tools/build-passer-de-excel-a-un-logiciel.mjs */
.why-ba { display: block; width: 100%; }
.why-ba__img {
  display: block; width: 100%; max-width: 980px; height: auto; margin: 0 auto;
}
@media (max-width: 760px) {
  /* La variante mobile est en portrait : on la bride comme .beforeafter__img. */
  .why-ba__img { max-width: 460px; }
}

/* =========================================================
   FEATURES / NOS SERVICES
   ========================================================= */
.features {
  background: var(--peach-96);
  padding: 64px var(--pad-white);
  display: flex; flex-direction: column; align-items: center;
  gap: 50px;
}
.features__head { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.features__intro {
  font-family: var(--f-dm); color: var(--navy-400);
  font-size: 18px; text-align: center; max-width: 707px;
}

/* Chaque exemple porte son propre visuel : plus d'image unique pilotée au
   survol, donc plus d'état actif ni de transition. */
.services {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px 24px;
  width: 100%;
  max-width: 1190px;
}
.service-card {
  background: #fefefe;
  border: 1px solid #f1f1f1;
  /* 12px comme toutes les autres grilles de cartes (.pain-card, .tl-card,
     .pricing-tile, .showcase__item, .sector-card, .story-card). --radius (4px)
     est le rayon des boutons et des champs, pas celui des cartes : il laissait
     ici un cadre plus anguleux que la vignette qu'il contient. */
  border-radius: var(--r-md);
  box-shadow: var(--shadow);
  padding: 20px;
  text-align: center;
  display: flex; flex-direction: column; gap: 12px;
}
.service-card__media {
  border-radius: var(--r-md);
  overflow: hidden;
  /* Pas de fond : ces images ont une couche alpha (maquettes détourées).
     Un fond laisserait une couleur transparaître autour de la maquette ;
     sans fond, elles reposent directement sur le blanc de la carte. */
  background: transparent;
}
/* Les sources sont carrées : le ratio imposé garde les six cartes alignées
   même si une image venait à être remplacée par un autre format. */
.service-card__media img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}
.service-card h3 {
  font-family: var(--f-body); font-weight: 700;
  color: var(--navy-400); font-size: 24px; line-height: 1.4;
}
.service-card p {
  font-family: var(--f-body); font-weight: 400;
  color: var(--black); font-size: 16px; line-height: 1.5;
}

/* Fonctionnalités "en vrac" + relance. Les pastilles elles-mêmes sont
   stylées plus haut, en commun avec celles de "Un logiciel qui vous fait
   gagner". */
.features__foot {
  display: flex; flex-direction: column; align-items: center;
  gap: 24px; width: 100%;
}
/* Lien discret vers la modale complète : pour le visiteur qui veut creuser,
   volontairement effacé (pas un call to action). */
.features__all-btn {
  display: inline-flex; align-items: center; gap: 7px;
  background: none; border: 0; cursor: pointer;
  font-family: var(--f-body); font-weight: 600; font-size: 15px;
  color: var(--grey-30);
  padding: 2px;
  transition: color .2s ease, gap .2s ease;
}
.features__all-btn:hover { color: var(--orange); gap: 11px; }
.features__cta {
  font-family: var(--f-body); font-weight: 500;
  color: var(--grey-20); font-size: 17px; line-height: 1.6;
  text-align: center; max-width: 640px;
}
.features__cta a {
  color: var(--orange); font-weight: 700;
  text-decoration: underline; text-underline-offset: 3px;
}
.features__cta a:hover { color: var(--navy-400); }

/* =========================================================
   PROCESS / NOTRE APPROCHE
   ========================================================= */
.process {
  background: var(--white);
  padding: 64px var(--pad-white);
  display: flex; flex-direction: column; align-items: center;
  gap: 50px;
}
/* Conclusion de la frise : bloc sombre pour trancher sur la section blanche
   et se lire comme l'aboutissement des quatre étapes. */
.turnkey {
  width: 100%; max-width: 1190px;
  background: var(--grad-dark);
  border-radius: var(--r-lg);
  padding: 44px clamp(24px, 4vw, 56px);
  display: flex; flex-direction: column; align-items: center;
  gap: 28px;
  text-align: center;
}
.turnkey__title {
  font-family: var(--f-head); font-weight: 700;
  color: var(--white); font-size: clamp(22px, 2.8vw, 30px); line-height: 1.3;
}
.turnkey__list {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: center;
  gap: 14px 40px;
  text-align: left;
}
.turnkey__list li {
  font-family: var(--f-body); font-weight: 500;
  color: var(--white); font-size: 17px; line-height: 1.4;
  padding-left: 28px; position: relative;
}
/* Coche dessinée en CSS : deux traits, pas de glyphe ni d'image. */
.turnkey__list li::before {
  content: "";
  position: absolute; left: 4px; top: 4px;
  width: 6px; height: 12px;
  border: solid var(--orange);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.turnkey__claim {
  font-family: var(--f-head); font-weight: 700;
  color: var(--orange); font-size: clamp(18px, 2.2vw, 24px);
}

.timeline {
  position: relative;
  width: 100%;
  max-width: 1190px;
  display: flex; flex-direction: column;
  gap: 40px;
  padding-top: 20px;
}
.timeline__line {
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  width: 2px;
  transform: translateX(-50%);
  background: linear-gradient(var(--navy-500), var(--navy-200));
  z-index: 0;
}

.tl-step {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 50px;
  position: relative; z-index: 1;
}
.tl-spacer { min-height: 1px; }

.tl-card {
  background: var(--peach-96);
  border-radius: var(--r-md);
  box-shadow: var(--shadow);
  padding: 50px;
  display: flex; align-items: center; gap: 30px;
}
.tl-card__text { display: flex; flex-direction: column; gap: 24px; flex: 1; text-align: right; }
.tl-card__text--left { text-align: left; }
.tl-card__text h3 {
  font-family: var(--f-body); font-weight: 700;
  color: var(--grey-30); font-size: clamp(24px, 3vw, 32px); line-height: 1.15;
}
.tl-card__text p {
  font-family: var(--f-man); font-weight: 400;
  color: var(--grey-20); font-size: 18px; line-height: 1.5;
}
/* Hexagone navy dessiné en CSS + glyphe unique au-dessus (même principe que le why-us) */
.tl-card__icon {
  flex-shrink: 0; align-self: center;
  position: relative;
  width: 75px; height: 69px;
  display: grid; place-items: center;
}
.tl-card__icon::before {
  content: ""; position: absolute; inset: 0;
  display: none; /* fond hexagone retiré */
}
.tl-card__icon img {
  position: relative; z-index: 1;
  width: 60px; height: 60px;
  object-fit: contain;
}

.tl-node {
  width: 70px; height: 70px; flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--white);
  border: 7px solid var(--peach-96);
  border-radius: 100px;
  font-family: var(--f-head); font-weight: 700;
  color: var(--orange); font-size: 38px;
  z-index: 2;
}

/* =========================================================
   TARIFS ET DÉLAIS — tuiles statistiques
   ========================================================= */
.pricing {
  background: var(--peach-96);
  padding: 64px var(--pad-white);
  display: flex; flex-direction: column; align-items: center;
  gap: 40px;
}
.pricing__head { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.pricing__intro {
  font-family: var(--f-dm); color: var(--navy-400);
  font-size: 18px; line-height: 1.6;
  text-align: center; max-width: 760px;
}
.pricing__tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  width: 100%; max-width: 1000px;
}
.pricing-tile {
  background: var(--white);
  border: 1px solid #d4d2e3;
  border-radius: var(--r-md);
  padding: 32px 24px;
  display: flex; flex-direction: column; align-items: center;
  gap: 10px;
  text-align: center;
}
.pricing-tile__label {
  font-family: var(--f-body); font-weight: 500;
  color: var(--grey-30); font-size: 15px; line-height: 1.4;
}
/* Chiffres en Montserrat, la sans du site, et non dans la police de titrage :
   un gros nombre en face de titrage se lit comme un ornement.
   Pas de tabular-nums non plus — à cette taille, les chiffres à chasse fixe
   font des trous. Il est réservé aux colonnes qui doivent s'aligner. */
.pricing-tile__value {
  font-family: var(--f-body); font-weight: 700;
  color: var(--navy-400);
  font-size: clamp(22px, 2.6vw, 32px); line-height: 1.15;
}
.pricing-tile__value--accent { color: var(--orange); }

/* =========================================================
   PORTFOLIO / NOS TRAVAUX
   ========================================================= */

.badge {
  display: inline-block;
  border: 1px solid var(--navy-400);
  color: rgba(12,12,12,.9);
  font-family: var(--f-body); font-weight: 500; font-size: 18px;
  padding: 10px 20px;
  border-radius: 23px;
  transition: background .2s ease, color .2s ease;
}
.badge:hover { background: var(--navy-400); color: var(--white); }

/* =========================================================
   NOS CLIENTS — mur de logos
   ========================================================= */
.clients {
  background: var(--white);
  padding: 64px var(--pad-white);
  display: flex; flex-direction: column; align-items: center;
  gap: 40px;
}
.clients__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  width: 100%; max-width: 1000px;
}
/* Les logos vont du portrait 52x96 au bandeau 248x80. On normalise donc par
   la HAUTEUR dans une cellule de taille fixe : imposer une largeur commune
   rendrait les logos hauts minuscules et les logos larges énormes. */
.clients__cell {
  height: 116px;
  display: flex; align-items: center; justify-content: center;
}
.clients__cell img {
  max-width: 100%;
  max-height: 90px;
  width: auto; height: auto;
}
/* Logo au format portrait : plafonné à la même hauteur, il paraît plus petit.
   On le laisse monter plus haut pour équilibrer sa présence perçue. */
.clients__cell--tall img { max-height: 108px; }

/* =========================================================
   APERÇU RÉALISATIONS — teaser vers la page dédiée
   ========================================================= */
.showcase {
  background: var(--white);
  padding: 64px var(--pad-white);
  display: flex; flex-direction: column; align-items: center;
  gap: 40px;
}
/* Grille bento légère : une grande vignette + cinq normales, renvoi vers la
   page Réalisations. Les médias remplissent leur case (cover). */
.showcase__grid {
  width: 100%; max-width: 1100px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 200px;
  grid-auto-flow: dense;
  gap: 16px;
}
.showcase__item {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-md);
  background: #000;
  box-shadow: var(--shadow);
}
.showcase__item--big  { grid-column: span 2; grid-row: span 2; }
.showcase__item--wide { grid-column: span 2; }
.showcase__item img,
.showcase__item video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s ease;
}
.showcase__item:hover img,
.showcase__item:hover video { transform: scale(1.05); }
.showcase__caption {
  position: absolute; left: 0; right: 0; bottom: 0;
  font-family: var(--f-body); font-weight: 600; font-size: 14px;
  color: #fff;
  padding: 26px 14px 12px;
  background: linear-gradient(0deg, rgba(0,0,0,.75), transparent);
  line-height: 1.3;
}
/* Tuile d'appel à l'action : comble la case libre de la grille et invite à
   la page complète. Style "outline" — bordure, pas de média ni de fond plein —
   pour la démarquer nettement des vignettes. Se remplit au survol. */
.showcase__item--cta {
  background: transparent;
  border: 2px solid var(--navy-400);
  box-shadow: none;
  display: grid; place-items: center;
  text-align: center;
  transition: background .2s ease;
}
.showcase__item--cta:hover { background: var(--navy-500); }
.showcase__cta-text {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f-head); font-weight: 700;
  color: var(--navy-500); font-size: clamp(16px, 1.8vw, 20px);
  padding: 0 16px;
  transition: color .2s ease;
}
.showcase__item--cta:hover .showcase__cta-text { color: var(--white); }
.showcase__cta-text svg { transition: transform .2s ease; }
.showcase__item--cta:hover .showcase__cta-text svg { transform: translateX(3px); }

/* =========================================================
   TESTIMONIALS
   ========================================================= */
.testimonials {
  background: var(--peach-96);
  padding: 64px var(--pad-white);
  display: flex; flex-direction: column; align-items: center;
  gap: 25px;
}
/* Carrousel : la piste défile, la carte active est centrée, les voisines
   dépassent de part et d'autre (le viewport est plus large que la carte) et
   sont atténuées. Le décalage est calculé en JS d'après la position réelle. */
.testimonial-viewport {
  width: 100%;
  overflow: hidden;
  /* Le swipe horizontal est géré en JS ; on laisse au navigateur le scroll
     vertical de la page, qui reste donc fluide au doigt sur le carrousel. */
  touch-action: pan-y;
}
.testimonial-track {
  display: flex;
  align-items: stretch;
  gap: 32px;
  transition: transform .45s cubic-bezier(.4, 0, .2, 1);
  will-change: transform;
}
.testimonial {
  position: relative;
  flex: 0 0 auto;
  width: min(760px, 84vw);
  background: var(--grad-dark);
  border-radius: var(--r-lg);
  padding: 45px 45px 15px;
  display: flex; flex-direction: column; align-items: center;
  gap: 32px;
  overflow: hidden;
  opacity: .3;
  transform: scale(.94);
  transition: opacity .45s ease, transform .45s ease;
}
.testimonial.is-active { opacity: 1; transform: none; }
.testimonial__avatar {
  width: 150px; height: 150px;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid var(--white);
  flex-shrink: 0;
}
/* Vignette vidéo 16:9 : lit tout de suite comme un lecteur, gros bouton lecture */
.testimonial__video {
  position: relative;
  width: min(460px, 100%); aspect-ratio: 16 / 9;
  border: 0; padding: 0; margin: 0; cursor: pointer;
  border-radius: var(--r-md); overflow: hidden;
  background: #000;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .4);
}
.testimonial__video img { width: 100%; height: 100%; object-fit: cover; display: block; }
.testimonial__video::before {
  content: ""; position: absolute; inset: 0;
  background: rgba(0, 0, 0, .18); transition: background .2s ease;
}
.testimonial__video:hover::before { background: rgba(0, 0, 0, .04); }
.testimonial__play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 68px; height: 68px; border-radius: 50%;
  background: var(--orange);
  display: grid; place-items: center;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .45);
  transition: transform .2s ease, box-shadow .2s ease;
}
.testimonial__play::after {
  content: ""; width: 0; height: 0;
  border-style: solid; border-width: 12px 0 12px 20px;
  border-color: transparent transparent transparent var(--navy-500);
  margin-left: 4px;
}
.testimonial__video:hover .testimonial__play { transform: translate(-50%, -50%) scale(1.1); }
.testimonial__video:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }

/* ---- Modale vidéo (témoignages) ---- */
.video-modal {
  position: fixed; inset: 0; z-index: 200;
  display: none;
  align-items: center; justify-content: center;
  background: rgba(6, 12, 24, .92);
  padding: 40px;
}
.video-modal.is-open { display: flex; }
.video-modal__stage {
  width: min(1100px, 92vw);
  display: flex; align-items: center; justify-content: center;
}
.video-modal__stage video {
  width: 100%; max-height: 84vh;
  border-radius: var(--r-sm);
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
  background: #000;
}
.video-modal__close {
  position: absolute; top: 20px; right: 24px;
  width: 48px; height: 48px;
  display: grid; place-items: center;
  background: rgba(255,255,255,.12);
  color: #fff; border: 0; border-radius: 50%;
  cursor: pointer;
  transition: background .2s ease;
}
.video-modal__close:hover { background: var(--orange); color: var(--navy-500); }
@media (max-width: 640px) {
  .video-modal { padding: 16px; }
  .video-modal__close { top: 8px; right: 10px; width: 44px; height: 44px; }
}
/* =========================================================
   MODALE « D'AUTRES EXEMPLES » (fonctionnalités)
   Panneau clair ; le contenu est un nuage de libellés pondérés.
   ========================================================= */
.features-modal {
  position: fixed; inset: 0; z-index: 200;
  display: none;
  align-items: center; justify-content: center;
  background: rgba(6, 12, 24, .92);
  padding: 40px;
}
.features-modal.is-open { display: flex; }
.features-modal__panel {
  position: relative;
  width: min(1100px, 94vw);
  max-height: 88vh;
  display: flex; flex-direction: column;
  background: var(--offwhite);
  border-radius: var(--r-lg);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
  overflow: hidden;
}
.features-modal__close {
  position: absolute; top: 14px; right: 14px;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: transparent; color: var(--grey-20);
  border: 0; border-radius: 50%; cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.features-modal__close:hover { background: rgba(16, 31, 60, .07); color: var(--navy-500); }
.features-modal__header { padding: 34px 40px 0; }
.features-modal__title {
  font-family: var(--f-head); font-weight: 700;
  color: var(--navy-500); font-size: clamp(24px, 3vw, 34px);
}
.features-modal__sub {
  margin-top: 8px;
  font-family: var(--f-body); color: var(--grey-30); font-size: 16px;
}
.features-modal__body { padding: 4px 40px 40px; overflow-y: auto; }
@media (max-width: 640px) {
  .features-modal { padding: 0; }
  .features-modal__panel { width: 100vw; height: 100vh; max-height: 100vh; border-radius: 0; }
  .features-modal__header { padding: 24px 20px 0; }
  .features-modal__body { padding: 4px 20px 32px; }
}

.features-cloud {
  display: flex; flex-wrap: wrap;
  justify-content: center; align-items: center;
  gap: 12px;
  padding: 16px 6px 8px;
}
/* Taille + intensité = poids : dégradé bleu séquentiel (une seule teinte,
   validé dataviz) ; le texte reste en navy pour un contraste sûr, le poids
   joue sur taille, graisse et teinte. */
.cloud-tag {
  display: inline-flex; align-items: center;
  padding: 6px 15px; border-radius: 999px;
  color: var(--navy-500); line-height: 1.15;
  background: color-mix(in srgb, var(--wc) 15%, white);
  border: 1px solid color-mix(in srgb, var(--wc) 55%, transparent);
  transition: transform .15s ease, box-shadow .2s ease;
}
.cloud-tag:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(16, 31, 60, .12); }
.cloud-tag--w1 { --wc: #9ec5f4; font-size: 13px; font-weight: 500; }
.cloud-tag--w2 { --wc: #6da7ec; font-size: 15px; font-weight: 500; }
.cloud-tag--w3 { --wc: #3987e5; font-size: 18px; font-weight: 600; }
.cloud-tag--w4 { --wc: #2a78d6; font-size: 22px; font-weight: 600; }
.cloud-tag--w5 { --wc: #1c5cab; font-size: 26px; font-weight: 700; }
.cloud-tag--w6 { --wc: #104281; font-size: 30px; font-weight: 800; color: var(--white); background: #104281; border-color: #104281; }

.testimonial__avatar img { width: 100%; height: 100%; object-fit: cover; }
.testimonial__quote {
  font-family: var(--f-body); font-weight: 700;
  color: var(--white);
  font-size: clamp(19px, 2.4vw, 25px);
  line-height: 1.5;
  text-align: center;
  max-width: 46ch;
}
/* Extraits verbatim repris du témoignage, sous le résumé.
   Essai minimal : pas d'habillage, on colore simplement le texte selon la
   tonalité (rouge = situation avant, vert = après, orange = neutre). */
.testimonial__highlights {
  width: 100%;
  display: flex; flex-direction: column;
  gap: 12px;
}
.testimonial__highlight {
  display: flex; align-items: flex-start; gap: 10px;
  font-family: var(--f-body);
  font-style: italic;
  font-size: 16px;
  line-height: 1.5;
  text-align: left;
}
.testimonial__highlight-icon {
  flex-shrink: 0;
  display: inline-flex;
  margin-top: 3px;          /* aligne l'icône sur la 1re ligne de texte */
}
.testimonial__highlight-icon svg { display: block; }
.testimonial__highlight-text strong { font-weight: 800; font-style: inherit; }
/* Guillemets français (espace insécable) pour marquer la citation */
.testimonial__highlight-text::before { content: '«\00a0'; }
.testimonial__highlight-text::after { content: '\00a0»'; }

/* La couleur du texte ET de l'icône suit la tonalité */
.testimonial__highlight--before { color: #ff8a8a; }   /* avant : rouge */
.testimonial__highlight--after  { color: #6bd8a1; }   /* après : vert */
.testimonial__highlight--neutral { color: var(--orange); } /* neutre : orange */
/* Pied de carte : nom/poste à gauche, logo client à droite */
.testimonial__footer {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
}
.testimonial__meta { display: flex; flex-direction: column-reverse; align-items: flex-start; gap: 4px; text-align: left; }
.testimonial__logo { flex-shrink: 0; display: flex; align-items: center; }
.testimonial__logo img { height: 54px; width: auto; display: block; }
/* Logo au format portrait (Novea) : agrandi pour équilibrer sa présence,
   même astuce que le mur de logos clients. */
.testimonial__logo--tall img { height: 82px; }
.testimonial__name { font-family: var(--f-head); font-weight: 700; color: var(--white); font-size: 24px; }
.testimonial__role { font-family: var(--f-body); font-weight: 700; color: var(--white); font-size: 15px; }
.slider { display: flex; gap: 16px; }
.slider__btn {
  width: 44px; height: 37px;
  background: none; border: 0; cursor: pointer;
  color: var(--orange);
  display: grid; place-items: center;
  clip-path: polygon(0 50%, 25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%);
  transition: background .2s ease;
}
.slider__btn:hover { background: rgba(233,151,0,.15); }

/* =========================================================
   GARANTIES / CERTIFICATIONS
   Bandeau de réassurance, volontairement sobre : il rassure juste avant
   le formulaire, il ne doit pas concurrencer les sections qui vendent.
   ========================================================= */
.trust {
  background: var(--peach-96);
  padding: 44px var(--pad-white);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  align-items: start;
  justify-items: center;
}
.trust__item {
  display: flex; flex-direction: column; align-items: center;
  gap: 14px; text-align: center;
  max-width: 320px;
}
.trust__title {
  font-family: var(--f-body); font-weight: 700;
  color: var(--navy-500); font-size: 17px; line-height: 1.4;
}
.trust__norms { display: flex; flex-direction: column; gap: 6px; }
.trust__norms li,
.trust__note {
  font-family: var(--f-body); font-weight: 500;
  color: var(--grey-30); font-size: 15px; line-height: 1.4;
}
/* Les deux logos n'ont pas la même densité : celui de France Num est un cadre
   large très aéré, celui du Made in France une pastille compacte. Des largeurs
   égales les feraient paraître de tailles très différentes. */
.trust__logo { height: auto; }
.trust__logo--francenum { width: 210px; }
.trust__logo--mif { width: 104px; }

/* =========================================================
   CONTACT
   ========================================================= */
.contact {
  background: var(--white);
  padding: 64px var(--pad-white);
}
.contact__wrapper {
  display: grid;
  grid-template-columns: 535px 1fr;
  gap: 50px;
  align-items: start;
  max-width: 1190px;
  margin: 0 auto;
}
.contact__info { display: flex; flex-direction: column; gap: 30px; }
.contact__lead {
  font-family: var(--f-dm);
  color: var(--grey-20); font-size: 18px; line-height: 1.6;
  max-width: 44ch;
}

/* Grand panneau, donc --r-lg comme .turnkey ou .features-modal__panel — et non
   --radius, qui est le rayon des champs qu'il contient : un cadre de 45 px de
   marge intérieure ne peut pas avoir le même arrondi que son contenu. */
.contact__form-wrap { background: var(--form-bg); border-radius: var(--r-lg); padding: 45px; }
.contact-form { display: flex; flex-direction: column; gap: 32px; }
.form-row { display: flex; gap: 24px; }
.field { display: flex; flex-direction: column; gap: 12px; flex: 1; }
.field label {
  font-family: var(--f-dm); font-weight: 700;
  color: var(--black); font-size: 18px;
}
.field input, .field textarea {
  font-family: var(--f-dm); font-size: 18px;
  color: var(--black);
  background: var(--white);
  border: 1px solid transparent;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 24px;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease;
  width: 100%;
}
.field input::placeholder, .field textarea::placeholder { color: var(--grey-num); }
.field input:focus, .field textarea:focus {
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(233,151,0,.15);
}
.field input.invalid, .field textarea.invalid { border-color: #d64545; }
.field textarea { resize: vertical; min-height: 130px; }
.contact-form .btn { align-self: flex-start; }
.form-status { font-family: var(--f-body); font-size: 15px; min-height: 20px; }
.form-status.ok  { color: #1a8a4a; }
.form-status.err { color: #d64545; }

/* =========================================================
   FOOTER
   ========================================================= */
.footer { background: var(--grad-dark); position: relative; z-index: 0; }
.footer__inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 56px 80px 36px;
  display: flex; flex-direction: column;
  gap: 32px;
}
/* Haut : marque à gauche, navigation à droite */
.footer__top {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 48px; flex-wrap: wrap;
}
.footer__brand { display: flex; flex-direction: column; gap: 18px; max-width: 340px; }
.footer__logo img { width: 210px; height: auto; display: block; }
.footer__social { display: flex; gap: 12px; }
.footer__social a {
  width: 36px; height: 36px;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: var(--r-sm);
  display: grid; place-items: center;
  transition: background .2s ease, border-color .2s ease;
}
.footer__social a:hover { background: rgba(255,255,255,.12); border-color: var(--orange); }
.footer__links { display: flex; gap: 64px; flex-wrap: wrap; }
.footer__col { display: flex; flex-direction: column; gap: 14px; }
.footer__col-title {
  font-family: var(--f-body); font-weight: 700;
  color: rgba(255,255,255,.55); font-size: 13px;
  text-transform: uppercase; letter-spacing: 1.4px;
}
.footer__nav { display: flex; flex-direction: column; gap: 12px; }
.footer__nav a {
  font-family: var(--f-body); font-weight: 500;
  color: var(--white); font-size: 16px;
  transition: color .2s ease;
}
.footer__nav a:hover { color: var(--orange); }
/* Bas : filet séparateur puis copyright à gauche, lien légal à droite */
.footer__bottom {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px 24px; flex-wrap: wrap;
}
.footer__copy {
  font-family: var(--f-dm);
  color: rgba(255,255,255,.7); font-size: 14px;
}
.footer__legal {
  font-family: var(--f-body);
  color: rgba(255,255,255,.9); font-size: 14px;
  text-decoration: underline; text-underline-offset: 3px;
  transition: color .2s ease;
}
.footer__legal:hover { color: var(--orange); }

/* =========================================================
   REVEAL (animation d'apparition au scroll)
   ========================================================= */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* =========================================================
   PAGES SECTORIELLES (SEO)
   ========================================================= */
.sector-hero {
  max-width: var(--max); margin: 0 auto;
  padding: 80px var(--pad) 72px;
  display: flex; flex-direction: column; align-items: center;
  gap: 22px; text-align: center;
}
.sector-hero__eyebrow {
  font-family: var(--f-body); font-weight: 700;
  color: var(--orange); font-size: 15px;
  text-transform: uppercase; letter-spacing: 2px;
}
.sector-hero h1 {
  font-family: var(--f-head); font-weight: 700;
  color: var(--white); font-size: clamp(30px, 4.6vw, 50px);
  line-height: 1.15; max-width: 20ch;
}
.sector-hero__lead {
  font-family: var(--f-body); font-weight: 500;
  color: rgba(255,255,255,.82); font-size: clamp(17px, 2vw, 20px);
  line-height: 1.6; max-width: 60ch;
}
.sector-hero .btn { margin-top: 10px; }

.sector-block {
  background: var(--white);
  padding: 72px var(--pad-white);
  display: flex; flex-direction: column; align-items: center;
  gap: 40px;
}
.sector-block--alt { background: var(--peach-96); }
.sector-block__head { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.sector-block__sub {
  font-family: var(--f-dm); color: var(--navy-400);
  font-size: 18px; text-align: center; max-width: 720px;
}

/* Défis du secteur : cartes texte, sans icône */
.sector-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 24px; width: 100%; max-width: 1000px;
}
.sector-card {
  background: var(--white);
  border: 1px solid #d4d2e3; border-radius: var(--r-md);
  padding: 28px 30px;
  display: flex; flex-direction: column; gap: 10px;
}
.sector-block--alt .sector-card { background: var(--peach-96); }
.sector-card h3 {
  font-family: var(--f-body); font-weight: 700;
  color: var(--navy-500); font-size: 20px; line-height: 1.3;
}
.sector-card p {
  font-family: var(--f-man); color: var(--grey-20);
  font-size: 16px; line-height: 1.6;
}

/* Fonctionnalités : liste à coches, deux colonnes */
.sector-features {
  width: 100%; max-width: 900px;
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 16px 40px;
}
.sector-features li {
  font-family: var(--f-body); font-weight: 500;
  color: var(--grey-20); font-size: 17px; line-height: 1.5;
  padding-left: 32px; position: relative;
}
.sector-features li::before {
  content: ""; position: absolute; left: 4px; top: 4px;
  width: 8px; height: 14px;
  border: solid var(--orange); border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* Exemple client réel */
.sector-example {
  width: 100%; max-width: 900px;
  background: var(--grad-dark); border-radius: var(--r-lg);
  padding: 40px clamp(24px, 4vw, 48px);
  display: flex; flex-direction: column; gap: 14px;
}
.sector-example__label {
  font-family: var(--f-body); font-weight: 700;
  color: var(--orange); font-size: 14px;
  text-transform: uppercase; letter-spacing: 1.5px;
}
.sector-example h3 {
  font-family: var(--f-head); font-weight: 700;
  color: var(--white); font-size: clamp(20px, 2.6vw, 26px); line-height: 1.3;
}
.sector-example p {
  font-family: var(--f-man); color: rgba(255,255,255,.85);
  font-size: 17px; line-height: 1.6;
}

/* Appel à l'action final */
.sector-cta {
  background: var(--grad-dark);
  padding: 72px var(--pad-white);
  display: flex; flex-direction: column; align-items: center;
  gap: 20px; text-align: center;
  position: relative; z-index: 0;
}
.sector-cta h2 {
  font-family: var(--f-head); font-weight: 700;
  color: var(--white); font-size: clamp(26px, 3.4vw, 38px); line-height: 1.2;
  max-width: 22ch;
}
.sector-cta p {
  font-family: var(--f-body); color: rgba(255,255,255,.82);
  font-size: 18px; line-height: 1.6; max-width: 56ch;
}

/* Variante en carte, pour clore une section sans couper la page en deux :
   le bloc reste dans la largeur du contenu au lieu de filer bord à bord.
   Utilisée en fin de galerie sur realisations.html. */
.cta-card {
  width: 100%; max-width: 1400px;
  background: var(--grad-dark); border-radius: var(--r-lg);
  padding: 34px 28px;
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  text-align: center;
}
.cta-card__text {
  font-family: var(--f-head); font-weight: 700;
  font-size: clamp(20px, 2.4vw, 26px); color: var(--white);
  line-height: 1.3; max-width: 620px;
}
@media (max-width: 640px) {
  .cta-card { padding: 26px 20px; }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1200px) {
  :root { --pad: 80px; --pad-white: 64px; }
  .services { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 992px) {
  /* Barre plus basse : les 53px d'air du desktop sont disproportionnés sur mobile,
     où la barre est fixe et mange la hauteur d'écran utile. */
  :root { --pad: 48px; --pad-white: 48px; --nav-h: 88px; }

  /* Navbar burger */
  .nav-toggle { display: flex; }
  .nav-close { display: block; }
  .nav {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(78vw, 320px);
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    background: var(--navy-500);
    padding: calc(var(--nav-h) + 24px) 32px 32px;
    transform: translateX(100%);
    transition: transform .3s ease;
    z-index: 40;
  }
  .nav.is-open { transform: translateX(0); box-shadow: -20px 0 60px rgba(0,0,0,.4); }
  .nav__link { font-size: 20px; padding: 12px 0; }

  /* Why us : 2 colonnes */
  .why-grid { grid-template-columns: repeat(2, 1fr); gap: 40px; }

  /* Vous vous reconnaissez : 2 colonnes */
  .pains__grid { grid-template-columns: repeat(2, 1fr); }

  /* Sur mesure : mockup sous le texte */
  .tailor { grid-template-columns: 1fr; gap: 40px; }

  /* Services : image sous les cartes (déjà géré au 1200px) */

  /* Timeline : passage en colonne unique alignée à gauche */
  .timeline__line { left: 20px; }
  /* minmax(0, 1fr) et non 1fr : une colonne de grille refuse par défaut de
     descendre sous la largeur min-content de son contenu, et la carte, avec ses
     50px de padding, débordait de l'écran sur les petits mobiles. */
  .tl-step { grid-template-columns: minmax(0, 1fr); gap: 20px; padding-left: 56px; }
  .tl-step .tl-spacer { display: none; }
  .tl-card { flex-direction: column; text-align: left; }
  .tl-card__text, .tl-card__text--left { text-align: left; }
  .tl-node {
    position: absolute; left: 20px; top: 0;
    transform: translateX(-50%);
    width: 56px; height: 56px; font-size: 28px; border-width: 5px;
  }
  .tl-step { position: relative; }

  /* Engagements et Histoire : voir « RESPONSIVE — pages secondaires » en fin de
     fichier. Leurs styles de base sont déclarés APRÈS ce bloc, ils gagneraient
     donc à specificité égale et écraseraient tout override placé ici. */

  /* Clés en main : 2 colonnes */
  .turnkey__list { grid-template-columns: repeat(2, auto); gap: 14px 28px; }

  /* Garanties : 2 colonnes */
  .trust { grid-template-columns: repeat(2, 1fr); }

  /* Clients : 3 colonnes */
  .clients__grid { grid-template-columns: repeat(3, 1fr); gap: 24px; }

  /* Contact : empilé */
  .contact__wrapper { grid-template-columns: 1fr; }
  .contact__info h2 { text-align: left; }
}

@media (max-width: 640px) {
  :root { --pad: 20px; --pad-white: 20px; --nav-h: 68px; }

  /* Logo au ratio de la barre resserrée */
  .logo__img { height: 30px; }
  .nav-close { top: 18px; right: 20px; }

  /* Pages sectorielles : une colonne */
  .sector-grid { grid-template-columns: 1fr; }
  .sector-features { grid-template-columns: 1fr; }

  .hero__content { padding: 32px 0 24px; }
  .hero__title { font-size: clamp(30px, 9vw, 40px); }

  /* Why us : 1 colonne */
  .why-grid { grid-template-columns: 1fr; gap: 32px; }

  /* Vous vous reconnaissez : 1 colonne */
  .pains__grid { grid-template-columns: 1fr; }

  /* Exemples : 1 colonne */
  .services { grid-template-columns: 1fr; gap: 24px; }

  /* Clés en main : 1 colonne */
  .turnkey__list { grid-template-columns: auto; }

  /* Tarifs : 1 colonne */
  .pricing__tiles { grid-template-columns: 1fr; }

  /* Garanties : empilées */
  .trust { grid-template-columns: 1fr; gap: 28px; }

  /* Clients : 2 colonnes */
  .clients__grid { grid-template-columns: repeat(2, 1fr); }


  /* Formulaire : champs empilés */
  .form-row { flex-direction: column; gap: 24px; }
  .contact__form-wrap { padding: 24px; }

  /* Histoire : voir « RESPONSIVE — pages secondaires » en fin de fichier. */

  /* Timeline : 50px de padding sur une carte large de 200px ne laissent plus de
     place au texte (cf. .testimonial juste en dessous, même raison). */
  .tl-card { padding: 28px 22px; }

  .testimonial { padding: 28px 20px; }
  .btn { font-size: 18px; padding: 16px 28px; }
  .footer__inner { padding: 40px 20px; }
  /* Footer empilé et centré sur mobile */
  .footer__top { flex-direction: column; align-items: center; text-align: center; gap: 28px; }
  .footer__brand { align-items: center; max-width: none; }
  .footer__nav { align-items: center; }
  /* Les deux colonnes de liens passent l'une sous l'autre en dessous de ~360px :
     sans justify-content, la ligne qui reste seule se collait à gauche au lieu
     de suivre le reste du pied de page, centré. align-items centre aussi les
     intitulés de colonne, qui traînaient à gauche de leurs liens. */
  .footer__links { width: 100%; justify-content: center; gap: 28px 40px; }
  .footer__col { align-items: center; }
  .footer__bottom { flex-direction: column; text-align: center; gap: 10px; }
}

/* =========================================================
   PAGES SECONDAIRES (À propos, Réalisations, Détail projet)
   Bloc ajouté — coller à la fin de styles.css
   ========================================================= */




/* ---- Nos engagements (Nous construisons avec/pour vous) ---- */
.pillars {
  background: var(--peach-96);
  padding: 80px var(--pad);
  display: flex; flex-direction: column; align-items: center;
  gap: 54px;
}
.pillars__head { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.pillars__sub {
  font-family: var(--f-head); font-weight: 700;
  color: var(--navy-400); font-size: clamp(20px, 2.4vw, 26px);
  text-align: center; line-height: 1.9;
}
/* "avec" et "pour" empilés au milieu de la phrase */
.stack {
  display: inline-flex; flex-direction: column; align-items: center;
  vertical-align: middle;
  margin: 0 .35em;
  font-size: .78em; line-height: .95;
  color: var(--orange);
}
.pillars__list {
  width: 100%; max-width: 1000px;
  display: flex; flex-direction: column; gap: 24px;
}
.pillar {
  background: var(--white);
  border-radius: var(--r-md);
  padding: 36px 40px;
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 40px;
  align-items: start;
}
.pillar__title {
  font-family: var(--f-body); font-weight: 700;
  color: var(--navy-500); font-size: clamp(20px, 2.4vw, 26px); line-height: 1.25;
}
.pillar__body { display: flex; flex-direction: column; gap: 18px; }
/* Phrase d'accroche : mise en avant par une barre orange à gauche */
.pillar__lead {
  font-family: var(--f-head); font-weight: 700;
  color: var(--navy-400); font-size: 20px; line-height: 1.45;
  border-left: 3px solid var(--orange);
  padding-left: 18px;
}
.pillar__points { display: flex; flex-direction: column; gap: 12px; }
.pillar__points li {
  font-family: var(--f-man); font-weight: 400;
  color: var(--grey-20); font-size: 18px; line-height: 1.6;
  padding-left: 22px; position: relative;
}
.pillar__points li::before {
  content: ""; position: absolute; left: 0; top: 11px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--orange);
}

/* ---- Notre histoire (frise chronologique) ---- */
.story {
  background: var(--white);
  padding: 80px var(--pad);
  display: flex; flex-direction: column; align-items: center;
  gap: 54px;
}
.story__head { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.story__sub {
  font-family: var(--f-dm); color: var(--navy-400);
  font-size: 18px; text-align: center; max-width: 707px;
}
.story__timeline {
  position: relative;
  width: 100%; max-width: 1000px;
  display: flex; flex-direction: column;
  gap: 40px;
}
/* Rail vertical : aligné sur le centre des pastilles d'année (110px / 2) */
.story__line {
  position: absolute;
  top: 0; bottom: 0; left: 55px;
  width: 2px;
  transform: translateX(-50%);
  background: linear-gradient(var(--navy-500), var(--navy-200));
  z-index: 0;
}
.story-step {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: 110px 1fr;
  align-items: start;
  gap: 32px;
}
.story-step__year {
  width: 110px; height: 110px;
  display: grid; place-items: center;
  background: var(--peach-96);
  border: 7px solid var(--white);
  border-radius: 100px;
  font-family: var(--f-head); font-weight: 700;
  color: var(--orange); font-size: 24px; line-height: 1.15;
  text-align: center;
}
.story-card {
  background: var(--peach-96);
  border-radius: var(--r-md);
  box-shadow: var(--shadow);
  padding: 32px 36px;
  display: flex; flex-direction: column; gap: 18px;
}
.story-card h3 {
  font-family: var(--f-body); font-weight: 700;
  color: var(--navy-500); font-size: clamp(20px, 2.4vw, 26px); line-height: 1.25;
}
.story-card p {
  font-family: var(--f-man); font-weight: 400;
  color: var(--grey-20); font-size: 18px; line-height: 1.6;
}
.story-list { display: flex; flex-direction: column; gap: 14px; }
.story-list li {
  font-family: var(--f-man); font-weight: 400;
  color: var(--grey-20); font-size: 18px; line-height: 1.6;
  padding-left: 22px; position: relative;
}
.story-list li::before {
  content: ""; position: absolute; left: 0; top: 11px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--orange);
}
.story-list strong { color: var(--navy-400); font-weight: 700; }
.story-list strong::after { content: " — "; color: var(--grey-30); font-weight: 400; }

/* Conclusion générale, en fin de section "Nos valeurs". */
.pillars__outro {
  max-width: 860px; text-align: center;
  display: flex; flex-direction: column; gap: 18px;
  align-self: center;
}
.pillars__outro p {
  font-family: var(--f-man); color: var(--grey-20);
  font-size: 18px; line-height: 1.6;
}
.pillars__outro .pillars__claim {
  font-family: var(--f-head); font-weight: 700;
  color: var(--navy-500);
  font-size: clamp(22px, 3vw, 30px);
}

/* ---- Équipe ---- */
/* Première section de la page À propos : elle doit dégager la navbar fixe
   (même principe que .projects sur la page Réalisations). */
.team {
  background: var(--peach-96);
  padding: calc(80px + var(--nav-h)) var(--pad) 80px;
  display: flex; flex-direction: column; align-items: center;
  gap: 40px;
}
.team__intro { text-align: center; max-width: 614px; display: flex; flex-direction: column; gap: 25px; }
.team__intro h2 {
  font-family: var(--f-head); font-weight: 700;
  color: #5d5a88; font-size: clamp(28px, 3.4vw, 36px); line-height: 1.3;
}
.team__intro p { font-family: var(--f-body); font-weight: 400; color: #9795b5; font-size: 18px; line-height: 1.67; }
.members {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 32px; width: 100%; max-width: 1220px;
}
.member-card {
  background: var(--white);
  border: 1px solid #d4d2e3;
  border-radius: var(--r-xl);
  width: 388px; min-height: 170px;
  padding: 24px 28px;
  display: flex; align-items: center; gap: 20px;
}
/* Cadre carré. Les photos sources ont des cadrages très différents (du carré
   au 1:2,2), donc le recadrage vertical est ajusté personne par personne via un
   object-position en style inline sur chaque <img>. Le cadre DOIT rester carré :
   les pourcentages sont calculés pour ce rapport, changer la proportion du cadre
   décalerait tous les visages. Pour agrandir, garder width = height. */
.member-card__icon {
  flex-shrink: 0;
  width: 110px; height: 110px;
}
.member-card__icon img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
/* min-width: 0 : sans lui la colonne de texte garde sa largeur min-content
   (le plus long mot du rôle, « DÉVELOPPEMENT » en capitales espacées) et
   élargit la carte au-delà de l'écran sur les petits mobiles. */
.member-card__info { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.member-card__name { font-family: var(--f-head); font-weight: 700; color: #5d5a88; font-size: 22px; }
.member-card__role {
  font-family: var(--f-dm); font-weight: 700;
  color: #8d8ba7; font-size: 15px; text-transform: uppercase; letter-spacing: 1.6px;
  line-height: 1.5;
}

/* ---- Grille Réalisations ---- */
.projects {
  background: var(--white);
  padding: calc(60px + var(--nav-h)) var(--pad) 60px;
  display: flex; flex-direction: column; align-items: center;
  gap: 25px;
}

/* ---- Galerie d'essai (grille bento) ----
   Grille à cases inégales : quelques cellules occupent 2 colonnes et/ou
   2 rangées pour créer du rythme. grid-auto-flow: dense fait remonter les
   petites cases dans les trous laissés par les grandes. Les médias remplissent
   leur case (object-fit: cover) au lieu de laisser des bandes vides. */
/* Première section de la page désormais : elle doit dégager la navbar fixe. */
.gallery-test {
  background: var(--peach-96);
  padding: calc(60px + var(--nav-h)) var(--pad-white) 60px;
  display: flex; flex-direction: column; align-items: center;
  gap: 40px;
}
.gallery {
  width: 100%; max-width: 1400px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 200px;
  grid-auto-flow: dense;
  gap: 16px;
}
.gallery__item {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-sm);
  background: #000;
  box-shadow: var(--shadow);
}
.gallery__item--big  { grid-column: span 2; grid-row: span 2; }
.gallery__item--wide { grid-column: span 2; }
.gallery__item--tall { grid-row: span 2; }

.gallery__item video,
.gallery__item img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s ease;
}
.gallery__item:hover img { transform: scale(1.04); }
.gallery__item video { cursor: pointer; }

/* Bouton lecture en surimpression, uniquement sur les cases vidéo à l'arrêt.
   Cercle (::before) + triangle (::after), masqués dès que la vidéo joue. */
.gallery__item:has(video)::before,
.gallery__item:has(video)::after {
  content: "";
  position: absolute; top: 50%; left: 50%;
  pointer-events: none;
  transition: opacity .25s ease;
}
.gallery__item:has(video)::before {
  width: 54px; height: 54px;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, .55);
  border-radius: 50%;
}
.gallery__item:has(video)::after {
  width: 0; height: 0;
  transform: translate(-40%, -50%);
  border-style: solid;
  border-width: 9px 0 9px 15px;
  border-color: transparent transparent transparent #fff;
}
/* Légende en surimpression en haut, révélée au survol seulement. */
.gallery__item figcaption {
  position: absolute; top: 0; left: 0; right: 0;
  font-family: var(--f-body); font-weight: 500; font-size: 12px;
  color: #fff;
  padding: 10px 12px 20px;
  background: linear-gradient(180deg, rgba(0,0,0,.65), transparent);
  line-height: 1.3;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .25s ease, transform .25s ease;
}
.gallery__item:hover figcaption,
.gallery__item:focus-within figcaption { opacity: 1; transform: none; }
.gallery__item { cursor: pointer; }
.gallery__item:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }

/* Citation client posée DANS la grille, à la place d'une vignette. Au-dessus
   de la grille elle se lirait comme une introduction, donc elle se sauterait ;
   au milieu des visuels, elle interrompt le balayage. Ce n'est pas un
   .gallery__item : la lightbox ne la ramasse pas et elle n'est pas cliquable.
   Elle tient sur UNE rangée (200px) : d'où le texte court et la citation en
   taille élastique, qui sinon gagne une ligne quand la carte rétrécit. */
.gallery__quote {
  grid-column: span 2; grid-row: span 1;
  border-left: 3px solid var(--orange);
  background: var(--white);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow);
  padding: 18px 22px;
  display: flex; flex-direction: column; justify-content: center; gap: 6px;
}
.gallery__quote-label {
  font-family: var(--f-dm); font-weight: 700; font-size: 12px;
  letter-spacing: 1.4px; text-transform: uppercase; color: var(--orange);
}
.gallery__quote-text {
  font-family: var(--f-body); font-weight: 600;
  font-size: clamp(16px, 1.35vw, 18px); line-height: 1.45; color: var(--navy-500);
}
.gallery__quote-who { font-family: var(--f-body); font-size: 14px; color: var(--grey-30); }

/* Mention « Maquette » : un écran dessiné en phase de proposition n'est pas un
   logiciel livré, et la page ne doit jamais laisser croire l'inverse. Ce n'est
   pas un repère de travail, elle reste en production. */
.gallery__maquette {
  position: absolute; right: 8px; top: 8px; z-index: 4;
  font-family: var(--f-dm); font-size: 11px; font-weight: 700;
  color: var(--white); background: rgba(16, 31, 60, .82);
  border: 1px solid rgba(255, 255, 255, .38);
  border-radius: 5px; padding: 3px 7px; pointer-events: none;
}

/* ---- Lightbox ---- */
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  display: none;
  flex-direction: column;
  align-items: center; justify-content: center;
  gap: 14px;
  background: rgba(6, 12, 24, .92);
  padding: 40px;
  /* Le balayage horizontal entre médias est géré en JS (voir main.js) : on
     l'annonce au navigateur pour qu'il ne tente pas un pan de son côté. */
  touch-action: pan-y;
}
.lightbox.is-open { display: flex; }
/* Légende au-dessus du média, dans le flux : la scène occupe le reste. */
.lightbox__caption {
  flex: 0 0 auto;
  max-width: 90vw; text-align: center;
  font-family: var(--f-body); font-weight: 600; font-size: 20px; color: #fff;
}
.lightbox__caption:empty { display: none; }
.lightbox__stage {
  flex: 0 1 auto; min-height: 0;
  max-width: 90vw;
  display: flex; align-items: center; justify-content: center;
  /* Retour en place d'un swipe avorté, et entrée du média suivant */
  transition: transform .22s ease-out, opacity .22s ease-out;
}
.lightbox__stage img,
.lightbox__stage video {
  max-width: 90vw; max-height: 78vh;
  width: auto; height: auto;
  border-radius: var(--r-sm);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
  background: #000;
}
.lightbox__close,
.lightbox__nav {
  position: absolute;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .12);
  color: #fff; border: 0; border-radius: 50%;
  cursor: pointer;
  transition: background .2s ease;
}
.lightbox__close:hover,
.lightbox__nav:hover { background: var(--orange); color: var(--navy-500); }
.lightbox__close { top: 20px; right: 24px; width: 48px; height: 48px; }
/* Le groupe des flèches calque toute la modale et laisse passer les clics :
   il sert juste de repère de positionnement, seules les flèches sont cliquables. */
.lightbox__controls { position: absolute; inset: 0; pointer-events: none; }
.lightbox__nav { top: 50%; transform: translateY(-50%); width: 52px; height: 52px; pointer-events: auto; }
.lightbox__nav--prev { left: 20px; }
.lightbox__nav--next { right: 20px; }
@media (max-width: 640px) {
  .lightbox { padding: 16px; }
  /* En mobile le média occupe 90vw : des flèches posées sur les bords se
     retrouveraient PAR-DESSUS la vidéo, dont les contrôles natifs captent le
     tap. On les sort donc du média, en barre sous celui-ci. */
  .lightbox__controls {
    position: static;
    pointer-events: auto;
    order: 3; flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center; gap: 40px;
  }
  .lightbox__nav { position: static; transform: none; }
  .lightbox__stage img,
  .lightbox__stage video { max-height: 70vh; }
  .lightbox__caption { font-size: 16px; padding: 0 44px; }
}
.projects__title {
  font-family: var(--f-head); font-weight: 700;
  color: var(--navy-500); font-size: clamp(34px, 5vw, 56px); line-height: 1.18;
  text-align: center;
}

.tag {
  background: var(--navy-500);
  border: 1px solid var(--white);
  color: var(--white);
  font-family: var(--f-body); font-weight: 400; font-size: 12px;
  padding: 10px 20px; border-radius: 23px;
}

/* ---- Détail projet : étude de cas ---- */
.case {
  background: var(--white);
  padding: 60px var(--pad);
  display: flex; flex-direction: column; gap: 48px;
  max-width: var(--max); margin: 0 auto;
}

.footer__divider { width: 100%; height: 1px; background: rgba(255,255,255,.18); }

/* ---- Responsive pages secondaires ---- */
@media (max-width: 992px) {
  /* menu mobile : panneau foncé -> liens blancs quel que soit le thème */
  .navbar .nav .nav__link { color: var(--white); }
}
@media (max-width: 900px) {
  /* Bento : 2 colonnes, une grande case occupe donc toute la largeur */
  .gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 170px; }
  .gallery__item--big  { grid-column: span 2; grid-row: span 2; }
  .gallery__item--wide { grid-column: span 2; }
  .gallery__item--tall { grid-row: span 2; }
  /* Aperçu : idem, 2 colonnes */
  .showcase__grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 160px; }
}
@media (max-width: 640px) {
  /* Padding et gouttière resserrés : sur un mobile de 390px, la photo de 110px
     et le rôle en capitales espacées se disputent la largeur, il faut ces ~20px
     pour que le rôle ne soit pas coupé. */
  .member-card { width: 100%; padding: 24px 20px; gap: 16px; }
  /* Bento : 2 colonnes serrées, spans neutralisés sauf le "grand" qui reste
     sur 2 colonnes pour garder un point d'accroche. */
  .gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 130px; }
  .gallery__item--wide,
  .gallery__item--tall { grid-column: auto; grid-row: auto; }
  .gallery__item--big { grid-column: span 2; grid-row: span 2; }
  /* Citation : pleine largeur sur deux rangées. Deux et pas une : à 320px la
     citation fait quatre lignes et déborderait sur les vignettes suivantes. */
  .gallery__quote { grid-column: 1 / -1; grid-row: span 2; padding: 20px; }
  /* Aperçu : 2 colonnes serrées, la grande vignette reste sur 2 colonnes */
  .showcase__grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 130px; }
}
@media (max-width: 380px) {
  /* Équipe : en dessous de ~370px, photo et texte côte à côte ne tiennent plus
     (le rôle est en capitales espacées, il ne peut pas se couper plus court que
     son plus long mot). On empile, le texte récupère toute la largeur. */
  .member-card {
    flex-direction: column; text-align: center;
    padding: 24px 20px;
  }
}

/* =========================================================
   PAGES LÉGALES (CGU, Mentions légales)
   ========================================================= */
.legal {
  background: var(--white);
  max-width: 900px;
  margin: 0 auto;
  padding: calc(50px + var(--nav-h)) 24px 90px;
  display: flex; flex-direction: column; gap: 34px;
}
.legal__title {
  font-family: var(--f-head); font-weight: 700;
  color: var(--navy-500); font-size: clamp(32px, 4.6vw, 46px); line-height: 1.2;
}
.legal__updated { font-family: var(--f-body); font-size: 14px; color: var(--grey-num); margin-top: -18px; }
.legal__block { display: flex; flex-direction: column; gap: 14px; }
.legal__block h2 {
  font-family: var(--f-head); font-weight: 700;
  color: var(--black); font-size: 24px; line-height: 1.4;
}
.legal__block p,
.legal__block li {
  font-family: var(--f-body); font-weight: 400;
  color: rgba(12,12,12,.85); font-size: 16px; line-height: 1.65;
}
.legal__block ul { padding-left: 22px; display: flex; flex-direction: column; gap: 6px; }
.legal__block a { color: var(--orange); }

/* =========================================================
   VIDÉO HERO (autoplay muette + bouton son)
   ========================================================= */
.hero__video {
  position: relative;
  width: min(1200px, 92vw);
  max-width: none;
  margin: 4px auto 60px;   
}
.hero__video video {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--r-lg);
  box-shadow: 0 20px 50px rgba(0,0,0,.35);
  background: #000;
}


 

/* =========================================================
   RESPONSIVE — pages secondaires
   Ces sections sont déclarées après le bloc RESPONSIVE principal : à
   spécificité égale, c'est le dernier qui gagne. Leurs overrides mobiles
   doivent donc vivre ICI, en fin de fichier, sinon ils sont écrasés.
   ========================================================= */
@media (max-width: 992px) {
  /* Valeurs : titre au-dessus du texte. Sans ça la colonne de 280px reste,
     le texte est comprimé sous sa largeur minimale et déborde à droite. */
  .pillar { grid-template-columns: 1fr; gap: 22px; padding: 28px 26px; }

  /* Histoire : pastille d'année réduite */
  .story__line { left: 39px; }
  .story-step { grid-template-columns: 78px 1fr; gap: 20px; }
  .story-step__year { width: 78px; height: 78px; font-size: 18px; border-width: 5px; }
  .story-card { padding: 26px 24px; }
}

@media (max-width: 640px) {
  /* Histoire : pastille au-dessus de la carte, rail masqué */
  .story__line { display: none; }
  .story-step { grid-template-columns: 1fr; gap: 16px; }
  .story-step__year {
    width: auto; height: auto; border-radius: var(--r-sm); border: none;
    justify-self: start; padding: 8px 16px;
    background: var(--navy-500); color: var(--white); font-size: 18px;
  }
  /* Badge horizontal : la plage reste sur une ligne (2012–2017) */
  .story-step__year br { display: none; }
}