/* ==========================================================================
   Site vitrine — Yannick Munoz, CCI Tarn-et-Garonne
   Valeurs issues du design system « CCI Tarn-et-Garonne » : bleus et gris
   de la charte, Fira Sans, boutons en pilule (forme du logo),
   cartes en 12 px. La charte ne prévoit qu'un thème clair.
   Une seule feuille pour tout le site, blog compris : une requête, mise en
   cache une fois pour toutes les pages (d'où plus de 800 lignes).
   ========================================================================== */

/* ---------- Police auto-hébergée (sous-ensemble latin, licence : assets/fonts/LICENCE.txt) ---------- */
@font-face {
  font-family: "Fira Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/fira-sans-400.woff2") format("woff2");
}
@font-face {
  font-family: "Fira Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/fira-sans-600.woff2") format("woff2");
}
@font-face {
  font-family: "Fira Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/fira-sans-700.woff2") format("woff2");
}

/* ---------- Jetons ---------- */
:root {
  color-scheme: only light;

  /* Couleurs de la charte */
  --brand-blue: #373cf5;   /* bleu web : boutons, liens, aplats */
  --blue-light: #6877ff;   /* nuance l1 : décor uniquement, jamais de texte */
  --blue-deep: #0000cc;    /* nuance f1 : survol des aplats bleus */
  --blue-navy: #000099;    /* nuance f2 : titres forts, aplats sombres */
  --white: #ffffff;
  --grey-50: #f2f2f2;
  --grey-200: #cccccc;     /* filets décoratifs uniquement */
  --grey-600: #4d4d4d;
  --grey-900: #222222;
  /* Ambre complémentaire du bleu (roue chromatique), réservé aux boutons de l'auto-diagnostic.
     Hors charte CCI : à faire valider par la communication. */
  --cta: #ffa000;
  --cta-hover: #f29100;

  /* Rôles */
  --surface: var(--white);
  --surface-muted: var(--grey-50);
  --ink: var(--grey-900);
  --ink-muted: var(--grey-600);
  --border-strong: var(--grey-600);
  --divider: var(--grey-200);
  --action: var(--brand-blue);
  --action-hover: var(--blue-deep);
  --on-action: var(--white);
  --focus-ring: var(--blue-navy);

  --font-sans: "Fira Sans", "DejaVu Sans", Arial, sans-serif;

  /* Espacements et rayons */
  --space-1: 4px;
  --space-2: 8px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-section: clamp(56px, 8vw, 96px);
  --radius-md: 12px;
  --radius-pill: 999px;

  /* Mise en page */
  --container: 1120px;
  --gutter: 16px;
  --overlap: 56px;        /* débord de la carte « en bref » sur la section suivante */
  --stairs: 256px;        /* hauteur de l'escalier du parcours (écran large) */
  --hauteur-entete: 73px; /* en-tête fixe : décalage des ancres, ajusté par point de rupture */
  --duration: 150ms;
}

@media (min-width: 768px) {
  :root { --gutter: 32px; }
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--hauteur-entete) + var(--space-4));
}

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
}

h1, h2, h3, p, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }

a { color: var(--action); text-underline-offset: 3px; }
a:hover { color: var(--action-hover); }

:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
::selection { background: var(--brand-blue); color: var(--white); }

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

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.icone {
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.conteneur {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right));
}

.lien-evitement {
  position: absolute;
  top: -200px;
  left: var(--gutter);
  z-index: 100;
  padding: 12px 20px;
  border-radius: var(--radius-pill);
  background: var(--blue-navy);
  color: var(--white);
  font-weight: 600;
  text-decoration: none;
}
.lien-evitement:focus { top: 12px; color: var(--white); }

/* ---------- Typographie ---------- */
.label {
  font-size: 13px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.label--bleu { color: var(--action); }

.titre-section {
  font-size: clamp(26px, 1.4vw + 18px, 32px);
  line-height: 1.2;
  font-weight: 700;
  color: var(--blue-navy);
  text-wrap: balance;
}

.sous-titre {
  font-size: 22px;
  line-height: 28px;
  font-weight: 700;
  color: var(--blue-navy);
}

.texte-large { font-size: 18px; line-height: 28px; text-wrap: pretty; }

/* ---------- Boutons et liens ---------- */
.actions {
  display: flex;
  flex-direction: column;
  justify-self: stretch;
  gap: 12px;
}
@media (min-width: 560px) {
  .actions { flex-direction: row; flex-wrap: wrap; justify-self: start; }
}
.actions--pile { flex-direction: column; justify-self: stretch; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px 24px;
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  font: 600 16px/1.25 var(--font-sans);
  text-align: center;
  text-decoration: none;
  transition:
    background-color var(--duration),
    border-color var(--duration),
    color var(--duration),
    transform var(--duration);
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline-offset: 3px; }

.btn--primaire { background: var(--action); color: var(--on-action); }
.btn--primaire:hover { background: var(--action-hover); color: var(--on-action); }

.btn--secondaire { background: var(--surface); border-color: var(--border-strong); color: var(--ink); }
.btn--secondaire:hover { border-color: var(--action); color: var(--action); }

.lien-fleche {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-weight: 600;
  text-decoration: none;
}
.lien-fleche:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.lien-fleche .icone { width: 18px; height: 18px; transition: transform var(--duration); }
.lien-fleche:hover .icone { transform: translate(2px, -2px); }

/* Sur fond bleu ou marine : liens blancs, anneau de focus blanc */
.sur-fonce :focus-visible { outline-color: var(--white); }
.sur-fonce a:not(.btn) { color: var(--white); }
.sur-fonce .btn--primaire { background: var(--white); color: var(--blue-navy); }
.sur-fonce .btn--primaire:hover { background: var(--grey-50); color: var(--blue-navy); }
.sur-fonce .btn--secondaire { background: transparent; border-color: var(--white); color: var(--white); }
.sur-fonce .btn--secondaire:hover { background: var(--action); border-color: var(--action); color: var(--white); }

/* Puces rondes, comme sur la fiche profil */
.puces { display: grid; gap: 10px; }
.puces li { position: relative; padding-left: 20px; }
.puces li::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--action);
}

/* ---------- En-tête (fixe en haut de l'écran) ---------- */
.entete {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--surface);
  border-bottom: 1px solid var(--divider);
}

.entete__barre {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-6);
  padding-block: 12px;
}

.entete__logo { width: auto; height: 48px; }

/* Boutons de contact : quand la place manque, le libellé est masqué à l'écran mais reste lu par les lecteurs d'écran */
.entete__actions { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; }
.entete__actions .btn { min-height: 44px; padding: 10px 20px; font-size: 15px; }

@media (max-width: 1023.98px) {
  .entete__actions .btn--secondaire { width: 44px; padding: 0; }
  .entete__actions .btn--secondaire .btn__texte {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}
@media (max-width: 767.98px) {
  .entete__actions .btn--primaire { width: 44px; padding: 0; }
  .entete__actions .btn--primaire .btn__texte {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

.menu-principal { display: none; }

/* Petits écrans (jusqu'à 374 px, dont les Android de 360 px) : logo réduit pour garder l'en-tête fixe sur une seule ligne */
@media (max-width: 374.98px) {
  :root { --hauteur-entete: 69px; }
  .entete__barre { column-gap: 12px; }
  .entete__logo { height: 38px; }
  .entete__actions { gap: 6px; }
}

@media (min-width: 768px) {
  :root { --hauteur-entete: 85px; }
  .entete__logo { height: 60px; }
}

/* Écran large : logo et boutons sur la première ligne, menu sur la seconde */
@media (min-width: 1024px) {
  :root { --hauteur-entete: 125px; }
  .entete__barre { padding-bottom: 0; }
  .menu-principal { display: block; flex-basis: 100%; border-top: 1px solid var(--divider); }
  .menu { display: flex; gap: 28px; }
  .menu a {
    display: inline-block;
    padding-block: 10px;
    color: var(--ink);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
  }
  .menu a:hover,
  .menu a[aria-current] {
    color: var(--action);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 8px;
  }
}

/* ---------- Accueil ---------- */
.hero { padding-top: clamp(40px, 6vw, 80px); }

.hero__grille { display: grid; gap: var(--space-8); }

.hero__texte { display: grid; gap: var(--space-6); justify-items: start; }

.hero__titre { display: grid; gap: var(--space-2); }

.hero__titre-cle {
  font-size: clamp(28px, 2.8vw + 20px, 48px);
  line-height: 1.2;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--blue-navy);
  text-wrap: balance;
}

.hero__titre-suite {
  font-size: clamp(20px, 0.8vw + 16px, 26px);
  line-height: 1.3;
  font-weight: 600;
  color: var(--action);
}
.hero__titre-suite::first-letter { text-transform: uppercase; }

.hero__intro { max-width: 60ch; }

/* Appel à l'action juste sous la promesse, aligné sur son bord droit
   (la boîte .hero__promesse prend la largeur du paragraphe) */
.hero__promesse { display: grid; gap: inherit; }
.hero__cta { display: grid; gap: var(--space-2); justify-self: end; justify-items: end; text-align: right; }
.hero__cta-note { font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.btn--cta { background: var(--cta); color: var(--blue-navy); box-shadow: 4px 4px 0 var(--blue-navy); }
.btn--cta:hover { background: var(--cta-hover); color: var(--blue-navy); }
.btn--cta:active { box-shadow: 2px 2px 0 var(--blue-navy); transform: translate(2px, 2px); }

/* Petits écrans : le slogan, la promesse et l'appel à l'action tiennent dans le premier écran */
@media (max-width: 479.98px) {
  .hero { padding-top: var(--space-4); }
  .hero__grille { gap: var(--space-4); }
  .hero__texte { gap: var(--space-4); }
  .hero__intro { font-size: 16px; line-height: 24px; }
}

/* Téléphone à l'horizontale : même objectif avec une hauteur d'écran réduite */
@media (orientation: landscape) and (max-height: 480px) {
  .hero { padding-top: var(--space-2); }
  .hero__grille { gap: var(--space-2); }
  .hero__texte { gap: var(--space-2); }
  .hero__texte > .label { display: none; }
  .hero__titre-cle { font-size: 24px; }
  .hero__titre-suite { font-size: 18px; }
  .hero__intro { font-size: 15px; line-height: 22px; }
}

@media (min-width: 960px) {
  .hero__grille {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: 64px;
    align-items: end;
  }
  /* Le texte part du haut, même quand la carte « en bref » est plus haute que lui */
  .hero__texte { align-self: start; padding-bottom: clamp(48px, 6vw, 80px); }
}

/* Écrans d'ordinateur peu hauts : le bouton reste dans le premier écran */
@media (min-width: 960px) and (max-height: 760px) {
  .hero { padding-top: var(--space-6); }
  .hero__texte { gap: var(--space-4); }
}

/* Carte « en bref » : faits clés citables, qui débordent sur la section suivante */
.en-bref {
  position: relative;
  z-index: 1;
  margin-bottom: calc(-1 * var(--overlap));
  padding: clamp(24px, 3vw, 32px);
  border-radius: var(--radius-md);
  background: var(--action);
  color: var(--on-action);
  box-shadow: 10px 10px 0 var(--blue-light);
}
.en-bref .label { margin-bottom: var(--space-2); color: var(--on-action); }

.en-bref__liste > div {
  display: grid;
  gap: 2px;
  padding-block: 12px;
  border-top: 1px solid rgb(255 255 255 / 0.3);
}
.en-bref__liste > div:last-child { padding-bottom: 0; }

.en-bref__liste dt {
  font-size: 13px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.en-bref__liste dd { font-size: 15px; line-height: 22px; }

@media (min-width: 480px) {
  .en-bref__liste > div {
    grid-template-columns: 112px minmax(0, 1fr);
    column-gap: var(--space-4);
    align-items: baseline;
  }
}

/* ---------- Sections ---------- */
.section { padding-block: var(--space-section); }
.section--grise { background: var(--surface-muted); }
.section--marine { background: var(--blue-navy); color: var(--white); }
.section--marine .titre-section,
.section--marine .label { color: var(--white); }
.section--sous-carte { padding-top: calc(var(--space-section) + var(--overlap)); }

.section__entete {
  display: grid;
  gap: var(--space-4);
  max-width: 760px;
  margin-bottom: clamp(32px, 5vw, 56px);
}
.section__titres { display: grid; gap: var(--space-4); }
.section__intro { color: var(--ink-muted); }

@media (min-width: 960px) {
  .section__entete--large {
    max-width: none;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    column-gap: 64px;
    align-items: end;
  }
}

/* ---------- Pilier 1 : formation IA ---------- */

/* Escalier du parcours : plus on monte, plus le bleu fonce */
.escalier { display: grid; gap: var(--space-4); }

.marche {
  --i: 0;
  --fond: var(--brand-blue);
  display: grid;
  grid-template-columns: 136px minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
}
.marche:nth-child(2) { --i: 1; }
.marche:nth-child(3) { --i: 2; --fond: var(--blue-deep); }
.marche:nth-child(4) { --i: 3; --fond: var(--blue-deep); }
.marche:nth-child(5) { --i: 4; --fond: var(--blue-navy); }
.marche:nth-child(6) { --i: 5; --fond: var(--blue-navy); }

.marche__bloc {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-height: 72px;
  padding: 12px;
  border-radius: var(--radius-md);
  background: var(--fond);
  color: var(--white);
}

.marche__niveau {
  font-size: 13px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.marche__verbe { font-size: 16px; line-height: 20px; font-weight: 700; overflow-wrap: anywhere; }

.marche__texte { display: grid; gap: var(--space-1); }

.marche__infos {
  font-size: 15px;
  line-height: 20px;
  font-weight: 700;
  color: var(--action);
  font-variant-numeric: tabular-nums;
}

.marche__titre { font-size: 17px; line-height: 22px; font-weight: 600; color: var(--ink); }

.marche__desc { font-size: 15px; line-height: 22px; color: var(--ink-muted); }

@media (min-width: 640px) {
  .marche { grid-template-columns: 168px minmax(0, 1fr); }
  .marche__titre { font-size: 18px; }
}

@media (min-width: 1024px) {
  .escalier {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    align-items: start;
    gap: 0;
  }
  .marche {
    grid-template-columns: none;
    grid-template-rows: var(--stairs) auto;
    gap: var(--space-4);
  }
  .marche__bloc {
    align-self: end;
    justify-content: flex-start;
    height: calc(96px + var(--i) * 32px);
    min-height: 0;
    padding: var(--space-4);
    border-radius: var(--radius-md) 0 0 0;
  }
  .marche:first-child .marche__bloc { border-bottom-left-radius: var(--radius-md); }
  .marche:last-child .marche__bloc {
    border-top-right-radius: var(--radius-md);
    border-bottom-right-radius: var(--radius-md);
  }
  .marche + .marche .marche__bloc { box-shadow: inset 1px 0 0 rgb(255 255 255 / 0.3); }
  .marche__texte { padding-right: var(--space-4); }
}

/* Parcours types et modalités */
.parcours-bas {
  display: grid;
  gap: var(--space-8);
  margin-top: clamp(40px, 6vw, 72px);
}
@media (min-width: 960px) {
  .parcours-bas {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    column-gap: 48px;
    align-items: start;
  }
}

.types { display: grid; gap: 12px; margin-top: var(--space-4); }

.type {
  display: grid;
  gap: 12px;
  padding: 20px 24px;
  border-radius: var(--radius-md);
  background: var(--surface);
}

.type__volume {
  font-weight: 700;
  color: var(--blue-navy);
  font-variant-numeric: tabular-nums;
}

.type__note { font-size: 14px; line-height: 20px; color: var(--ink-muted); }

@media (min-width: 640px) {
  .type {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: var(--space-6);
  }
  .type__profil,
  .type__note { grid-column: 1 / -1; }
}

.chemin { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.chemin li { display: inline-flex; align-items: center; gap: 8px; }
.chemin li + li::before {
  content: "";
  width: 14px;
  height: 2px;
  border-radius: 2px;
  background: var(--action);
}

.pastille {
  padding: 2px 12px;
  border: 2px solid var(--action);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--action);
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  white-space: nowrap;
}

.encadre {
  display: grid;
  gap: var(--space-4);
  justify-items: start;
  padding: clamp(24px, 3vw, 32px);
  border-radius: var(--radius-md);
  background: var(--surface);
}
.encadre .puces { font-size: 15px; line-height: 22px; }
.encadre .puces li::before { top: 7px; }
.encadre__question { margin-top: var(--space-2); font-weight: 600; }

/* ---------- Pilier 2 : sensibilisation ---------- */
.sensibilisation { display: grid; gap: var(--space-8); }
@media (min-width: 960px) {
  .sensibilisation {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    column-gap: 48px;
    align-items: start;
  }
}

.vedette {
  display: grid;
  gap: var(--space-4);
  justify-items: start;
  padding: clamp(24px, 4vw, 40px);
  border-radius: var(--radius-md);
  background: var(--action);
  color: var(--on-action);
}
.vedette .label { color: var(--on-action); }

.vedette__titre {
  font-size: clamp(24px, 1vw + 18px, 28px);
  line-height: 1.2;
  font-weight: 700;
}

.vedette__liens {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
  margin-top: var(--space-2);
}

.formats { display: grid; gap: var(--space-6); }

.format {
  display: grid;
  gap: var(--space-2);
  padding-top: var(--space-4);
  border-top: 2px solid var(--action);
}
.format p { color: var(--ink-muted); }

.format__titre { font-size: 18px; line-height: 24px; font-weight: 600; color: var(--blue-navy); }

/* ---------- Pilier 3 : accompagnement ---------- */
.services { display: grid; gap: var(--space-6); }
@media (min-width: 768px) {
  .services { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.service {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: var(--space-2);
  padding: clamp(24px, 3vw, 32px);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.service__num {
  font-size: 32px;
  line-height: 38px;
  font-weight: 700;
  color: var(--action);
  font-variant-numeric: tabular-nums;
}

.service__titre { font-size: 20px; line-height: 26px; font-weight: 700; color: var(--blue-navy); }

/* ---------- Pilier 4 : formateur ---------- */
.profil { display: grid; gap: var(--space-8); }
@media (min-width: 960px) {
  .profil {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: 64px;
    align-items: start;
  }
}

.profil__texte { display: grid; gap: var(--space-6); }

.frise { display: grid; gap: var(--space-6); }
@media (min-width: 640px) {
  .frise { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.frise li {
  display: grid;
  align-content: start;
  gap: var(--space-1);
  padding-top: 12px;
  border-top: 2px solid var(--action);
}

.profil__carte {
  display: grid;
  gap: var(--space-4);
  justify-items: start;
  padding: clamp(24px, 3vw, 32px);
  border-radius: var(--radius-md);
  background: var(--surface-muted);
}
.profil__carte .sous-titre:not(:first-child) { margin-top: var(--space-4); }
.profil__carte .puces { font-size: 15px; line-height: 22px; }
.profil__carte .puces li::before { top: 7px; }
.etiquettes { display: flex; flex-wrap: wrap; gap: 8px; }
.etiquettes li {
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  font-size: 14px;
  line-height: 20px;
}

/* ---------- FAQ (accordéon details/summary, sans JavaScript) ---------- */
.faq { max-width: 860px; border-bottom: 1px solid var(--divider); }

.faq__item { border-top: 1px solid var(--divider); }

.faq__item > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 44px;
  padding-block: var(--space-4);
  cursor: pointer;
  list-style: none;
}
.faq__item > summary::-webkit-details-marker { display: none; }

/* Chevron : vers le bas quand la réponse est fermée, vers le haut quand elle est ouverte */
.faq__item > summary::after {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  margin-right: var(--space-1);
  border-right: 2px solid var(--action);
  border-bottom: 2px solid var(--action);
  transform: translateY(-3px) rotate(45deg);
  transition: transform var(--duration);
}
.faq__item[open] > summary::after { transform: translateY(3px) rotate(-135deg); }
.faq__item > summary:hover .faq__question { color: var(--action); }

.faq__item > p { padding-bottom: var(--space-6); }

.faq__question { font-size: 18px; line-height: 24px; font-weight: 600; color: var(--blue-navy); }

/* ---------- Contact ---------- */
.contact { display: grid; gap: var(--space-8); }
@media (min-width: 960px) {
  .contact {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    column-gap: 64px;
    align-items: center;
  }
}

.contact__texte { display: grid; gap: var(--space-4); justify-items: start; }

.contact__adresse { font-size: 15px; line-height: 22px; font-style: normal; }

/* ---------- Pied de page ---------- */
.pied {
  padding-block: var(--space-8);
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-muted);
}
.pied__grille { display: grid; gap: var(--space-4); }
@media (min-width: 960px) {
  .pied__grille {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: var(--space-8);
  }
}
.pied__mentions { display: grid; gap: var(--space-1); }
.pied__mentions a { font-weight: 600; }
.pied__liens { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--space-6); }
.pied__liens a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
  text-decoration: none;
}
.pied__liens a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.pied__liens a[aria-current] { color: var(--ink); }

/* ---------- Pages légales ---------- */
.entete__accueil { display: block; }

.legal > * { max-width: 760px; }
.legal > * + * { margin-top: var(--space-4); }
.legal h1 { margin-top: var(--space-2); }
.legal h2 {
  margin-top: var(--space-8);
  font-size: 22px;
  line-height: 28px;
  color: var(--blue-navy);
}
.legal a { overflow-wrap: anywhere; }
.legal__retour { margin-top: var(--space-8); }

/* ---------- Blog ---------- */

/* Bandeau gris en tête de page : fil d'Ariane, label, titre et introduction */
.bandeau {
  padding-block: var(--space-6) clamp(40px, 6vw, 64px);
  background: var(--surface-muted);
}
.bandeau__texte { display: grid; gap: var(--space-4); justify-items: start; }
.bandeau__texte > * { max-width: 860px; }
.bandeau__titre {
  font-size: clamp(28px, 1.4vw + 22px, 40px);
  line-height: 1.15;
  font-weight: 700;
  color: var(--blue-navy);
  text-wrap: balance;
}
.bandeau__intro { max-width: 68ch; }

/* Nom propre à garder sur une ligne dans les titres (Tarn-et-Garonne) */
.sans-coupure { white-space: nowrap; }

.ariane { margin-bottom: var(--space-2); }
.ariane ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); }
.ariane li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-muted);
}
/* Chevron dessiné en CSS : rien à lire pour les lecteurs d'écran */
.ariane li + li::before {
  content: "";
  width: 6px;
  height: 6px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
}
.ariane a { display: inline-flex; align-items: center; min-height: 24px; font-weight: 600; }

.article__meta { font-size: 15px; line-height: 22px; color: var(--ink-muted); }
.article__meta a { font-weight: 600; }

/* Corps de l'article : colonne de lecture, sommaire à droite sur grand écran */
.article-corps { padding-block: clamp(40px, 6vw, 64px) var(--space-section); }
.article-corps__grille { display: grid; gap: var(--space-8); }
.article-corps__grille > * { max-width: 720px; }

/* « L'essentiel » : faits clés citables, sur le modèle de la carte « en bref » de l'accueil */
.essentiel {
  padding: clamp(24px, 3vw, 32px);
  border-radius: var(--radius-md);
  background: var(--action);
  color: var(--on-action);
  box-shadow: 10px 10px 0 var(--blue-light);
}
.essentiel .label { margin-bottom: var(--space-4); color: var(--on-action); }
.essentiel .puces { font-size: 17px; line-height: 26px; }
.essentiel .puces li::before { top: 9px; background: var(--white); }

.sommaire { padding: var(--space-6); border-radius: var(--radius-md); background: var(--surface-muted); }
.sommaire .label { margin-bottom: var(--space-2); }
.sommaire ol { border-left: 2px solid var(--divider); }
.sommaire a {
  display: block;
  margin-left: -2px;
  padding: 6px 0 6px 14px;
  border-left: 2px solid transparent;
  color: var(--ink);
  font-size: 15px;
  line-height: 22px;
  font-weight: 600;
  text-decoration: none;
}
.sommaire a:hover { border-left-color: var(--action); color: var(--action); }

@media (min-width: 1024px) {
  .article-corps__grille {
    grid-template-columns: minmax(0, 720px) 280px;
    justify-content: space-between;
    column-gap: 48px;
  }
  .essentiel { grid-column: 1; grid-row: 1; }
  .article__contenu { grid-column: 1; grid-row: 2; }
  .sommaire {
    position: sticky;
    top: calc(var(--hauteur-entete) + var(--space-6));
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: start;
  }
}

.article__contenu > * + * { margin-top: var(--space-4); }
.article__contenu > :first-child { margin-top: 0; }
.article__contenu > h2 {
  margin-top: clamp(40px, 5vw, 56px);
  font-size: clamp(24px, 0.8vw + 19px, 28px);
  line-height: 1.25;
  font-weight: 700;
  color: var(--blue-navy);
  text-wrap: balance;
}
.article__contenu > h3 {
  margin-top: var(--space-8);
  font-size: 20px;
  line-height: 26px;
  font-weight: 700;
  color: var(--blue-navy);
}
.article__contenu > p,
.article__contenu > ul > li,
.article__contenu > ol > li,
.article__contenu .faq__item > p { font-size: 18px; line-height: 30px; text-wrap: pretty; }
.article__contenu > .puces li::before { top: 11px; }

/* Tableau en deux colonnes : il tient dans un écran de 320 px sans défilement */
.tableau { width: 100%; border-collapse: collapse; font-size: 16px; line-height: 24px; }
.tableau caption {
  padding-bottom: var(--space-2);
  text-align: left;
  font-size: 15px;
  line-height: 22px;
  color: var(--ink-muted);
}
.tableau th,
.tableau td {
  padding: 12px 16px 12px 0;
  border-top: 1px solid var(--divider);
  text-align: left;
  vertical-align: top;
}
.tableau tr > :last-child { padding-right: 0; }
.tableau thead th {
  border-top: 0;
  font-size: 13px;
  line-height: 16px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.tableau tbody th { font-weight: 600; color: var(--blue-navy); }

/* Démarches numérotées */
.etapes { display: grid; gap: var(--space-4); counter-reset: etape; }
.etapes > li { position: relative; padding-left: 48px; counter-increment: etape; }
.etapes > li::before {
  content: counter(etape);
  position: absolute;
  top: -1px;
  left: 0;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--action);
  color: var(--on-action);
  font-size: 15px;
  line-height: 1;
  font-weight: 700;
}

/* Encadré d'action : auto-diagnostic (bouton ambre) et prise de contact */
.action {
  display: grid;
  gap: var(--space-4);
  justify-items: start;
  padding: clamp(24px, 4vw, 40px);
  border-radius: var(--radius-md);
  background: var(--surface-muted);
}
.action__titre {
  font-size: clamp(22px, 0.8vw + 18px, 26px);
  line-height: 1.25;
  font-weight: 700;
  color: var(--blue-navy);
}
.action p { max-width: 60ch; }
.action .actions { margin-top: var(--space-2); }

.sources { padding-top: var(--space-6); border-top: 1px solid var(--divider); }
.sources__titre { margin-bottom: var(--space-4); font-size: 18px; line-height: 24px; font-weight: 700; color: var(--blue-navy); }
.sources .puces { font-size: 15px; line-height: 22px; }
.sources .puces li::before { top: 7px; }
.sources a { overflow-wrap: anywhere; }

/* Encadré auteur (E-E-A-T) : initiales en attendant une photo */
.auteur {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: var(--space-4) var(--space-6);
  align-items: start;
  padding: clamp(24px, 3vw, 32px);
  border: 1px solid var(--divider);
  border-radius: var(--radius-md);
}
.auteur__initiales {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--blue-navy);
  color: var(--white);
  font-size: 22px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.auteur__texte { display: grid; gap: var(--space-2); justify-items: start; }
.auteur__nom { font-size: 20px; line-height: 26px; font-weight: 700; color: var(--blue-navy); }
.auteur__liens { display: flex; flex-wrap: wrap; column-gap: var(--space-6); }
@media (max-width: 479.98px) {
  .auteur { grid-template-columns: minmax(0, 1fr); }
}

.article__contenu > .action,
.article__contenu > .sources,
.article__contenu > .auteur,
.cartes + .action { margin-top: clamp(40px, 5vw, 56px); }

/* Cartes d'articles : toute la carte est cliquable grâce au lien du titre */
.cartes { display: grid; gap: var(--space-6); }
@media (min-width: 768px) {
  .cartes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .cartes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.carte {
  position: relative;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: var(--space-2);
  padding: clamp(24px, 3vw, 32px);
  border: 1px solid var(--divider);
  border-top: 4px solid var(--action);
  border-radius: var(--radius-md);
  background: var(--surface);
  transition: transform var(--duration), box-shadow var(--duration);
}
.carte:hover { transform: translateY(-2px); box-shadow: 6px 6px 0 var(--blue-light); }
.carte__titre { font-size: 20px; line-height: 26px; font-weight: 700; color: var(--blue-navy); text-wrap: balance; }
.carte__titre a { color: inherit; text-decoration: none; }
.carte__titre a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: var(--radius-md); }
.carte:hover .carte__titre a { color: var(--action); text-decoration: underline; text-decoration-thickness: 2px; }
.carte__extrait { font-size: 16px; line-height: 24px; color: var(--ink-muted); }
.carte__meta { margin-top: var(--space-2); font-size: 14px; line-height: 20px; color: var(--ink-muted); }

/* L'anneau de focus passe sur la carte entière, sauf dans les navigateurs sans :has() */
@supports selector(:has(a)) {
  .carte__titre a:focus-visible { outline: none; }
  .carte:has(.carte__titre a:focus-visible) { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
}

.carte--une { grid-column: 1 / -1; }
.carte--une .carte__titre { font-size: clamp(22px, 1vw + 18px, 30px); line-height: 1.2; }
.carte--une .carte__extrait { max-width: 70ch; font-size: 18px; line-height: 28px; }

/* Page d'accueil : avis Google, accordéon de la FAQ (classes .faq) avec un résumé prénom, date et étoiles */
.avis__resume { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-4); }
.avis__etoiles { font-size: 20px; line-height: 1; letter-spacing: 2px; color: var(--cta); }
.avis__date { font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.avis__texte { margin: 0; padding-bottom: var(--space-6); }
.faq__item > summary:hover .avis__resume .faq__question { color: var(--action); }
.avis__source { margin-top: var(--space-6); font-size: 14px; line-height: 20px; color: var(--ink-muted); }

/* Page d'accueil : « Pour aller plus loin », derniers articles du blog */
.plus-loin { display: grid; gap: var(--space-8); }
.plus-loin__titres { display: grid; gap: var(--space-4); justify-items: start; }
@media (min-width: 960px) {
  .plus-loin {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: 64px;
    align-items: start;
  }
}
.plus-loin .cartes { grid-template-columns: minmax(0, 1fr); }

/* ---------- Préférences et impression ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after { transition: none !important; }
}

@media print {
  .menu-principal,
  .lien-evitement,
  .ariane,
  .sommaire { display: none !important; }
  .entete { position: static; }
  .faq__item::details-content { content-visibility: visible; }
  .en-bref,
  .essentiel { box-shadow: none; margin-bottom: 0; }
  .section { padding-block: 24px; }
  /* Sans cette règle, les navigateurs n'impriment pas les fonds et le texte blanc disparaît */
  .en-bref,
  .essentiel,
  .etapes > li,
  .auteur__initiales,
  .vedette,
  .section--marine,
  .marche__bloc,
  .btn--primaire {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .marche,
  .type,
  .service,
  .format,
  .faq__item,
  .carte,
  .action,
  .auteur,
  .etapes > li { break-inside: avoid; }
}