/* ============================================================
   SaySeeShow — Feuille de style commune
   Charte : bleu corporate + vert « seconde vie », Inter, aplats
   aérés, cartes douces. Aucune dépendance externe.
   Règles de maintenance : voir AGENTS.md (sections R01–R15).
   ============================================================ */

/* ---------- Police (self-hostée, variable, sous-ensemble latin) ---------- */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-var.woff2") format("woff2");
}

/* ---------- Tokens (seule source de vérité — ne jamais coder une valeur en dur) ---------- */

:root {
  /* Marque (extraites du monogramme SaySeeShow) */
  --c-primary: #0E6DB7;
  --c-primary-strong: #0A5794;
  --c-primary-deep: #083D69;
  --c-primary-soft: #E8F2FB;
  --c-accent: #21A541;
  --c-accent-strong: #1B8A36;
  --c-accent-soft: #E9F7EC;

  /* Neutres */
  --c-ink: #0B2239;
  --c-body: #44536A;
  --c-muted: #6B7A90;
  --c-border: #E3EAF2;
  --c-bg: #FFFFFF;
  --c-bg-alt: #F6F9FC;
  --c-dark-bg: #0B2239;
  --c-dark-text: #C9D6E4;

  /* Étapes intermédiaires : survol d'une carte, survol du bouton sombre. */
  --c-border-strong: #D3DEEA;
  --c-ink-soft: #122C48;

  /* Sur fond sombre (section --dark, cta-band, footer) : le texte blanc et
     ses deux teintes, l'accent lisible sur le bleu nuit, les voiles des
     cartes. Une feuille de gabarit compose avec ces tokens au lieu
     d'introduire sa propre palette (R11). */
  --c-on-dark: #FFFFFF;
  --c-on-dark-muted: #8FA5BC;
  --c-on-dark-line: rgba(255, 255, 255, 0.10);
  --c-on-dark-line-strong: rgba(255, 255, 255, 0.22);
  --c-on-dark-hairline: rgba(255, 255, 255, 0.12);
  --c-on-dark-surface: rgba(255, 255, 255, 0.04);
  --c-on-dark-accent: #7ED99A;
  --c-on-dark-accent-strong: #4FC26B;
  --c-on-dark-accent-wash: rgba(33, 165, 65, 0.16);

  /* Voiles translucides et fins de dégradé. */
  --c-accent-wash: rgba(33, 165, 65, 0.05);
  --c-accent-glow: rgba(33, 165, 65, 0.35);
  --c-accent-fade: rgba(33, 165, 65, 0);
  --c-primary-fade: rgba(232, 242, 251, 0);
  --c-header-glass: rgba(255, 255, 255, 0.92);

  /* Typographie */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --fs-h1: clamp(2.375rem, 1.4rem + 3.4vw, 3.5rem);
  --fs-h2: clamp(1.75rem, 1.3rem + 1.6vw, 2.375rem);
  --fs-h3: 1.25rem;
  --fs-lead: clamp(1.0625rem, 1rem + 0.4vw, 1.1875rem);
  --fs-body: 1.0625rem;

  /* Espacements (base 4) */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --section-pad: clamp(4rem, 3rem + 5vw, 6.5rem);

  /* Formes et ombres */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(11, 34, 57, 0.06), 0 2px 8px rgba(11, 34, 57, 0.05);
  --shadow-md: 0 4px 12px rgba(11, 34, 57, 0.08), 0 12px 32px rgba(11, 34, 57, 0.10);
  --shadow-brand: 0 6px 16px rgba(14, 109, 183, 0.28);
  --container: 1160px;

  /* Médias : bornes de rendu. Sans elles, une image verticale étirée sur la
     largeur du conteneur occupe plusieurs écrans de haut. */
  --media-max: 480px;        /* illustration par défaut */
  --media-portrait: 420px;   /* portrait photographique */
  --media-label: 300px;      /* logo de label (fond transparent, pas d'arrondi) */
  --media-produit: 560px;    /* illustration de solution, dans une ligne produit */
  --media-phone: 260px;      /* capture d'écran d'application, en cadre de téléphone */
  --media-icon: 80px;        /* pictogramme */
  --media-frame: 8px;        /* épaisseur du cadre de téléphone */
}

/* ---------- Reset et base ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--c-body);
  background-color: var(--c-bg);
  -webkit-text-size-adjust: 100%;
}

h1,
h2,
h3,
h4 {
  color: var(--c-ink);
  line-height: 1.18;
  letter-spacing: -0.02em;
  margin: 0 0 var(--sp-4);
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); font-weight: 700; }
h2 { font-size: var(--fs-h2); font-weight: 700; }
h3 { font-size: var(--fs-h3); font-weight: 600; }

p {
  margin: 0 0 var(--sp-4);
}

a {
  color: var(--c-primary);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

::selection {
  background: var(--c-primary-soft);
  color: var(--c-ink);
}

:focus-visible {
  outline: 3px solid var(--c-primary);
  outline-offset: 2px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- Utilitaires ---------- */

.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2rem);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--sp-4);
  z-index: 100;
  background: var(--c-ink);
  color: var(--c-on-dark);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-sm);
}

.skip-link:focus {
  top: var(--sp-2);
}

.text-center { text-align: center; }

/* Icônes : SVG filaires portés par la feuille de style (masque + currentColor).
   Usage : <span class="icon icon--nom" aria-hidden="true"></span>
   Inventaire complet : templates/styleguide.html */

.icon {
  display: inline-block;
  flex-shrink: 0;
  width: 1.25em;
  height: 1.25em;
  background-color: currentColor;
  -webkit-mask: var(--i) center / contain no-repeat;
  mask: var(--i) center / contain no-repeat;
}

.icon--menu        { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16'/%3E%3C/svg%3E"); }
.icon--close       { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E"); }
.icon--chevron-down{ --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); }
.icon--arrow-right { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h16M13 5l7 7-7 7'/%3E%3C/svg%3E"); }
.icon--check       { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l5 5L19.5 7'/%3E%3C/svg%3E"); }
.icon--shield      { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7.5 3v5.2c0 4.6-3.2 7.7-7.5 9.3-4.3-1.6-7.5-4.7-7.5-9.3V6L12 3z'/%3E%3Cpath d='M9 12l2.2 2.2L15.5 9.7'/%3E%3C/svg%3E"); }
.icon--camera      { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h3l2-2.5h6L17 7h3a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1z'/%3E%3Ccircle cx='12' cy='13' r='3.4'/%3E%3C/svg%3E"); }
.icon--phone       { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v2a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 3.2 2 2 0 0 1 4.1 1h2a2 2 0 0 1 2 1.7c.1 1 .4 2 .7 2.9a2 2 0 0 1-.5 2.1L7.1 9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.5c.9.3 1.9.6 2.9.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E"); }
.icon--message     { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H8l-5 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E"); }
.icon--bell        { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8a6 6 0 0 0-12 0c0 7-3 9-3 9h18s-3-2-3-9'/%3E%3Cpath d='M13.7 21a2 2 0 0 1-3.4 0'/%3E%3C/svg%3E"); }
.icon--waves       { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10v4M8 7v10M12 4v16M16 7v10M20 10v4'/%3E%3C/svg%3E"); }
.icon--leaf        { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 20c8 0 13-5 13-15-9 0-14 4-14 10 0 2 .4 3.6 1 5z'/%3E%3Cpath d='M6 20c2-6 6-10 11-13'/%3E%3C/svg%3E"); }
.icon--lock        { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.5' y='10.5' width='15' height='9.5' rx='2'/%3E%3Cpath d='M8 10.5V7a4 4 0 0 1 8 0v3.5'/%3E%3C/svg%3E"); }
.icon--mail        { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5.5' width='18' height='13' rx='2'/%3E%3Cpath d='M3.5 7l8.5 6 8.5-6'/%3E%3C/svg%3E"); }
.icon--map-pin     { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19.5 10c0 5.5-7.5 11.5-7.5 11.5S4.5 15.5 4.5 10a7.5 7.5 0 0 1 15 0z'/%3E%3Ccircle cx='12' cy='10' r='2.8'/%3E%3C/svg%3E"); }
.icon--send        { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 2L11 13'/%3E%3Cpath d='M22 2l-7.5 20-3.5-9-9-3.5L22 2z'/%3E%3C/svg%3E"); }
.icon--moon        { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.5 13.5A8.5 8.5 0 1 1 10.5 3.5a7 7 0 0 0 10 10z'/%3E%3C/svg%3E"); }
.icon--users       { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.9M15.5 3.1a4 4 0 0 1 0 7.8'/%3E%3C/svg%3E"); }
.icon--globe       { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18'/%3E%3C/svg%3E"); }

/* ---------- Boutons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  /* Un libellé long (nom de l'application, mode) ne doit pas déborder d'un
     écran étroit : le texte passe à la ligne à l'intérieur du bouton. */
  max-width: 100%;
  padding: 0.8125rem 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.btn:hover {
  text-decoration: none;
  transform: translateY(-1px);
}

.btn .icon { width: 1.05em; height: 1.05em; }

.btn--primary {
  background: var(--c-primary);
  color: var(--c-on-dark);
  box-shadow: var(--shadow-brand);
}

.btn--primary:hover {
  background: var(--c-primary-strong);
}

.btn--dark {
  background: var(--c-ink);
  color: var(--c-on-dark);
}

.btn--dark:hover {
  background: var(--c-ink-soft);
}

.btn--outline {
  border-color: var(--c-border);
  background: var(--c-bg);
  color: var(--c-ink);
}

.btn--outline:hover {
  border-color: var(--c-primary);
  color: var(--c-primary);
}

.btn--ghost {
  color: var(--c-primary);
  padding-inline: var(--sp-2);
}

.btn--ghost:hover {
  background: var(--c-primary-soft);
}

.btn--sm {
  padding: 0.5rem 1.125rem;
  font-size: 0.9375rem;
}

.btn--lg {
  padding: 1rem 2rem;
  font-size: 1.0625rem;
}

/* ---------- Sections et gabarits de section ---------- */

.section {
  padding-block: var(--section-pad);
}

.section--alt {
  background: var(--c-bg-alt);
}

.section--dark {
  background: var(--c-dark-bg);
  color: var(--c-dark-text);
}

.section--dark h2,
.section--dark h3 {
  color: var(--c-on-dark);
}

.section-head {
  max-width: 720px;
  margin-bottom: var(--sp-7);
}

.section-head--center {
  margin-inline: auto;
  text-align: center;
}

.eyebrow {
  display: inline-block;
  margin-bottom: var(--sp-3);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-primary);
}

.eyebrow--accent {
  color: var(--c-accent);
}

.lead {
  font-size: var(--fs-lead);
  line-height: 1.6;
}

.grid-2,
.grid-3 {
  display: grid;
  gap: var(--sp-5);
}

.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 960px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .grid-2,
  .grid-3 {
    grid-template-columns: 1fr;
  }
}

/* ---------- En-tête et navigation ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--c-header-glass);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--c-border);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  min-height: 72px;
}

.brand {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.brand img {
  height: 40px;
  width: auto;
}
.nav-list {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
}

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 0.5rem 0.875rem;
  border: 0;
  border-radius: var(--r-sm);
  background: none;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--c-ink);
  cursor: pointer;
  white-space: nowrap;
}

.nav-link:hover {
  background: var(--c-bg-alt);
  color: var(--c-primary);
  text-decoration: none;
}

.nav-link .icon {
  width: 0.9em;
  height: 0.9em;
  transition: transform 0.2s ease;
}

/* Bouton déclencheur d'un menu déroulant : le navigateur centre le texte d'un
   <button> par défaut, ce qui désaligne le libellé de la flèche par rapport aux
   liens voisins. On rétablit l'alignement à gauche et on rejette la flèche en
   fin de libellé, y compris quand la navigation bascule en colonne. */
.nav-toggle {
  justify-content: space-between;
  text-align: left;
}

.nav-cta { margin-left: var(--sp-3); }

/* Menus déroulants */

.has-dropdown {
  position: relative;
}

.dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 60;
  min-width: 230px;
  padding: var(--sp-2);
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}

.dropdown a {
  display: block;
  padding: 0.5rem 0.75rem;
  border-radius: var(--r-sm);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--c-ink);
}

.dropdown a:hover {
  background: var(--c-primary-soft);
  color: var(--c-primary-strong);
  text-decoration: none;
}

@media (hover: hover) and (min-width: 1025px) {
  .has-dropdown:hover .dropdown,
  .has-dropdown:focus-within .dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .has-dropdown:hover .nav-link .icon,
  .has-dropdown:focus-within .nav-link .icon {
    transform: rotate(180deg);
  }

  /* Pont invisible : empêche la fermeture du sous-menu quand la souris
     traverse l'espace entre le bouton et le sous-menu */
  .dropdown::before {
    content: "";
    position: absolute;
    top: -10px;
    left: -12px;
    right: -12px;
    height: 10px;
  }
}

.has-dropdown.is-open .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.has-dropdown.is-open > .nav-link .icon {
  transform: rotate(180deg);
}

/* Bouton burger + panneau mobile */

.nav-burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  background: var(--c-bg);
  color: var(--c-ink);
  cursor: pointer;
}

@media (max-width: 1024px) {
  .nav-burger { display: inline-flex; }

  /* Panneau accroché sous l'en-tête collant (le backdrop-filter de
     .site-header crée un bloc contenant : position:fixed n'y fonctionne pas) */
  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 40;
    padding: var(--sp-5) clamp(1.25rem, 4vw, 2rem) var(--sp-8);
    background: var(--c-bg);
    border-top: 1px solid var(--c-border);
    overflow-y: auto;
    max-height: calc(100vh - 72px);
    max-height: calc(100dvh - 72px);
    min-height: calc(100vh - 72px);
    min-height: calc(100dvh - 72px);
    display: none;
  }

  body.nav-open .site-nav { display: block; }
  body.nav-open { overflow: hidden; }

  .nav-list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .nav-list > li { border-bottom: 1px solid var(--c-border); }

  .nav-link {
    width: 100%;
    justify-content: space-between;
    padding: 0.9375rem 0.25rem;
    font-size: 1.0625rem;
    border-radius: 0;
  }

  .dropdown {
    position: static;
    min-width: 0;
    border: 0;
    box-shadow: none;
    padding: 0 0 var(--sp-3);
    opacity: 1;
    visibility: visible;
    transform: none;
    display: none;
  }

  .has-dropdown.is-open .dropdown { display: block; }

  .dropdown a {
    padding: 0.5rem 0.9375rem;
    color: var(--c-body);
  }

  .nav-cta { margin: var(--sp-5) 0 0; }
  .nav-cta .btn { width: 100%; }
}

/* ---------- Composants : badge, carte, feature, stats ---------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0.375rem 0.875rem;
  border: 1px solid var(--c-border);
  border-radius: var(--r-pill);
  background: var(--c-bg);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--c-ink);
}

.badge--accent {
  border-color: transparent;
  background: var(--c-accent-soft);
  color: var(--c-accent-strong);
}

.badge--primary {
  border-color: transparent;
  background: var(--c-primary-soft);
  color: var(--c-primary-strong);
}

.card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-6);
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}

.card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
  border-color: var(--c-border-strong);
}

.card--flat:hover {
  transform: none;
  box-shadow: var(--shadow-sm);
}

.card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: var(--r-md);
  background: var(--c-primary-soft);
  color: var(--c-primary);
}

.card-icon .icon { width: 26px; height: 26px; }

.card-icon--accent {
  background: var(--c-accent-soft);
  color: var(--c-accent-strong);
}

/* Carte posée sur une section --dark : la surface blanche devient un voile
   translucide et l'icône passe au vert clair, sinon illisible sur le bleu
   nuit. Vivre ici, et non dans une feuille de gabarit, évite d'avoir deux
   définitions de la même carte (R11). Le texte décroche aussi d'un cran :
   trois colonnes sur fond sombre supportent moins de matière. Le survol
   soulève la carte même en variante plate, dont la règle plate neutralise
   le déplacement. */
.section--dark .card {
  background: var(--c-on-dark-surface);
  border-color: var(--c-on-dark-line);
  box-shadow: none;
}

.section--dark .card:hover {
  border-color: var(--c-on-dark-line-strong);
  box-shadow: none;
  transform: translateY(-3px);
}

.section--dark .card h3 { font-size: 1.0625rem; }

.section--dark .card p {
  font-size: 0.9375rem;
  margin: 0;
}

.section--dark .card-icon {
  background: var(--c-on-dark-accent-wash);
  color: var(--c-on-dark-accent);
}

/* Visuel d'une carte (capture d'écran, photo) : il occupe la tête de la carte
   et sa légende, ce qui le rattache au texte qu'il illustre. Une galerie
   d'images posée plus bas, à côté d'un autre texte, se lisait comme un décor
   détaché des fonctionnalités qu'elle montrait. */
.card-media {
  margin: 0;
}

.card-media img {
  width: 100%;
  /* Borne explicite (R18) : même sur un large écran, la capture reste à
     l'échelle d'un écran de téléphone, pas d'une affiche. */
  max-width: var(--media-max);
  height: auto;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
}

.card-media figcaption {
  margin-top: var(--sp-2);
  font-size: 0.875rem;
  color: var(--c-muted);
}

.card h3 { margin: 0; }
.card p { margin: 0; }

.card-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: auto;
  font-weight: 600;
  font-size: 0.9375rem;
}

.card-link .icon { transition: transform 0.2s ease; }

/* Bouton unique, centré sous un contenu (fin de section, renvoi vers une
   autre offre). La marge le détache du bloc qui le précède : centré, il
   viendrait sans cela toucher la grille au-dessus. Les marges adjacentes
   fusionnent, donc un en-tête de section qui descend déjà à 3rem garde
   son espacement. */
.lien-centre {
  margin-top: var(--sp-6);
}

.card-link:hover .icon { transform: translateX(4px); }

.feature-list {
  display: grid;
  gap: var(--sp-2);
  margin: 0;
}

.feature-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
}

.feature-list .icon {
  margin-top: 0.2em;
  color: var(--c-accent);
}

/* Le texte d'une puce est enveloppé dans un `<span>`, et c'est nécessaire :
   `.feature-list li` est un conteneur flex, or en flex chaque élément enfant
   devient un item. Un `<strong>` ou un `<a>` placé au milieu de la phrase
   s'affichait donc à côté d'elle, décalé, au lieu d'être dans le flux du texte.
   `min-width: 0` autorise la ligne à se resserrer sur un mot long comme une
   URL, qui ne se coupe pas seul. */
.feature-list-texte {
  min-width: 0;
  overflow-wrap: anywhere;
}

.section--dark .feature-list .icon { color: var(--c-on-dark-accent); }

.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
}

@media (max-width: 640px) {
  .stats { grid-template-columns: 1fr; }
}

.stat {
  text-align: center;
  padding: var(--sp-5);
}

.stat-value {
  display: block;
  font-size: clamp(2rem, 1.5rem + 2vw, 2.75rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--c-primary);
  line-height: 1.1;
}

.stat-label {
  display: block;
  margin-top: var(--sp-2);
  font-size: 0.9375rem;
}

/* ---------- Page simple : fil d'Ariane + en-tête ---------- */

.page-hero {
  padding: clamp(3rem, 2rem + 4vw, 5rem) 0 clamp(2.5rem, 2rem + 2vw, 3.5rem);
  background: linear-gradient(180deg, var(--c-primary-soft) 0%, var(--c-bg) 100%);
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
  font-size: 0.875rem;
  color: var(--c-muted);
}

.breadcrumb a { color: var(--c-muted); font-weight: 500; }
.breadcrumb a:hover { color: var(--c-primary); }
.breadcrumb [aria-current] { color: var(--c-ink); font-weight: 600; }

/* ---------- Hero : actions, réassurance, mention de principe ----------
   Ces trois blocs sont communs aux deux formes de hero (l'atterrissage et
   l'en-tête de page interne) : ils sont donc des composants, et vivent ici
   plutôt que dans une feuille de gabarit. */

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
}

/* Réassurance : les garanties se détachent du bouton par un filet et une
   marge large. Sans cela, la rangée de pastilles se lit comme une seconde
   rangée d'actions, à quelques pixels du CTA. */
.hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-7);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--c-border);
}

/* La mention rappelle qu'un principe (privacy by design) vaut pour tous les
   produits, et non pour un seul. Elle se place sous le chapeau, avant les
   boutons : c'est l'argument, le bouton vient ensuite. */
.hero-mention {
  margin: var(--sp-5) 0 var(--sp-6);
}

/* Rangée de boutons en fin de contenu (section, colonne de texte) : même
   composition que le hero, sans la marge d'air propre à l'écran d'accueil. */
.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  margin: var(--sp-6) 0 0;
}

/* ---------- Corps de document (pages légales) ----------
   Les cinq documents juridiques (mentions légales, CGU, CGV, confidentialité,
   réglementation) partagent le même bloc `articles`, donc le même conteneur
   `.doc`. C'est ici qu'est réglé leur rythme commun.

   Sans ces règles, le reset global alignait tout sur le même 1rem : le titre
   d'un article ne se distinguait plus du paragraphe qui le suivait, et une
   liste se collait au texte précédent sans un millimètre d'espace. */
.doc > h2:first-child {
  margin-top: 0;
}

.doc h2 {
  font-size: 1.5rem;
  line-height: 1.3;
  /* Un titre d'article s'annonce : beaucoup d'air au-dessus, peu en dessous.
     C'est ce qui manquait pour lire la structure d'un coup d'œil. */
  margin: var(--sp-8) 0 var(--sp-3);
  scroll-margin-top: 5rem;
}

.doc p {
  margin: 0 0 var(--sp-3);
}

/* Le reset global supprime les puces (`.feature-list` les remplace par des
   coches vertes). Un document juridique, lui, a des listes : sans marqueur ni
   retrait, elles se collaient au paragraphe précédent, sans un millimètre
   d'espace. */
.doc ul {
  margin: var(--sp-3) 0;
  padding-left: var(--sp-5);
  list-style: disc;
}

/* Une liste est un bloc, pas une suite de phrases. Elle se détache donc du
   paragraphe qui l'introduit (« Say See Show permet : », « Collecte
   minimale : ») et du paragraphe qui la suit. Sans cette règle, l'espace
   autour d'une liste valait celui d'un paragraphe à un autre : le document
   semblait alors rythmé au hasard, selon que la même phrase était mise en
   liste ou laissée en prose. Trois niveaux, et un seul : 3rem entre deux
   paragraphes, 1,5rem autour d'une liste, 4rem avant un titre d'article. */
.doc p + ul,
.doc ul + p {
  margin-top: var(--sp-5);
}

/* Énumération de clauses numérotées (4.1, 4.2…) : le numéro fait partie de la
   phrase, une puce ferait doublon. Retrait suspendu : la première ligne de
   chaque clause commence au ras du texte des autres, les lignes suivantes
   s'alignent en dessous. */
.doc .clauses {
  padding-left: var(--sp-6);
  list-style: none;
}

.doc .clauses li {
  padding-left: var(--sp-5);
  text-indent: calc(-1 * var(--sp-5));
}

.doc li + li {
  margin-top: var(--sp-2);
}

.doc li::marker {
  color: var(--c-primary);
}

/* Mention de fin de document (copyright). Écrit au même niveau que le texte,
   elle se lisait comme un dernier paragraphe de contenu, collée à la liste qui
   la précède. Un filet la détache : c'est la signature du document, pas une
   phrase de plus. */
.doc .form-note {
  margin-top: var(--sp-7);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--c-border);
}

/* ---------- Tableau comparatif ---------- */

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  background: var(--c-bg);
}

.table-compare {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
  min-width: 640px;
}

.table-compare th,
.table-compare td {
  padding: var(--sp-4) var(--sp-5);
  text-align: left;
  border-bottom: 1px solid var(--c-border);
}

.table-compare thead th {
  background: var(--c-bg-alt);
  color: var(--c-ink);
  font-weight: 600;
  font-size: 0.875rem;
}

.table-compare tbody th {
  font-weight: 500;
  color: var(--c-ink);
}

.table-compare td:nth-child(2) {
  color: var(--c-accent-strong);
  font-weight: 600;
  background: var(--c-accent-wash);
}

.table-compare tbody tr:last-child th,
.table-compare tbody tr:last-child td {
  border-bottom: 0;
}

/* ---------- FAQ (accordéons natifs) ---------- */

.faq-list {
  display: grid;
  gap: var(--sp-3);
  max-width: 820px;
}

.faq-item {
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-bg);
  overflow: hidden;
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  font-weight: 600;
  color: var(--c-ink);
  cursor: pointer;
  list-style: none;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary .icon {
  color: var(--c-primary);
  transition: transform 0.2s ease;
}

.faq-item[open] summary .icon { transform: rotate(180deg); }

.faq-item .faq-body {
  padding: 0 var(--sp-5) var(--sp-5);
}

/* ---------- Formulaires ---------- */

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-5);
}

@media (max-width: 640px) {
  .form-grid { grid-template-columns: 1fr; }
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.field--full { grid-column: 1 / -1; }

.field label {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--c-ink);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  background: var(--c-bg);
  font-family: inherit;
  font-size: 1rem;
  color: var(--c-ink);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.field textarea { resize: vertical; min-height: 150px; }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px var(--c-primary-soft);
}

.form-note {
  font-size: 0.875rem;
  color: var(--c-muted);
}

/* Antispam : champ honeypot masqué (aucun style inline) */
.field-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------- Bande CTA ---------- */

.cta-band {
  padding: clamp(3rem, 2rem + 4vw, 5rem) clamp(1.5rem, 4vw, 4rem);
  border-radius: var(--r-lg);
  background:
    radial-gradient(120% 160% at 100% 0%, var(--c-accent-glow) 0%, var(--c-accent-fade) 55%),
    var(--c-primary-deep);
  color: var(--c-dark-text);
  text-align: center;
}

.cta-band h2 { color: var(--c-on-dark); }

.cta-band .btn-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
}

/* Orientation par besoin : « Discuter en privé », « Envoyer un fichier »…
   Sur fond bleu nuit, des liens colorés se lisaient bleu sur bleu : ce sont
   donc de vrais boutons blancs, avec le nom de l'outil en dessous. */
.cta-choix {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-3);
  max-width: 44rem;
  margin: var(--sp-6) auto 0;
  padding: 0;
  list-style: none;
}

@media (max-width: 640px) {
  .cta-choix { grid-template-columns: 1fr; }
}

.cta-choix-lien {
  position: relative;
  display: block;
  padding: var(--sp-4) var(--sp-5) var(--sp-5);
  background: var(--c-bg);
  border-radius: var(--r-md);
  color: var(--c-ink);
  font-size: 1.0625rem;
  font-weight: 600;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* le nom de l'outil, en second ligne : le choix se fait par l'usage */
.cta-choix-outil {
  display: block;
  padding-right: var(--sp-6);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--c-muted);
}

/* la flèche verte, en bas à droite, alignée sur le nom de l'outil */
.cta-choix-lien .icon {
  position: absolute;
  right: var(--sp-4);
  bottom: calc(var(--sp-5) + 2px);
  width: 20px;
  height: 20px;
  color: var(--c-accent-strong);
  transition: transform 0.2s ease;
}

.cta-choix-lien:hover {
  color: var(--c-ink);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.cta-choix-lien:hover .icon {
  transform: translateX(4px);
}

/* ---------- Pied de page ---------- */

.site-footer {
  background: var(--c-dark-bg);
  color: var(--c-dark-text);
  padding: var(--sp-8) 0 var(--sp-6);
  font-size: 0.9375rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  gap: var(--sp-6);
  padding-bottom: var(--sp-6);
  border-bottom: 1px solid var(--c-on-dark-hairline);
}

@media (max-width: 1024px) {
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; }
}

.footer-logo {
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--c-on-dark);
  margin-bottom: var(--sp-3);
}

.footer-logo .footer-logo-accent { color: var(--c-on-dark-accent-strong); }

.footer-brand p { max-width: 30ch; }

.footer-col h3 {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-on-dark-muted);
  margin-bottom: var(--sp-4);
}

.footer-col li { margin-bottom: var(--sp-2); }

.footer-col a {
  color: var(--c-dark-text);
}

.footer-col a:hover {
  color: var(--c-on-dark);
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sp-3);
  padding-top: var(--sp-5);
  font-size: 0.875rem;
  color: var(--c-on-dark-muted);
}

.footer-bottom p { margin: 0; }

/* ---------- Cartes produits et solutions (compactes) ---------- */

.product-card .feature-list {
  margin-top: var(--sp-2);
  font-size: 0.9375rem;
}

.product-card .card-link {
  margin-top: var(--sp-4);
}

.solution-card {
  padding: var(--sp-5);
  gap: var(--sp-2);
}

.solution-card h3 { font-size: 1.0625rem; }

.solution-card p {
  font-size: 0.9375rem;
  margin: 0;
}

/* Marque apposée sur une carte (label « Privacy by design »). La carte est
   déjà une colonne flex : la marge automatique colle la marque en bas, juste
   au-dessus du lien de suite, qui n'est plus repoussé au fond de la carte.
   La marque est du texte, pas un lien : elle constate l'adhésion, elle ne
   remplace pas le lien « Découvrir ». */
.card-pastille {
  margin-top: auto;
}

.card-pastille + .card-link {
  margin-top: var(--sp-3);
}

/* ---------- Illustrations, captures et vignettes ---------- */

/* Une illustration est bornée par son rôle, pas étirée à la largeur du
   conteneur : `--media-max` évite qu'une image verticale occupe l'écran.
   Variantes : --portrait (photo), --phone (capture d'application), --icon,
   --label (logo de label), --wide (seule façon de dépasser la borne).

   `width: 100%` n'est pas cosmétique : l'image Portable Network Graphic
   vaut 100 % du parent, et un parent de largeur automatique placé dans une
   colonne de grille voit alors sa largeur résoudre sur la valeur par défaut
   d'un élément remplacé (300 px) au lieu de fills la colonne. D'où une
   illustration qui rétrécit à 300 px dans une grille. */
.figure {
  width: 100%;
  max-width: var(--media-max);
  margin: 0 auto;
}

.figure img {
  width: 100%;
  height: auto;
  border-radius: var(--r-lg);
}

.figure figcaption {
  margin-top: var(--sp-3);
  font-size: 0.9375rem;
  color: var(--c-muted);
}

.figure--wide {
  max-width: 100%;
}

.figure--portrait {
  max-width: var(--media-portrait);
}

/* Logo de label : petit, aligné sur le texte du hero, sans arrondi (le PNG a
   un fond transparent, l'arrondi ne servirait qu'à le rogner). */
.figure--label {
  max-width: var(--media-label);
  margin: 0 0 var(--sp-5);
}

.figure--label img {
  border-radius: 0;
}

.figure--icon {
  max-width: var(--media-icon);
}

/* Capture d'écran d'application : limitée à la largeur d'un téléphone et
   présentée dans un cadre sombre, pour qu'elle se lise comme une maquette. */
.figure--phone {
  max-width: var(--media-phone);
}

.figure--phone img {
  border-radius: var(--r-md);
  box-shadow:
    0 0 0 var(--media-frame) var(--c-ink),
    var(--shadow-md);
}

.figure--soft img {
  box-shadow: var(--shadow-sm);
}

/* Les captures d'une même rangée n'ont pas le même format : deux écrans de
   téléphone en portrait et un écran de réglages en paysage. Étirées, leurs
   figures finissent à des hauteurs différentes et les légendes se retrouvent
   dispersées, comme désaccouplées de leur image. Aligner sur le bas rend la
   rangée lisible : le bas de chaque capture est au même niveau, et les
   légendes repartent sur une ligne commune, chacune juste sous sa capture. */
.shot-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: end;
  gap: var(--sp-5);
}

.shot {
  margin: 0;
  text-align: center;
}

.shot img {
  width: 100%;
  max-width: 250px;
  height: auto;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
}
.shot figcaption {
  margin-top: var(--sp-3);
  font-size: 0.9375rem;
  color: var(--c-muted);
}

/* Captures d'écran illustrant une étape (FAQ) */
.shot-inline {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--sp-4);
  margin-top: var(--sp-4);
}

.shot-inline img {
  width: 100%;
  height: auto;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
}

/* Vignette insérée dans une .feature-list (étapes illustrées de la FAQ) */
.feature-list .shot-inline-item {
  display: block;
  margin-top: var(--sp-2);
}

.feature-list .shot-inline-item img {
  width: 190px;
  max-width: 100%;
  height: auto;
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-sm);
}

.shot-badge {
  display: block;
  width: 100%;
  max-width: 180px;
  height: auto;
  margin: var(--sp-2) auto 0;
}

/* ---------- Étapes numérotées ---------- */

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
  list-style: none;
  padding: 0;
  counter-reset: step;
}

.steps li {
  padding: var(--sp-6);
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}

.steps li::before {
  counter-increment: step;
  content: counter(step);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-pill);
  background: var(--c-primary);
  color: var(--c-on-dark);
  font-weight: 700;
}

.steps h3 {
  margin: var(--sp-4) 0 var(--sp-2);
  font-size: 1.0625rem;
}

.steps p {
  margin: 0;
}

/* Étape illustrée : la capture est séparée du texte qui la présente. Sans
   cette marge, le cadre de l'appareil (`.figure--phone`) vient toucher la
   dernière ligne du paragraphe et donne l'impression de la barrer. Elle est
   généreuse parce que le cadre de l'appareil déborde de `--media-frame` :
   ce que le lecteur voit comme un bord n'est pas le bord de l'image. */
.steps .figure {
  margin-top: var(--sp-6);
}

@media (max-width: 960px) {
  .steps { grid-template-columns: 1fr; }
  .shot-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .shot-grid { grid-template-columns: 1fr; }
}

/* ---------- Témoignages ---------- */

.quote-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
}

.quote {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-6);
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}

.quote p {
  margin: 0;
  color: var(--c-ink);
}

.quote cite {
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 600;
  color: var(--c-muted);
}

@media (max-width: 960px) {
  .quote-list { grid-template-columns: 1fr; }
}

/* Variante « colonne » : les rectangles s'empilent, centrés et plus larges
   qu'ils ne sont hauts. Utile quand la page affiche déjà plusieurs grilles
   de trois cartes, dont la répétition du rythme s'y lit mieux. */
.quote-list--col {
  grid-template-columns: 1fr;
  max-width: 780px;
  margin-inline: auto;
  gap: var(--sp-4);
}

/* L'auteur passe à droite du témoignage : le bloc devient une ligne, pas une
   colonne, et le texte garde toute la largeur disponible. */
.quote--ligne {
  flex-direction: row;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-5);
}

.quote--ligne p {
  flex: 1;
}

.quote--ligne cite {
  flex-shrink: 0;
  text-align: right;
}

@media (max-width: 640px) {
  .quote--ligne {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-3);
  }

  .quote--ligne cite { text-align: left; }
}

/* ---------- Caractéristiques techniques ---------- */

.spec-list {
  display: grid;
  gap: var(--sp-3);
  margin: 0;
}

.spec-list > div {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--c-border);
}

.spec-list dt {
  font-weight: 600;
  color: var(--c-ink);
}

.spec-list dd {
  margin: 0;
  text-align: right;
}

/* ---------- Encart d'information ---------- */

.notice {
  display: flex;
  gap: var(--sp-3);
  margin-top: var(--sp-6);      /* détachement du contenu qui le précède */
  margin-bottom: var(--sp-5);   /* et de ce qui le suit : galerie, bouton */
  padding: var(--sp-5);
  background: var(--c-primary-soft);
  border: 1px solid transparent;
  border-left: 3px solid var(--c-primary);
  border-radius: var(--r-md);
}

.notice .icon {
  color: var(--c-primary);
}

.notice p {
  margin: 0;
}

/* Accroche en tête d'encart : elle passe sur sa propre ligne, le texte
   dessous. Sans ce `display`, le gras et la phrase qui suit se collent. */
.notice-titre {
  display: block;
  margin-bottom: var(--sp-2);
}

.notice--accent {
  background: var(--c-accent-soft);
  border-left-color: var(--c-accent);
}

.notice--accent .icon { color: var(--c-accent-strong); }

/* ---------- Coordonnées masquées (R21) ---------- */

/* Le texte est écrit par main.js à partir de data-obfusque : le source ne
   contient que de l'hexadécimal. white-space évite qu'un numéro de téléphone
   soit coupé en fin de ligne. */
.contact-obfusque {
  white-space: nowrap;
}

/* ---------- Logos partenaires ---------- */

.logo-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--sp-6) var(--sp-7);
  list-style: none;
  padding: 0;
}

.logo-row img {
  width: auto;
  height: 68px;
  opacity: 0.7;
  filter: grayscale(1);
  transition: opacity 0.2s ease, filter 0.2s ease;
}

.logo-row li:hover img {
  opacity: 1;
  filter: none;
}

/* ---------- Équipe ---------- */

.person-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-5);
}

.person {
  padding: var(--sp-5);
  text-align: center;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}

.person img {
  width: 112px;
  height: 112px;
  border-radius: var(--r-pill);
  object-fit: cover;
}

.person h3 {
  margin: var(--sp-4) 0 var(--sp-1);
  font-size: 1.0625rem;
}

.person p {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--c-muted);
}

@media (max-width: 960px) {
  .person-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .person-grid { grid-template-columns: 1fr; }
}

/* ---------- Lignes produit : texte et illustration, en alternance ---------- */

/* Quand chaque solution a son visuel, une rangée de cartes devient
   monotone : on alterne texte et illustration, ce qui donne le rythme
   et fait comprendre l'usage d'un coup d'œil. */

.produits {
  display: grid;
  gap: var(--sp-8);
  margin: 0;
  padding: 0;
  list-style: none;
}

.produit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2rem, 4vw, 4rem);
}

.produit--inverse .produit-texte { order: 2; }
.produit--inverse .figure { order: 1; }

.produit .produit-texte .lead {
  max-width: 52ch;
}

.produit .produit-texte .btn {
  margin-top: var(--sp-4);
}

/* Le visuel occupe sa colonne entière : borné à 480 px, il paraîtrait
   minuscule à côté d'un texte de six lignes. */
.produit .figure--produit {
  max-width: var(--media-produit);
  width: 100%;
}

/* La légende est une phrase courte suspendue sous un large visuel : elle est
   centrée sur l'illustration. Alignée à gauche, elle se lit comme le début
   d'un paragraphe et semble décaler le visuel vers la gauche. */
.produit .figure figcaption {
  text-align: center;
}

@media (max-width: 800px) {
  .produit { grid-template-columns: 1fr; }
  .produit .produit-texte, .produit--inverse .produit-texte { order: 2; }
  .produit .figure, .produit--inverse .figure { order: 1; }
  .produit .figure--produit { max-width: var(--media-max); }
}

/* ---------- Presse ---------- */
.press-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
}

.press-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.press-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.press-card img {
  width: 100%;
  height: 190px;
  object-fit: cover;
}

.press-body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-5);
}

.press-source {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-primary);
}

.press-body h3 {
  margin: 0;
  font-size: 1.0625rem;
}

.press-body p {
  margin: 0;
  font-size: 0.9375rem;
}

.press-date {
  font-size: 0.875rem;
  color: var(--c-muted);
}

@media (max-width: 960px) {
  .press-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .press-grid { grid-template-columns: 1fr; }
}

/* ---------- Apparition au défilement ---------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
  }
}