/* =========================================================
   LOIREXIA — feuille de style principale
   Refonte visuelle v2 : typographie plus grande, plus d'air,
   cartes modernes. Bandeaux haut (hero) et bas (footer) conservés.
   ========================================================= */

/* =========================================================
   POLICE — Plus Jakarta Sans, hébergée sur le serveur
   Aucun appel externe : les mentions légales restent exactes.

   Fichiers attendus dans un sous-dossier "fonts" à côté de ce fichier :
     fonts/pjs-400.woff2          texte courant
     fonts/pjs-400-italic.woff2   citations, mentions en italique
     fonts/pjs-600.woff2          sous-titres, liens de navigation
     fonts/pjs-700.woff2          intertitres, boutons
     fonts/pjs-800.woff2          grands titres

   Tant qu'ils sont absents, la police système prend le relais
   (Segoe UI sur Windows, SF Pro sur Mac, Roboto sur Android).
   ========================================================= */
@font-face {
  font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 400;
  src: url('fonts/pjs-400.woff2') format('woff2'); font-display: swap;
}
@font-face {
  font-family: 'Plus Jakarta Sans'; font-style: italic; font-weight: 400;
  src: url('fonts/pjs-400-italic.woff2') format('woff2'); font-display: swap;
}
@font-face {
  font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 600;
  src: url('fonts/pjs-600.woff2') format('woff2'); font-display: swap;
}
@font-face {
  font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 700;
  src: url('fonts/pjs-700.woff2') format('woff2'); font-display: swap;
}
@font-face {
  font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 800;
  src: url('fonts/pjs-800.woff2') format('woff2'); font-display: swap;
}

:root {
  /* Marque */
  --navy-dark: #16365C;
  --navy: #1F4E78;
  --navy-900: #0F1B2D;
  --teal: #2CAFA0;        /* accent principal, repris du logo */
  --teal-light: #45C9B8;  /* survols, dégradés */
  --teal-deep: #12796D;   /* petits textes sur fond blanc (contraste 5,3:1) */
  --green: #0F6E56;

  /* Dégradé du logo (barres + wordmark) */
  --grad-brand: linear-gradient(90deg, #3C92F8 0%, #2CAFA0 55%, #4AD384 100%);

  /* Texte & fonds */
  --text: #1B2B3A;
  --text-muted: #4A5A6A;
  --text-soft: #6B7C8C;
  --bg-light: #F4F7FA;
  --bg-tint: #EDF2F7;
  --border: #E2E8F0;
  --border-soft: #EDF1F6;

  /* Rythme */
  --r: 16px;
  --r-sm: 10px;
  --r-pill: 999px;
  --section-y: clamp(72px, 9vw, 128px);
  --shadow: 0 1px 2px rgba(16,36,62,0.04), 0 10px 28px rgba(16,36,62,0.07);
  --shadow-lg: 0 2px 4px rgba(16,36,62,0.05), 0 18px 44px rgba(16,36,62,0.12);
  --ease: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system,
               'Segoe UI Variable Display', 'Segoe UI', Roboto,
               'Helvetica Neue', Arial, sans-serif;
  font-size: 17px;
  color: var(--text);
  line-height: 1.7;
  background: #fff;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; }
img, svg { max-width: 100%; display: block; }
strong { font-weight: 700; color: var(--text); }

.container { width: 100%; max-width: 1680px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 64px); }
section { padding: var(--section-y) 0; }

/* Largeur de lecture confortable, bloc centré sous les titres centrés */
.measure { max-width: 68ch; margin-left: auto; margin-right: auto; }
/* Variante collée à gauche */
.measure.left { margin-left: 0; }

/* =========================================================
   EN-TÊTE / NAVIGATION
   ========================================================= */
header.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,0.88);
  border-bottom: 1px solid var(--border-soft);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
}
.nav-inner {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 16px clamp(20px, 4vw, 64px); width: 100%; max-width: 1680px; margin: 0 auto;
}
.logo-img { height: 40px; width: auto; flex-shrink: 0; }
.logo-badge { display: inline-flex; align-items: center; background: #fff; padding: 6px 12px; border-radius: var(--r-sm); }

nav.main-nav { flex: 1; }
nav.main-nav ul { list-style: none; display: flex; gap: 6px; flex-wrap: wrap; }
nav.main-nav a {
  position: relative; display: inline-block;
  font-size: 16px; font-weight: 600; color: var(--navy); text-decoration: none;
  padding: 8px 14px; border-radius: var(--r-sm); transition: var(--ease);
}
nav.main-nav a::after {
  content: ''; position: absolute; left: 14px; right: 14px; bottom: 3px; height: 2px;
  background: var(--teal); border-radius: 2px;
  transform: scaleX(0); transform-origin: left; transition: transform var(--ease);
}
nav.main-nav a:hover { background: var(--bg-light); color: var(--navy-dark); }
nav.main-nav a:hover::after,
nav.main-nav a.active::after { transform: scaleX(1); }
nav.main-nav a.active { color: var(--navy-dark); font-weight: 700; }

.nav-cta {
  background: var(--navy-dark); color: #fff; padding: 12px 24px; border-radius: var(--r-pill);
  font-size: 15.5px; font-weight: 700; text-decoration: none; white-space: nowrap; flex-shrink: 0;
  transition: var(--ease); box-shadow: 0 4px 14px rgba(22,54,92,0.22);
}
.nav-cta:hover { background: var(--navy); transform: translateY(-1px); box-shadow: 0 8px 22px rgba(22,54,92,0.3); }
.nav-phone { font-size: 16px; font-weight: 700; white-space: nowrap; }
.nav-phone a { color: var(--navy-dark); text-decoration: none; transition: var(--ease); }
.nav-phone a:hover { color: var(--teal-deep); }

/* Bouton hamburger (CSS pur, sans JavaScript) */
.nav-toggle-input { position: absolute; opacity: 0; pointer-events: none; }
.nav-toggle-label {
  display: none; flex-direction: column; justify-content: center; gap: 6px;
  width: 34px; height: 34px; cursor: pointer; flex-shrink: 0;
}
.nav-toggle-label span {
  display: block; height: 2.5px; width: 100%; background: var(--navy-dark);
  border-radius: 2px; transition: var(--ease);
}

/* =========================================================
   BANDEAU HAUT — HERO (page d'accueil)
   Structure conservée : voile navy + photo hero-bg.jpg + filet or
   ========================================================= */
/* Format paysage. Fond = triptyque de 3 photos côte à côte,
   recouvert d'un voile navy dégressif pour la lisibilité du texte.
   Le dégradé navy sous les volets sert de repli si les images manquent. */
.hero {
  background: linear-gradient(135deg, var(--navy-dark) 0%, var(--navy) 100%);
  background-color: var(--navy-dark);
  color: #fff;
  padding: clamp(52px, 5.5vw, 76px) 0;
  min-height: clamp(300px, 34vw, 460px);
  display: flex; align-items: center;
  position: relative; overflow: hidden;
}

/* --- Triptyque : 3 volets égaux -----------------------------
   Cadrage de chaque volet : le 2e pourcentage de background-position
   (0% = haut de la photo, 100% = bas). À ajuster photo par photo.
------------------------------------------------------------- */
.hero-panels { position: absolute; inset: 0; display: flex; z-index: 0; }
/* Volets inégaux : le pylône (volet 2) occupe une bande étroite — cadrage
   plus naturel pour un sujet vertical, et moins d'agrandissement de l'image. */
.hero-panel { flex-grow: 1; flex-basis: 0; min-width: 0; background-size: cover; background-repeat: no-repeat; }
/* Répartition en centièmes. Élargir p1 décale d'autant les volets 2 et 3
   vers la droite. 1 unité ≈ 15,8 px sur un écran de 1440 px. */
.hero-panel.p1 { flex-grow: 45.3; }  /* +3,3 u ≈ +52 px, soit ~2 caractères du titre */
.hero-panel.p2 { flex-grow: 21; }    /* largeur inchangée, simplement décalée */
.hero-panel.p3 { flex-grow: 33.7; }
/* Fondu entre volets : chaque volet suivant remonte sur le précédent
   (marge négative) et son bord gauche est estompé par un masque dégradé.
   Si les masques CSS ne sont pas supportés, on retombe sur une coupe nette. */
.hero-panel + .hero-panel {
  margin-left: -70px;
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0px, rgba(0,0,0,1) 150px);
          mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0px, rgba(0,0,0,1) 150px);
}
.hero-panel.p1 { background-image: url('hero-1.jpg'); background-position: center 45%; }
.hero-panel.p2 { background-image: url('hero-2.jpg'); background-position: center 45%; }
.hero-panel.p3 { background-image: url('hero-3.jpg'); background-position: center 45%; }

/* Voile de lisibilité, dégressif de gauche à droite.
   Assez dense à gauche pour porter le sous-titre et la baseline en texte fin,
   nettement plus clair à droite pour laisser respirer les photos.
   Réglage : monter les 2 premières valeurs si le texte reste dur à lire,
   baisser les 3 dernières si les photos paraissent trop sombres. */
.hero-veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    /* 1. Bande de raccord monochrome à la jonction pylône / toit parisien.
          Le passage d'une photo à l'autre traverse un aplat navy au lieu
          d'un fondu photo-sur-photo : la couture et le feuillage du bord
          gauche de hero-3 disparaissent derrière le ton.
          66 % = position de la couture. Écarter 55 et 78 % pour un raccord
          plus large, les resserrer pour un raccord plus net. */
    /* Bande allégée : le feuillage ayant été retiré du fichier image,
       elle ne sert plus qu'à adoucir la couture. Asymétrique — rampe
       côté pylône, chute rapide côté toit parisien. */
    linear-gradient(90deg,
      rgba(12,28,48,0.00) 54%,
      rgba(12,28,48,0.20) 60%,
      rgba(12,28,48,0.34) 63%,
      rgba(12,28,48,0.12) 66%,
      rgba(12,28,48,0.00) 70%),
    /* 2. Voile de lisibilité, dégressif de gauche à droite. */
    linear-gradient(97deg,
      rgba(6,14,26,0.68) 0%,     /* bord gauche : allégé, la photo respire */
      rgba(6,14,26,0.70) 30%,    /* zone du texte : densité maximale */
      rgba(9,22,40,0.44) 46%,    /* chute rapide */
      rgba(13,32,56,0.20) 62%,
      rgba(16,40,70,0.14) 100%); /* photos de droite : quasi intactes */
}
.hero::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 5px;
  background: var(--grad-brand); z-index: 3;
}
.hero .container { position: relative; z-index: 2; }
.hero-content { max-width: 760px; }

.hero .eyebrow,
.hero-content > .section-label {
  display: inline-block; text-align: left;
  font-size: 13.5px; font-weight: 700; letter-spacing: 2.4px; text-transform: uppercase;
  color: var(--teal-light); margin-bottom: 20px;
  padding: 7px 16px; border: 1px solid rgba(44,175,160,0.45); border-radius: var(--r-pill);
  background: rgba(44,175,160,0.10);
}
.hero h1 {
  font-size: clamp(29px, 3.9vw, 48px);
  font-weight: 800; line-height: 1.12; letter-spacing: -1.1px;
  text-shadow: 0 2px 6px rgba(6,14,26,0.70), 0 4px 26px rgba(6,14,26,0.55);
}
.hero .sub {
  font-size: clamp(16.5px, 1.5vw, 19.5px); font-weight: 700; line-height: 1.5;
  margin-top: 16px; max-width: 56ch; color: #fff;
  text-shadow: 0 1px 4px rgba(6,14,26,0.75), 0 3px 18px rgba(6,14,26,0.6);
}
/* Baseline. Casse normale : la phrase fait 131 signes, des capitales
   interlettrées la rendraient illisible. Sobriété obtenue par le poids
   léger et la couleur atténuée plutôt que par l'italique. */
.hero .tagline {
  font-size: clamp(14.5px, 1.2vw, 16px);
  font-weight: 400; font-style: normal;
  letter-spacing: 0.1px; line-height: 1.6;
  margin-top: 22px; padding-top: 18px; max-width: 620px;
  border-top: 1px solid rgba(255,255,255,0.28);
  color: rgba(255,255,255,0.86);
  text-shadow: 0 1px 4px rgba(6,14,26,0.8), 0 3px 16px rgba(6,14,26,0.6);
}
.hero-ctas { margin-top: 26px; display: flex; gap: 14px; flex-wrap: wrap; }

/* Boutons */
.btn-primary {
  background: var(--teal); color: #06322C; padding: 16px 34px; border-radius: var(--r-pill);
  font-weight: 700; font-size: 16.5px; text-decoration: none; display: inline-block;
  border: none; cursor: pointer; transition: var(--ease); box-shadow: 0 6px 20px rgba(44,175,160,0.35);
}
.btn-primary:hover { background: var(--teal-light); transform: translateY(-2px); box-shadow: 0 12px 30px rgba(44,175,160,0.45); }
.btn-secondary {
  border: 1.5px solid rgba(255,255,255,0.7); color: #fff; padding: 15px 32px; border-radius: var(--r-pill);
  font-weight: 700; font-size: 16.5px; text-decoration: none; display: inline-block;
  transition: var(--ease); background: rgba(10,22,38,0.42); backdrop-filter: blur(6px);
}
.btn-secondary:hover { border-color: #fff; background: rgba(255,255,255,0.12); transform: translateY(-2px); }

/* =========================================================
   BANDEAU HAUT — SOUS-PAGES
   ========================================================= */
.page-header {
  background:
    radial-gradient(1200px 400px at 80% -10%, rgba(60,146,248,0.22), transparent 60%),
    linear-gradient(135deg, var(--navy-dark) 0%, var(--navy) 100%);
  color: #fff; padding: clamp(48px, 5vw, 72px) 0 clamp(44px, 4.5vw, 64px) 0; position: relative;
}

/* --- Photos de fond par page (facultatif) -------------------
   Déposer les fichiers à côté de style.css et ajouter la classe
   correspondante sur la balise <section class="page-header ...">.
   Si le fichier est absent, le dégradé navy s'affiche : rien ne casse.
     bg-nous       -> nous.jpg
     bg-comprendre -> comprendre.jpg
     bg-contact    -> contact.jpg
   Réglage du cadrage : changer le pourcentage (0% = haut, 100% = bas).
------------------------------------------------------------- */
.page-header.bg-nous,
.page-header.bg-comprendre,
.page-header.bg-contact { background-color: var(--navy-dark); }

.page-header.bg-nous {
  background:
    linear-gradient(100deg, rgba(11,22,38,0.93) 0%, rgba(15,33,58,0.82) 42%, rgba(22,54,92,0.48) 100%),
    url('nous.jpg') center 45% / cover no-repeat,
    linear-gradient(135deg, var(--navy-dark) 0%, var(--navy) 100%);
}
.page-header.bg-comprendre {
  background:
    linear-gradient(100deg, rgba(11,22,38,0.93) 0%, rgba(15,33,58,0.82) 42%, rgba(22,54,92,0.48) 100%),
    url('comprendre.jpg') center 45% / cover no-repeat,
    linear-gradient(135deg, var(--navy-dark) 0%, var(--navy) 100%);
}
.page-header.bg-contact {
  background:
    linear-gradient(100deg, rgba(11,22,38,0.93) 0%, rgba(15,33,58,0.82) 42%, rgba(22,54,92,0.48) 100%),
    url('contact.jpg') center 45% / cover no-repeat,
    linear-gradient(135deg, var(--navy-dark) 0%, var(--navy) 100%);
}
.page-header::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 5px;
  background: var(--grad-brand);
}
.page-header .eyebrow {
  display: inline-block;
  font-size: 13px; font-weight: 700; letter-spacing: 2.2px; text-transform: uppercase;
  color: var(--teal-light); margin-bottom: 18px;
  padding: 6px 15px; border: 1px solid rgba(44,175,160,0.45); border-radius: var(--r-pill);
  background: rgba(44,175,160,0.10);
}
.page-header h1 {
  font-size: clamp(27px, 3.4vw, 42px); font-weight: 800; line-height: 1.15; letter-spacing: -0.9px;
}
.page-header .sub {
  font-size: clamp(16.5px, 1.5vw, 19px); font-weight: 400; margin-top: 14px;
  color: rgba(255,255,255,0.9); max-width: 66ch; line-height: 1.6;
}

/* =========================================================
   TITRES DE SECTION
   ========================================================= */
.section-label {
  font-size: 13.5px; font-weight: 700; letter-spacing: 2.4px; text-transform: uppercase;
  color: var(--teal-deep); margin-bottom: 14px; text-align: center;
}
.section-title {
  font-size: clamp(27px, 3.4vw, 44px); font-weight: 800; color: var(--navy-dark);
  text-align: center; line-height: 1.15; letter-spacing: -0.9px;
  margin: 0 auto 20px auto; max-width: 24ch;
}
.section-title::after {
  content: ''; display: block; width: 72px; height: 4px; border-radius: 3px;
  background-color: #2CAFA0;
  background-image: linear-gradient(90deg, #3C92F8 0%, #2CAFA0 55%, #4AD384 100%);
  margin: 22px auto 0 auto;
}
/* Variante alignée à gauche */
.section-label.left, .section-title.left { text-align: left; margin-left: 0; }
.section-title.left::after { margin-left: 0; }

/* Espace après un titre de section suivi d'un contenu */
.section-title + * { margin-top: 44px; }

/* =========================================================
   BANDEAU DE CONFIANCE
   ========================================================= */
.trustbar { background: var(--bg-light); border-bottom: 1px solid var(--border); padding: clamp(44px, 5vw, 68px) 0; }
.trustbar-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.trust-item {
  text-align: center; padding: 26px 20px; background: #fff;
  border: 1px solid var(--border-soft); border-radius: var(--r);
  box-shadow: var(--shadow); transition: var(--ease);
}
.trust-item:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.trust-item .ic {
  font-size: 26px; color: var(--teal); margin: 0 auto 14px auto;
  width: 56px; height: 56px; border-radius: 50%;
  background: rgba(44,175,160,0.12);
  display: flex; align-items: center; justify-content: center;
}
.trust-item h4 { font-size: 17px; font-weight: 700; color: var(--navy-dark); margin-bottom: 6px; line-height: 1.3; }
.trust-item p { font-size: 15px; color: var(--text-muted); line-height: 1.55; }

/* =========================================================
   CHIFFRES CLÉS
   ========================================================= */
.stats {
  background:
    radial-gradient(900px 320px at 15% 0%, rgba(60,146,248,0.20), transparent 62%),
    var(--navy-dark);
  color: #fff; padding: clamp(60px, 7vw, 96px) 0;
}
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; text-align: center; }
.stats-grid > div {
  padding: 26px 18px; border-radius: var(--r);
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.10);
}
/* Repli : couleur pleine. Le dégradé n'est appliqué que si le
   navigateur sait découper un fond sur du texte (évite tout texte invisible). */
.stat-num {
  font-size: clamp(38px, 4.6vw, 58px); font-weight: 800; line-height: 1.05; letter-spacing: -1.5px;
  color: var(--teal-light);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .stat-num {
    background-image: linear-gradient(90deg, #45C9B8, #2CAFA0);
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
}
.stat-lbl { font-size: 16px; color: rgba(255,255,255,0.85); margin-top: 10px; line-height: 1.45; }
.stats-source { text-align: center; font-size: 14px; color: rgba(255,255,255,0.6); margin-top: 32px; }
.stats-source a { color: rgba(255,255,255,0.85); }
.stats.compact { padding: clamp(48px, 5vw, 72px) 0; }
.stats.compact .stat-num { font-size: clamp(32px, 3.6vw, 44px); }

/* =========================================================
   FAQ
   ========================================================= */
.faq { background: var(--bg-light); }
.faq-item {
  background: #fff; border: 1px solid var(--border-soft); border-radius: var(--r);
  padding: 6px 26px; margin-bottom: 14px; box-shadow: var(--shadow); transition: var(--ease);
}
.faq-item:hover { box-shadow: var(--shadow-lg); }
.faq-item summary {
  font-size: 18.5px; font-weight: 700; color: var(--navy-dark); cursor: pointer;
  list-style: none; display: flex; justify-content: space-between; align-items: center;
  padding: 20px 0; line-height: 1.4;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+'; font-size: 26px; color: var(--teal); font-weight: 400; margin-left: 20px;
  flex-shrink: 0; transition: var(--ease); line-height: 1;
}
.faq-item[open] summary::after { content: '\2212'; }
.faq-item[open] summary { color: var(--navy); }
.faq-item p {
  font-size: 16.5px; color: var(--text-muted); max-width: 74ch;
  padding-bottom: 22px; margin-top: -4px;
}

/* =========================================================
   INTRO / TEXTE COURANT
   ========================================================= */
.intro { background: #fff; }
.intro .lead {
  font-size: clamp(19px, 2vw, 24px); font-weight: 400; line-height: 1.62;
  color: var(--text); max-width: 68ch;
}
.intro .lead strong { color: var(--navy-dark); font-weight: 700; }
.intro p { font-size: 17px; line-height: 1.72; }
.positioning {
  background: var(--bg-light); border-left: 4px solid var(--navy); border-radius: 0 var(--r-sm) var(--r-sm) 0;
  padding: 24px 30px; margin-top: 30px; font-size: 17px; color: var(--text-muted); max-width: 72ch;
}

/* =========================================================
   MOMENTS DÉCLENCHEURS — « Vous nous contactez quand… »
   Repris de la plaquette A5. Le visiteur doit se reconnaître
   avant qu'on lui explique le marché.
   ========================================================= */
.moments { background: #fff; }
.moments-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.moment {
  background: var(--bg-light); border-radius: var(--r);
  border-left: 4px solid var(--teal);
  padding: 26px 24px; transition: var(--ease);
}
.moment:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.moment .m-ic { display: block; color: var(--teal); font-size: 24px; font-weight: 700; line-height: 1; margin-bottom: 12px; }
.moment h3 { font-size: 17.5px; font-weight: 700; color: var(--navy-dark); line-height: 1.32; margin-bottom: 10px; }
.moment p { font-size: 15.5px; color: var(--text-muted); line-height: 1.6; }

.moments-cta {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 20px; margin-top: 40px;
  background: var(--navy-dark); border-radius: var(--r); padding: 26px 34px;
}
.moments-cta strong { display: block; color: #fff; font-size: 21px; font-weight: 700; margin-bottom: 4px; }
.moments-cta span { display: block; color: rgba(255,255,255,0.78); font-size: 16px; }

/* =========================================================
   ACCROCHES ILLUSTRÉES (accueil → page Comprendre)
   Cartes entièrement cliquables : le <a> porte la carte,
   d'où des <span> à l'intérieur plutôt que des <div>.
   ========================================================= */
.teasers { background: #fff; }
.teaser-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.teaser-card {
  display: flex; flex-direction: column; text-decoration: none; overflow: hidden;
  background: #fff; border: 1px solid var(--border-soft); border-radius: var(--r);
  box-shadow: var(--shadow); transition: var(--ease);
}
.teaser-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
/* Hauteur proportionnelle par padding (56,25 % = format 16/9).
   Technique retenue plutôt qu'aspect-ratio : supportée partout,
   et vérifiable dans les outils de rendu hors navigateur. */
.teaser-img {
  display: block; width: 100%; height: 0; padding-bottom: 56.25%;
  background-size: cover; background-repeat: no-repeat;
  background-color: var(--navy-dark);
}
.teaser-body { display: block; padding: 26px 28px 28px 28px; }
.teaser-title {
  display: block; font-size: 19.5px; font-weight: 700; color: var(--navy-dark);
  line-height: 1.35; margin-bottom: 12px;
}
.teaser-text {
  display: block; font-size: 16px; color: var(--text-muted); line-height: 1.62;
  margin-bottom: 16px;
}
.teaser-link {
  display: inline-block; font-size: 15.5px; font-weight: 700; color: var(--teal-deep);
  transition: var(--ease);
}
.teaser-card:hover .teaser-link { color: var(--navy); }

/* =========================================================
   AUDIENCE / SEGMENTS
   ========================================================= */
.audience { background: var(--bg-light); }
.segments { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.segment-card {
  background: #fff; border: 1px solid var(--border-soft); border-radius: var(--r);
  padding: 32px 26px; box-shadow: var(--shadow); transition: var(--ease);
  position: relative; overflow: hidden;
}
.segment-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--grad-brand); transform: scaleX(0); transform-origin: left;
  transition: transform var(--ease);
}
.segment-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.segment-card:hover::before { transform: scaleX(1); }
.segment-card .tag {
  display: inline-block; font-size: 12.5px; font-weight: 700; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--teal-deep); margin-bottom: 12px;
}
.segment-card h3 { font-size: 20px; font-weight: 700; color: var(--navy-dark); margin-bottom: 10px; line-height: 1.3; }
.segment-card p { font-size: 16px; color: var(--text-muted); line-height: 1.6; }

/* =========================================================
   PARCOURS (étapes)
   ========================================================= */
.parcours { background: #fff; }
.flow { display: flex; align-items: stretch; gap: 0; flex-wrap: wrap; justify-content: center; }
.flow-step { flex: 1; min-width: 140px; text-align: center; padding: 12px 14px; position: relative; }
.flow-step .dot {
  display: block; width: 20px; height: 20px; border-radius: 50%;
  background: var(--teal); margin: 0 auto 18px auto;
  box-shadow: 0 0 0 6px rgba(44,175,160,0.16); transition: var(--ease);
}
.flow-step:hover .dot { transform: scale(1.25); }
.flow-step .lbl { font-size: 16px; font-weight: 600; color: var(--navy-dark); line-height: 1.4; }
.flow-arrow { display: flex; align-items: center; color: #C3CDD8; font-size: 26px; padding-top: 24px; }

/* Entrée du parcours : l'audit n'est pas une étape, c'est le seuil.
   Les travaux du bailleur non plus : ils sortent de la séquence. */
.flow-entry {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 12px; margin-bottom: 26px;
}
.flow-entry .fe-label,
.flow-cross .fc-label {
  font-size: 12px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--teal-deep); white-space: nowrap;
}
.flow-entry .fe-item {
  font-size: 17px; font-weight: 700; color: var(--navy-dark);
  background: #F0FAF8; border: 1px solid rgba(44,175,160,0.38);
  border-radius: 999px; padding: 9px 20px;
}
.flow-entry .fe-arrow { color: #C3CDD8; font-size: 22px; }
.flow-entry .fe-cycle {
  font-size: 12px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-soft); white-space: nowrap;
}
.flow-cross {
  display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap;
  margin-top: 34px; padding: 18px 26px;
  background: var(--bg-light); border-left: 4px solid var(--teal);
  border-radius: var(--r);
}
.flow-cross .fc-text { flex: 1; min-width: 260px; font-size: 16px; color: var(--text-muted); line-height: 1.6; }
.flow-cross .fc-text strong { color: var(--navy-dark); font-weight: 700; }

/* =========================================================
   OFFRES
   ========================================================= */
.offers-section { background: var(--bg-light); }
.offer {
  background: #fff; border: 1px solid var(--border-soft); border-radius: var(--r);
  border-left: 5px solid var(--navy);
  margin-bottom: 18px; box-shadow: var(--shadow); transition: var(--ease);
}
.offer:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
/* L'audit est l'entrée du parcours : filet turquoise et fond légèrement teinté. */
.offer.entry { border-left-color: var(--teal); background: #F7FCFB; }
.offer-body { padding: 30px 36px; }
.offer-title { font-size: 21px; font-weight: 700; color: var(--navy-dark); margin-bottom: 10px; line-height: 1.3; }
.offer-desc { font-size: 16.5px; color: var(--text-muted); margin-bottom: 12px; line-height: 1.65; }
/* --- Audit : ce que nous vérifions / ce que vous recevez --- */
.audit-cols {
  display: grid; grid-template-columns: 1fr 1fr; gap: 28px;
  margin: 22px 0 20px 0; padding-top: 22px;
  border-top: 1px solid rgba(44,175,160,0.28);
}
.audit-head {
  font-size: 13px; font-weight: 800; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--teal-deep); margin-bottom: 14px;
}
.audit-col ul { list-style: none; margin: 0; padding: 0; }
.audit-col li {
  position: relative; padding-left: 26px; margin-bottom: 10px;
  font-size: 16px; color: var(--text-muted); line-height: 1.55;
}
.audit-col li::before {
  content: "✓"; position: absolute; left: 0; top: 0;
  color: var(--teal); font-weight: 800; font-size: 15px;
}
.offer-meta { font-size: 15px; color: var(--text-soft); }
.offer-meta strong { color: var(--navy); font-weight: 700; }

/* --- Interventions ponctuelles, hors parcours --- */
.ondemand { margin-top: 40px; }
.od-title {
  font-size: 13.5px; font-weight: 700; letter-spacing: 2.4px; text-transform: uppercase;
  color: var(--teal-deep); text-align: center; margin-bottom: 20px;
}
.od-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.od {
  background: #fff; border: 1px dashed var(--border); border-radius: var(--r);
  padding: 20px 24px; text-align: center;
  font-size: 16.5px; font-weight: 600; color: var(--navy-dark);
}

/* =========================================================
   CE QUI SE JOUE — le risque par la durée, pas par le montant
   Fond navy : rupture de rythme avant la liste des prestations.
   Pas de cartes ici (contrairement à .why-item) pour que les
   deux sections sombres de la page ne se ressemblent pas.
   ========================================================= */
.stakes {
  background:
    radial-gradient(900px 400px at 15% 0%, rgba(60,146,248,0.16), transparent 60%),
    var(--navy);
  color: #fff;
}
.stakes .section-title { color: #fff; }
.stakes .section-label { color: var(--teal-light); }
.stakes-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.stake { padding: 6px 34px; border-left: 2px solid rgba(69,201,184,0.40); }
.stake:first-child { padding-left: 0; border-left: 0; }
.stake h3 {
  font-size: 20px; font-weight: 700; color: var(--teal-light);
  line-height: 1.3; margin-bottom: 14px;
}
.stake p { font-size: 16.5px; color: rgba(255,255,255,0.88); line-height: 1.7; }

/* =========================================================
   POURQUOI / ARGUMENTS
   ========================================================= */
.why {
  background:
    radial-gradient(1000px 420px at 85% 0%, rgba(60,146,248,0.18), transparent 62%),
    var(--navy-dark);
  color: #fff;
}
.why .section-title { color: #fff; }
/* Sur fond navy, le turquoise foncé manquerait de contraste */
.why .section-label,
.stats .section-label,
.cta-band .section-label { color: var(--teal-light); }
.why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.why-item {
  padding: 32px 28px; border-radius: var(--r);
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.10);
  transition: var(--ease);
}
.why-item:hover { background: rgba(255,255,255,0.09); transform: translateY(-4px); }
.why-item .mark { color: var(--teal-light); font-size: 30px; font-weight: 800; line-height: 1; }
.why-item h3 { font-size: 20px; font-weight: 700; margin: 16px 0 12px 0; line-height: 1.3; }
.why-item p { font-size: 16px; color: rgba(255,255,255,0.86); line-height: 1.65; }
.why-link {
  display: inline-block; margin-top: 14px;
  font-size: 15px; font-weight: 600; color: var(--teal-light);
  text-decoration: none; border-bottom: 1px solid rgba(69,201,184,0.45);
  padding-bottom: 2px; transition: var(--ease);
}
.why-link:hover { color: #fff; border-bottom-color: #fff; }

/* =========================================================
   ACTUALITÉS
   ========================================================= */
.news { background: #fff; }
.news-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.news-card {
  background: #fff; border: 1px solid var(--border-soft); border-radius: var(--r);
  padding: 32px; box-shadow: var(--shadow); transition: var(--ease);
}
.news-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.news-date {
  font-size: 13px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--teal-deep); margin-bottom: 12px;
}
.news-card h3 { font-size: 20.5px; font-weight: 700; color: var(--navy-dark); margin-bottom: 12px; line-height: 1.35; }
.news-card p { font-size: 16.5px; color: var(--text-muted); margin-bottom: 18px; line-height: 1.65; }
.news-card a.src {
  display: inline-block;
  font-size: 15.5px; font-weight: 700; color: var(--navy); text-decoration: none;
  transition: var(--ease);
}
.news-card a.src:hover { color: var(--teal-deep); }

/* =========================================================
   VIDÉO
   ========================================================= */
.video-wrap {
  position: relative; width: 100%; max-width: 900px; aspect-ratio: 16/9;
  background: linear-gradient(135deg, var(--bg-light), var(--bg-tint));
  border: 2px dashed #C3CFDB; border-radius: var(--r);
  display: flex; align-items: center; justify-content: center; flex-direction: column;
  gap: 18px; text-align: center; padding: 32px; margin-inline: auto;
}
.video-wrap .play {
  width: 78px; height: 78px; border-radius: 50%;
  background: linear-gradient(135deg, var(--navy), var(--navy-dark)); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 28px;
  box-shadow: 0 10px 30px rgba(31,78,120,0.3);
}
.video-wrap .note { font-size: 16px; color: var(--text-muted); max-width: 52ch; }
.video-embed { position: relative; width: 100%; max-width: 900px; margin-inline: auto; aspect-ratio: 16/9; border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow-lg); }
.video-embed iframe { width: 100%; height: 100%; border: 0; display: block; }

/* =========================================================
   RÉFÉRENCES JURIDIQUES
   ========================================================= */
.legal-refs { display: flex; flex-direction: column; gap: 20px; max-width: 1040px; margin-inline: auto; }
.legal-ref {
  background: #fff; border: 1px solid var(--border-soft); border-radius: var(--r);
  padding: 30px 34px; box-shadow: var(--shadow); transition: var(--ease);
}
.legal-ref:hover { box-shadow: var(--shadow-lg); }
.legal-ref .ref-date {
  display: inline-block; font-size: 12.5px; font-weight: 700; color: var(--teal-deep);
  text-transform: uppercase; letter-spacing: 1.4px; margin-bottom: 8px;
}
.legal-ref h3 { font-size: 20px; font-weight: 700; color: var(--navy-dark); margin: 4px 0 12px 0; line-height: 1.35; }
.legal-ref p { font-size: 16.5px; color: var(--text-muted); margin-bottom: 14px; line-height: 1.7; }
.legal-ref > strong { font-size: 19px; color: var(--navy-dark); display: block; margin-bottom: 6px; line-height: 1.35; }
.legal-ref a { font-size: 15.5px; font-weight: 700; color: var(--navy); text-decoration: none; transition: var(--ease); }
.legal-ref a:hover { color: var(--teal-deep); }

/* Encart mis en avant à l'intérieur d'une carte */
.callout {
  border-left: 4px solid var(--teal); background: #EFF9F7;
  padding: 18px 24px; border-radius: 0 var(--r-sm) var(--r-sm) 0; margin-top: 18px;
}
.callout p { font-size: 16.5px; margin-bottom: 12px; }
.callout p:last-child { margin-bottom: 0; }

/* =========================================================
   À PROPOS / NOUS
   ========================================================= */
.about { background: #fff; }
.about-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 64px; align-items: start; }
.about h2 { font-size: clamp(26px, 3vw, 38px); font-weight: 800; color: var(--navy-dark); margin-bottom: 24px; line-height: 1.2; letter-spacing: -0.8px; }
.about p { font-size: 17.5px; color: var(--text-muted); margin-bottom: 20px; line-height: 1.75; }
.about-facts {
  border: 1px solid var(--border-soft); border-radius: var(--r); padding: 34px;
  background: var(--bg-light); box-shadow: var(--shadow); position: sticky; top: 100px;
}
.about-facts dt {
  font-size: 12.5px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--teal-deep); margin-top: 22px;
}
.about-facts dt:first-child { margin-top: 0; }
.about-facts dd { font-size: 17.5px; color: var(--navy-dark); font-weight: 600; line-height: 1.5; }
.draft-note {
  background: #EAF7F5; border: 1px dashed var(--teal); border-radius: var(--r);
  padding: 20px 26px; font-size: 16px; color: #0E5A50; margin-bottom: 36px; max-width: 72ch;
  line-height: 1.6;
}
.draft-note strong { color: #0B4941; }
.draft-note a { color: var(--teal-deep); font-weight: 700; text-decoration: underline; }

/* =========================================================
   CONTACT
   ========================================================= */
.contact { background: var(--bg-light); }
.contact-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px; }
.contact-info h2 { font-size: clamp(26px, 3vw, 38px); font-weight: 800; color: var(--navy-dark); margin-bottom: 20px; line-height: 1.2; letter-spacing: -0.8px; }
.contact-info p { font-size: 17.5px; color: var(--text-muted); margin-bottom: 32px; max-width: 46ch; }
.contact-line {
  display: flex; align-items: center; gap: 16px; margin-bottom: 18px; font-size: 18px;
  background: #fff; border: 1px solid var(--border-soft); border-radius: var(--r);
  padding: 16px 20px; box-shadow: var(--shadow); transition: var(--ease);
}
.contact-line:hover { transform: translateX(4px); box-shadow: var(--shadow-lg); }
.contact-line .ico {
  width: 46px; height: 46px; border-radius: 50%;
  background: linear-gradient(135deg, var(--navy), var(--navy-dark)); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 19px; flex-shrink: 0;
}
.contact-line a { text-decoration: none; font-weight: 700; color: var(--navy-dark); }
.contact-line a:hover { color: var(--teal-deep); }

.contact-form {
  background: #fff; border: 1px solid var(--border-soft); border-radius: var(--r);
  padding: 40px; box-shadow: var(--shadow-lg);
}
.contact-form label { display: block; font-size: 14.5px; font-weight: 700; color: var(--navy-dark); margin-bottom: 8px; letter-spacing: 0.2px; }
.contact-form input, .contact-form textarea, .contact-form select {
  width: 100%; padding: 15px 16px; border: 1.5px solid var(--border); border-radius: var(--r-sm);
  font-family: inherit; font-size: 16.5px; margin-bottom: 22px; color: var(--text);
  background: #fff; transition: var(--ease);
}
.contact-form input:focus, .contact-form textarea:focus, .contact-form select:focus {
  outline: none; border-color: var(--navy); box-shadow: 0 0 0 4px rgba(31,78,120,0.10);
}
.contact-form textarea { resize: vertical; min-height: 150px; line-height: 1.6; }
.contact-form button {
  background: var(--navy-dark); color: #fff; border: none; padding: 17px 28px; border-radius: var(--r-pill);
  font-weight: 700; font-size: 17px; cursor: pointer; width: 100%; font-family: inherit;
  transition: var(--ease); box-shadow: 0 6px 20px rgba(22,54,92,0.25);
}
.contact-form button:hover { background: var(--navy); transform: translateY(-2px); box-shadow: 0 12px 28px rgba(22,54,92,0.32); }
.form-note { font-size: 14.5px; color: var(--text-soft); margin-top: 16px; line-height: 1.6; }
.form-note a { color: var(--navy); font-weight: 600; }

/* =========================================================
   BANDE D'APPEL À L'ACTION
   ========================================================= */
.cta-band {
  background:
    radial-gradient(800px 300px at 50% 0%, rgba(60,146,248,0.22), transparent 65%),
    var(--navy-dark);
  color: #fff; text-align: center;
}
.cta-band h2 { font-size: clamp(26px, 3.2vw, 40px); font-weight: 800; margin-bottom: 18px; line-height: 1.2; letter-spacing: -0.8px; }
.cta-band p { font-size: clamp(17px, 1.8vw, 20px); color: rgba(255,255,255,0.85); margin: 0 auto 34px auto; max-width: 60ch; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; align-items: center; }
.btn-phone {
  display: inline-block; padding: 15px 30px; border-radius: 999px;
  font-size: 17px; font-weight: 700; color: #fff; text-decoration: none;
  border: 2px solid rgba(255,255,255,0.35); transition: var(--ease);
}
.btn-phone:hover { border-color: var(--teal-light); color: var(--teal-light); }

/* =========================================================
   BANDEAU BAS — FOOTER (identique à la plaquette)
   Nom en dégradé sur fond bleu + bloc barres à droite
   ========================================================= */
footer.site-footer { display: flex; align-items: stretch; background: var(--navy-900); font-size: 15px; }
.footer-main { flex: 1; min-width: 0; display: flex; align-items: center; }
.footer-inner {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 18px 32px; width: 100%;
  /* padding horizontal repris de .container : sinon le texte touche les bords */
  padding: 30px clamp(20px, 4vw, 64px);
}
.footer-wordmark {
  font-size: 26px; font-weight: 800; letter-spacing: 0.2px;
  color: #4AD384; /* repli si le découpage de fond sur texte n'est pas supporté */
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .footer-wordmark {
    background-image: linear-gradient(90deg, #3C92F8 0%, #2CAFA0 55%, #4AD384 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
}
.footer-copy, .footer-links { color: rgba(255,255,255,0.72); font-size: 14.5px; }
.footer-links a { color: rgba(255,255,255,0.8); text-decoration: none; transition: var(--ease); }
.footer-links a:hover { color: #fff; text-decoration: underline; }
.footer-accent {
  flex: 0 0 100px; background: linear-gradient(135deg, #0E6E78 0%, #1FA25A 100%);
  display: flex; align-items: center; justify-content: center;
}
.footer-accent svg { width: 42px; height: 32px; display: block; }

/* =========================================================
   PAGE MENTIONS LÉGALES
   ========================================================= */
.legal-main { padding: clamp(56px, 7vw, 88px) 0 clamp(64px, 8vw, 100px) 0; }
.legal-main .container { max-width: 900px; }
.legal-main h1 { font-size: clamp(28px, 3.4vw, 42px); font-weight: 800; color: var(--navy-dark); margin-bottom: 10px; letter-spacing: -0.8px; }
.legal-main .updated { font-size: 15px; color: var(--text-soft); margin-bottom: 48px; }
.legal-main h2 {
  font-size: 16px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--teal-deep); margin: 44px 0 16px 0; padding-top: 28px; border-top: 1px solid var(--border);
}
.legal-main h2:first-of-type { border-top: none; padding-top: 0; margin-top: 0; }
.legal-main p, .legal-main li { font-size: 17px; color: var(--text-muted); margin-bottom: 14px; line-height: 1.75; }
.legal-main .card {
  background: var(--bg-light); border-left: 4px solid var(--navy);
  padding: 26px 30px; border-radius: 0 var(--r-sm) var(--r-sm) 0; margin-bottom: 14px;
}
.legal-main .card p { margin-bottom: 6px; }
.legal-main a.inline { color: var(--navy); font-weight: 600; text-decoration: underline; }

/* =========================================================
   RESPONSIVE
   ========================================================= */

/* Ordinateur portable / grande tablette */
@media (max-width: 1100px) {
  .segments { grid-template-columns: repeat(2, 1fr); }
  .moments-grid { grid-template-columns: repeat(2, 1fr); }
  .teaser-grid { grid-template-columns: 1fr 1fr; }
  .about-grid { grid-template-columns: 1fr; gap: 44px; }
  .about-facts { position: static; }
}

/* Tablette — la navigation bascule en menu déroulant */
@media (max-width: 900px) {
  /* Triptyque : le 3e volet devient trop étroit pour être lisible */
  .hero-panel.p3 { display: none; }
  .hero-veil { background: linear-gradient(100deg, rgba(11,22,38,0.94) 0%, rgba(14,32,55,0.88) 45%, rgba(20,50,86,0.62) 100%); }
  .why-grid { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; gap: 44px; }
  .news-grid { grid-template-columns: 1fr; }
  .trustbar-grid { grid-template-columns: repeat(2, 1fr); }
  .stats-grid { grid-template-columns: 1fr; gap: 20px; }
  .section-title { max-width: 100%; }

  .nav-toggle-label { display: flex; }
  .nav-phone { display: none; }
  .nav-cta { padding: 10px 18px; font-size: 14.5px; }
  nav.main-nav {
    display: none; order: 10; flex-basis: 100%;
    position: absolute; top: 100%; left: 0; right: 0;
    background: #fff; border-bottom: 1px solid var(--border);
    box-shadow: 0 12px 28px rgba(16,36,62,0.10);
    padding: 8px clamp(20px, 4vw, 64px) 16px;
  }
  nav.main-nav ul { flex-direction: column; gap: 0; }
  nav.main-nav li { border-bottom: 1px solid var(--border-soft); }
  nav.main-nav li:last-child { border-bottom: none; }
  nav.main-nav a { display: block; padding: 16px 4px; font-size: 17.5px; border-radius: 0; }
  nav.main-nav a::after { display: none; }
  nav.main-nav a:hover { background: transparent; }
  nav.main-nav a.active { color: var(--teal); }
  .nav-toggle-input:checked ~ nav.main-nav { display: block; }
  /* Croix quand le menu est ouvert */
  .nav-toggle-input:checked ~ .nav-toggle-label span:nth-child(1) { transform: translateY(8.5px) rotate(45deg); }
  .nav-toggle-input:checked ~ .nav-toggle-label span:nth-child(2) { opacity: 0; }
  .nav-toggle-input:checked ~ .nav-toggle-label span:nth-child(3) { transform: translateY(-8.5px) rotate(-45deg); }
}

/* Mobile (iPhone / Android) */
@media (max-width: 640px) {
  body { font-size: 17px; }
  .moments-grid { grid-template-columns: 1fr; gap: 16px; }
  .moments-cta { flex-direction: column; align-items: flex-start; padding: 24px; }
  .moments-cta .btn-primary { width: 100%; text-align: center; }
  .teaser-grid { grid-template-columns: 1fr; gap: 20px; }
  .teaser-body { padding: 22px 22px 24px 22px; }
  /* Une seule photo en portrait : les volets seraient des bandes de 60 px */
  .hero-panel.p2 { display: none; }
  .hero-panel + .hero-panel { border-left: none; }
  .hero-veil { background: linear-gradient(160deg, rgba(11,22,38,0.93) 0%, rgba(16,38,66,0.86) 60%, rgba(22,54,92,0.78) 100%); }
  .container { padding: 0 20px; }
  .logo-img { height: 34px; }
  .flow { flex-direction: column; align-items: center; gap: 4px; }
  .flow-arrow { transform: rotate(90deg); padding: 0; }
  .od-grid { grid-template-columns: 1fr; }
  .audit-cols { grid-template-columns: 1fr; gap: 20px; }
  .stakes-grid { grid-template-columns: 1fr; gap: 26px; }
  .stake { padding: 0 0 0 20px; border-left: 2px solid rgba(69,201,184,0.40); }
  .stake:first-child { padding-left: 20px; border-left: 2px solid rgba(69,201,184,0.40); }
  .offer-body { padding: 26px 24px; }
  .segments { grid-template-columns: 1fr; }
  .trustbar-grid { grid-template-columns: 1fr; }
  .legal-ref, .news-card, .contact-form { padding: 26px 22px; }
  .faq-item { padding: 4px 22px; }
  .faq-item summary { font-size: 17.5px; }
  .footer-inner { justify-content: center; text-align: center; flex-direction: column; gap: 12px; padding: 26px 0; }
  .footer-accent { flex-basis: 66px; }
  .footer-accent svg { width: 30px; height: 23px; }
  .hero-ctas { gap: 12px; }
  .btn-primary, .btn-secondary { width: 100%; text-align: center; }
}

/* Très petits écrans (iPhone SE et similaires) */
@media (max-width: 380px) {
  .logo-img { height: 30px; }
  .nav-cta { padding: 9px 14px; font-size: 13.5px; }
  .contact-line { font-size: 16px; padding: 14px 16px; }
}

/* Préférence système : mouvement réduit */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}