/* =========================================================
   CYBERXL — Feuille de style globale
   Tokens de la charte graphique (couleurs, polices, dégradés)
   ========================================================= */

/* ---------- Polices locales ---------- */
@font-face {
  font-family: "Barlow";
  src: url("../polices/TYPOS-EDITORIALES/Barlow/Barlow-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Barlow";
  src: url("../polices/TYPOS-EDITORIALES/Barlow/Barlow-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Barlow";
  src: url("../polices/TYPOS-EDITORIALES/Barlow/Barlow-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Barlow";
  src: url("../polices/TYPOS-EDITORIALES/Barlow/Barlow-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Barlow";
  src: url("../polices/TYPOS-EDITORIALES/Barlow/Barlow-Black.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Instrument Serif";
  src: url("../polices/TYPOS-BANDEAUX-COM/InstrumentSerif-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("../polices/TYPOS-BANDEAUX-COM/InstrumentSerif-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* ---------- Tokens de la charte ---------- */
:root {
  /* Couleur principale */
  --c-principale: #010F40;

  /* Couleurs d'accent */
  --c-accent-jaune: #FFE51C;
  --c-accent-bleu:  #504FD8;

  /* Couleurs secondaires */
  --c-secondaire-violet: #BB87DE;
  --c-secondaire-corail: #FF6A4E;

  /* Teintes (fonds clairs) */
  --c-teinte-bleu:   #EAF8FF;
  --c-teinte-violet: #F2F1FD;
  --c-teinte-peche:  #FFE9D9;

  /* Nuancier — gamme violets / bleus */
  --c-violet-100: #C5BFEF;
  --c-violet-300: #8C7FDF;
  --c-violet-500: #504FD8;
  --c-violet-700: #3E3ED4;

  /* Nuancier — gamme corail / orange */
  --c-corail-300: #FF6A4E;
  --c-corail-500: #E8471F;

  /* Nuancier — gamme rose / lilas */
  --c-rose-100:  #FFB0E1;
  --c-lilas-300: #C395E2;
  --c-lilas-500: #BB87DE;
  --c-bleu-ciel: #9CD6EA;

  /* Nuancier — gamme pêche */
  --c-peche-300: #FFC69E;
  --c-peche-500: #F49D7A;

  /* Neutres */
  --c-blanc: #FFFFFF;
  --c-noir:  #010F40;
  --c-texte-soft:   rgba(255, 255, 255, 0.72);
  --c-bordure-soft: rgba(255, 255, 255, 0.14);

  /* Dégradés de la charte */
  --g-corail: linear-gradient(90deg, #FF6A4E 0%, #FFC69E 100%);
  --g-feu:    linear-gradient(90deg, #E8471F 0%, #FFB0E1 100%);
  --g-violet: linear-gradient(90deg, #504FD8 0%, #C5BFEF 100%);
  --g-ciel:   linear-gradient(90deg, #9CD6EA 0%, #C395E2 100%);

  /* Dégradé décoratif (barre de footer) */
  --g-footer: linear-gradient(90deg, #BB87DE 0%, #FFB0E1 50%, #BB87DE 100%);

  /* Typographies */
  --f-titre:    "Instrument Serif", Georgia, serif;
  --f-courante: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Rythme / mesure */
  --largeur-max: 1240px;
  --radius-s: 8px;
  --radius-m: 14px;
  --radius-l: 24px;
}

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

html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--f-courante);
  font-size: 16px;
  line-height: 1.55;
  color: var(--c-principale);
  background: var(--c-blanc);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
  font-family: var(--f-courante);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 0.6em;
}

a { color: inherit; }

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

/* =========================================================
   Bouton « Remonter en haut » — injecté par composants.js
   ========================================================= */
#cxl-back-to-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 50%;
  background: var(--c-accent-bleu);
  color: var(--c-blanc);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px rgba(1, 15, 64, 0.25);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s, background-color .2s ease;
  z-index: 40;
}
#cxl-back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
#cxl-back-to-top:hover {
  background: var(--c-violet-700);
}
#cxl-back-to-top svg {
  width: 22px;
  height: 22px;
  display: block;
}

@media (max-width: 720px) {
  #cxl-back-to-top {
    right: 16px;
    bottom: 16px;
    width: 44px;
    height: 44px;
  }
}

/* QR code WhatsApp sur la page contact */
.qr-whatsapp {
  width: 160px;
  height: 160px;
  padding: 10px;
  background: var(--c-blanc);
  border: 1px solid rgba(1, 15, 64, 0.10);
  border-radius: 12px;
  margin: 12px 0 0;
}

/* Utilitaire : visible pour lecteurs d'écran uniquement */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* =========================================================
   Conteneurs et helpers de mise en page
   ========================================================= */
.container {
  max-width: var(--largeur-max);
  margin: 0 auto;
  padding: 0 48px;
}

@media (max-width: 720px) {
  .container { padding: 0 24px; }
}

/* =========================================================
   Typographie — paragraphes de contenu en justifié
   (les blocs « display » : hero lead, citation, etc.
    gardent leur alignement naturel grâce à des règles propres)
   ========================================================= */
.bloc-presentation__content p,
.bloc-integre__content p,
.bloc-services__content p,
.bloc-contact__content p,
.carte p,
.equipe-card__bio,
.faq-item__answer p {
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
}

/* =========================================================
   Boutons
   ========================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 24px;
  border-radius: 999px;
  font-family: var(--f-courante);
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.btn:hover { transform: translateY(-1px); }

.btn--primaire {
  background: var(--c-accent-jaune);
  color: var(--c-principale);
}
.btn--primaire:hover {
  box-shadow: 0 6px 20px rgba(255, 229, 28, 0.45);
}

.btn--sombre {
  background: var(--c-principale);
  color: var(--c-blanc);
}

.btn--violet {
  background: var(--c-accent-bleu);
  color: var(--c-blanc);
}
.btn--violet:hover {
  box-shadow: 0 6px 20px rgba(80, 79, 216, 0.4);
}

/* =========================================================
   Hero — photo plein cadre + header en superposition
   ========================================================= */
.hero {
  position: relative;
  min-height: 560px;
  color: var(--c-blanc);
  background-color: var(--c-principale);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
  /* pas d'isolation : le hero ne doit PAS créer de stacking context, sinon
     le <cxl-header> fixed est confiné au hero et passe sous les sections
     qui suivent (bandeaux pleine largeur notamment) */
}

/* Voile sombre pour garantir la lisibilité du texte par-dessus la photo */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(1, 15, 64, 0.65) 0%,
    rgba(1, 15, 64, 0.35) 60%,
    rgba(1, 15, 64, 0.15) 100%
  );
  z-index: 1;
}

.hero__inner {
  position: relative;
  z-index: 2;
  max-width: var(--largeur-max);
  margin: 0 auto;
  padding: 140px 48px 88px;
}

.hero__title {
  margin: 0 0 20px;
  max-width: 760px;
  font-family: var(--f-courante);
  font-weight: 700;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--c-blanc);
}

.hero__lead {
  margin: 0 0 32px;
  max-width: 640px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.55;
  color: var(--c-blanc);
  opacity: 0.95;
}

/* Liste à puces dans le hero (page urgence) */
.hero__list {
  margin: 0 0 32px;
  padding-left: 22px;
  max-width: 640px;
  list-style: disc;
  color: var(--c-blanc);
  font-size: 15px;
  line-height: 1.6;
}
.hero__list li {
  margin-bottom: 6px;
}
.hero__list li::marker {
  color: var(--c-blanc);
}

@media (max-width: 720px) {
  .hero { min-height: 480px; }
  .hero__inner { padding: 110px 24px 64px; }
}

/* Hero minimal pour pages texte (mentions légales, CGV, etc.) */
.hero--legal {
  min-height: 220px;
  background-color: var(--c-principale);
  background-image: none !important;
}
.hero--legal::before { display: none; }
.hero--legal .hero__inner { padding: 110px 48px 40px; }
@media (max-width: 720px) {
  .hero--legal { min-height: 180px; }
  .hero--legal .hero__inner { padding: 100px 24px 28px; }
}

/* =========================================================
   Bloc texte — pages légales (Mentions, CGV, RGPD…)
   ========================================================= */
.bloc-texte {
  padding: 64px 0 96px;
}
.bloc-texte > .container > h2 {
  font-family: var(--f-courante);
  font-weight: 700;
  font-size: clamp(1.125rem, 2vw, 1.375rem);
  color: var(--c-principale);
  margin: 40px 0 14px;
}
.bloc-texte > .container > h2:first-child {
  margin-top: 0;
}
.bloc-texte p,
.bloc-texte ul {
  max-width: 820px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--c-principale);
  margin: 0 0 14px;
}
.bloc-texte ul {
  padding-left: 22px;
}
.bloc-texte ul li { margin-bottom: 4px; }
.bloc-texte a {
  color: var(--c-accent-bleu);
  text-decoration: underline;
}

/* =========================================================
   Bande citation (fond pâle bleu)
   ========================================================= */
.bande-citation {
  background: var(--c-teinte-bleu);
  padding: 72px 48px;
  text-align: center;
}
.bande-citation p {
  margin: 0;
  font-family: var(--f-courante);
  font-weight: 700;
  font-size: clamp(1.125rem, 2vw, 1.5rem);
  color: var(--c-principale);
  line-height: 1.5;
}
.bande-citation p + p { margin-top: 1em; }

@media (max-width: 720px) {
  .bande-citation { padding: 56px 24px; }
}

/* =========================================================
   Bloc de présentation — image à gauche + texte à droite
   ========================================================= */
.bloc-presentation {
  padding: 96px 0;
}
.bloc-presentation__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.bloc-presentation__media img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-l);
  display: block;
  object-fit: cover;
}
.bloc-presentation__content h2 {
  margin: 0 0 20px;
  font-family: var(--f-courante);
  font-weight: 700;
  font-size: clamp(1.375rem, 2.2vw, 1.75rem);
  line-height: 1.25;
  color: var(--c-principale);
}
.bloc-presentation__content p {
  margin: 0 0 1em;
  color: var(--c-principale);
  font-size: 15px;
  line-height: 1.6;
}
.bloc-presentation__content p:last-child { margin-bottom: 0; }
.bloc-presentation__content strong { font-weight: 700; }

.bloc-presentation__content ul {
  margin: 0 0 1em;
  padding-left: 22px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--c-principale);
}
.bloc-presentation__content ul li { margin-bottom: 6px; }
.bloc-presentation__content ul ul {
  margin-top: 6px;
  margin-bottom: 0;
  padding-left: 22px;
}
.bloc-presentation__content ol {
  margin: 0 0 1.2em;
  padding-left: 22px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--c-principale);
}
.bloc-presentation__content ol li { margin-bottom: 14px; }
.bloc-presentation__content .btn { margin-top: 16px; }

/* Modifier : fond pêche pleine largeur */
.bloc-presentation--peche {
  background: var(--c-teinte-peche);
}

/* Utilitaire : titre en couleur violet/accent */
.titre-violet { color: var(--c-accent-bleu); }

/* Bloc bouton centré (transition entre 2 sections) */
.cta-centre {
  padding: 32px 0 64px;
  text-align: center;
}

/* =========================================================
   Bloc services mini — titre centré + 4 mini-cards texte
   (pas de fond, juste titre bold + paragraphe)
   ========================================================= */
.bloc-services-mini {
  padding: 32px 0 80px;
}
.bloc-services-mini__titre {
  font-family: var(--f-courante);
  font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  text-align: center;
  color: var(--c-principale);
  margin: 0 0 56px;
}
.bloc-services-mini__grille {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
.bloc-services-mini__intro {
  max-width: 720px;
  margin: -32px auto 48px;
  font-size: 14px;
  line-height: 1.6;
  text-align: center;
  color: var(--c-principale);
}

/* Modifier : fond bleu pâle pleine largeur */
.bloc-services-mini--bleu {
  background: var(--c-teinte-bleu);
}
/* Modifier : titres (main + cards) en violet */
.bloc-services-mini--violet .bloc-services-mini__titre,
.bloc-services-mini--violet .service-mini__titre {
  color: var(--c-accent-bleu);
}
.service-mini__titre {
  font-family: var(--f-courante);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.3;
  color: var(--c-principale);
  margin: 0 0 14px;
}
.service-mini__corps {
  font-size: 13px;
  line-height: 1.6;
  color: rgba(1, 15, 64, 0.75);
  margin: 0;
}

@media (max-width: 1024px) {
  .bloc-services-mini__grille { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .bloc-services-mini__grille { grid-template-columns: 1fr; gap: 24px; }
}

/* Variante 5 colonnes (liste de professions, glossaire métier…) */
.bloc-services-mini--5cols .bloc-services-mini__grille {
  grid-template-columns: repeat(5, 1fr);
}
@media (max-width: 1100px) {
  .bloc-services-mini--5cols .bloc-services-mini__grille { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  .bloc-services-mini--5cols .bloc-services-mini__grille { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .bloc-services-mini--5cols .bloc-services-mini__grille { grid-template-columns: 1fr; }
}

/* =========================================================
   Bloc Process — 8 étapes en grille 2 colonnes (zipper)
   Items impairs alignés à droite de la colonne gauche,
   items pairs alignés à gauche de la colonne droite.
   ========================================================= */
.bloc-process {
  padding: 64px 0 96px;
}
.bloc-process__grille {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 64px;
  row-gap: 72px;
}

.process-step {
  max-width: 380px;
}
.process-step:nth-child(odd) {
  justify-self: end;
  text-align: right;
}
.process-step:nth-child(even) {
  justify-self: start;
  text-align: left;
}

.process-step__titre {
  font-family: var(--f-courante);
  font-weight: 700;
  font-size: 15px;
  color: var(--c-accent-bleu);
  margin: 0 0 16px;
  line-height: 1.3;
}
.process-step__corps {
  font-size: 14px;
  line-height: 1.6;
  color: var(--c-principale);
  margin: 0;
}

@media (max-width: 720px) {
  .bloc-process { padding: 48px 0 72px; }
  .bloc-process__grille {
    grid-template-columns: 1fr;
    row-gap: 40px;
  }
  .process-step,
  .process-step:nth-child(odd),
  .process-step:nth-child(even) {
    max-width: none;
    justify-self: stretch;
    text-align: left;
  }
}

/* =========================================================
   Bloc Vidéo — embed YouTube responsive 16:9
   ========================================================= */
.bloc-video {
  padding: 32px 0 96px;
}
.video-wrapper {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-l);
  overflow: hidden;
  background: var(--c-principale);
}
.video-wrapper iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* =========================================================
   Bloc témoignages — 2 cards pêche avec picto + titre violet
   ========================================================= */
.bloc-temoignages {
  padding: 32px 0 96px;
}
.bloc-temoignages__titre {
  font-family: var(--f-courante);
  font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  text-align: center;
  color: var(--c-principale);
  margin: 0 0 56px;
}
.bloc-temoignages__grille {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: stretch;
}

.temoignage-card {
  background: var(--c-teinte-peche);
  border-radius: var(--radius-l);
  padding: 36px 32px;
  text-align: center;
}
.temoignage-card__picto {
  width: 64px;
  height: 64px;
  margin: 0 auto 20px;
}
.temoignage-card__picto img {
  width: 100%;
  height: 100%;
  display: block;
}
.temoignage-card__titre {
  font-family: var(--f-courante);
  font-weight: 700;
  font-size: 14px;
  color: var(--c-accent-bleu);
  margin: 0 0 16px;
}
.temoignage-card__quote {
  font-size: 13px;
  line-height: 1.6;
  color: var(--c-principale);
  margin: 0;
}

@media (max-width: 720px) {
  .bloc-temoignages { padding: 24px 0 64px; }
  .bloc-temoignages__grille { grid-template-columns: 1fr; gap: 16px; }
  .temoignage-card { padding: 28px 24px; }
}

/* =========================================================
   Bloc Cyber 360 — tableau comparatif des offres tarifaires
   ========================================================= */
.bloc-cyber360 {
  padding: 80px 0 96px;
}
.bloc-cyber360__titre {
  font-family: var(--f-courante);
  font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  line-height: 1.2;
  text-align: center;
  color: var(--c-principale);
  margin: 0 0 20px;
}
.bloc-cyber360__intro {
  max-width: 720px;
  margin: 0 auto 48px;
  font-size: 14px;
  line-height: 1.6;
  text-align: center;
  color: var(--c-principale);
}

.tarifs-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.tarifs-table {
  width: 100%;
  min-width: 720px;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  font-family: var(--f-courante);
}

/* Largeurs des colonnes : 1ʳᵉ plus large pour les libellés,
   puis Basic / Optimal / Premium strictement égales */
.tarifs-table thead th:first-child { width: 28%; }
.tarifs-table thead th:nth-child(2),
.tarifs-table thead th:nth-child(3),
.tarifs-table thead th:nth-child(4) { width: 24%; }

/* Toutes les cellules : fond blanc + bordures droite et basse (grille visible) */
.tarifs-table th,
.tarifs-table td {
  padding: 18px 20px;
  text-align: center;
  vertical-align: middle;
  background: var(--c-blanc);
  border-right: 1px solid rgba(1, 15, 64, 0.10);
  border-bottom: 1px solid rgba(1, 15, 64, 0.10);
}
.tarifs-table tr > *:last-child { border-right: none; }
.tarifs-table tbody tr:first-child > * {
  border-top: 1px solid rgba(1, 15, 64, 0.10);
}
.tarifs-table tbody tr:last-child > * { border-bottom: none; }

/* Header violet — pas de bordures internes, coins arrondis en haut uniquement */
.tarifs-table thead th {
  background: var(--c-accent-bleu);
  color: var(--c-accent-jaune);
  font-weight: 800;
  font-size: clamp(1.25rem, 2.2vw, 1.75rem);
  padding: 32px 20px;
  border-right: none;
  border-bottom: none;
}
.tarifs-table thead th:first-child {
  background: transparent;
  border-right: 1px solid rgba(1, 15, 64, 0.10);
  border-bottom: 1px solid rgba(1, 15, 64, 0.10);
}
.tarifs-table thead th:nth-child(2) {
  border-top-left-radius: var(--radius-l);
}
.tarifs-table thead th:nth-child(4) {
  border-top-right-radius: var(--radius-l);
}

/* Première colonne : libellés en gras, alignés à gauche, fond blanc */
.tarifs-table tbody th {
  text-align: left;
  font-weight: 700;
  font-size: 13px;
  line-height: 1.4;
  color: var(--c-principale);
}

/* Cellules de valeur */
.tarifs-table tbody td {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--c-principale);
}

/* Lignes prix : fond lavande sur toutes les cellules (1ère colonne incluse) */
.tarifs-table tbody tr.prix-row th,
.tarifs-table tbody tr.prix-row td {
  background: var(--c-teinte-violet);
  padding-top: 22px;
  padding-bottom: 22px;
}

/* Coche dans pastille violette */
.tick {
  display: inline-block;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: var(--c-accent-bleu);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 12 10 16 18 8'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px;
  vertical-align: middle;
}

/* Prix — gros chiffres en violet (accent-bleu), petit /poste en navy */
.prix {
  font-family: var(--f-courante);
  font-weight: 800;
  font-size: clamp(1.375rem, 2.2vw, 1.75rem);
  color: var(--c-accent-bleu);
}
.prix__unite {
  font-size: 11px;
  font-weight: 500;
  color: var(--c-principale);
  margin-left: 4px;
}

/* Notes sous le tableau */
.bloc-cyber360__notes {
  margin-top: 32px;
  font-size: 12px;
  line-height: 1.65;
  color: var(--c-principale);
}
.bloc-cyber360__notes p { margin: 0 0 12px; }
.bloc-cyber360__notes p:last-child { margin-bottom: 0; }

/* =========================================================
   Bloc Informations — titre + intro + liste de définitions
   ========================================================= */
.bloc-infos {
  padding: 80px 0;
}
.bloc-infos__titre {
  font-family: var(--f-courante);
  font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  color: var(--c-principale);
  margin: 0 0 24px;
}
.bloc-infos__intro p {
  font-size: 13px;
  line-height: 1.6;
  color: var(--c-principale);
  margin: 0 0 12px;
  max-width: 900px;
}
.infos-liste {
  margin: 32px 0 0;
  padding: 0;
}
.infos-liste dt {
  font-family: var(--f-courante);
  font-weight: 700;
  font-size: 13px;
  color: var(--c-principale);
  margin: 22px 0 4px;
}
.infos-liste dt:first-of-type { margin-top: 0; }
.infos-liste dd {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--c-principale);
}

@media (max-width: 720px) {
  .bloc-infos { padding: 56px 0; }
}

/* =========================================================
   Bloc Valeur — 2 cards bleu pâle avec picto + titre violet + liste
   ========================================================= */
.bloc-valeur {
  padding: 0 0 96px;
}
.bloc-valeur__grille {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
}

.carte-icone {
  background: var(--c-teinte-bleu);
  border-radius: var(--radius-l);
  padding: 32px;
}
.carte-icone__entete {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
}
.carte-icone__pictogramme {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
}
.carte-icone__pictogramme img {
  width: 100%;
  height: 100%;
  display: block;
}
.carte-icone__titre {
  font-family: var(--f-courante);
  font-weight: 700;
  font-size: 14px;
  color: var(--c-accent-bleu);
  margin: 0;
  line-height: 1.3;
}
.carte-icone__liste {
  margin: 0;
  padding-left: 22px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--c-principale);
}
.carte-icone__liste li {
  margin-bottom: 12px;
}
.carte-icone__liste li:last-child {
  margin-bottom: 0;
}

@media (max-width: 720px) {
  .bloc-valeur { padding: 0 0 64px; }
  .bloc-valeur__grille { grid-template-columns: 1fr; gap: 16px; }
  .carte-icone { padding: 28px 24px; }
}

/* =========================================================
   Bloc CTA violet — appel à l'action plein écran sur fond violet
   ========================================================= */
.bloc-cta-violet {
  background: linear-gradient(135deg, var(--c-principale) 0%, var(--c-accent-bleu) 100%);
  padding: 80px 0;
  text-align: center;
  color: var(--c-blanc);
}
.bloc-cta-violet h2 {
  font-family: var(--f-courante);
  font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  line-height: 1.2;
  color: var(--c-blanc);
  margin: 0 0 24px;
}
.bloc-cta-violet p {
  max-width: 680px;
  margin: 0 auto 32px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--c-blanc);
}

@media (max-width: 720px) {
  .bloc-cta-violet { padding: 56px 0; }
}

/* =========================================================
   Bloc Types de cyberattaques — 5 cards portrait alignées
   ========================================================= */
.bloc-types {
  padding: 32px 0 96px;
}
.bloc-types__titre {
  font-family: var(--f-courante);
  font-weight: 700;
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  line-height: 1.2;
  text-align: center;
  color: var(--c-principale);
  margin: 0 auto 64px;
  max-width: 900px;
}
.bloc-types__grille {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}

.type-card {
  display: flex;
  flex-direction: column;
}
.type-card__media {
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-l);
  overflow: hidden;
  margin-bottom: 20px;
}
.type-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.type-card__titre {
  font-family: var(--f-courante);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.3;
  color: var(--c-principale);
  margin: 0 0 14px;
}
.type-card__corps {
  font-size: 13px;
  line-height: 1.55;
  color: var(--c-principale);
  margin: 0;
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
}

@media (max-width: 1024px) {
  .bloc-types__grille { grid-template-columns: repeat(3, 1fr); gap: 24px; }
}
@media (max-width: 720px) {
  .bloc-types__grille { grid-template-columns: repeat(2, 1fr); }
  .bloc-types__titre { margin-bottom: 40px; }
}
@media (max-width: 480px) {
  .bloc-types__grille { grid-template-columns: 1fr; }
  .type-card__media { aspect-ratio: 16 / 9; }
}

/* =========================================================
   Bloc conclusion — paragraphe bold sur fond blanc
   (transition entre 2 sections, pas de fond coloré)
   ========================================================= */
.bloc-conclusion {
  padding: 56px 0;
}
.bloc-conclusion p {
  margin: 0;
  font-family: var(--f-courante);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.6;
  color: var(--c-principale);
}

/* =========================================================
   Bloc « Quelques signes concrets » — grille 2×2 de cards navy
   sur fond lavande
   ========================================================= */
.bloc-signes {
  background: var(--c-teinte-violet);
  padding: 80px 0;
}
.bloc-signes__titre {
  font-family: var(--f-courante);
  font-weight: 700;
  font-size: clamp(1.25rem, 2.4vw, 1.75rem);
  line-height: 1.3;
  text-align: center;
  color: var(--c-principale);
  margin: 0 0 48px;
}
.bloc-signes__grille {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.signe-card {
  background: var(--c-principale);
  color: var(--c-blanc);
  border-radius: var(--radius-l);
  padding: 28px 32px;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 18px;
  row-gap: 4px;
  align-items: start;
}
.signe-card__dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(195, 149, 226, 0.22);
  margin-top: 4px;
}
.signe-card__titre {
  font-family: var(--f-courante);
  font-weight: 700;
  font-size: 15px;
  color: var(--c-blanc);
  margin: 0;
}
.signe-card__corps {
  grid-column: 2;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.78);
  margin: 8px 0 0;
}

@media (max-width: 720px) {
  .bloc-signes { padding: 56px 0; }
  .bloc-signes__grille { grid-template-columns: 1fr; gap: 16px; }
  .signe-card { padding: 24px; }
}

@media (max-width: 880px) {
  .bloc-presentation { padding: 72px 0; }
  .bloc-presentation__grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

/* =========================================================
   Bloc intégré — titre centré + 2 colonnes texte / image
   ========================================================= */
.bloc-integre {
  padding: 96px 0;
}
.bloc-integre__title {
  font-family: var(--f-courante);
  font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  line-height: 1.2;
  text-align: center;
  color: var(--c-principale);
  margin: 0 0 56px;
}
.bloc-integre__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.bloc-integre__content h3 {
  margin: 0 0 18px;
  font-family: var(--f-courante);
  font-weight: 700;
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
  line-height: 1.3;
  color: var(--c-principale);
}
.bloc-integre__content p {
  margin: 0 0 1em;
  font-size: 14px;
  line-height: 1.6;
  color: var(--c-principale);
}
.bloc-integre__content p:last-child { margin-bottom: 0; }
.bloc-integre__content strong { font-weight: 700; }

.bloc-integre__media img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-l);
  object-fit: cover;
}

.bloc-integre__content ul {
  margin: 0 0 1em;
  padding-left: 22px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--c-principale);
}
.bloc-integre__content ul li { margin-bottom: 6px; }

/* Paragraphe d'intro centré sous le titre (avant la grille) */
.bloc-integre__intro {
  max-width: 900px;
  margin: 0 auto 64px;
  font-family: var(--f-courante);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.6;
  text-align: center;
  color: var(--c-principale);
}
.bloc-integre__title + .bloc-integre__intro {
  margin-top: -32px;
}
/* Variante : intro légère (regular, plus petite) au lieu du bold par défaut */
.bloc-integre__intro--leger {
  font-weight: 400;
  font-size: 14px;
}

/* Variante : fond bleu pâle pleine largeur */
.bloc-integre--bleu {
  background: var(--c-teinte-bleu);
}
/* Variante : fond pêche pleine largeur */
.bloc-integre--peche {
  background: var(--c-teinte-peche);
}
/* Variante : titre principal centré en violet */
.bloc-integre--titre-violet .bloc-integre__title {
  color: var(--c-accent-bleu);
}

/* Variante : image rognée pour égaler la hauteur du texte */
.bloc-integre--media-stretch .bloc-integre__grid {
  align-items: stretch;
}
.bloc-integre--media-stretch .bloc-integre__media {
  position: relative;
}
.bloc-integre--media-stretch .bloc-integre__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 880px) {
  .bloc-integre--media-stretch .bloc-integre__media { position: static; }
  .bloc-integre--media-stretch .bloc-integre__media img {
    position: static;
    height: auto;
  }
}

/* Liste à coches */
.cocher {
  list-style: none;
  padding: 0;
  margin: 22px 0;
}
.cocher li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 10px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--c-principale);
}
.cocher li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--c-accent-jaune);
  font-weight: 900;
  font-size: 16px;
}
.cocher strong { font-weight: 700; }

@media (max-width: 880px) {
  .bloc-integre { padding: 72px 0; }
  .bloc-integre__grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .bloc-integre__media { order: -1; }
}

/* =========================================================
   Bloc cartes — 2 cartes lavande côte à côte
   ========================================================= */
.bloc-cartes {
  padding: 96px 0;
}
.bloc-cartes__titre {
  font-family: var(--f-courante);
  font-weight: 700;
  font-size: clamp(1.5rem, 3.4vw, 2.5rem);
  line-height: 1.2;
  text-align: center;
  color: var(--c-principale);
  max-width: 900px;
  margin: 0 auto 64px;
}
.bloc-cartes__grille {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: stretch;
}

.carte {
  background: var(--c-teinte-violet);
  border-radius: var(--radius-l);
  padding: 40px;
  display: flex;
  flex-direction: column;
}
.carte__titre {
  font-family: var(--f-courante);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.3;
  color: var(--c-accent-bleu);
  margin: 0 0 22px;
}
.carte p {
  margin: 0 0 1em;
  font-size: 14px;
  line-height: 1.6;
  color: var(--c-principale);
  text-align: justify;
}
.carte ul {
  margin: 0 0 1em;
  padding-left: 22px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--c-principale);
}
.carte ul li { margin-bottom: 4px; }
.carte .pointeur {
  font-weight: 500;
}
.carte .pointeur::before {
  content: "👉 ";
}
.carte .btn {
  align-self: flex-start;
  margin-top: auto;
  padding-top: 14px;
}

/* Liste des étapes numérotées (carte urgence) */
.etapes {
  list-style: none;
  counter-reset: etape;
  padding: 0;
  margin: 0 0 1em;
}
.etapes > li {
  counter-increment: etape;
  margin-bottom: 14px;
}
.etapes > li > strong::before {
  content: counter(etape) ". ";
}
.etapes > li > p {
  margin: 4px 0 0;
}

@media (max-width: 880px) {
  .bloc-cartes { padding: 72px 0; }
  .bloc-cartes__grille { grid-template-columns: 1fr; gap: 20px; }
  .carte { padding: 32px 24px; }
}

/* =========================================================
   Variante du bloc présentation : image à droite
   ========================================================= */
.bloc-presentation--inverse .bloc-presentation__media {
  order: 2;
}
@media (max-width: 880px) {
  .bloc-presentation--inverse .bloc-presentation__media { order: -1; }
}

/* Variante : fond bleu pâle pleine largeur */
.bloc-presentation--bleu {
  background: var(--c-teinte-bleu);
}

/* Variante : fond dégradé corail/feu + texte blanc (section narrative pleine largeur) */
.bloc-presentation--corail {
  background: var(--g-feu);
  color: var(--c-blanc);
}
.bloc-presentation--corail .bloc-presentation__content h2,
.bloc-presentation--corail .bloc-presentation__content h3,
.bloc-presentation--corail .bloc-presentation__content p,
.bloc-presentation--corail .bloc-presentation__content strong,
.bloc-presentation--corail .bloc-presentation__content ul li {
  color: var(--c-blanc);
}

/* =========================================================
   Variante : image rognée pour égaler la hauteur du texte
   (l'image est en position absolute pour ne pas dicter la
    hauteur de la ligne — c'est le texte qui pilote)
   ========================================================= */
.bloc-presentation--media-stretch .bloc-presentation__grid {
  align-items: stretch;
}
.bloc-presentation--media-stretch .bloc-presentation__media {
  position: relative;
}
.bloc-presentation--media-stretch .bloc-presentation__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 880px) {
  .bloc-presentation--media-stretch .bloc-presentation__media {
    position: static;
  }
  .bloc-presentation--media-stretch .bloc-presentation__media img {
    position: static;
    height: auto;
  }
}

/* =========================================================
   Bandeau marketing — pleine largeur, edge-to-edge
   ========================================================= */
.bandeau-pleine {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
}

/* =========================================================
   Bloc Z titré (utilisé par « Retrouvez tous nos services »,
   « Meilleures pratiques », « Former, sensibiliser », …)
   ========================================================= */
.bloc-services {
  padding: 64px 0 96px;
}
.bloc-services__titre {
  font-family: var(--f-courante);
  font-weight: 700;
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  line-height: 1.2;
  color: var(--c-principale);
  margin: 0 0 56px;
}
.bloc-services__grille {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.bloc-services__content h3 {
  font-family: var(--f-courante);
  font-weight: 700;
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
  line-height: 1.3;
  color: var(--c-principale);
  margin: 0 0 18px;
}
.bloc-services__content p {
  margin: 0 0 1em;
  font-size: 14px;
  line-height: 1.6;
  color: var(--c-principale);
}
.bloc-services__content ul {
  margin: 0 0 1em;
  padding-left: 22px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--c-principale);
}
.bloc-services__content ul li { margin-bottom: 6px; }
.bloc-services__content .btn { margin-top: 16px; }

.bloc-services__media img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-l);
  object-fit: cover;
}

/* Inversion : image à gauche / contenu à droite */
.bloc-services--inverse .bloc-services__media { order: -1; }

/* Titre centré (variante du bloc Z titré) */
.bloc-services--titre-centre .bloc-services__titre {
  text-align: center;
  font-size: clamp(1.5rem, 3.4vw, 2.5rem);
  margin-left: auto;
  margin-right: auto;
  max-width: 900px;
}

/* h3 en violet/accent (lead-in dans une grille services) */
.bloc-services__content h3.h3-violet {
  color: var(--c-accent-bleu);
}

/* Petite note italique (citation / précision) */
.bloc-services__content .note {
  margin: 18px 0 22px;
  font-style: italic;
  font-size: 13px;
  line-height: 1.55;
  color: rgba(1, 15, 64, 0.7);
}

/* Espacement entre 2 grilles empilées dans une même section */
.bloc-services .bloc-services__grille + .bloc-services__grille {
  margin-top: 80px;
}

/* Fond bleu pâle pleine largeur */
.bloc-services--bleu {
  background: var(--c-teinte-bleu);
}

/* Liste ADN : sans puce, gros gap, démarrage par emoji ✅ */
.liste-adn {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.liste-adn li {
  font-size: 15px;
  line-height: 1.4;
  color: var(--c-principale);
}

/* =========================================================
   Bloc contact « Besoin d'y voir clair ? » — fond navy, 2 cols
   ========================================================= */
.bloc-contact {
  background: var(--c-principale);
  color: var(--c-blanc);
  padding: 96px 0;
}
.bloc-contact__grille {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}
.bloc-contact__titre {
  font-family: var(--f-courante);
  font-weight: 700;
  font-size: clamp(1.25rem, 2.4vw, 1.75rem);
  line-height: 1.3;
  color: var(--c-blanc);
  margin: 0;
}
.bloc-contact__content h3 {
  font-family: var(--f-courante);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.4;
  color: var(--c-blanc);
  margin: 0 0 18px;
}
.bloc-contact__content p {
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--c-blanc);
}
.bloc-contact__content ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.bloc-contact__content ul li {
  font-size: 14px;
  line-height: 1.4;
  color: var(--c-blanc);
}

@media (max-width: 880px) {
  .bloc-contact { padding: 64px 0; }
  .bloc-contact__grille {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

/* =========================================================
   Bloc « Vous êtes déjà client ? » — callout centré
   ========================================================= */
.bloc-deja-client {
  padding: 96px 0;
  text-align: center;
}
.bloc-deja-client__titre {
  font-family: var(--f-courante);
  font-weight: 700;
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  line-height: 1.2;
  color: var(--c-principale);
  margin: 0 0 24px;
}
.bloc-deja-client__lead {
  max-width: 660px;
  margin: 0 auto 32px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--c-principale);
}

@media (max-width: 720px) {
  .bloc-deja-client { padding: 64px 0; }
}

/* Variante : fond bleu pâle + texte navy */
.bloc-contact--bleu {
  background: var(--c-teinte-bleu);
  color: var(--c-principale);
}
.bloc-contact--bleu .bloc-contact__titre,
.bloc-contact--bleu .bloc-contact__content h3,
.bloc-contact--bleu .bloc-contact__content p,
.bloc-contact--bleu .bloc-contact__content ul li {
  color: var(--c-principale);
}

/* =========================================================
   FAQ — fond bleu pâle, 2 colonnes de cards <details>
   ========================================================= */
.bloc-faq {
  background: var(--c-teinte-bleu);
  padding: 96px 0;
}
.bloc-faq--peche {
  background: var(--c-teinte-peche);
}
.bloc-faq--blanc {
  background: var(--c-blanc);
}
.bloc-faq--blanc .faq-item {
  box-shadow: 0 2px 14px rgba(1, 15, 64, 0.08);
}
.bloc-faq__titre {
  font-family: var(--f-courante);
  font-weight: 800;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  text-align: center;
  color: var(--c-principale);
  margin: 0 0 56px;
  letter-spacing: 0.01em;
}
.bloc-faq__grille {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
}
.bloc-faq__col {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.faq-item {
  background: var(--c-blanc);
  border-radius: var(--radius-l);
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(1, 15, 64, 0.04);
}
.faq-item > summary {
  list-style: none;
  cursor: pointer;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  font-family: var(--f-courante);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.35;
  color: var(--c-principale);
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::after {
  content: "";
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: rgba(80, 79, 216, 0.12);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23504FD8' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 6 15 12 9 18'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px;
  transition: background-color .2s ease, transform .2s ease;
}
.faq-item[open] > summary::after {
  background-color: var(--c-accent-bleu);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
}
.faq-item__answer {
  padding: 0 24px 22px;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(1, 15, 64, 0.6);
}
.faq-item__answer p { margin: 0 0 0.8em; }
.faq-item__answer p:last-child { margin-bottom: 0; }

@media (max-width: 720px) {
  .bloc-faq { padding: 64px 0; }
  .bloc-faq__titre { margin-bottom: 32px; }
  .bloc-faq__grille { grid-template-columns: 1fr; gap: 14px; }
}

/* =========================================================
   Bloc équipe — titre centré + grille de cards lavande
   ========================================================= */
.bloc-equipe {
  padding: 96px 0;
}
.bloc-equipe__titre {
  font-family: var(--f-courante);
  font-weight: 800;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  text-align: center;
  color: var(--c-principale);
  margin: 0 0 56px;
}
.bloc-equipe__grille {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
}

.equipe-card {
  background: var(--c-teinte-bleu);
  border-radius: var(--radius-l);
  padding: 28px 32px;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 20px;
  align-items: start;
}
.equipe-card__avatar {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #3D3858;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-blanc);
  font-family: var(--f-courante);
  font-weight: 700;
  font-size: 18px;
  flex-shrink: 0;
}
.equipe-card__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.equipe-card__nom {
  font-family: var(--f-courante);
  font-weight: 700;
  font-size: 16px;
  color: var(--c-principale);
  margin: 0 0 4px;
}
.equipe-card__role {
  font-family: var(--f-courante);
  font-weight: 500;
  font-size: 14px;
  color: var(--c-principale);
  margin: 0;
}
.equipe-card__bio {
  grid-column: 2;
  margin: 14px 0 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--c-principale);
}

@media (max-width: 880px) {
  .bloc-equipe { padding: 64px 0; }
  .bloc-equipe__grille { grid-template-columns: 1fr; gap: 16px; }
  .equipe-card { padding: 24px; }
}

/* =========================================================
   Bloc Règles d'or — 4 cards lavande avec picto centré
   ========================================================= */
.bloc-regles {
  padding: 56px 0 80px;
}
.bloc-regles__titre {
  font-family: var(--f-courante);
  font-weight: 700;
  font-size: clamp(1.25rem, 2.4vw, 1.75rem);
  line-height: 1.3;
  color: var(--c-principale);
  margin: 0 0 48px;
}
.bloc-regles--centre .bloc-regles__titre {
  text-align: center;
  font-size: clamp(1.5rem, 3.4vw, 2.5rem);
  margin-bottom: 56px;
}
.bloc-regles__grille {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  align-items: stretch;
}

.regle-card {
  background: var(--c-teinte-bleu);
  border-radius: var(--radius-l);
  padding: 32px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.regle-card__icone {
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}
.regle-card__icone img {
  width: 100%;
  height: 100%;
  display: block;
}
.regle-card__titre {
  font-family: var(--f-courante);
  font-weight: 700;
  font-size: 14px;
  color: var(--c-accent-bleu);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 16px;
}
.regle-card__corps {
  font-size: 13px;
  line-height: 1.55;
  color: var(--c-principale);
  margin: 0;
}
.regle-card__corps + .regle-card__corps {
  margin-top: 10px;
}

@media (max-width: 960px) {
  .bloc-regles__grille { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .bloc-regles { padding: 40px 0 56px; }
  .bloc-regles__grille { grid-template-columns: 1fr; }
}

/* =========================================================
   Bloc « Des experts engagés » — card navy rounded avec image
   ========================================================= */
.bloc-experts {
  padding: 24px 0 96px;
}
.bloc-experts__card {
  background: var(--c-principale);
  color: var(--c-blanc);
  border-radius: var(--radius-l);
  padding: 48px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
.bloc-experts__content h2 {
  font-family: var(--f-courante);
  font-weight: 700;
  font-size: clamp(1.25rem, 2.4vw, 1.75rem);
  line-height: 1.25;
  color: var(--c-blanc);
  margin: 0 0 28px;
}
.bloc-experts__content h3 {
  font-family: var(--f-courante);
  font-weight: 700;
  font-size: 14px;
  color: var(--c-blanc);
  margin: 18px 0 8px;
}
.bloc-experts__content h3:first-of-type { margin-top: 0; }
.bloc-experts__content p {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--c-blanc);
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
}
.bloc-experts__content p:last-child { margin-bottom: 0; }
.bloc-experts__content ul {
  list-style: disc;
  margin: 0 0 18px;
  padding-left: 22px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--c-blanc);
}
.bloc-experts__content ul li { margin-bottom: 6px; }
.bloc-experts__media img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-l);
  display: block;
  object-fit: cover;
}

/* Variante : titre en jaune (au lieu du blanc par défaut) */
.bloc-experts--titre-jaune .bloc-experts__content h2 {
  color: var(--c-accent-jaune);
}

@media (max-width: 880px) {
  .bloc-experts__card {
    grid-template-columns: 1fr;
    padding: 32px 24px;
    gap: 28px;
  }
  .bloc-experts__media { order: -1; }
}

/* =========================================================
   Bloc Solutions — titre centré + 2 cards image au-dessus
   ========================================================= */
.bloc-solutions {
  padding: 32px 0 96px;
}
.bloc-solutions__titre {
  font-family: var(--f-courante);
  font-weight: 700;
  font-size: clamp(1.5rem, 3.4vw, 2.5rem);
  line-height: 1.2;
  text-align: center;
  color: var(--c-principale);
  margin: 0 auto 56px;
  max-width: 900px;
}
.bloc-solutions__grille {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}

.solution-card {
  display: flex;
  flex-direction: column;
}
.solution-card__media {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-l);
  overflow: hidden;
  margin-bottom: 18px;
}
.solution-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.solution-card__titre {
  font-family: var(--f-courante);
  font-weight: 700;
  font-size: 15px;
  color: var(--c-principale);
  margin: 0 0 12px;
}
.solution-card__corps {
  font-size: 14px;
  line-height: 1.55;
  color: var(--c-principale);
  margin: 0;
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
}

@media (max-width: 880px) {
  .bloc-solutions { padding: 24px 0 72px; }
  .bloc-solutions__titre { margin-bottom: 32px; }
  .bloc-solutions__grille { grid-template-columns: 1fr; gap: 28px; }
}

/* =========================================================
   Placeholder image — damier gris (à remplacer par une vraie image)
   ========================================================= */
.image-placeholder {
  width: 100%;
  aspect-ratio: 3 / 2.4;
  border-radius: var(--radius-l);
  background-color: #F5F5F7;
  background-image:
    linear-gradient(45deg, #E2E2E6 25%, transparent 25%),
    linear-gradient(-45deg, #E2E2E6 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #E2E2E6 75%),
    linear-gradient(-45deg, transparent 75%, #E2E2E6 75%);
  background-size: 24px 24px;
  background-position: 0 0, 0 12px, 12px -12px, -12px 0;
}

@media (max-width: 880px) {
  .bloc-services { padding: 48px 0 72px; }
  .bloc-services__titre { margin-bottom: 32px; }
  .bloc-services__grille {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .bloc-services__media { order: -1; }
}