@charset "UTF-8";
/*
Theme Name: Inari Child
Theme URI: https://inari.fr/
Author: Florian Le Guyader
Author URI: https://www.ethicfirst.fr/
Description: Thème sur mesure du site Inari — Atelier fil Blanc. Basé sur le starter theme Generic, forké depuis le thème Ethic First.
Version: 0.1.0
Template: generic
Text Domain: inari-child
*/
/* ═══════════════════════════════════════════════════════════
   MARQUE INARI
   Valeurs reprises telles quelles de la maquette
   « Inari Accueil » (direction 1a — Maison).
   ═══════════════════════════════════════════════════════════ */
/* color / bordeaux — couleur principale */
/* fond de section rosé */
/* bordures douces sur fond clair */
/* séparateurs pointillés */
/* principale */
/* sections pleines foncées */
/* survol / profondeur */
/* color / cyan — accent */
/* fond de section */
/* décor, bordures */
/* accent — boutons, liens, coches */
/* survol */
/* color / or — accent secondaire */
/* sur fond bordeaux foncé */
/* aplat — bouton « Appel conseil » */
/* texte posé sur $or-500 */
/* color / neutres de marque */
/* fond hors-cadre de la maquette */
/* texte courant */
/* texte secondaire */
/* ═══════════════════════════════════════════════════════════
   COULEURS FONCTIONNELLES (inchangées — états, pas marque)
   ═══════════════════════════════════════════════════════════ */
/* color / error */
/* color / grey */
/* color / info */
/* color / slate */
/* color / success */
/* color / warning */
/* ─── Alias sémantiques ──────────────────────────────────── */
/* ─── Espacements ────────────────────────────────────────── */
/*  4px */
/*  8px */
/* 12px */
/* 16px */
/* 20px */
/* 24px */
/* 32px */
/* 40px */
/* 48px */
/* 56px */
/* 80px */
/* ─── Espacement de section (marges / paddings verticaux) ─
   Une seule variable pour tout ajuster d'un coup. */
/* 60px */
/* ─── Arrondis ───────────────────────────────────────────── */
/*  8px */
/* 16px */
/* 24px — Figma indique 1rem */
/* ─── Layout ─────────────────────────────────────────────── */
/* max-width du contenu */
/* 80px – padding latéral desktop */
/* 40px – padding latéral mobile/tablette */
/* alias pour compatibilité */
/* 40px */
/* ─── Typographie ────────────────────────────────────────── */
/* ─── Breakpoints Figma ───────────────────────────────────── */
/* --md: 48rem  */
/* --lg: 64rem  */
/* --xxl: 96rem */
/*
Theme Name: Inari Child
Theme URI: https://inari.fr/
Author: Florian Le Guyader
Author URI: https://www.ethicfirst.fr/
Description: Thème sur mesure du site Inari — Atelier fil Blanc. Basé sur le starter theme Generic, forké depuis le thème Ethic First.
Version: 0.1.0
Template: generic
Text Domain: inari-child
*/
/* ═══════════════════════════════════════════════════════════
   Focus visible — patterns unifiés RGAA / WCAG 2.4.7.
   $cyan-500 = #3BB9CB : accent de la maquette.
   ═══════════════════════════════════════════════════════════ */
/* Outline classique (extérieur au bouton, hors sections avec overflow:hidden). */
/* Ring inset : visible même quand un ancêtre a overflow:hidden.
   Double couche (couleur bg extérieur + couleur haute-contraste)
   pour rester lisible sur tout fond de bouton. */
/* Préfixe des URL de police.
   - front : style.css est à la racine du thème  -> 'fonts/'
   - éditeur : css/editor-style.css est un cran plus bas -> '../fonts/'
   Configuré via @use ... with() dans editor-style.scss. */
/* ═══════════════════════════════════════════════════════════
   POLICES — auto-hébergées dans fonts/webfonts/.
   Montserrat : corps de texte.
   Lora       : titres.
   Fichiers variables (400→700), sous-ensembles latin + latin-ext.
   ═══════════════════════════════════════════════════════════ */
@font-face {
  font-family: "Montserrat";
  src: url("fonts/webfonts/montserrat-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Montserrat";
  src: url("fonts/webfonts/montserrat-italic-latin.woff2") format("woff2");
  font-weight: 400 600;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Montserrat";
  src: url("fonts/webfonts/montserrat-latin-ext.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Montserrat";
  src: url("fonts/webfonts/montserrat-italic-latin-ext.woff2") format("woff2");
  font-weight: 400 600;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Lora";
  src: url("fonts/webfonts/lora-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Lora";
  src: url("fonts/webfonts/lora-italic-latin.woff2") format("woff2");
  font-weight: 400 600;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Lora";
  src: url("fonts/webfonts/lora-latin-ext.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Lora";
  src: url("fonts/webfonts/lora-italic-latin-ext.woff2") format("woff2");
  font-weight: 400 600;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* ─── Icon font – Solar / icomoon ────────────────────────── */
@font-face {
  font-family: "icon";
  src: url("fonts/icon.woff2") format("woff2"), url("fonts/icon.woff") format("woff"), url("fonts/icon.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
[class^=icon-],
[class*=" icon-"] {
  font-family: "icon" !important;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ─── Icones ─────────────────────────────────────────────── */
/* Generiques */
.icon-circle:before {
  content: "\f46f";
}

.icon-butterfly:before {
  content: "\f264";
}

/* Reseaux sociaux */
.icon-instagram:before {
  content: "\f419";
}

/* LinkedIn : passé en icône SVG (mask) dans _icons-svg.scss — le glyphe \fe2f
   de la police n'existe pas. */
/* Solar */
.icon-alarm:before {
  content: "\f000";
}

.icon-phone:before {
  content: "\f001";
}

.icon-arrow-down:before {
  content: "\f002";
}

.icon-arrow-left:before {
  content: "\f003";
}

.icon-arrow-right:before {
  content: "\f004";
}

.icon-search:before {
  content: "\f005";
}

.icon-download:before {
  content: "\f006";
}

.icon-close:before {
  content: "\f007";
}

.icon-menu:before {
  content: "\f008";
}

.icon-chevron-right:before {
  content: "\f009";
}

.icon-chevron-up:before {
  content: "\f00a";
}

.icon-user:before {
  content: "\f00b";
}

.icon-check:before {
  content: "\f00c";
}

.icon-check-duotone:before {
  content: "\f00d";
}

.icon-letter:before {
  content: "\f00e";
}

.icon-users:before {
  content: "\f00f";
}

/*
Theme Name: Inari Child
Theme URI: https://inari.fr/
Author: Florian Le Guyader
Author URI: https://www.ethicfirst.fr/
Description: Thème sur mesure du site Inari — Atelier fil Blanc. Basé sur le starter theme Generic, forké depuis le thème Ethic First.
Version: 0.1.0
Template: generic
Text Domain: inari-child
*/
/* ═══════════════════════════════════════════════════════════ */
/* Icônes SVG – set Solar (récupéré depuis Iconify)           */
/* Intégrées en mask-image → couleur via `color` (currentColor) */
/*                                                             */
/* Usage : <i class="icon-target" aria-hidden="true"></i>      */
/* La taille suit la font-size du parent (1em). La couleur     */
/* suit `color`. Pour un rond coloré (cards formation),        */
/* mettre l'icône DANS un wrapper qui porte le fond :          */
/*   <span class="card-formation__icon">                       */
/*     <i class="icon-user-heart"></i>                         */
/*   </span>                                                   */
/* ═══════════════════════════════════════════════════════════ */
.icon-user-heart {
  display: inline-block;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  vertical-align: middle;
  -webkit-mask: url("img/icons/user-heart.svg") no-repeat center/contain;
  mask: url("img/icons/user-heart.svg") no-repeat center/contain;
}

.icon-monitor-smartphone {
  display: inline-block;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  vertical-align: middle;
  -webkit-mask: url("img/icons/monitor-smartphone.svg") no-repeat center/contain;
  mask: url("img/icons/monitor-smartphone.svg") no-repeat center/contain;
}

.icon-target {
  display: inline-block;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  vertical-align: middle;
  -webkit-mask: url("img/icons/target.svg") no-repeat center/contain;
  mask: url("img/icons/target.svg") no-repeat center/contain;
}

.icon-document-add {
  display: inline-block;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  vertical-align: middle;
  -webkit-mask: url("img/icons/document-add.svg") no-repeat center/contain;
  mask: url("img/icons/document-add.svg") no-repeat center/contain;
}

.icon-round-arrow-right {
  display: inline-block;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  vertical-align: middle;
  -webkit-mask: url("img/icons/round-arrow-right.svg") no-repeat center/contain;
  mask: url("img/icons/round-arrow-right.svg") no-repeat center/contain;
}

.icon-round-arrow-left {
  display: inline-block;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  vertical-align: middle;
  -webkit-mask: url("img/icons/round-arrow-left.svg") no-repeat center/contain;
  mask: url("img/icons/round-arrow-left.svg") no-repeat center/contain;
}

.icon-phone-rounded {
  display: inline-block;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  vertical-align: middle;
  -webkit-mask: url("img/icons/phone-rounded.svg") no-repeat center/contain;
  mask: url("img/icons/phone-rounded.svg") no-repeat center/contain;
}

.icon-letter-line {
  display: inline-block;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  vertical-align: middle;
  -webkit-mask: url("img/icons/letter.svg") no-repeat center/contain;
  mask: url("img/icons/letter.svg") no-repeat center/contain;
}

.icon-alt-arrow-down {
  display: inline-block;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  vertical-align: middle;
  -webkit-mask: url("img/icons/alt-arrow-down.svg") no-repeat center/contain;
  mask: url("img/icons/alt-arrow-down.svg") no-repeat center/contain;
}

.icon-alt-arrow-up {
  display: inline-block;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  vertical-align: middle;
  -webkit-mask: url("img/icons/alt-arrow-up.svg") no-repeat center/contain;
  mask: url("img/icons/alt-arrow-up.svg") no-repeat center/contain;
}

.icon-alt-arrow-right {
  display: inline-block;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  vertical-align: middle;
  -webkit-mask: url("img/icons/alt-arrow-right.svg") no-repeat center/contain;
  mask: url("img/icons/alt-arrow-right.svg") no-repeat center/contain;
}

.icon-magnifer {
  display: inline-block;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  vertical-align: middle;
  -webkit-mask: url("img/icons/magnifer.svg") no-repeat center/contain;
  mask: url("img/icons/magnifer.svg") no-repeat center/contain;
}

.icon-hamburger {
  display: inline-block;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  vertical-align: middle;
  -webkit-mask: url("img/icons/hamburger.svg") no-repeat center/contain;
  mask: url("img/icons/hamburger.svg") no-repeat center/contain;
}

.icon-close-circle {
  display: inline-block;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  vertical-align: middle;
  -webkit-mask: url("img/icons/close-circle.svg") no-repeat center/contain;
  mask: url("img/icons/close-circle.svg") no-repeat center/contain;
}

.icon-linkedin {
  display: inline-block;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  vertical-align: middle;
  -webkit-mask: url("img/icons/linkedin.svg") no-repeat center/contain;
  mask: url("img/icons/linkedin.svg") no-repeat center/contain;
}

.icon-square-top-down {
  display: inline-block;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  vertical-align: middle;
  -webkit-mask: url("img/icons/square-top-down.svg") no-repeat center/contain;
  mask: url("img/icons/square-top-down.svg") no-repeat center/contain;
}

.icon-undo-left {
  display: inline-block;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  vertical-align: middle;
  -webkit-mask: url("img/icons/undo-left.svg") no-repeat center/contain;
  mask: url("img/icons/undo-left.svg") no-repeat center/contain;
}

.icon-graph-new-up {
  display: inline-block;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  vertical-align: middle;
  -webkit-mask: url("img/icons/graph-new-up.svg") no-repeat center/contain;
  mask: url("img/icons/graph-new-up.svg") no-repeat center/contain;
}

.icon-magnifer-bug {
  display: inline-block;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  vertical-align: middle;
  -webkit-mask: url("img/icons/magnifer-bug.svg") no-repeat center/contain;
  mask: url("img/icons/magnifer-bug.svg") no-repeat center/contain;
}

.icon-devices {
  display: inline-block;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  vertical-align: middle;
  -webkit-mask: url("img/icons/devices.svg") no-repeat center/contain;
  mask: url("img/icons/devices.svg") no-repeat center/contain;
}

.icon-pallete-2 {
  display: inline-block;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  vertical-align: middle;
  -webkit-mask: url("img/icons/pallete-2.svg") no-repeat center/contain;
  mask: url("img/icons/pallete-2.svg") no-repeat center/contain;
}

.icon-bolt {
  display: inline-block;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  vertical-align: middle;
  -webkit-mask: url("img/icons/bolt.svg") no-repeat center/contain;
  mask: url("img/icons/bolt.svg") no-repeat center/contain;
}

.icon-document-text {
  display: inline-block;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  vertical-align: middle;
  -webkit-mask: url("img/icons/document-text.svg") no-repeat center/contain;
  mask: url("img/icons/document-text.svg") no-repeat center/contain;
}

.icon-checklist {
  display: inline-block;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  vertical-align: middle;
  -webkit-mask: url("img/icons/checklist.svg") no-repeat center/contain;
  mask: url("img/icons/checklist.svg") no-repeat center/contain;
}

.icon-square-academic-cap {
  display: inline-block;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  vertical-align: middle;
  -webkit-mask: url("img/icons/square-academic-cap.svg") no-repeat center/contain;
  mask: url("img/icons/square-academic-cap.svg") no-repeat center/contain;
}

.icon-user-circle {
  display: inline-block;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  vertical-align: middle;
  -webkit-mask: url("img/icons/user-circle.svg") no-repeat center/contain;
  mask: url("img/icons/user-circle.svg") no-repeat center/contain;
}

.icon-hand-shake {
  display: inline-block;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  vertical-align: middle;
  -webkit-mask: url("img/icons/hand-shake.svg") no-repeat center/contain;
  mask: url("img/icons/hand-shake.svg") no-repeat center/contain;
}

.icon-stars {
  display: inline-block;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  vertical-align: middle;
  -webkit-mask: url("img/icons/stars.svg") no-repeat center/contain;
  mask: url("img/icons/stars.svg") no-repeat center/contain;
}

.icon-users-group {
  display: inline-block;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  vertical-align: middle;
  -webkit-mask: url("img/icons/users-group-two-rounded.svg") no-repeat center/contain;
  mask: url("img/icons/users-group-two-rounded.svg") no-repeat center/contain;
}

.icon-alarm {
  display: inline-block;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  vertical-align: middle;
  -webkit-mask: url("img/icons/alarm.svg") no-repeat center/contain;
  mask: url("img/icons/alarm.svg") no-repeat center/contain;
}

.icon-display {
  display: inline-block;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  vertical-align: middle;
  -webkit-mask: url("img/icons/display.svg") no-repeat center/contain;
  mask: url("img/icons/display.svg") no-repeat center/contain;
}

/*
Theme Name: Inari Child
Theme URI: https://inari.fr/
Author: Florian Le Guyader
Author URI: https://www.ethicfirst.fr/
Description: Thème sur mesure du site Inari — Atelier fil Blanc. Basé sur le starter theme Generic, forké depuis le thème Ethic First.
Version: 0.1.0
Template: generic
Text Domain: inari-child
*/
/* Base (body) – 16/22 */
body {
  font-size: 1rem;
  line-height: 1.375rem;
}

/* XS – 14/18 (identique mobile & desktop) */
.text-xs {
  font-size: 0.875rem;
  line-height: 1.125rem;
}

/* S – 16/22 mobile → 18/22 desktop */
.text-s {
  font-size: 1rem;
  line-height: 1.375rem;
}
@media (min-width: 1024px) {
  .text-s {
    font-size: 1.125rem;
  }
}

/* M / H6 – 18/22 mobile → 20/26 desktop */
.text-m,
h6 {
  font-size: 1.125rem;
  line-height: 1.375rem;
  font-weight: 500;
}
@media (min-width: 1024px) {
  .text-m,
  h6 {
    font-size: 1.25rem;
    line-height: 1.625rem;
  }
}

/* L / H5 – 20/26 mobile → 24/30 desktop */
.text-l,
h5 {
  font-size: 1.25rem;
  line-height: 1.625rem;
  font-weight: 600;
}
@media (min-width: 1024px) {
  .text-l,
  h5 {
    font-size: 1.5rem;
    line-height: 1.875rem;
  }
}

/* XL / H4 – 24/30 mobile → 30/36 desktop */
.text-xl,
h4 {
  font-size: 1.5rem;
  line-height: 1.875rem;
  font-weight: 700;
}
@media (min-width: 1024px) {
  .text-xl,
  h4 {
    font-size: 1.875rem;
    line-height: 2.25rem;
  }
}

/* XXL / H3 – 1.875rem mobile → 2rem desktop */
.text-xxl,
h3 {
  font-size: 1.875rem;
  line-height: 2.25rem;
  font-weight: 700;
}
@media (min-width: 1024px) {
  .text-xxl,
  h3 {
    font-size: 2rem;
    line-height: 2.5rem;
  }
}

/* XXXL / H1, H2 – 2.5rem mobile → 3.25rem desktop */
.text-xxxl,
h1, h2 {
  font-size: 2.5rem;
  line-height: 3rem;
  font-weight: 800;
}
@media (min-width: 1024px) {
  .text-xxxl,
  h1, h2 {
    font-size: 3.25rem;
    line-height: 4.25rem;
  }
}

/* XXXXXL – Footer uniquement – 60/68 mobile → 120/140 desktop */
.text-xxxxxl {
  font-size: 3.75rem;
  line-height: 4.25rem;
  font-weight: 900;
}
@media (min-width: 1024px) {
  .text-xxxxxl {
    font-size: 6.5rem;
    line-height: 8.75rem;
  }
}

/* Familles */
h1, h2, h3, h4, h5, h6 {
  font-family: "Lora", Georgia, "Times New Roman", serif;
  /* Filet de sécurité anti-débordement : un mot long (« accompagner »,
     « accessibilité »…) sur un petit écran doit pouvoir se couper au
     bord du conteneur au lieu de sortir horizontalement. */
  overflow-wrap: break-word;
}

/*
Theme Name: Inari Child
Theme URI: https://inari.fr/
Author: Florian Le Guyader
Author URI: https://www.ethicfirst.fr/
Description: Thème sur mesure du site Inari — Atelier fil Blanc. Basé sur le starter theme Generic, forké depuis le thème Ethic First.
Version: 0.1.0
Template: generic
Text Domain: inari-child
*/
/* ─── Feature flag « cas d'usage » désactivé ───────────────
   Le <body> reçoit `.ef-cas-usage-off` (cf. inc/admin-feature-flags.php).
   Masque automatiquement :
     - toutes les sections dont la classe cible les cas d'usage
       (.case-studies, .cas-clients-section, .cas-usages-*)
     - toute section Gutenberg manuellement taggée `.ef-cas-usage-only`
       (via panneau Avancé → Classe CSS additionnelle) */
body.ef-cas-usage-off .ef-cas-usage-only,
body.ef-cas-usage-off .case-studies,
body.ef-cas-usage-off .cas-clients-section,
body.ef-cas-usage-off .cas-usages-hero,
body.ef-cas-usage-off .cas-usages-filters,
body.ef-cas-usage-off .cas-usages-listing {
  display: none !important;
}

/* ─── Screen-reader only (accessible visually hidden) ──── */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ─── Skip-links (RGAA 12.6) ─────────────────────────────
   Cachés visuellement jusqu'au focus. Injectés en tout début de <body>
   dans header.php. Utilise position: fixed pour s'afficher au-dessus de
   tout au moment du focus, sans décaler le layout. */
.skip-links {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10000;
}
.skip-links .skip-link {
  position: absolute;
  top: -100px; /* hors écran par défaut */
  left: 0;
  padding: 0.75rem 1rem;
  background-color: #6E1339;
  color: #FFFFFF !important;
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}
.skip-links .skip-link:focus, .skip-links .skip-link:focus-visible {
  top: 0; /* apparaît en haut à gauche */
  outline: 3px solid #3BB9CB;
  outline-offset: -3px;
}
.skip-links .skip-link:hover {
  background-color: #8B1A4B;
  color: #FFFFFF !important;
}

#content {
  width: 100%;
  padding-right: 0;
  float: none;
}

/* Le footer déborde en pleine largeur (100vw) : on clippe le débordement       */
/* horizontal pour éviter une barre de défilement. `clip` (et non `hidden`)      */
/* n'établit pas de conteneur de défilement → l'en-tête sticky reste fonctionnel. */
html {
  overflow-x: clip;
}

body {
  color: #1A1A1A;
  background-color: #FFFFFF;
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  max-width: 1536px;
  margin: auto;
}

p {
  margin: 20px 0;
  font-size: 1.1em !important;
  line-height: 1.5em;
}

h1::first-letter, h2::first-letter, h3::first-letter, h4::first-letter {
  text-transform: uppercase;
}

.container-medium {
  max-width: 850px;
  margin: 0 auto;
}

.container-small {
  max-width: 650px;
  margin: 0 auto;
}

.font-blue {
  color: #8B1A4B;
}

.font-red {
  color: #3BB9CB;
}

/* Espacement des paragraphes dans le contenu des articles et des pages statiques. */
.page #content p,
.single-post #content p {
  margin-bottom: 2rem;
}

.section {
  padding: 5rem 2.5rem;
}
@media (min-width: 768px) and (max-width: 1023px) {
  .section {
    padding: 2.5rem 1.25rem;
  }
}

.section-cyan-50 {
  background-color: #EAF6F8;
}

.cyan-500 {
  background-color: #3BB9CB;
}

.colonne-padding {
  padding: 1.25rem;
}

ul {
  margin: 0;
  padding: 0;
}

/* ─── Liens ──────────────────────────────────────────────── */
a {
  color: #8B1A4B;
  text-decoration: underline;
  text-underline-offset: 3px;
}
a:hover, a:focus {
  color: #6E1339;
}
a:focus-visible {
  outline: 2px solid #3BB9CB;
  outline-offset: 2px;
}

/* Liens externes : l'icône « nouvelle fenêtre » reprend la couleur du texte du lien */
#wrapper a[target=_blank]::after,
.entry-content a[href^=http]:not([href*="inari.fr"])::after {
  content: "";
  display: inline-block;
  width: 0.75em;
  height: 0.75em;
  margin-left: 0.25em;
  vertical-align: middle;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E") center/contain no-repeat;
}

hr {
  height: 1em;
  background: #F5F5F5;
}

hr.center {
  display: block;
  margin: auto;
}

/* ═══════════════════════════════════════════════════════════════════════
   Harmonisation mobile — padding-x des conteneurs de section.
   Toutes les sections/heros du site ont un padding-x de 2.5rem (40px) sur
   desktop. Sur mobile (<768px) on force 1.5rem (24px) pour laisser plus de
   place au contenu à 320px.

   Le mixin `section-container` gère automatiquement les sections qui
   l'utilisent. Cette liste couvre les cas hardcodés (`__inner`, `__container`,
   etc.) qui ne passent pas par le mixin.

   Utilise `!important` pour battre la spécificité des règles nested dans
   chaque page/section, sans avoir à modifier chaque fichier.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  .formation-single-hero__inner,
  .formation-single-body__container,
  .formation-single-related__inner,
  .cas-clients-section__inner,
  .experts-hero__inner,
  .experts-domaines__inner,
  .experts-jeremy__inner,
  .experts-faq__inner,
  .experts-valeurs__title,
  .experts-grid__list,
  .audits-hero__inner,
  .audits-hero__cards,
  .audit-single-hero__inner,
  .audit-single-chiffres__list,
  .audit-single-valeurs__list,
  .audit-single-related__columns,
  .cas-usages-hero__inner,
  .cas-single-hero__inner,
  .blog-header > div,
  .blog-header > .wp-block-group__inner-container,
  .blog-list,
  .blog-seo,
  .article-header__inner,
  .article-body__container,
  .contact-page__container,
  .formation-hero__inner,
  .formation-qualiopi__inner,
  .formation-cards__grid,
  .services-cards .audits-hero__cards,
  .audits-cards-section .audits-hero__cards {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }
  /* Sections qui appliquent leur padding directement sur les enfants
     .wp-block-group__inner-container / > div (sans passer par le mixin) */
  .blog-section > .wp-block-group__inner-container,
  .blog-section > div,
  .case-studies > .wp-block-group__inner-container,
  .case-studies > div {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }
}
/*
Theme Name: Inari Child
Theme URI: https://inari.fr/
Author: Florian Le Guyader
Author URI: https://www.ethicfirst.fr/
Description: Thème sur mesure du site Inari — Atelier fil Blanc. Basé sur le starter theme Generic, forké depuis le thème Ethic First.
Version: 0.1.0
Template: generic
Text Domain: inari-child
*/
/* ═══════════════════════════════════════════════════════════ */
/* Gutenberg Kit – Styles des blocs natifs WordPress          */
/* ═══════════════════════════════════════════════════════════ */
/* ─── Conteneur de contenu ───────────────────────────────── */
.entry-content,
.wp-block-post-content {
  max-width: 1536px;
  margin: 0 auto;
  padding-left: 2.5rem;
  padding-right: 2.5rem;
  /* Blocs larges */
  /* Blocs pleine largeur */
}
@media (min-width: 1024px) {
  .entry-content,
  .wp-block-post-content {
    padding-left: 5rem;
    padding-right: 5rem;
  }
}
.entry-content > *,
.wp-block-post-content > * {
  max-width: 800px;
}
.entry-content > .alignwide,
.wp-block-post-content > .alignwide {
  max-width: 1100px;
}
.entry-content > .alignfull,
.wp-block-post-content > .alignfull {
  max-width: none;
  margin-left: calc(-1 * 2.5rem);
  margin-right: calc(-1 * 2.5rem);
}
@media (min-width: 1024px) {
  .entry-content > .alignfull,
  .wp-block-post-content > .alignfull {
    margin-left: calc(-1 * 5rem);
    margin-right: calc(-1 * 5rem);
  }
}

/* ─── Titres ─────────────────────────────────────────────── */
/* Déjà définis dans _typography.scss (h2–h6, font-heading)  */
/* Ajustements spécifiques Gutenberg                          */
.wp-block-heading {
  margin-top: 3rem;
  margin-bottom: 1rem;
}
.wp-block-heading:first-child {
  margin-top: 0;
}

/* ─── Paragraphe ─────────────────────────────────────────── */
.wp-block-paragraph {
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 400;
  color: #161F2C;
  line-height: 1.6;
  margin: 0 0 1rem 0;
  font-size: 1rem;
  /* Variante petite */
  /* Variante grande */
}
@media (min-width: 1024px) {
  .wp-block-paragraph {
    font-size: 1.125rem;
  }
}
.wp-block-paragraph.has-small-font-size {
  font-size: 0.875rem;
}
.wp-block-paragraph.has-large-font-size {
  font-size: 1.25rem;
}

/* ─── Listes ─────────────────────────────────────────────── */
.wp-block-list {
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: #161F2C;
  line-height: 1.6;
  margin: 0 0 1rem 0;
  /* Liste ordonnée */
}
.wp-block-list li {
  margin-bottom: 0.25rem;
}
.wp-block-list li::marker {
  color: #8B1A4B;
}
.wp-block-list.is-ordered li::marker {
  color: #161F2C;
  font-weight: 600;
}

/* ─── Citation ───────────────────────────────────────────── */
.wp-block-quote {
  border-left: 4px solid #8B1A4B;
  padding: 1rem 1.5rem;
  margin: 1.5rem 0;
  background: #F9F0F4;
  border-radius: 0 0.5rem 0.5rem 0;
}
.wp-block-quote p {
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 500;
  font-size: 1.125rem !important;
  font-style: italic;
  color: #161F2C;
  line-height: 1.6;
  margin: 0 0 0.5rem 0 !important;
}
.wp-block-quote cite {
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 600;
  font-size: 0.875rem;
  color: #8B1A4B;
  font-style: normal;
}

/* Citation mise en avant */
.wp-block-quote.is-style-large,
.wp-block-pullquote {
  border-left: none;
  border: none;
  text-align: center;
  padding: 2rem;
  background: #EAF6F8;
  border-radius: 1rem;
}
.wp-block-quote.is-style-large p,
.wp-block-pullquote p {
  font-family: "Lora", Georgia, "Times New Roman", serif;
  font-weight: 700;
  font-size: 1.5rem !important;
  color: #3BB9CB;
  font-style: normal;
}
@media (min-width: 1024px) {
  .wp-block-quote.is-style-large p,
  .wp-block-pullquote p {
    font-size: 1.875rem !important;
  }
}
.wp-block-quote.is-style-large cite,
.wp-block-pullquote cite {
  color: #161F2C;
}

/* ─── Image ──────────────────────────────────────────────── */
.wp-block-image {
  margin: 1.5rem 0;
  /* Style arrondi */
}
.wp-block-image img {
  border-radius: 1rem;
  height: auto;
}
.wp-block-image figcaption {
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 0.8125rem;
  color: #525252;
  text-align: center;
  margin-top: 0.5rem;
}
.wp-block-image.is-style-rounded img {
  border-radius: 50%;
}

/* ─── Colonnes ───────────────────────────────────────────── */
.wp-block-columns {
  gap: 2rem;
  margin: 1.5rem 0;
}

.wp-block-column {
  flex: 1;
}

/* ─── Boutons ────────────────────────────────────────────── */
.wp-block-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 1.5rem 0;
}

/* Reset wrapper bouton Gutenberg */
.wp-block-button {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  /* Neutralise la puce héritée du mixin btn (_buttons.scss) sur le wrapper :
     la puce/flèche ne doit exister que sur le lien (.wp-block-button__link::before) */
}
.wp-block-button::before {
  content: none !important;
}

.wp-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 99999px;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  font-weight: 700;
  font-family: "Lora", Georgia, "Times New Roman", serif;
  text-decoration: none;
  transition: background-color 0.3s ease, color 0.3s ease;
  border: none;
  cursor: pointer;
  /* Filled (défaut = primary) */
  background-color: #8B1A4B;
  color: #FFFFFF;
  /* Icône dot avant le texte */
}
@media (min-width: 1024px) {
  .wp-block-button__link {
    font-size: 1.125rem;
  }
}
.wp-block-button__link::before {
  content: "\f46f";
  font-family: "icon";
  font-size: 0.8em;
  transition: all 0.3s ease;
}
.wp-block-button__link:hover, .wp-block-button__link:focus {
  background-color: #6E1339;
  color: #FFFFFF;
}
.wp-block-button__link:hover::before, .wp-block-button__link:focus::before {
  content: "\f004";
  font-size: 1.2em;
}
.wp-block-button__link:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* Couleur icône par variante */
/* Primary, outline-white : icône blanche */
.wp-block-button.btn-primary .wp-block-button__link::before,
.wp-block-button.btn-outline-white .wp-block-button__link::before {
  color: #FFFFFF;
}

/* Secondary, ghost, tertiary : icône bleue */
.wp-block-button.btn-secondary .wp-block-button__link::before,
.wp-block-button.btn-ghost .wp-block-button__link::before,
.wp-block-button.btn-tertiary .wp-block-button__link::before {
  color: #8B1A4B;
}

/* Outline-white hover : icône passe en navy */
.wp-block-button.btn-outline-white .wp-block-button__link:hover::before,
.wp-block-button.btn-outline-white .wp-block-button__link:focus::before {
  color: #6E1339;
}

/* Tertiary hover : icône en navy */
.wp-block-button.btn-tertiary .wp-block-button__link:hover::before,
.wp-block-button.btn-tertiary .wp-block-button__link:focus::before {
  color: #6E1339;
}

/* Outline (Gutenberg natif) */
.wp-block-button.is-style-outline .wp-block-button__link {
  background-color: transparent;
  color: #8B1A4B;
  border: 2px solid #8B1A4B;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover, .wp-block-button.is-style-outline .wp-block-button__link:focus {
  background-color: #F9F0F4;
}

/* ─── Bridge composants → blocs Gutenberg ────────────────── */
/* La classe est mise sur .wp-block-button (le wrapper)       */
/* Primary (navy) */
.wp-block-button.btn-primary .wp-block-button__link {
  background-color: #8B1A4B !important;
  color: #FFFFFF !important;
  border: none !important;
}
.wp-block-button.btn-primary .wp-block-button__link:hover, .wp-block-button.btn-primary .wp-block-button__link:focus {
  background-color: #6E1339 !important;
}

/* Secondary (fond blanc, bordure bleue) */
.wp-block-button.btn-secondary .wp-block-button__link {
  background-color: #FFFFFF !important;
  color: #8B1A4B !important;
  border: 2px solid #8B1A4B !important;
}
.wp-block-button.btn-secondary .wp-block-button__link:hover, .wp-block-button.btn-secondary .wp-block-button__link:focus {
  background-color: #F9F0F4 !important;
  color: #8B1A4B !important;
}

/* Outline white (fond navy, bordure blanche) */
.wp-block-button.btn-outline-white .wp-block-button__link {
  background-color: transparent !important;
  color: #FFFFFF !important;
  border: 2px solid #FFFFFF !important;
}
.wp-block-button.btn-outline-white .wp-block-button__link:hover, .wp-block-button.btn-outline-white .wp-block-button__link:focus {
  background-color: #FFFFFF !important;
  color: #6E1339 !important;
}

/* Ghost (transparent, texte bleu) */
.wp-block-button.btn-ghost .wp-block-button__link {
  background-color: transparent !important;
  color: #8B1A4B !important;
  border: 2px solid transparent !important;
}
.wp-block-button.btn-ghost .wp-block-button__link:hover, .wp-block-button.btn-ghost .wp-block-button__link:focus {
  background-color: #F9F0F4 !important;
}

/* Tertiary (fond blanc, texte bleu) */
.wp-block-button.btn-tertiary .wp-block-button__link {
  background-color: #FFFFFF !important;
  color: #8B1A4B !important;
  border: 2px solid #FFFFFF !important;
}
.wp-block-button.btn-tertiary .wp-block-button__link:hover, .wp-block-button.btn-tertiary .wp-block-button__link:focus {
  background-color: rgba(255, 255, 255, 0.85) !important;
  color: #6E1339 !important;
}

/* ─── Séparateur ─────────────────────────────────────────── */
.wp-block-separator {
  border: none;
  border-top: 1px solid #D4D4D4;
  margin: 2rem 0;
  height: 0;
  background: none;
}
.wp-block-separator.is-style-wide {
  border-top-width: 2px;
}
.wp-block-separator.is-style-dots {
  border: none;
  text-align: center;
  color: #737373;
}
.wp-block-separator.is-style-dots::before {
  content: "···";
  font-size: 1.5rem;
  letter-spacing: 1rem;
}

/* ─── Tableau ────────────────────────────────────────────── */
.wp-block-table {
  margin: 1.5rem 0;
  overflow-x: auto;
}
.wp-block-table table {
  width: 100%;
  border-collapse: collapse;
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 0.9375rem;
}
.wp-block-table th {
  background-color: #161F2C;
  color: #FFFFFF;
  font-weight: 700;
  text-align: left;
  padding: 0.75rem 1rem;
}
.wp-block-table td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #E5E5E5;
  color: #161F2C;
}
.wp-block-table tr:hover td {
  background-color: #F5F5F5;
}

/* ─── Groupe / Cover ─────────────────────────────────────── */
.wp-block-group.has-background {
  padding: 2rem;
  border-radius: 1rem;
}

.wp-block-cover {
  border-radius: 1rem;
  overflow: hidden;
  margin: 1.5rem 0;
  min-height: 300px;
}
.wp-block-cover .wp-block-cover__inner-container {
  max-width: 800px;
}

/* ─── Galerie ────────────────────────────────────────────── */
.wp-block-gallery {
  margin: 1.5rem 0;
  gap: 0.75rem;
}
.wp-block-gallery .wp-block-image {
  margin: 0;
}
.wp-block-gallery .wp-block-image img {
  border-radius: 0.5rem;
}

/* ─── Code / Preformatted ────────────────────────────────── */
.wp-block-code,
.wp-block-preformatted {
  background: #F5F5F5;
  border: 1px solid #E5E5E5;
  border-radius: 0.5rem;
  padding: 1rem;
  overflow-x: auto;
  margin: 1.5rem 0;
}
.wp-block-code code,
.wp-block-preformatted code {
  font-family: "Fira Code", "Consolas", monospace;
  font-size: 0.875rem;
  color: #161F2C;
}

/* ─── Couleurs personnalisées Gutenberg ──────────────────── */
.has-bordeaux-500-color {
  color: #8B1A4B;
}

.has-bordeaux-500-background-color {
  background-color: #8B1A4B;
}

.has-cyan-500-color {
  color: #3BB9CB;
}

.has-cyan-500-background-color {
  background-color: #3BB9CB;
}

.has-cyan-50-background-color {
  background-color: #EAF6F8;
}

.has-slate-900-color {
  color: #161F2C;
}

.has-white-color {
  color: #FFFFFF;
}

.has-white-background-color {
  background-color: #FFFFFF;
}

.has-grey-50-background-color {
  background-color: #F5F5F5;
}

/* ─── Section chiffres (stat) ────────────────────────────── */
.stat-number {
  font-family: "Lora", Georgia, "Times New Roman", serif;
  font-weight: 800;
  font-size: 3rem;
  line-height: 1.2;
  color: #161F2C;
}

/*
Theme Name: Inari Child
Theme URI: https://inari.fr/
Author: Florian Le Guyader
Author URI: https://www.ethicfirst.fr/
Description: Thème sur mesure du site Inari — Atelier fil Blanc. Basé sur le starter theme Generic, forké depuis le thème Ethic First.
Version: 0.1.0
Template: generic
Text Domain: inari-child
*/
/* ═══════════════════════════════════════════════════════════
   Variantes de blocs Inari
   Enregistrées côté PHP dans inc/block-patterns.php
   (inari_register_block_styles). Elles apparaissent dans le
   panneau « Styles » de l'éditeur quand un paragraphe est
   sélectionné : c'est le levier d'édition laissé à la cliente.
   ═══════════════════════════════════════════════════════════ */
/* ─── Sur-titre ───────────────────────────────────────────
   « Le manifeste », « Parcours certifiants », « Résultats »,
   « Qui suis-je »… Lora italique, bordeaux, posé au-dessus du
   <h2> de la section.                                          */
.is-style-surtitre {
  font-family: "Lora", Georgia, "Times New Roman", serif;
  font-size: 1.5625rem; /* 25px */
  line-height: 1.05;
  font-weight: 400;
  font-style: italic;
  color: #8B1A4B;
  margin-bottom: 0.25rem;
}
@media (min-width: 1024px) {
  .is-style-surtitre {
    font-size: 1.75rem; /* 28px */
  }
}

/* ─── Citation d'Inari ──────────────────────────────────── */
.is-style-citation-inari {
  font-family: "Lora", Georgia, "Times New Roman", serif;
  font-weight: 600;
  font-style: italic;
  font-size: 1.0625rem; /* 17px */
  line-height: 1.5;
  color: #8B1A4B;
}

/*
Theme Name: Inari Child
Theme URI: https://inari.fr/
Author: Florian Le Guyader
Author URI: https://www.ethicfirst.fr/
Description: Thème sur mesure du site Inari — Atelier fil Blanc. Basé sur le starter theme Generic, forké depuis le thème Ethic First.
Version: 0.1.0
Template: generic
Text Domain: inari-child
*/
/* ─── Reset ul/li quand wp-block-buttons est rendu en <ul> (a11y) ─── */
ul.wp-block-buttons {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

li.wp-block-button {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ─── White dot (icône avant les liens/boutons) ──────────── */
/* ─── Bouton de base ─────────────────────────────────────── */
/* ─── Primary (fond navy, texte blanc) ──────────────────── */
.btn-primary, .btn-cta, .redButton a,
.blueButton a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: none;
  border-radius: 99999px;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  font-weight: 700;
  font-family: "Lora", Georgia, "Times New Roman", serif;
  cursor: pointer;
  text-decoration: none;
  line-height: normal;
  transition: background-color 0.3s ease, color 0.3s ease;
  /* RGAA 10.7 : focus visible garanti sur tout fond.
     `box-shadow` (au lieu d'outline) → suit toujours le border-radius pill.
     Anneau blanc (2px) + orange (5px) → contraste garanti sur tout fond.
     Appliqué sur :focus (et pas seulement :focus-visible) car dans
     certains cas (parent theme, focus reçu via .focus() ou hors flux Tab)
     :focus-visible ne matche pas. `outline: none !important` neutralise
     tout outline hérité (thème parent, user-agent). */
  background-color: #8B1A4B;
  color: #FFFFFF;
}
@media (min-width: 1024px) {
  .btn-primary, .btn-cta, .redButton a,
  .blueButton a {
    font-size: 1.125rem;
  }
}
.btn-primary::before, .btn-cta::before, .redButton a::before,
.blueButton a::before {
  content: "\f46f";
  font-family: "icon";
  font-size: 0.8em;
  transition: all 0.3s ease;
}
.btn-primary:hover::before, .btn-cta:hover::before, .redButton a:hover::before, .btn-primary:focus::before, .btn-cta:focus::before, .redButton a:focus::before,
.blueButton a:hover::before,
.blueButton a:focus::before {
  content: "\f004";
  font-size: 1.2em;
}
.btn-primary:focus, .btn-cta:focus, .redButton a:focus,
.blueButton a:focus {
  outline: none !important;
  box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 5px #3BB9CB;
}
.btn-primary:hover, .btn-cta:hover, .redButton a:hover, .btn-primary:focus, .btn-cta:focus, .redButton a:focus,
.blueButton a:hover,
.blueButton a:focus {
  background-color: #6E1339;
  color: #FFFFFF;
}
.btn-primary::before, .btn-cta::before, .redButton a::before,
.blueButton a::before {
  color: #FFFFFF;
}

/* Gutenberg wrappe les boutons dans <div class="wp-block-button btn-primary">
   contenant un <a class="wp-block-button__link">. Le focus arrive sur le <a> —
   on doit donc reproduire le focus-visible dessus (sinon l'outline stylé sur
   le div n'apparaît pas, et si visible il est rectangulaire au lieu de suivre
   le border-radius du bouton). */
.btn-primary .wp-block-button__link:focus-visible, .btn-cta .wp-block-button__link:focus-visible, .redButton a .wp-block-button__link:focus-visible,
.btn-secondary .wp-block-button__link:focus-visible,
.btn-outline .wp-block-button__link:focus-visible,
.btn-outline-white .wp-block-button__link:focus-visible,
.btn-ghost .wp-block-button__link:focus-visible,
.btn-tertiary .wp-block-button__link:focus-visible,
.btn-cta-white .wp-block-button__link:focus-visible {
  outline: 3px solid #3BB9CB;
  outline-offset: 2px;
  border-radius: 99999px;
}

/* Retire le focus-visible sur le div wrapper Gutenberg uniquement
   (le focus réel est déjà sur le <a> intérieur). Scoper à .wp-block-button
   évite d'annuler par erreur le focus des <a class="btn-primary"> directs. */
.wp-block-button.btn-primary:focus-visible, .wp-block-button.btn-cta:focus-visible, .redButton a.wp-block-button:focus-visible,
.wp-block-button.btn-secondary:focus-visible,
.wp-block-button.btn-outline:focus-visible,
.wp-block-button.btn-outline-white:focus-visible,
.wp-block-button.btn-ghost:focus-visible,
.wp-block-button.btn-tertiary:focus-visible,
.wp-block-button.btn-cta-white:focus-visible {
  outline: none;
}

/* ─── Secondary (fond blanc, bordure bleue, texte bleu) ─── */
.btn-secondary, .btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: none;
  border-radius: 99999px;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  font-weight: 700;
  font-family: "Lora", Georgia, "Times New Roman", serif;
  cursor: pointer;
  text-decoration: none;
  line-height: normal;
  transition: background-color 0.3s ease, color 0.3s ease;
  /* RGAA 10.7 : focus visible garanti sur tout fond.
     `box-shadow` (au lieu d'outline) → suit toujours le border-radius pill.
     Anneau blanc (2px) + orange (5px) → contraste garanti sur tout fond.
     Appliqué sur :focus (et pas seulement :focus-visible) car dans
     certains cas (parent theme, focus reçu via .focus() ou hors flux Tab)
     :focus-visible ne matche pas. `outline: none !important` neutralise
     tout outline hérité (thème parent, user-agent). */
  background-color: #FFFFFF;
  color: #8B1A4B;
  border: 2px solid #8B1A4B;
}
@media (min-width: 1024px) {
  .btn-secondary, .btn-outline {
    font-size: 1.125rem;
  }
}
.btn-secondary::before, .btn-outline::before {
  content: "\f46f";
  font-family: "icon";
  font-size: 0.8em;
  transition: all 0.3s ease;
}
.btn-secondary:hover::before, .btn-outline:hover::before, .btn-secondary:focus::before, .btn-outline:focus::before {
  content: "\f004";
  font-size: 1.2em;
}
.btn-secondary:focus, .btn-outline:focus {
  outline: none !important;
  box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 5px #3BB9CB;
}
.btn-secondary:hover, .btn-outline:hover, .btn-secondary:focus, .btn-outline:focus {
  background-color: #F9F0F4;
  color: #8B1A4B;
}
.btn-secondary::before, .btn-outline::before {
  color: #8B1A4B;
}

/* ─── Outline white (fond navy, bordure blanche, texte blanc) */
.btn-outline-white {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: none;
  border-radius: 99999px;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  font-weight: 700;
  font-family: "Lora", Georgia, "Times New Roman", serif;
  cursor: pointer;
  text-decoration: none;
  line-height: normal;
  transition: background-color 0.3s ease, color 0.3s ease;
  /* RGAA 10.7 : focus visible garanti sur tout fond.
     `box-shadow` (au lieu d'outline) → suit toujours le border-radius pill.
     Anneau blanc (2px) + orange (5px) → contraste garanti sur tout fond.
     Appliqué sur :focus (et pas seulement :focus-visible) car dans
     certains cas (parent theme, focus reçu via .focus() ou hors flux Tab)
     :focus-visible ne matche pas. `outline: none !important` neutralise
     tout outline hérité (thème parent, user-agent). */
  background-color: transparent;
  color: #FFFFFF;
  border: 2px solid #FFFFFF;
}
@media (min-width: 1024px) {
  .btn-outline-white {
    font-size: 1.125rem;
  }
}
.btn-outline-white::before {
  content: "\f46f";
  font-family: "icon";
  font-size: 0.8em;
  transition: all 0.3s ease;
}
.btn-outline-white:hover::before, .btn-outline-white:focus::before {
  content: "\f004";
  font-size: 1.2em;
}
.btn-outline-white:focus {
  outline: none !important;
  box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 5px #3BB9CB;
}
.btn-outline-white:hover, .btn-outline-white:focus {
  background-color: #FFFFFF;
  color: #8B1A4B;
}
.btn-outline-white::before {
  color: #FFFFFF;
}
.btn-outline-white:hover::before, .btn-outline-white:focus::before {
  color: #6E1339;
}

/* ─── Ghost (transparent, texte bleu) ────────────────────── */
.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: none;
  border-radius: 99999px;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  font-weight: 700;
  font-family: "Lora", Georgia, "Times New Roman", serif;
  cursor: pointer;
  text-decoration: none;
  line-height: normal;
  transition: background-color 0.3s ease, color 0.3s ease;
  /* RGAA 10.7 : focus visible garanti sur tout fond.
     `box-shadow` (au lieu d'outline) → suit toujours le border-radius pill.
     Anneau blanc (2px) + orange (5px) → contraste garanti sur tout fond.
     Appliqué sur :focus (et pas seulement :focus-visible) car dans
     certains cas (parent theme, focus reçu via .focus() ou hors flux Tab)
     :focus-visible ne matche pas. `outline: none !important` neutralise
     tout outline hérité (thème parent, user-agent). */
  background-color: transparent;
  color: #8B1A4B;
  border: 2px solid transparent;
}
@media (min-width: 1024px) {
  .btn-ghost {
    font-size: 1.125rem;
  }
}
.btn-ghost::before {
  content: "\f46f";
  font-family: "icon";
  font-size: 0.8em;
  transition: all 0.3s ease;
}
.btn-ghost:hover::before, .btn-ghost:focus::before {
  content: "\f004";
  font-size: 1.2em;
}
.btn-ghost:focus {
  outline: none !important;
  box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 5px #3BB9CB;
}
.btn-ghost:hover, .btn-ghost:focus {
  background-color: #F9F0F4;
  color: #8B1A4B;
}
.btn-ghost::before {
  color: #8B1A4B;
}

/* ─── Tertiary (fond blanc, texte bleu) ──────────────────── */
.btn-tertiary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: none;
  border-radius: 99999px;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  font-weight: 700;
  font-family: "Lora", Georgia, "Times New Roman", serif;
  cursor: pointer;
  text-decoration: none;
  line-height: normal;
  transition: background-color 0.3s ease, color 0.3s ease;
  /* RGAA 10.7 : focus visible garanti sur tout fond.
     `box-shadow` (au lieu d'outline) → suit toujours le border-radius pill.
     Anneau blanc (2px) + orange (5px) → contraste garanti sur tout fond.
     Appliqué sur :focus (et pas seulement :focus-visible) car dans
     certains cas (parent theme, focus reçu via .focus() ou hors flux Tab)
     :focus-visible ne matche pas. `outline: none !important` neutralise
     tout outline hérité (thème parent, user-agent). */
  background-color: #FFFFFF;
  color: #8B1A4B;
  border: 2px solid #FFFFFF;
}
@media (min-width: 1024px) {
  .btn-tertiary {
    font-size: 1.125rem;
  }
}
.btn-tertiary::before {
  content: "\f46f";
  font-family: "icon";
  font-size: 0.8em;
  transition: all 0.3s ease;
}
.btn-tertiary:hover::before, .btn-tertiary:focus::before {
  content: "\f004";
  font-size: 1.2em;
}
.btn-tertiary:focus {
  outline: none !important;
  box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 5px #3BB9CB;
}
.btn-tertiary:hover, .btn-tertiary:focus {
  background-color: rgba(255, 255, 255, 0.85);
  color: #8B1A4B;
}
.btn-tertiary::before {
  color: #8B1A4B;
}

/* ─── Icon only – Orange ─────────────────────────────────── */
.btn-icon-orange {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: #FF675A;
  color: #FFFFFF;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease;
  padding: 0;
}
.btn-icon-orange i {
  font-size: 1.25rem;
}
.btn-icon-orange:hover, .btn-icon-orange:focus {
  background-color: #B91D1C;
}
.btn-icon-orange:focus-visible {
  outline: 2px solid #FF675A;
  outline-offset: 2px;
}

/* ─── Icon only – Ghost ──────────────────────────────────── */
.btn-icon-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: transparent;
  color: #8B1A4B;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
  padding: 0;
}
.btn-icon-ghost i {
  font-size: 1.25rem;
}
.btn-icon-ghost:hover, .btn-icon-ghost:focus {
  background-color: #F9F0F4;
  color: #8B1A4B;
}
.btn-icon-ghost:focus-visible {
  outline: 2px solid #3BB9CB;
  outline-offset: 2px;
}

/* ─── Compat anciennes classes ────────────────────────────── */
/*
Theme Name: Inari Child
Theme URI: https://inari.fr/
Author: Florian Le Guyader
Author URI: https://www.ethicfirst.fr/
Description: Thème sur mesure du site Inari — Atelier fil Blanc. Basé sur le starter theme Generic, forké depuis le thème Ethic First.
Version: 0.1.0
Template: generic
Text Domain: inari-child
*/
/* ─── Pagination ─────────────────────────────────────────── */
/* WordPress génère : .nav-links > .page-numbers (a, span)   */
/* Classes : .current, .prev, .next, .dots                   */
.pagination,
.nav-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1.5rem 0;
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ─── Boutons numéros ────────────────────────────────────── */
.page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0.25rem 0.5rem;
  font-size: 1rem;
  font-weight: 500;
  color: #161F2C;
  text-decoration: none;
  border-radius: 0.5rem;
  transition: color 0.2s ease;
  /* Hover / focus */
  /* Page active */
  /* Points de suspension */
}
.page-numbers:hover, .page-numbers:focus {
  color: #8B1A4B;
}
.page-numbers:focus-visible {
  outline: 2px solid #3BB9CB;
  outline-offset: 2px;
}
.page-numbers.current {
  color: #8B1A4B;
  font-weight: 700;
  position: relative;
}
.page-numbers.current::after {
  content: "";
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 6px;
  background-color: #8B1A4B;
  border-radius: 50%;
}
.page-numbers.dots {
  min-width: auto;
  padding: 0 0.25rem;
  color: #737373;
  cursor: default;
}
.page-numbers.dots:hover {
  color: #737373;
}

/* ─── Précédent / Suivant ────────────────────────────────── */
.prev.page-numbers,
.next.page-numbers {
  font-weight: 500;
  color: #8B1A4B;
  gap: 0.25rem;
  /* Icône flèche */
}
.prev.page-numbers:hover, .prev.page-numbers:focus,
.next.page-numbers:hover,
.next.page-numbers:focus {
  color: #6E1339;
}
.prev.page-numbers i,
.next.page-numbers i {
  font-size: 0.75rem;
}

/* ─── Mobile / Tablette : masquer Précédent/Suivant texte ── */
@media (max-width: 1023px) {
  .prev.page-numbers,
  .next.page-numbers {
    font-size: 0;
  }
  .prev.page-numbers i,
  .next.page-numbers i {
    font-size: 1rem;
  }
}
/* ─── Désactiver quand première/dernière page ────────────── */
/* WordPress ne génère pas .prev/.next quand on est sur la
   première/dernière page — le lien est simplement absent.
   Si besoin d'un état désactivé custom :                     */
.page-numbers.disabled {
  color: #A1A1A1;
  pointer-events: none;
  cursor: default;
}

/* ─── Pagination accessible « .ef-pagination » ──────────────── */
/* Markup généré par ef_render_pagination() (cf. inc/pagination.php).
   Un seul <nav aria-label>, <ul> sémantique, prev/next avec sr-only,
   état désactivé via aria-disabled.                                 */
.ef-pagination {
  display: flex;
  justify-content: center;
  /* Les boutons prev / next reprennent le look des .page-numbers
     numérotés (mêmes dimensions, même hover/focus, même radius). */
  /* État désactivé (1re page → prev, dernière → next) */
}
.ef-pagination__list {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 1.5rem 0;
}
.ef-pagination__item {
  margin: 0;
  padding: 0;
}
.ef-pagination__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0.25rem 0.5rem;
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 1rem;
  font-weight: 500;
  color: #8B1A4B;
  text-decoration: none;
  border-radius: 0.5rem;
  transition: color 0.2s ease;
}
.ef-pagination__link:hover, .ef-pagination__link:focus {
  color: #6E1339;
}
.ef-pagination__link:focus-visible {
  outline: 2px solid #3BB9CB;
  outline-offset: 2px;
}
.ef-pagination__link.is-disabled {
  color: #A1A1A1;
  cursor: not-allowed;
  pointer-events: none;
}

/*
Theme Name: Inari Child
Theme URI: https://inari.fr/
Author: Florian Le Guyader
Author URI: https://www.ethicfirst.fr/
Description: Thème sur mesure du site Inari — Atelier fil Blanc. Basé sur le starter theme Generic, forké depuis le thème Ethic First.
Version: 0.1.0
Template: generic
Text Domain: inari-child
*/
/* ─── Barre de recherche – base ──────────────────────────── */
.search-form {
  display: flex;
  align-items: center;
  position: relative;
}
.search-form input[type=search] {
  border: 1px solid #000;
  border-radius: 99999px;
  padding: 0.5rem 2.5rem 0.5rem 1rem;
  width: 100%;
  min-width: 200px;
  font-size: 0.875rem;
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: #161F2C;
  background-color: #FFFFFF;
  margin: 0;
}
.search-form input[type=search]::placeholder {
  color: #737373;
}
.search-form input[type=search]:focus {
  outline: 2px solid #3BB9CB;
  outline-offset: 2px;
  border-color: #8B1A4B;
}
.search-form button[type=submit] {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: #8B1A4B;
  border: none;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  margin: auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.2s ease;
  /* Au survol / focus : loupe → flèche cerclée (comme les autres boutons) */
}
.search-form button[type=submit] i {
  color: #FFFFFF;
  font-size: 1.3rem;
  transition: -webkit-mask-image 0.2s ease, mask-image 0.2s ease;
}
.search-form button[type=submit]:hover, .search-form button[type=submit]:focus {
  background-color: #6E1339;
}
.search-form button[type=submit]:hover i.icon-magnifer, .search-form button[type=submit]:focus i.icon-magnifer {
  -webkit-mask-image: url("img/icons/round-arrow-right.svg");
  mask-image: url("img/icons/round-arrow-right.svg");
}
.search-form button[type=submit]:focus-visible {
  outline: 2px solid #FFFFFF;
  outline-offset: 2px;
}

/* ─── Variante sur fond sombre (navy/bleu) ───────────────── */
.search-form--dark input[type=search] {
  background-color: transparent;
  border-color: rgba(255, 255, 255, 0.5);
  color: #FFFFFF;
}
.search-form--dark input[type=search]::placeholder {
  color: rgba(255, 255, 255, 0.7);
}
.search-form--dark input[type=search]:focus {
  outline-color: #FFFFFF;
  border-color: #FFFFFF;
}
.search-form--dark button[type=submit] {
  background-color: #FFFFFF;
}
.search-form--dark button[type=submit] i {
  color: #8B1A4B;
}
.search-form--dark button[type=submit]:hover, .search-form--dark button[type=submit]:focus {
  background-color: #E5E5E5;
}
.search-form--dark button[type=submit]:focus-visible {
  outline-color: #FFFFFF;
}

/*
Theme Name: Inari Child
Theme URI: https://inari.fr/
Author: Florian Le Guyader
Author URI: https://www.ethicfirst.fr/
Description: Thème sur mesure du site Inari — Atelier fil Blanc. Basé sur le starter theme Generic, forké depuis le thème Ethic First.
Version: 0.1.0
Template: generic
Text Domain: inari-child
*/
/* ─── Barre de filtres catégories ────────────────────────── */
.filters-bar {
  text-align: center;
  padding: 1.5rem 0;
}

.filters-title {
  font-family: "Lora", Georgia, "Times New Roman", serif;
  font-weight: 700;
  font-size: 1.25rem;
  color: #161F2C;
  margin: 0 0 1rem 0;
}

.filters-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ─── Tag / bouton filtre ────────────────────────────────── */
.filter-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1rem;
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  color: #161F2C;
  background-color: #FFFFFF;
  border: 1px solid #161F2C;
  border-radius: 99999px;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
  /* Hover / focus */
  /* Sélectionné / actif */
}
.filter-tag:hover, .filter-tag:focus {
  background-color: #161F2C;
  color: #FFFFFF;
}
.filter-tag:focus-visible {
  outline: 2px solid #3BB9CB;
  outline-offset: 2px;
}
.filter-tag.is-active, .filter-tag[aria-pressed=true] {
  background-color: #161F2C;
  color: #FFFFFF;
}

/* ─── Tag informatif (non cliquable, card blog) ──────────── */
.tag-info {
  display: inline-flex;
  align-items: center;
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  color: #161F2C;
  background-color: transparent;
  border-radius: 99999px;
  cursor: default;
}

/* ─── Filtre par select (secteurs / prestations) ─────────── */
.filters-selects {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  gap: 1rem;
  margin-top: 1.5rem;
}

.filter-group {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.filter-group label {
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  color: #161F2C;
}
.filter-group select {
  appearance: none;
  padding: 0.5rem 2rem 0.5rem 0.75rem;
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  color: #161F2C;
  background-color: #FFFFFF;
  border: 1px solid #D4D4D4;
  border-radius: 0.5rem;
  cursor: pointer;
  min-width: 180px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23161F2C' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
}
.filter-group select:focus {
  outline: 2px solid #3BB9CB;
  outline-offset: 2px;
  border-color: #8B1A4B;
}

.filter-submit {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 500;
  color: #8B1A4B;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  font-size: 0.875rem;
}
.filter-submit::before {
  content: "●";
  font-size: 0.5rem;
}
.filter-submit:hover, .filter-submit:focus {
  color: #6E1339;
}
.filter-submit:focus-visible {
  outline: 2px solid #3BB9CB;
  outline-offset: 2px;
}

/*
Theme Name: Inari Child
Theme URI: https://inari.fr/
Author: Florian Le Guyader
Author URI: https://www.ethicfirst.fr/
Description: Thème sur mesure du site Inari — Atelier fil Blanc. Basé sur le starter theme Generic, forké depuis le thème Ethic First.
Version: 0.1.0
Template: generic
Text Domain: inari-child
*/
/* ═══════════════════════════════════════════════════════════ */
/* Card article de blog                                       */
/* ═══════════════════════════════════════════════════════════ */
/* ─── Grille cards blog (shortcode) ──────────────────────── */
.cards-blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem; /* Figma : gap 40 */
  /* Reset ul/li quand rendu en liste sémantique (a11y). */
  list-style: none;
  margin: 0;
  padding: 0;
}
.cards-blog-grid > li {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex; /* pour que .card-blog remplisse la cellule */
}
@media (min-width: 768px) and (max-width: 1023px) {
  .cards-blog-grid {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 4.5rem;
  }
}
@media (max-width: 767px) {
  .cards-blog-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .cards-blog-grid .card-blog {
    max-width: 500px;
    margin-inline: auto;
  }
}

.card-blog {
  display: flex;
  flex-direction: column;
  position: relative;
  width: 100%; /* remplit son <li> parent (a11y ul/li) */
  transition: box-shadow 0.3s ease;
  /* Image en haut-gauche, en flux, chevauchant le haut de l'encart blanc */
  /* Encart blanc (sous l'image) — bordure + ombre ici, pas sur l'article */
  /* Si une image mise en avant est présente, elle chevauche le haut du
     content de 68px (via .card-blog__image-wrapper { margin-bottom: -68px }).
     On restaure alors le padding-top à 80px pour que le texte ne soit pas
     masqué par l'image. Sur les cards sans image (page recherche), le
     padding standard de 1.25rem reste. */
  /* Ordre visuel : meta avant le titre (le HTML place le titre en 1er
     pour la lecture linéarisée / RGAA 10.3). */
  /* Meta : date (gauche) + tag (droite) — Montserrat Medium/Bold 16/22 */
  /* Titre — Lora ExtraBold 24/30 cyan-500 */
  /* Extrait — Montserrat Medium 18/26 slate-700 */
  /* Lien "Lire l'article" — Montserrat Bold 18 bleu + point bleu rond */
}
.card-blog:hover .card-blog__content, .card-blog:focus-within .card-blog__content {
  background-color: #EAF6F8;
}
.card-blog:hover .card-blog__image-wrapper::after, .card-blog:focus-within .card-blog__image-wrapper::after {
  content: "";
  position: absolute;
  right: -10px;
  top: -10px;
  background-color: #3BB9CB;
  width: 75%;
  height: 100%;
  z-index: 1;
  border-radius: 0.5rem;
}
.card-blog:hover .card-blog__image-wrapper img, .card-blog:focus-within .card-blog__image-wrapper img {
  position: relative;
  z-index: 2;
}
.card-blog:hover .card-blog__link, .card-blog:focus-within .card-blog__link {
  color: #6E1339;
  text-decoration: none;
  /* point → flèche cerclée (agrandie pour être plus visible) */
}
.card-blog:hover .card-blog__link::before, .card-blog:focus-within .card-blog__link::before {
  content: "\f004";
  font-size: 1.25em;
}
.card-blog__image-wrapper {
  position: relative;
  z-index: 2;
  width: 60%;
  margin-bottom: -68px; /* chevauche l'encart (≈ Figma mb -68) */
}
.card-blog__image {
  width: 100%;
  aspect-ratio: 16/10;
  object-fit: cover;
  border-radius: 0.5rem;
  margin-bottom: 0;
  display: block;
}
.card-blog__content {
  background: #FFFFFF;
  border: 1px solid #CBD5E1;
  border-radius: 1rem;
  box-shadow: 0 2px 12px rgba(26, 26, 26, 0.06);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  flex: 1;
  transition: background-color 0.3s ease;
}
.card-blog:has(.card-blog__image-wrapper) .card-blog__content {
  padding-top: 5rem;
}
.card-blog__meta {
  order: 1;
}
.card-blog__title {
  order: 2;
}
.card-blog__excerpt {
  order: 3;
}
.card-blog__link {
  order: 4;
}
.card-blog__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 500;
  font-size: 1rem; /* 16px — Figma text/s */
  line-height: 1.375rem; /* 22px */
  color: #314158;
  /* Tag — Bold 16, bleu navy */
}
.card-blog__meta p {
  margin: 0;
}
.card-blog__meta .tag-info {
  font-weight: 700;
  color: #6E1339;
}
.card-blog__title {
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 800; /* ExtraBold */
  font-size: 1.5rem; /* 24px — Figma text/xl */
  line-height: 1.875rem; /* 30px */
  color: #3BB9CB;
  margin: 0;
}
.card-blog__excerpt {
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 500;
  font-size: 1.125rem !important; /* 18px — Figma text/m */
  line-height: 1.625rem; /* 26px */
  color: #314158;
  margin: 0 !important;
}
.card-blog__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: auto;
  padding: 0.5rem 0.5rem 0.5rem 2px;
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 700;
  font-size: 1.125rem; /* 18px */
  line-height: 1.625rem; /* 26px */
  color: #8B1A4B;
  text-decoration: none;
  /* Point bleu → flèche cerclée au survol/focus (icône du thème) */
  /* Stretched link : couvre toute la card */
}
.card-blog__link::before {
  content: "\f46f";
  font-family: "icon";
  font-size: 0.6em;
  line-height: 1;
  flex-shrink: 0;
  transition: all 0.2s ease;
}
.card-blog__link:hover::before, .card-blog__link:focus::before {
  content: "\f004";
  font-size: 1.25em;
}
.card-blog__link::before {
  font-weight: normal;
}
.card-blog__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
}
.card-blog__link:hover, .card-blog__link:focus {
  color: #6E1339;
  text-decoration: none;
}
.card-blog__link:focus-visible {
  outline: 2px solid #3BB9CB;
  outline-offset: 2px;
}

/* ─── Ancien style bloc WP (compat) ─────────────────────── */
.colonne-card-blog .wp-block-latest-posts li {
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(26, 26, 26, 0.06);
  transition: box-shadow 0.3s ease;
  border: 1px solid #CBD5E1;
  padding: 5rem 1.25rem 1.25rem 1.25rem;
  /* Image */
  /* Contenu */
  /* Meta : date + tag */
  /* Titre */
  /* Description */
  /* Lien "Lire l'article" */
}
.colonne-card-blog .wp-block-latest-posts li:hover, .colonne-card-blog .wp-block-latest-posts li:focus-within {
  box-shadow: 0 4px 24px rgba(26, 26, 26, 0.12);
}
.colonne-card-blog .wp-block-latest-posts li__featured-image {
  width: 100%;
  aspect-ratio: 16/10;
  object-fit: cover;
}
.colonne-card-blog .wp-block-latest-posts li__content {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
}
.colonne-card-blog .wp-block-latest-posts li__post-date {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 0.75rem;
  color: #525252;
}
.colonne-card-blog .wp-block-latest-posts li h2, .colonne-card-blog .wp-block-latest-posts li h3, .colonne-card-blog .wp-block-latest-posts li__post-title {
  font-family: "Lora", Georgia, "Times New Roman", serif;
  font-weight: 700;
  line-height: 1.375rem;
  color: #3BB9CB;
  margin: 0;
}
.colonne-card-blog .wp-block-latest-posts li h2 a, .colonne-card-blog .wp-block-latest-posts li h3 a, .colonne-card-blog .wp-block-latest-posts li__post-title a {
  color: inherit;
  text-decoration: none;
}
.colonne-card-blog .wp-block-latest-posts li h2 a:hover, .colonne-card-blog .wp-block-latest-posts li h2 a:focus, .colonne-card-blog .wp-block-latest-posts li h3 a:hover, .colonne-card-blog .wp-block-latest-posts li h3 a:focus, .colonne-card-blog .wp-block-latest-posts li__post-title a:hover, .colonne-card-blog .wp-block-latest-posts li__post-title a:focus {
  color: #8B1A4B;
}
.colonne-card-blog .wp-block-latest-posts li__post-excerpt {
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1.4;
  color: #525252;
  margin: 0;
}
.colonne-card-blog .wp-block-latest-posts li__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 500;
  font-size: 0.875rem;
  color: #8B1A4B;
  text-decoration: none;
  margin-top: auto;
}
.colonne-card-blog .wp-block-latest-posts li__link::before {
  content: "●";
  font-size: 0.5rem;
}
.colonne-card-blog .wp-block-latest-posts li__link:hover, .colonne-card-blog .wp-block-latest-posts li__link:focus {
  color: #6E1339;
}
.colonne-card-blog .wp-block-latest-posts li__link:hover::before, .colonne-card-blog .wp-block-latest-posts li__link:focus::before {
  content: "→";
  font-size: 0.75rem;
}

/* ═══════════════════════════════════════════════════════════ */
/* Card formation (Figma : section Formations)                */
/* Variantes : par défaut (orange), .card-formation--blue     */
/* ═══════════════════════════════════════════════════════════ */
@media (min-width: 768px) and (max-width: 1023px) {
  .columns-formations {
    flex-direction: column;
  }
}

.wp-block-list.container-bloc-formations {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 2rem; /* Figma : gap-32 entre cards */
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 768px) and (max-width: 1023px) {
  .wp-block-list.container-bloc-formations {
    flex-direction: row;
    gap: 1.5rem;
  }
}

.card-formation {
  background: #FFFFFF;
  border: 1px solid #E2E8F0; /* Figma : color/slate/200 */
  border-radius: 1rem;
  padding: 1.5rem 1.25rem 1.25rem; /* Figma : pt-24, px-20, pb-20 */
  transition: box-shadow 0.3s ease, background-color 0.3s ease;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  list-style: none;
  /* ─── Icône en absolute haut-gauche (Figma : 48px, top:-28 left:-13) ─── */
  /* Supporte 2 structures :                                              */
  /*   <span class="card-formation__icon"><i class="icon-X"></i></span>  */
  /*   <i class="icon-X"></i> (enfant direct du <li>)                    */
  /* ─── Titre (Lora ExtraBold 30/36) ─── */
  /* ─── Description : <p> contenant les spans meta + excerpt ─── */
  /* Métas : "Durée: 3h30 Public: Tout public" (Montserrat Medium 16/22) */
  /* Cache le <br> entre meta et excerpt (espacement géré par le gap) */
  /* ─── Le <p> qui contient le bouton : poussé en bas, aligné à droite ─── */
  /* ─── Bouton flèche (44x44, cyan-200 par défaut) ─── */
  /* Texte accessible masqué visuellement */
  /* ─── Variante BLUE : icône bg bordeaux-100 / icon bordeaux-500 + bouton bordeaux-500 ─── */
}
@media (min-width: 768px) and (max-width: 1023px) {
  .card-formation {
    min-width: 320px;
    max-width: 450px;
    width: calc(50% - 0.75rem);
  }
}
.card-formation:hover, .card-formation:focus-within {
  box-shadow: 0 4px 24px rgba(26, 26, 26, 0.08);
  background-color: #EAF6F8;
}
.card-formation__icon,
.card-formation > i[class*=icon-] {
  position: absolute;
  top: -28px;
  left: -13px;
  width: 48px;
  height: 48px;
  border-radius: 99999px;
  background-color: #EAF6F8; /* défaut orange */
  display: flex;
  align-items: center;
  justify-content: center;
  color: #3BB9CB; /* couleur de l'icône */
  font-size: 1.625rem; /* ~26px pour matcher 32x32 de la maquette */
  line-height: 1;
}
.card-formation__icon i,
.card-formation > i[class*=icon-] i {
  font-size: 1.625rem;
  line-height: 1;
}
.card-formation__title,
.card-formation h3 {
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 800; /* ExtraBold */
  font-size: 1.875rem; /* 30px — Figma text/xxl */
  line-height: 2.25rem; /* 36px */
  color: #161F2C;
  margin: 0;
}
.card-formation__description {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: #314158;
  margin: 0;
}
.card-formation__meta {
  display: block;
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 500;
  font-size: 1rem; /* 16px — Figma text/s */
  line-height: 1.375rem; /* 22px */
  color: #314158;
  margin: 0;
  /* Valeurs en Bold si <strong>/<b> présents */
}
.card-formation__meta strong,
.card-formation__meta b {
  font-weight: 700;
}
.card-formation__excerpt {
  display: block;
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 500;
  font-size: 1.125rem; /* 18px — Figma text/m */
  line-height: 1.625rem; /* 26px */
  color: #314158;
  margin: 0;
}
.card-formation__description br {
  display: none;
}
.card-formation > p:last-child {
  margin: 0.5rem 0 0 0;
  margin-top: auto;
  display: flex;
  justify-content: flex-end;
}
.card-formation__action {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 99999px;
  background: #7FD3DF;
  color: #161F2C;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s ease;
  text-decoration: none;
  flex-shrink: 0;
  position: static;
  /* Flèche affichée en CSS (robuste même si le <i> contient un placeholder "ic") */
  /* Masque tout contenu interne du <i> (placeholder "ic") sauf le sr-only */
  /* Stretched link : le ::after couvre toute la card */
}
.card-formation__action::before {
  content: "\f004"; /* icon-arrow-right */
  font-family: "icon";
  font-size: 1.5rem; /* 24px */
  line-height: 1;
  color: inherit;
}
.card-formation__action i {
  display: none;
}
.card-formation__action::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.card-formation__action:hover, .card-formation__action:focus {
  background: #3BB9CB;
}
.card-formation__action:focus-visible {
  outline: 2px solid #3BB9CB;
  outline-offset: 2px;
}
.card-formation .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;
}
.card-formation--blue {
  /* Variante bleue : fond clair bleu au survol/focus */
}
.card-formation--blue .card-formation__icon,
.card-formation--blue > i[class*=icon-] {
  background-color: #F9F0F4;
  color: #8B1A4B;
}
.card-formation--blue .card-formation__action {
  background-color: #8B1A4B;
  color: #FFFFFF;
}
.card-formation--blue .card-formation__action:hover, .card-formation--blue .card-formation__action:focus {
  background-color: #6E1339;
}
.card-formation--blue:hover, .card-formation--blue:focus-within {
  background-color: #F9F0F4;
}

/* ═══════════════════════════════════════════════════════════ */
/* Card menu header (mega-menu featured)                      */
/* Déjà stylé dans _header.scss — classe utilitaire si       */
/* réutilisé ailleurs                                         */
/* ═══════════════════════════════════════════════════════════ */
.card-menu {
  background: #FFFFFF;
  border: 1px solid #D4D4D4;
  border-radius: 0.5rem;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.card-menu__title {
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  color: #161F2C;
  margin: 0;
}
.card-menu__description {
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 500;
  font-size: 0.875rem;
  color: #525252;
  line-height: 1.4;
  margin: 0;
}
.card-menu__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 500;
  font-size: 0.875rem;
  color: #8B1A4B;
  text-decoration: none;
}
.card-menu__link::before {
  content: "●";
  font-size: 0.5rem;
}
.card-menu__link:hover, .card-menu__link:focus {
  color: #6E1339;
}

/* ═══════════════════════════════════════════════════════════ */
/* Card offre / service (Figma : Services cards)              */
/* ═══════════════════════════════════════════════════════════ */
.card-offre {
  background: #FFFFFF;
  border: 1px solid #E2E8F0; /* Figma : color/slate/200 */
  border-radius: 1rem;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem; /* Figma : gap-12 */
  margin: 0;
  list-style-type: none;
  position: relative; /* référentiel du lien étendu */
}
.card-offre p {
  margin: 0;
}
.card-offre__title {
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* Montserrat */
  font-weight: 800; /* ExtraBold */
  font-size: 1.875rem; /* 30px — Figma text/xxl */
  line-height: 2.25rem; /* 36px — Figma line-height/xxl */
  color: #161F2C;
  margin: 0;
}
.card-offre__description {
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 500; /* Medium */
  font-size: 1.125rem; /* 18px — Figma text/s services cards */
  line-height: 1.625rem; /* 26px */
  color: #314158;
  margin: 0;
}
.card-offre__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.5rem 0.5rem 2px;
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 500;
  font-size: 1rem; /* 16px — Figma text/s buttons */
  line-height: 1.375rem; /* 22px */
  color: #8B1A4B;
  text-decoration: none;
  /* Point → flèche cerclée au survol/focus (icône du thème) */
  /* Stretched link : couvre toute la carte */
}
.card-offre__link::before {
  content: "\f46f";
  font-family: "icon";
  font-size: 0.6em;
  line-height: 1;
  flex-shrink: 0;
  transition: all 0.3s ease;
}
.card-offre__link:hover::before, .card-offre__link:focus::before {
  content: "\f004";
  font-size: 1.25em;
}
.card-offre__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
}
.card-offre__link:hover, .card-offre__link:focus {
  color: #6E1339;
  text-decoration: none;
}
.card-offre__link:focus-visible {
  outline: 2px solid #3BB9CB;
  outline-offset: 2px;
}

/* ═══════════════════════════════════════════════════════════ */
/* ─── Note Trustfolio ────────────────────────────────────── */
.trustfolio-rating {
  text-align: center;
  margin-bottom: 1rem;
}

.trustfolio-stars {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  gap: 0.5rem; /* Figma : ~7.65px */
}

.trustfolio-star {
  display: inline-flex;
}
.trustfolio-star svg {
  width: 38px; /* Figma : 38.234px */
  height: 38px;
}

.trustfolio-score {
  display: inline-block; /* reste sur la même ligne que les étoiles (c'est un <p>) */
  vertical-align: middle; /* centre le score au milieu des étoiles */
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 700;
  font-size: 1rem !important;
  line-height: 1.375rem;
  color: #161F2C;
  opacity: 0.7;
  margin: 0 0 0 0.5rem;
}

.trustfolio-mention {
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 0.875rem !important;
  color: #525252;
  margin: 0.25rem 0 0 !important;
}
.trustfolio-mention a {
  color: #8B1A4B;
  font-weight: 600;
}

/* Grille reviews : 3 colonnes de 2 avis (desktop) ; masonry sur tablette/mobile */
.cards-review-grid {
  display: flex;
  align-items: flex-start;
  gap: 2.5rem; /* Figma : gap 40 */
  /* Colonne = pile verticale de 2 avis */
  /* ─── Tablette & mobile : on "déballe" les colonnes (display:contents)   ─── */
  /* et on repasse en multi-colonnes (masonry) : 2 puis 1 colonne.            */
  /* Fonds alternés + couleur de bordure/fond avatar (par colonne) */
  /* Desktop : colonne du milieu → couleurs inversées (maquette).           */
  /* Carte du haut en bleu, carte du bas en orange (fond + bordure avatar). */
}
.cards-review-grid .cards-review-col {
  flex: 1;
  min-width: 0; /* évite les débordements de texte en flex */
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  /* Maquette : colonnes latérales décalées de 40px vers le bas → la    */
  /* colonne du milieu paraît remontée.                                 */
}
.cards-review-grid .cards-review-col:first-child, .cards-review-grid .cards-review-col:last-child {
  margin-top: 2.5rem;
}
@media (max-width: 1023px) {
  .cards-review-grid {
    display: block;
    columns: 2;
    column-gap: 2.5rem;
  }
  .cards-review-grid .cards-review-col {
    display: contents; /* la pile disparaît → les avis remontent dans la grille */
  }
  .cards-review-grid .card-review {
    break-inside: avoid;
    margin-bottom: 2.5rem;
  }
}
@media (max-width: 767px) {
  .cards-review-grid {
    columns: 1;
    /* Limité à 3 avis : les suivants sont masqués jusqu'au clic "Afficher plus" */
  }
  .cards-review-grid .card-review--extra {
    display: none;
  }
  .cards-review-grid.is-expanded .card-review--extra {
    display: flex; /* .card-review est en flex-column */
  }
}
.cards-review-grid .card-review:nth-child(odd) {
  background-color: #EAF6F8;
}
.cards-review-grid .card-review:nth-child(odd) .card-review__avatar {
  border-color: #3BB9CB;
}
.cards-review-grid .card-review:nth-child(odd) .card-review__avatar--initials {
  background-color: #3BB9CB;
}
.cards-review-grid .card-review:nth-child(even) {
  background-color: #F9F0F4;
}
.cards-review-grid .card-review:nth-child(even) .card-review__avatar {
  border-color: #8B1A4B;
}
.cards-review-grid .card-review:nth-child(even) .card-review__avatar--initials {
  background-color: #8B1A4B;
}
@media (min-width: 1024px) {
  .cards-review-grid .cards-review-col:nth-child(2) .card-review:nth-child(odd) {
    background-color: #F9F0F4;
  }
  .cards-review-grid .cards-review-col:nth-child(2) .card-review:nth-child(odd) .card-review__avatar {
    border-color: #8B1A4B;
  }
  .cards-review-grid .cards-review-col:nth-child(2) .card-review:nth-child(odd) .card-review__avatar--initials {
    background-color: #8B1A4B;
  }
  .cards-review-grid .cards-review-col:nth-child(2) .card-review:nth-child(even) {
    background-color: #EAF6F8;
  }
  .cards-review-grid .cards-review-col:nth-child(2) .card-review:nth-child(even) .card-review__avatar {
    border-color: #3BB9CB;
  }
  .cards-review-grid .cards-review-col:nth-child(2) .card-review:nth-child(even) .card-review__avatar--initials {
    background-color: #3BB9CB;
  }
}

/* Bouton "Charger plus" — pilule contour bleu, centrée, sans icône (maquette) */
/* Visible uniquement sur mobile.                                              */
.reviews-show-more {
  display: none;
}
@media (max-width: 767px) {
  .reviews-show-more {
    display: flex;
    align-items: center; /* centre verticalement le libellé */
    justify-content: center;
    width: fit-content;
    margin: 2rem auto 0;
    padding: 0.75rem 2rem !important;
    font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-weight: 700;
    font-size: 1.125rem; /* 18px */
    line-height: 1.625rem;
    color: #8B1A4B;
    background-color: #FFFFFF;
    border: 2px solid #8B1A4B;
    border-radius: 99999px;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
  }
  .reviews-show-more:hover, .reviews-show-more:focus-visible {
    background-color: #8B1A4B;
    color: #FFFFFF;
  }
  .reviews-show-more:focus-visible {
    outline: 2px solid #3BB9CB;
    outline-offset: 2px;
  }
}

/* Card review (avis client)                                  */
/* ═══════════════════════════════════════════════════════════ */
.card-review {
  background: #FFFFFF;
  border-radius: 1rem;
  padding: 1.25rem; /* Figma : 20px */
  display: flex;
  flex-direction: column;
  gap: 0.75rem; /* Figma : gap 12 */
  /* Nom entreprise — Montserrat Bold 18/26 */
  /* Blockquote */
  /* Texte de l'avis — Montserrat Medium 16/22 */
  /* Auteur (footer du blockquote) — aligné en haut, gap 16 */
  /* Avatar 48px + bordure 4px (couleur définie par nth-child de la grille) */
  /* Nom auteur — Bold 18/26 bleu */
  /* Rôle — Medium 16/22 slate-700 */
}
.card-review__company {
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 700;
  font-size: 1.125rem; /* 18px */
  line-height: 1.625rem; /* 26px */
  color: #161F2C;
  margin: 0;
}
.card-review__quote {
  border: none;
  padding: 0;
  margin: 0;
  background: none;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.card-review__text {
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 500;
  font-size: 1rem !important; /* 16px — Figma text/s */
  line-height: 1.375rem; /* 22px */
  color: #314158;
  margin: 0 !important;
}
.card-review__author {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding-top: 1.5rem;
}
.card-review__avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #8B1A4B; /* Figma : bordure 2px (orange/bleu selon colonne) */
  flex-shrink: 0;
  box-sizing: border-box;
  /* Placeholder à initiales (quand pas de photo de l'API) */
  /* Variante logo entreprise (fallback quand pas d'avatar personnel).
     `contain` au lieu de `cover` pour préserver les proportions du logo,
     fond blanc pour que les logos transparents restent lisibles. */
}
.card-review__avatar--initials {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
  color: #FFFFFF;
  background-color: #8B1A4B; /* override par nth-child */
}
.card-review__avatar--logo {
  object-fit: contain;
  background-color: #FFFFFF;
  padding: 4px;
}
.card-review__author-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-style: normal;
}
.card-review__author-name {
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 700;
  font-size: 1.125rem; /* 18px */
  line-height: 1.625rem; /* 26px */
  color: #8B1A4B;
  margin: 0 !important; /* annule le margin par défaut des <p> du thème */
}
.card-review__author-role {
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 500;
  font-size: 1rem; /* 16px */
  line-height: 1.375rem; /* 22px */
  color: #314158;
  margin: 0 !important;
}

/* ═══════════════════════════════════════════════════════════ */
/* Card Author                                                */
/* 3 variantes : image (défaut), bleu, rose                  */
/* ═══════════════════════════════════════════════════════════ */
.card-author {
  border-radius: 1rem;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  position: relative;
  overflow: hidden;
  /* Point décoratif en haut à droite */
  /* Photo auteur (dépasse en haut) */
  /* Variante par défaut : fond clair */
  background: #EAF6F8;
  color: #161F2C;
  /* Variante bleue */
  /* Variante rose/rouge */
}
.card-author::after {
  content: "●";
  position: absolute;
  top: 1rem;
  right: 1rem;
  color: #3BB9CB;
  font-size: 0.75rem;
}
.card-author__photo {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  margin-top: -3rem;
  border: 3px solid #FFFFFF;
}
.card-author__name {
  font-family: "Lora", Georgia, "Times New Roman", serif;
  font-weight: 700;
  font-size: 1.125rem;
  color: #161F2C;
  margin: 0;
}
.card-author__bio {
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1.5;
  color: #525252;
  margin: 0;
}
.card-author--blue {
  background: #8B1A4B;
  color: #FFFFFF;
}
.card-author--blue::after {
  color: #3BB9CB;
}
.card-author--blue .card-author__name {
  color: #FFFFFF;
}
.card-author--blue .card-author__bio {
  color: rgba(255, 255, 255, 0.8);
}
.card-author--red {
  background: #3BB9CB;
  color: #FFFFFF;
}
.card-author--red::after {
  color: #FFFFFF;
}
.card-author--red .card-author__name {
  color: #FFFFFF;
}
.card-author--red .card-author__bio {
  color: rgba(255, 255, 255, 0.8);
}

/*
Theme Name: Inari Child
Theme URI: https://inari.fr/
Author: Florian Le Guyader
Author URI: https://www.ethicfirst.fr/
Description: Thème sur mesure du site Inari — Atelier fil Blanc. Basé sur le starter theme Generic, forké depuis le thème Ethic First.
Version: 0.1.0
Template: generic
Text Domain: inari-child
*/
/* ═══════════════════════════════════════════════════════════ */
/* Accordion – Classe générale sur le bloc WP natif           */
/* Ciblage des éléments enfants wp-block-accordion-*          */
/* ═══════════════════════════════════════════════════════════ */
/* Retire le margin-top natif Gutenberg entre items (is-layout-flow) */
.wp-block-accordion-item {
  margin-top: 0;
}

/* ─── Variante Cas clients (homepage) ────────────────────── */
.accordion--clients {
  display: flex;
  flex-direction: column;
  gap: 0;
  /* Divider entre items : border-top pour ligne au-dessus de chaque ligne, et après le dernier */
  /* ─── Heading (ligne fermée par défaut) ─────────────────── */
  /* Container titre (img + texte) — affichage en colonne logo (136px) + titre flex 1 */
  /* Icône WP native cachée */
  /* ─── Chevron : bouton rond cyan-200 avec flèche ↓ / ↑ ─── */
  /* Maintenant rendu en ::after sur le span flex (frère de l'img), pour    */
  /* être englobé par le fond cyan-50 au hover / état ouvert.            */
  /* ─── Fond orange du titre (2e span) : survol / focus / ouvert ─ */
  /* Override d'une règle parente qui souligne la title au hover/focus     */
  /* (le underline bave sur le chevron ::after, on le neutralise ici).     */
  /* Soulignement réappliqué uniquement sur le span texte (le plus profond),
     donc épargne le chevron ::after.                                       */
  /* ─── État ouvert : chevron retourné ─ */
  /* ─── Panel ouvert (contenu) ────────────────────────────── */
}
.accordion--clients .wp-block-accordion-item {
  border-top: 1px solid #E2E8F0;
  border-radius: 0;
  background: none;
}
.accordion--clients .wp-block-accordion-item:last-child {
  border-bottom: 1px solid #E2E8F0;
}
.accordion--clients .wp-block-accordion-heading {
  margin: 0;
}
.accordion--clients .wp-block-accordion-heading__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 1.25rem 0;
  background: none;
  border: none;
  border-radius: 1rem;
  cursor: pointer;
  text-align: left;
  gap: 1.5rem;
  transition: background-color 0.2s ease;
}
.accordion--clients .wp-block-accordion-heading__toggle:focus-visible {
  outline: 2px solid #3BB9CB;
  outline-offset: -2px;
}
.accordion--clients .wp-block-accordion-heading__toggle-title {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex: 1;
  /* Logo (colonne fixe à gauche) */
  /* Titre du cas (texte) — Lora ExtraBold 24/30 (16px en mobile) */
}
@media (max-width: 767px) {
  .accordion--clients .wp-block-accordion-heading__toggle-title {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
}
.accordion--clients .wp-block-accordion-heading__toggle-title img {
  flex-shrink: 0;
  width: 136px;
  height: auto;
  max-height: 48px;
  object-fit: contain;
  object-position: left center;
}
.accordion--clients .wp-block-accordion-heading__toggle-title > span {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 800; /* ExtraBold */
  font-size: 1.5rem; /* 24px — Figma text/xl */
  line-height: 1.875rem; /* 30px — Figma line-height/xl */
  color: #161F2C;
  padding: 1.5rem 1rem; /* 24px haut/bas, 16px gauche/droite */
  border-radius: 25px;
  transition: background-color 0.2s ease;
  /* Puce bleue séparatrice "•" (Figma : color/blue/700) */
}
@media (max-width: 767px) {
  .accordion--clients .wp-block-accordion-heading__toggle-title > span {
    font-size: 1rem; /* 16px */
    line-height: 1.375rem; /* 22px */
    width: 100%;
  }
}
.accordion--clients .wp-block-accordion-heading__toggle-title > span > span.font-blue,
.accordion--clients .wp-block-accordion-heading__toggle-title > span > .has-vivid-cyan-blue-color,
.accordion--clients .wp-block-accordion-heading__toggle-title > span > .has-blue-color {
  color: #8B1A4B !important;
  margin: 0 0.25rem;
}
.accordion--clients .wp-block-accordion-heading__toggle-icon {
  display: none;
}
.accordion--clients .wp-block-accordion-heading__toggle-title > span::after {
  content: "\f002"; /* chevron down (icon-font du thème) */
  font-family: "icon";
  font-size: 1.5rem; /* 24px */
  color: #161F2C;
  background-color: #7FD3DF;
  border-radius: 99999px;
  width: 44px;
  height: 44px;
  min-width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-left: 1rem;
  transition: transform 0.3s ease, background-color 0.2s ease;
}
.accordion--clients .wp-block-accordion-heading__toggle:hover .wp-block-accordion-heading__toggle-title > span::after,
.accordion--clients .wp-block-accordion-heading__toggle:focus .wp-block-accordion-heading__toggle-title > span::after {
  background-color: #3BB9CB;
  text-decoration: none;
}
.accordion--clients .wp-block-accordion-heading__toggle:hover .wp-block-accordion-heading__toggle-title > span,
.accordion--clients .wp-block-accordion-heading__toggle:focus .wp-block-accordion-heading__toggle-title > span,
.accordion--clients .wp-block-accordion-item.is-open .wp-block-accordion-heading__toggle-title > span {
  background-color: #EAF6F8;
}
.accordion--clients .wp-block-accordion-heading__toggle:hover .wp-block-accordion-heading__toggle-title,
.accordion--clients .wp-block-accordion-heading__toggle:focus .wp-block-accordion-heading__toggle-title {
  text-decoration: none;
}
.accordion--clients .wp-block-accordion-heading__toggle:hover .wp-block-accordion-heading__toggle-title > span > span,
.accordion--clients .wp-block-accordion-heading__toggle:focus .wp-block-accordion-heading__toggle-title > span > span {
  text-decoration: underline;
}
.accordion--clients .wp-block-accordion-item.is-open .wp-block-accordion-heading__toggle-title > span::after {
  transform: rotate(180deg);
}
.accordion--clients .wp-block-accordion-panel {
  padding: 0;
  /* Items d'une liste dans le panel : même typo que les p */
  /* Lien "Découvrir le cas X" — Montserrat Bold 18px + point bleu rond */
}
@media (max-width: 767px) {
  .accordion--clients .wp-block-accordion-panel {
    padding: 1.25rem;
  }
}
.accordion--clients .wp-block-accordion-panel p {
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 500; /* Medium — Figma */
  font-size: 1.125rem; /* 18px — text/m */
  line-height: 1.625rem; /* 26px */
  color: #314158;
  margin: 0 0 0.75rem 0 !important;
}
.accordion--clients .wp-block-accordion-panel p:last-of-type {
  margin-bottom: 1.5rem !important;
}
.accordion--clients .wp-block-accordion-panel ol li {
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 500;
  font-size: 1.125rem;
  line-height: 1.625rem;
  color: #314158;
  margin: 0 0 0.75rem 0 !important;
}
.accordion--clients .wp-block-accordion-panel a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.5rem 0.5rem 2px;
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 700; /* Bold */
  font-size: 1.125rem; /* 18px */
  line-height: 1.625rem; /* 26px */
  color: #8B1A4B;
  text-decoration: none;
  /* Point → flèche cerclée au survol/focus (même taille, pas de décalage) */
}
.accordion--clients .wp-block-accordion-panel a::before {
  content: "\f46f"; /* icon-circle (point plein) */
  font-family: "icon";
  font-weight: normal;
  font-size: 0.6em;
  line-height: 1;
  flex-shrink: 0;
  transition: all 0.3s ease;
}
.accordion--clients .wp-block-accordion-panel a:hover, .accordion--clients .wp-block-accordion-panel a:focus {
  color: #6E1339;
  text-decoration: none;
}
.accordion--clients .wp-block-accordion-panel a:hover::before, .accordion--clients .wp-block-accordion-panel a:focus::before {
  content: "\f004"; /* icon-arrow-right (flèche + contour) */
  font-size: 1.25em;
}
.accordion--clients .wp-block-accordion-panel a:focus-visible {
  outline: 2px solid #3BB9CB;
  outline-offset: 2px;
}

/* ─── Variante Formation (page détail formation, section "Contenu") ─── */
/* Maquette : wrapper bleu clair externe avec padding, wrapper blanc      */
/* interne (les items forment ensemble un rectangle blanc arrondi).       */
.accordion--formation {
  background-color: #F9F0F4;
  border-radius: 1rem;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin: 0 0 3rem;
  /* Chaque item = rectangle blanc arrondi complet, séparé du suivant
     par 8px (le fond bleu du wrapper reste visible entre les items). */
  /* Container du titre (text seul ici, pas de logo) */
  /* Icône WP native cachée */
  /* Chevron rond cyan-200 (custom, ::after sur le bouton) */
  /* Override de la règle parente qui souligne le titre au hover */
  /* Item ouvert : titre sur fond cyan-50 + chevron retourné */
  /* Panel ouvert */
}
.accordion--formation .wp-block-accordion-item {
  background-color: #FFFFFF;
  border-radius: 1rem;
}
.accordion--formation .wp-block-accordion-item + .wp-block-accordion-item {
  margin-block-start: 8px;
}
.accordion--formation .wp-block-accordion-heading {
  margin: 0;
}
.accordion--formation .wp-block-accordion-heading__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 1.25rem;
  gap: 1.5rem;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: background-color 0.2s ease;
}
.accordion--formation .wp-block-accordion-heading__toggle:focus-visible {
  outline: 2px solid #3BB9CB;
  outline-offset: -2px;
}
.accordion--formation .wp-block-accordion-heading__toggle-title {
  flex: 1;
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 800; /* ExtraBold */
  font-size: 1.5rem; /* 24px */
  line-height: 1.875rem; /* 30px */
  color: #161F2C;
}
@media (max-width: 767px) {
  .accordion--formation .wp-block-accordion-heading__toggle-title {
    font-size: 1rem;
    line-height: 1.375rem;
  }
}
.accordion--formation .wp-block-accordion-heading__toggle-icon {
  display: none;
}
.accordion--formation .wp-block-accordion-heading__toggle::after {
  content: "\f002";
  font-family: "icon";
  font-size: 1.5rem;
  color: #161F2C;
  background-color: #7FD3DF;
  border-radius: 99999px;
  width: 44px;
  height: 44px;
  min-width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  text-decoration: none;
  transition: transform 0.3s ease, background-color 0.2s ease;
}
.accordion--formation .wp-block-accordion-heading__toggle:hover::after,
.accordion--formation .wp-block-accordion-heading__toggle:focus::after {
  background-color: #3BB9CB;
  text-decoration: none;
}
.accordion--formation .wp-block-accordion-heading__toggle:hover .wp-block-accordion-heading__toggle-title,
.accordion--formation .wp-block-accordion-heading__toggle:focus .wp-block-accordion-heading__toggle-title {
  text-decoration: none;
}
.accordion--formation .wp-block-accordion-item.is-open .wp-block-accordion-heading__toggle {
  background-color: #EAF6F8;
  border-radius: 1rem;
}
.accordion--formation .wp-block-accordion-item.is-open .wp-block-accordion-heading__toggle::after {
  transform: rotate(180deg);
}
.accordion--formation .wp-block-accordion-panel {
  padding: 0 1.25rem 1.5rem;
}
.accordion--formation .wp-block-accordion-panel p {
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 500;
  font-size: 1.125rem !important; /* 18px */
  line-height: 1.625rem;
  color: #314158;
  margin: 0 0 0.75rem !important;
}
.accordion--formation .wp-block-accordion-panel p:last-of-type {
  margin-bottom: 0 !important;
}
.accordion--formation .wp-block-accordion-panel ul {
  list-style: none;
  margin: 0 0 0.75rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.accordion--formation .wp-block-accordion-panel ul li {
  position: relative;
  padding-left: 1.5rem;
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 500;
  font-size: 1.125rem;
  line-height: 1.625rem;
  color: #314158;
}
.accordion--formation .wp-block-accordion-panel ul li::before {
  content: "\f46f";
  font-family: "icon";
  font-size: 0.6em;
  color: #8B1A4B;
  position: absolute;
  left: 0;
  top: 0.5em;
}

/*
Theme Name: Inari Child
Theme URI: https://inari.fr/
Author: Florian Le Guyader
Author URI: https://www.ethicfirst.fr/
Description: Thème sur mesure du site Inari — Atelier fil Blanc. Basé sur le starter theme Generic, forké depuis le thème Ethic First.
Version: 0.1.0
Template: generic
Text Domain: inari-child
*/
/* ═══════════════════════════════════════════════════════════ */
/* Formulaire – base                                          */
/* ═══════════════════════════════════════════════════════════ */
/* ─── Labels ─────────────────────────────────────────────── */
label,
.form-label {
  display: block;
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 700;
  font-size: 0.9375rem;
  color: #161F2C;
  margin-bottom: 0.25rem;
}

/* ─── Inputs text, email, tel, url, number, password ─────── */
input[type=text],
input[type=email],
input[type=tel],
input[type=url],
input[type=number],
input[type=password],
.form-input {
  display: block;
  width: 100%;
  padding: 0.75rem 1rem;
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  color: #161F2C;
  background-color: #FFFFFF;
  border: 1px solid #D4D4D4;
  border-radius: 0.5rem;
  transition: border-color 0.2s ease;
  /* Hover */
  /* Focus */
  /* Rempli */
  /* Erreur */
}
input[type=text]::placeholder,
input[type=email]::placeholder,
input[type=tel]::placeholder,
input[type=url]::placeholder,
input[type=number]::placeholder,
input[type=password]::placeholder,
.form-input::placeholder {
  color: #737373;
}
input[type=text]:hover,
input[type=email]:hover,
input[type=tel]:hover,
input[type=url]:hover,
input[type=number]:hover,
input[type=password]:hover,
.form-input:hover {
  border-color: #737373;
}
input[type=text]:focus,
input[type=email]:focus,
input[type=tel]:focus,
input[type=url]:focus,
input[type=number]:focus,
input[type=password]:focus,
.form-input:focus {
  outline: 2px solid #3BB9CB;
  outline-offset: 2px;
  border-color: #8B1A4B;
}
input[type=text]:not(:placeholder-shown),
input[type=email]:not(:placeholder-shown),
input[type=tel]:not(:placeholder-shown),
input[type=url]:not(:placeholder-shown),
input[type=number]:not(:placeholder-shown),
input[type=password]:not(:placeholder-shown),
.form-input:not(:placeholder-shown) {
  border-color: #161F2C;
}
input[type=text].is-error, input[type=text][aria-invalid=true],
input[type=email].is-error,
input[type=email][aria-invalid=true],
input[type=tel].is-error,
input[type=tel][aria-invalid=true],
input[type=url].is-error,
input[type=url][aria-invalid=true],
input[type=number].is-error,
input[type=number][aria-invalid=true],
input[type=password].is-error,
input[type=password][aria-invalid=true],
.form-input.is-error,
.form-input[aria-invalid=true] {
  border-color: #B91D1C;
}
input[type=text].is-error:focus, input[type=text][aria-invalid=true]:focus,
input[type=email].is-error:focus,
input[type=email][aria-invalid=true]:focus,
input[type=tel].is-error:focus,
input[type=tel][aria-invalid=true]:focus,
input[type=url].is-error:focus,
input[type=url][aria-invalid=true]:focus,
input[type=number].is-error:focus,
input[type=number][aria-invalid=true]:focus,
input[type=password].is-error:focus,
input[type=password][aria-invalid=true]:focus,
.form-input.is-error:focus,
.form-input[aria-invalid=true]:focus {
  outline-color: #B91D1C;
}

/* ─── Select ─────────────────────────────────────────────── */
select,
.form-select {
  display: block;
  width: 100%;
  padding: 0.75rem 2rem 0.75rem 1rem;
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  color: #161F2C;
  background-color: #FFFFFF;
  border: 1px solid #D4D4D4;
  border-radius: 0.5rem;
  appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23161F2C' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  transition: border-color 0.2s ease;
  /* Rempli (une option sélectionnée) */
}
select:hover,
.form-select:hover {
  border-color: #737373;
}
select:focus,
.form-select:focus {
  outline: 2px solid #3BB9CB;
  outline-offset: 2px;
  border-color: #8B1A4B;
}
select:not([value=""]):valid,
.form-select:not([value=""]):valid {
  border-color: #161F2C;
  color: #8B1A4B;
}
select.is-error, select[aria-invalid=true],
.form-select.is-error,
.form-select[aria-invalid=true] {
  border-color: #B91D1C;
}

/* ─── Textarea ───────────────────────────────────────────── */
textarea,
.form-textarea {
  display: block;
  width: 100%;
  min-height: 150px;
  padding: 0.75rem 1rem;
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  color: #161F2C;
  background-color: #FFFFFF;
  border: 1px solid #D4D4D4;
  border-radius: 0.5rem;
  resize: vertical;
  transition: border-color 0.2s ease;
}
textarea::placeholder,
.form-textarea::placeholder {
  color: #737373;
}
textarea:hover,
.form-textarea:hover {
  border-color: #737373;
}
textarea:focus,
.form-textarea:focus {
  outline: 2px solid #3BB9CB;
  outline-offset: 2px;
  border-color: #8B1A4B;
}
textarea:not(:placeholder-shown),
.form-textarea:not(:placeholder-shown) {
  border-color: #161F2C;
}
textarea.is-error, textarea[aria-invalid=true],
.form-textarea.is-error,
.form-textarea[aria-invalid=true] {
  border-color: #B91D1C;
}
textarea.is-error:focus, textarea[aria-invalid=true]:focus,
.form-textarea.is-error:focus,
.form-textarea[aria-invalid=true]:focus {
  outline-color: #B91D1C;
}

/* ─── Message d'erreur ───────────────────────────────────── */
.form-error {
  display: block;
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #B91D1C;
  margin-top: 0.25rem;
}

/* ─── Groupe de champ (label + input + erreur) ───────────── */
.form-group {
  display: flex;
  flex-direction: column;
  margin-bottom: 1rem;
}

/* ─── Grille de formulaire ───────────────────────────────── */
.form-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
  .form-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* Champ pleine largeur dans la grille */
@media (min-width: 1024px) {
  .form-group--full {
    grid-column: 1/-1;
  }
}

/*
Theme Name: Inari Child
Theme URI: https://inari.fr/
Author: Florian Le Guyader
Author URI: https://www.ethicfirst.fr/
Description: Thème sur mesure du site Inari — Atelier fil Blanc. Basé sur le starter theme Generic, forké depuis le thème Ethic First.
Version: 0.1.0
Template: generic
Text Domain: inari-child
*/
/* ═══════════════════════════════════════════════════════════ */
/* Styles communs Contact Form 7 — appliqués à tous les forms */
/* Les wrappers spécifiques (.formation-single-form,           */
/* .contact-page__form, …) gèrent bg / padding / radius.       */
/* ═══════════════════════════════════════════════════════════ */
.wpcf7 {
  /* Inputs text / email / tel : bordure basse uniquement */
  /* Select natif : même base que les inputs, avec chevron CSS */
  /* Bouton Envoyer (converti en <button> via filtre PHP cf7-tweaks) */
  /* Erreur sous un champ (span converti en p via cf7-tweaks) */
  /* Message global (succès, erreur d'envoi).
     `margin: 0 !important` override le style par défaut du plugin CF7
     (`.wpcf7 form .wpcf7-response-output { margin: 2em 0.5em 1em }` dans
     `plugins/contact-form-7/includes/css/styles.css` — à ne PAS modifier
     car écrasé à chaque MAJ du plugin). */
  /* Le <p> parent du bouton submit (CF7 wrap auto sans classe) : respiration
     verticale pour ne pas coller le bouton au dernier champ ni au message
     de réponse en dessous. */
}
.wpcf7 .wpcf7-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.wpcf7 label {
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 500;
  color: #161F2C;
  font-size: 1.25rem; /* 20px */
  line-height: 1.375rem;
  margin: 0 0 0.5rem;
  padding: 0;
  display: block;
}
.wpcf7 label strong {
  font-weight: 700;
}
.wpcf7 input[type=text],
.wpcf7 input[type=email],
.wpcf7 input[type=tel],
.wpcf7 input[type=url],
.wpcf7 input[type=number] {
  width: 100%;
  padding: 0.25rem 0;
  margin: 0;
  border: none;
  border-bottom: 1px solid #314158;
  background: transparent;
  border-radius: 0;
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.25rem;
  color: #161F2C;
}
.wpcf7 input[type=text]::placeholder,
.wpcf7 input[type=email]::placeholder,
.wpcf7 input[type=tel]::placeholder,
.wpcf7 input[type=url]::placeholder,
.wpcf7 input[type=number]::placeholder {
  color: #314158;
  opacity: 1;
}
.wpcf7 input[type=text]:focus,
.wpcf7 input[type=email]:focus,
.wpcf7 input[type=tel]:focus,
.wpcf7 input[type=url]:focus,
.wpcf7 input[type=number]:focus {
  outline: none;
  border-bottom-color: #8B1A4B;
  border-bottom-width: 2px;
  padding-bottom: calc(0.25rem - 1px); /* évite le jump quand la bordure passe à 2px */
}
.wpcf7 select {
  width: 100%;
  padding: 0.25rem 1.5rem 0.25rem 0.25rem;
  margin: 0;
  border: none;
  border-bottom: 1px solid #314158;
  background-color: transparent;
  border-radius: 0;
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.25rem;
  color: #161F2C !important; /* override d'une éventuelle cascade (lien CF7, options du select) */
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23314158' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0 center;
  background-size: 20px 20px;
  cursor: pointer;
  /* Le menu déroulant natif (options) */
}
.wpcf7 select option {
  color: #161F2C;
}
.wpcf7 select:focus {
  outline: none;
  border-bottom-color: #8B1A4B;
  border-bottom-width: 2px;
  padding-bottom: calc(0.25rem - 1px);
}
.wpcf7 textarea {
  width: 100%;
  min-height: 134px;
  padding: 0.75rem 1rem 0.5rem;
  border: 1px solid #314158;
  border-radius: 4px;
  background: #FFFFFF;
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.375rem;
  color: #161F2C;
  resize: vertical;
}
.wpcf7 textarea::placeholder {
  color: #314158;
  opacity: 1;
}
.wpcf7 textarea:focus {
  outline: 2px solid #3BB9CB;
  outline-offset: 2px;
  border-color: #8B1A4B;
}
.wpcf7 .wpcf7-form-control-wrap {
  display: block;
  margin: 0;
  padding: 0;
}
.wpcf7 button[type=submit],
.wpcf7 .wpcf7-submit {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: -0.5rem;
  background-color: #8B1A4B;
  color: #FFFFFF;
  border: none;
  border-radius: 99999px;
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.625rem;
  cursor: pointer;
  width: fit-content;
  text-decoration: none;
  transition: background-color 0.2s ease;
}
.wpcf7 button[type=submit]::before,
.wpcf7 .wpcf7-submit::before {
  content: "\f46f";
  font-family: "icon";
  font-size: 0.6em;
  line-height: 1;
  color: #FFFFFF;
  flex-shrink: 0;
  transition: content 0.2s ease;
}
.wpcf7 button[type=submit]:hover::before, .wpcf7 button[type=submit]:focus::before,
.wpcf7 .wpcf7-submit:hover::before,
.wpcf7 .wpcf7-submit:focus::before {
  content: "\f004";
  font-size: 1.25em;
}
.wpcf7 button[type=submit]:hover, .wpcf7 button[type=submit]:focus,
.wpcf7 .wpcf7-submit:hover,
.wpcf7 .wpcf7-submit:focus {
  background-color: #6E1339;
  opacity: 1;
}
.wpcf7 button[type=submit]:focus-visible,
.wpcf7 .wpcf7-submit:focus-visible {
  outline: 2px solid #3BB9CB;
  outline-offset: 2px;
}
.wpcf7 .wpcf7-spinner {
  margin: 0 0 0 0.5rem;
}
.wpcf7 .wpcf7-not-valid-tip {
  display: block;
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 500;
  font-size: 0.75rem;
  line-height: 1rem;
  color: #3BB9CB;
  margin: 0.25rem 0 0;
}
.wpcf7 .wpcf7-response-output {
  border: 1px solid #CBD5E1;
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
  margin: 0 !important;
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.wpcf7 form p:has(button[type=submit]),
.wpcf7 form p:has(input[type=submit]) {
  margin: 1rem 0;
}
.wpcf7 .wpcf7-mail-sent-ok {
  background-color: #FFFFFF;
  border-color: #8B1A4B;
  color: #6E1339;
}
.wpcf7 .wpcf7-not-valid {
  border-color: #3BB9CB !important;
}

/*
Theme Name: Inari Child
Theme URI: https://inari.fr/
Author: Florian Le Guyader
Author URI: https://www.ethicfirst.fr/
Description: Thème sur mesure du site Inari — Atelier fil Blanc. Basé sur le starter theme Generic, forké depuis le thème Ethic First.
Version: 0.1.0
Template: generic
Text Domain: inari-child
*/
/* ═══════════════════════════════════════════════════════════ */
/* Fil d'Ariane — structure sémantique <nav><ol><li>          */
/* Séparateurs "/" générés en CSS pseudo-element              */
/* (invisibles aux lecteurs d'écran, pas de HTML polluant)    */
/* ═══════════════════════════════════════════════════════════ */
.breadcrumb {
  padding: 0;
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 1rem;
  font-weight: 500;
}
.breadcrumb-items {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.breadcrumb-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  /* Séparateur "/" avant chaque item sauf le premier */
  /* Page courante (dernier item, sans lien) */
}
.breadcrumb-item:not(:first-child)::before {
  content: "/";
  color: #737373;
  user-select: none;
}
.breadcrumb-item [aria-current=page] {
  color: #525252;
  text-decoration: none;
}
.breadcrumb a {
  color: #161F2C;
  text-decoration: underline;
  text-underline-offset: 3px;
  /* RGAA 10.7 : focus visible avec contraste ≥ 3:1 sur tout fond
     (cyan-500 = #3BB9CB, accent de la maquette). */
}
.breadcrumb a:hover, .breadcrumb a:focus {
  color: #8B1A4B;
}
.breadcrumb a:focus-visible {
  outline: 3px solid #3BB9CB;
  outline-offset: 2px;
}

/* ─── Variante blanche (sur fond sombre) ─────────────────── */
.breadcrumb--white {
  background-color: #6E1339;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
}
.breadcrumb--white a {
  color: #FFFFFF;
}
.breadcrumb--white a:hover, .breadcrumb--white a:focus {
  color: rgba(255, 255, 255, 0.8);
}
.breadcrumb--white a:focus-visible {
  outline-color: #FFFFFF;
}
.breadcrumb--white .breadcrumb-item::before {
  color: rgba(255, 255, 255, 0.5);
}
.breadcrumb--white [aria-current=page] {
  color: rgba(255, 255, 255, 0.7);
}

/*
Theme Name: Inari Child
Theme URI: https://inari.fr/
Author: Florian Le Guyader
Author URI: https://www.ethicfirst.fr/
Description: Thème sur mesure du site Inari — Atelier fil Blanc. Basé sur le starter theme Generic, forké depuis le thème Ethic First.
Version: 0.1.0
Template: generic
Text Domain: inari-child
*/
/* ═══════════════════════════════════════════════════════════ */
/* Bloc CTA Contact (card droite)                             */
/* ═══════════════════════════════════════════════════════════ */
.card-contact {
  position: relative; /* référentiel du lien .devis__card étendu à toute la carte */
  background: #EAF6F8;
  border: none;
  border-radius: 1rem;
  padding: 1.5rem;
  /* Gutenberg insère un .wp-block-group__inner-container entre le wrapper
     et ses enfants — c'est lui qui doit porter le flex (titre à gauche,
     flèche à droite). */
  /* Titre — ExtraBold 30/36 cyan-800 (maquette) */
  /* Description — Medium 18/26 slate-900 (maquette) */
  /* Liens contact (tel, email) */
}
.card-contact > .wp-block-group__inner-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  /* Le wrapper texte interne (titre + description) prend l'espace dispo
     pour pousser la flèche à droite. */
}
.card-contact > .wp-block-group__inner-container > .wp-block-group {
  flex: 1;
  min-width: 0;
}
.card-contact h3 {
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 800;
  font-size: 1.875rem; /* 30px */
  line-height: 2.25rem; /* 36px */
  color: #2A94A3;
  margin: 0;
}
.card-contact p {
  margin: 0 !important;
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 500;
  font-size: 1.125rem !important; /* 18px */
  line-height: 1.625rem; /* 26px */
  color: #161F2C;
}
.card-contact .cta_contact {
  padding: 1rem;
  border-radius: 99999px;
  background-color: #FFFFFF;
  color: #2A94A3;
}
.card-contact .cta_contact:hover, .card-contact .cta_contact:focus {
  background-color: #2A94A3;
  color: #FFFFFF;
}
.card-contact a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 700;
  font-size: 1.125rem;
  color: #2A94A3;
  text-decoration: none;
}
.card-contact a i {
  font-size: 1rem;
  color: #2A94A3;
}
.card-contact a:hover, .card-contact a:focus {
  color: #2A94A3;
}
.card-contact a:hover i, .card-contact a:focus i {
  color: #2A94A3;
}

/*
Theme Name: Inari Child
Theme URI: https://inari.fr/
Author: Florian Le Guyader
Author URI: https://www.ethicfirst.fr/
Description: Thème sur mesure du site Inari — Atelier fil Blanc. Basé sur le starter theme Generic, forké depuis le thème Ethic First.
Version: 0.1.0
Template: generic
Text Domain: inari-child
*/
/* ─── Header global ──────────────────────────────────────── */
#header {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  /* Sur mobile (<768px), le body remplit déjà la viewport → 100vw devient
     redondant ET pose problème avec la scrollbar verticale (100vw inclut la
     scrollbar, body ne l'inclut pas → l'élément dépasse et pousse tout le
     contenu de ~15px vers la droite). On revient à 100% du parent. */
  background-color: #FFFFFF;
  /* Maquette : filet fin, pas une barre. */
  border-bottom: 1px solid rgba(22, 19, 15, 0.08);
  padding: 0;
  /* Sticky uniquement en mobile/tablette */
}
@media (max-width: 767px) {
  #header {
    width: 100%;
    margin-left: 0;
  }
}
@media (max-width: 1023px) {
  #header {
    position: sticky;
    top: 0;
    z-index: 1000;
  }
}
#header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* Mobile (<768px) : padding 4px haut/bas, 24px gauche/droite */
  padding: 0.25rem 1.5rem;
  /* Tablette (768-1023px) : padding 8px haut/bas, 40px gauche/droite */
  /* Desktop (≥1024px) : vertical 0 ; horizontal aligné sur la max-width  */
  /* du body (1536px) centrée + 40px d'air. En dessous de 1536px de       */
  /* viewport, la formule retombe sur le min 40px.                        */
}
@media (min-width: 768px) and (max-width: 1023px) {
  #header .container {
    padding: 0.5rem 2.5rem;
  }
}
@media (min-width: 1024px) {
  #header .container {
    padding-block: 0;
    padding-inline: max(2.5rem, 50vw - 1536px / 2 + 2.5rem);
  }
}
#header #logo {
  flex-shrink: 0;
  /* Repli quand aucun logo n'est défini dans le personnaliseur :
     le nom du site en Lora, plutôt qu'une image manquante. */
}
#header #logo img {
  max-height: 36px; /* Mobile */
  width: auto;
  display: block;
  /* Maquette : 60px en desktop */
}
@media (min-width: 768px) {
  #header #logo img {
    max-height: 50px;
  }
}
@media (min-width: 1024px) {
  #header #logo img {
    max-height: 60px;
  }
}
#header #logo .logo-text {
  font-family: "Lora", Georgia, "Times New Roman", serif;
  font-size: 1.375rem;
  font-weight: 600;
  color: #8B1A4B;
  text-decoration: none;
  white-space: nowrap;
}
@media (min-width: 1024px) {
  #header #logo .logo-text {
    font-size: 1.75rem;
  }
}
#header #logo a {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

/* ─── Nav desktop ────────────────────────────────────────── */
#menu {
  display: flex;
  align-items: center;
  /* Petit desktop (1024-1100px) : la nav commence à serrer, on ajoute
     une marge basse pour éviter le collage au hero en dessous. */
  /* Éléments uniquement mobile — masqués en desktop */
  /* Liens du menu */
  /* Soulignement au hover / focus / page active */
  /* Soulignement quand le dropdown est ouvert */
  /* Focus accessible */
  /* Bouton toggle sous-menu */
  /* ─── Dropdown / sous-menu ───────────────────────────── */
  /* Dropdown visible au clic */
  /* ─── Mega menu ──────────────────────────────────────── */
  /* Mega menu visible au clic */
  /* ─── CTA "Prendre rendez-vous" ──────────────────────── */
  /* ─── Desktop étroit (1024px – 1100px) ───────────────── */
}
@media (min-width: 1024px) and (max-width: 1100px) {
  #menu {
    margin-bottom: 10px;
  }
}
#menu .mobile-menu-close,
#menu .mobile-submenu-header,
#menu .mobile-menu-back,
#menu .mobile-menu-footer,
#menu .header-mobile-actions,
#menu li.mobile-only {
  display: none;
}
#menu ul {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
#menu li {
  position: relative;
  display: flex;
  align-items: center;
}
#menu a,
#menu .menu-link-as-button,
#menu .submenu-toggle {
  display: inline-flex;
  align-items: center;
  font-size: 1.125rem; /* 18px — Figma text/m */
  line-height: 1.6875rem; /* 26px — Figma line-height/m */
  color: #1A1A1A;
  text-decoration: none;
  padding: 2rem 0.5rem;
  font-weight: 600;
  font-family: "Lora", Georgia, "Times New Roman", serif;
  position: relative;
  background: none;
  border: none;
  cursor: pointer;
  transition: color 0.2s ease;
}
#menu a::after,
#menu .menu-link-as-button::after,
#menu .submenu-toggle::after {
  content: "";
  position: absolute;
  left: 0.5rem;
  right: 0.5rem;
  bottom: 0;
  height: 3px;
  background: #8B1A4B;
  transform: scaleX(0);
  transition: transform 0.3s ease;
}
#menu a:hover::after,
#menu a:focus::after,
#menu .menu-link-as-button:hover::after,
#menu .menu-link-as-button:focus::after,
#menu .submenu-toggle:hover::after,
#menu .submenu-toggle:focus::after,
#menu li.current_page_item > a::after,
#menu li.current_page_ancestor > a::after,
#menu li.current_page_ancestor > .menu-link-as-button::after,
#menu li.current_page_ancestor > .submenu-toggle::after {
  transform: scaleX(1);
}
#menu a:hover,
#menu a:focus,
#menu .menu-link-as-button:hover,
#menu .menu-link-as-button:focus,
#menu .submenu-toggle:hover,
#menu .submenu-toggle:focus,
#menu li.current_page_item > a,
#menu li.current_page_ancestor > a {
  color: #8B1A4B;
}
#menu li.is-open > .submenu-toggle {
  color: #8B1A4B;
}
#menu li.is-open > .submenu-toggle::after {
  content: "";
  position: absolute;
  left: 0.5rem;
  right: 0.5rem;
  bottom: 0;
  height: 3px;
  background: #8B1A4B;
}
#menu a:focus-visible,
#menu .menu-link-as-button:focus-visible {
  outline: 2px solid #3BB9CB;
  outline-offset: 2px;
}
#menu .submenu-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 2rem 0.5rem;
  color: #1A1A1A;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  position: relative;
  font-size: 1.125rem; /* 18px — Figma text/m */
  line-height: 1.6875rem; /* 26px */
  font-weight: 600;
  font-family: "Lora", Georgia, "Times New Roman", serif;
  transition: color 0.2s ease;
}
#menu .submenu-toggle i {
  font-size: 0.6rem;
  transition: transform 0.2s ease;
}
#menu .submenu-toggle[aria-expanded=true] i {
  transform: rotate(180deg);
}
#menu .submenu-toggle:hover, #menu .submenu-toggle:focus {
  color: #8B1A4B;
}
#menu .submenu-toggle:focus-visible {
  outline: 2px solid #3BB9CB;
  outline-offset: 2px;
}
#menu ul.sub-menu,
#menu ul.children {
  position: absolute;
  top: 100%;
  left: 0 !important;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  flex-direction: column;
  min-width: 280px;
  margin-top: 0.5rem;
  padding: 1rem;
  background: #FFFFFF;
  border-radius: 0.5rem;
  box-shadow: 0 4px 24px rgba(26, 26, 26, 0.1);
  z-index: 1000;
  gap: 0;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}
#menu ul.sub-menu li,
#menu ul.children li {
  width: 100%;
}
#menu ul.sub-menu a,
#menu ul.children a {
  display: block;
  padding: 0.75rem 0.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
  font-family: "Lora", Georgia, "Times New Roman", serif;
  color: #1A1A1A;
  border: none;
}
#menu ul.sub-menu a::after,
#menu ul.children a::after {
  display: none;
}
#menu ul.sub-menu a:hover, #menu ul.sub-menu a:focus,
#menu ul.children a:hover,
#menu ul.children a:focus {
  color: #8B1A4B;
}
#menu li.menu-item-has-children:not(.mega-menu-parent).is-open > ul.sub-menu,
#menu li.page_item_has_children.is-open > ul.children {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}
#menu ul.mega-menu {
  flex-direction: column;
  gap: 0.5rem;
  min-width: 760px;
  min-height: 250px;
  padding: 1.5rem;
  padding-right: calc(50% + 0.75rem);
  /* Centrage par rapport à l'item parent (override du left:0 des sub-menus) */
  left: 50% !important;
  transform: translateX(-50%);
}
#menu ul.mega-menu > li:not(.mega-menu-featured) {
  width: 100%;
}
#menu ul.mega-menu > li.mega-menu-featured {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  bottom: 1.5rem;
  width: calc(50% - 1.5rem - 0.75rem);
  background-color: transparent;
  border: 1px solid #D4D4D4;
  border-radius: 0.5rem;
  padding: 1.25rem;
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  /* Lien "Découvrir les formations" */
}
#menu ul.mega-menu > li.mega-menu-featured .submenu-toggle,
#menu ul.mega-menu > li.mega-menu-featured .menu-link-as-button {
  display: none !important;
}
#menu ul.mega-menu > li.mega-menu-featured h3.mega-menu-title {
  font-weight: 700;
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: #1A1A1A;
  font-size: 1.1rem;
  margin: 0 0 0.25rem 0;
}
#menu ul.mega-menu > li.mega-menu-featured .mega-menu-title-mobile {
  display: none !important;
}
#menu ul.mega-menu > li.mega-menu-featured a {
  font-weight: 500;
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: #8B1A4B;
  font-size: 1rem;
}
#menu ul.mega-menu > li.mega-menu-featured .menu-item-description {
  display: block;
  font-size: 0.875rem !important;
  color: #525252;
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 500;
  line-height: 1.4;
  margin: 0;
}
#menu ul.mega-menu > li.mega-menu-featured .mega-menu-featured-link {
  margin: 0.75rem 0 0;
}
#menu ul.mega-menu > li.mega-menu-featured .mega-menu-featured-link a {
  font-size: 0.875rem;
  font-weight: 500;
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: #8B1A4B;
  padding: 0.25rem 0;
  display: inline-flex;
  align-items: center;
  background: transparent;
  text-decoration: none;
  transition: color 0.3s ease;
}
#menu ul.mega-menu > li.mega-menu-featured .mega-menu-featured-link a::before {
  content: "\f46f"; /* icon-circle (point plein) */
  font-family: "icon";
  margin-right: 0.5rem;
  font-size: 0.6em;
  line-height: 1;
  flex-shrink: 0;
  transition: all 0.3s ease;
}
#menu ul.mega-menu > li.mega-menu-featured .mega-menu-featured-link a:hover, #menu ul.mega-menu > li.mega-menu-featured .mega-menu-featured-link a:focus {
  color: #6E1339;
  background: transparent;
  text-decoration: none;
}
#menu ul.mega-menu > li.mega-menu-featured .mega-menu-featured-link a:hover::before, #menu ul.mega-menu > li.mega-menu-featured .mega-menu-featured-link a:focus::before {
  content: "\f004"; /* icon-arrow-right (flèche + contour) */
  font-size: 1.25em;
}
#menu li.mega-menu-parent.is-open > ul.mega-menu {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  display: flex !important;
}
#menu .menu-item-description {
  display: none;
}
#menu li.redButton > a,
#menu li.blueButton > a {
  display: inline-flex !important;
  align-items: center;
  gap: 0.5rem;
  background-color: #8B1A4B !important;
  color: #FFFFFF !important;
  border: none;
  border-radius: 99999px !important;
  padding: 0.75rem 1rem !important; /* Figma : px-16 py-12 */
  font-size: 1.125rem !important; /* 18px — Figma text/m */
  font-weight: 700;
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* Figma : Montserrat Bold */
  line-height: 1.6875rem !important; /* 26px */
  margin-left: 1.5rem;
  margin-right: 0 !important;
  margin-top: 0 !important;
  text-align: center !important;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
#menu li.redButton > a::after,
#menu li.blueButton > a::after {
  display: none !important;
}
#menu li.redButton > a:hover, #menu li.redButton > a:focus,
#menu li.blueButton > a:hover,
#menu li.blueButton > a:focus {
  background-color: #6E1339 !important;
  color: #FFFFFF !important;
}
#menu li.redButton > a {
  background-color: #B91D1C !important;
}
#menu li.redButton > a:hover, #menu li.redButton > a:focus {
  background-color: #840000 !important;
}
@media (min-width: 1024px) and (max-width: 1100px) {
  #menu a,
  #menu .menu-link-as-button {
    font-size: 0.875rem;
    padding: 0.5rem;
  }
  #menu .submenu-toggle {
    font-size: 0.875rem;
    padding: 0.5rem;
  }
  #menu ul {
    gap: 0;
  }
  #menu li.redButton > a,
  #menu li.blueButton > a {
    font-size: 0.875rem !important;
    padding: 0.5rem 1rem !important;
    margin-left: 0.5rem;
  }
}

/* ─── Boutons mobile/tablette ─────────────────────────────── */
/* Styles partagés, visibilité gérée par _mobile-menu.scss */
#menu .header-mobile-actions {
  align-items: center;
  gap: 1.5rem; /* Figma : gap 24px entre actions */
  /* Hamburger : 32x32 */
}
#menu .header-mobile-actions button {
  background: none !important;
  border: none !important;
  cursor: pointer;
  padding: 0.5rem;
  color: #1A1A1A !important;
  font-size: 1.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
#menu .header-mobile-actions button:focus-visible {
  outline: 2px solid #3BB9CB;
  outline-offset: 2px;
}
#menu .header-mobile-actions .menu-toggle i {
  font-size: 2rem; /* 32px */
  line-height: 1;
}
#menu .header-mobile-actions a.header-cta-mobile {
  display: none;
  background-color: #3BB9CB !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: 99999px !important;
  padding: 0.75rem 1rem !important;
  font-size: 0.875rem !important;
  font-weight: 700 !important;
  font-family: "Lora", Georgia, "Times New Roman", serif !important;
  text-decoration: none !important;
  white-space: nowrap;
  line-height: normal !important;
  gap: 0.5rem;
  align-items: center;
  /* Pas de barre de soulignement sur le CTA (tablette) */
  /* En desktop c'est .header-cta qui prend le relais. */
}
#menu .header-mobile-actions a.header-cta-mobile::after {
  display: none !important;
}
#menu .header-mobile-actions a.header-cta-mobile:hover, #menu .header-mobile-actions a.header-cta-mobile:focus {
  background-color: #2A94A3 !important;
  color: #FFFFFF !important;
}
#menu .header-mobile-actions a.header-cta-mobile:focus-visible {
  outline: 2px solid #8B1A4B;
  outline-offset: 2px;
}
@media (min-width: 768px) and (max-width: 1023px) {
  #menu .header-mobile-actions a.header-cta-mobile {
    display: inline-flex;
  }
}
@media (min-width: 1024px) {
  #menu .header-mobile-actions a.header-cta-mobile {
    display: none;
  }
}

/* ─── Bouton d'appel à l'action, desktop ──────────────────── */
/* Maquette : pastille cyan, texte blanc, icône téléphone, ombre portée.
   Masqué sous 1024px — la version .header-cta-mobile couvre la tablette. */
.header-cta {
  display: none;
}
@media (min-width: 1024px) {
  .header-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
    margin-left: 1.5rem;
    background-color: #3BB9CB;
    color: #FFFFFF;
    border-radius: 99999px;
    padding: 0.75rem 1.5rem;
    font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 0.9375rem; /* 15px */
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(59, 185, 203, 0.35);
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
  }
  .header-cta i {
    font-size: 1rem;
    line-height: 1;
  }
  .header-cta::after {
    display: none;
  }
  .header-cta:hover, .header-cta:focus {
    background-color: #2A94A3;
    color: #FFFFFF;
    box-shadow: 0 6px 16px rgba(59, 185, 203, 0.45);
  }
  .header-cta:focus-visible {
    outline: 2px solid #8B1A4B;
    outline-offset: 3px;
  }
}

/*
Theme Name: Inari Child
Theme URI: https://inari.fr/
Author: Florian Le Guyader
Author URI: https://www.ethicfirst.fr/
Description: Thème sur mesure du site Inari — Atelier fil Blanc. Basé sur le starter theme Generic, forké depuis le thème Ethic First.
Version: 0.1.0
Template: generic
Text Domain: inari-child
*/
/* ─── Éléments mobile masqués en desktop ─────────────────── */
.mobile-menu-dialog,
.mobile-menu-footer {
  display: none;
}

/* ─── Menu desktop caché en mobile ───────────────────────── */
#menu-desktop {
  display: contents;
}

/* ─── Menu mobile (ARIA dialog modal) ────────────────────── */
@media (max-width: 1023px) {
  .hide-mobile {
    display: none !important;
  }
  body, html {
    overflow-x: hidden;
  }
  /* Masquer le menu desktop en mobile */
  #menu-desktop {
    display: none;
  }
  /* Modale menu mobile */
  .mobile-menu-dialog {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: #FFFFFF;
    z-index: 2000;
    flex-direction: column;
    align-items: stretch;
    padding: 1.5rem;
    /* Scroll vertical si le menu dépasse la hauteur écran ; clip horizontal
       pour les animations de drill-down des sous-menus. */
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    /* Bouton fermer */
    /* Container drill-down.
       overflow-x hidden : clip pour l'animation slide latérale des sous-menus.
       overflow-y auto  : permet le scroll vertical si trop d'items dépassent
       la hauteur écran (sinon les items du bas sont inaccessibles). */
    /* Liste du menu */
    /* Liens */
    /* Flèche droite à côté des items de menu (items simples, hors CTA) */
    /* Survol / focus : couleur principale (comme les liens desktop) */
    /* Bouton toggle : texte + chevron > */
    /* ─── Sous-menus = modales plein écran superposées ── */
    /* Sous-menu ouvert : modale visible */
    /* Header modale sous-menu : Retour + Fermer */
    /* Bouton fermer dans les sous-menus */
    /* ─── Mega menu mobile ───────────────────────────── */
    /* CTA dans la modale : masqué en tablette */
    /* Footer mobile (contact) — Figma : point bleu 8px + texte Montserrat Medium 16/22 */
  }
  .mobile-menu-dialog.is-open {
    display: flex;
  }
  .mobile-menu-dialog .mobile-menu-close {
    align-self: flex-end;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.5rem;
    color: #1A1A1A;
    padding: 0.5rem;
    margin-bottom: 1rem;
    flex-shrink: 0;
  }
  .mobile-menu-dialog .mobile-menu-close:focus-visible {
    outline: 2px solid #3BB9CB;
    outline-offset: 2px;
  }
  .mobile-menu-dialog [id^=containermenugeneral] {
    flex: 1;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    position: relative;
  }
  .mobile-menu-dialog ul {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .mobile-menu-dialog li {
    width: 100%;
    display: block;
    border-bottom: none;
  }
  .mobile-menu-dialog a {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 1rem 0.5rem;
    font-size: 1.125rem;
    color: #1A1A1A;
    font-weight: 600;
    text-decoration: none;
    font-family: "Lora", Georgia, "Times New Roman", serif;
  }
  .mobile-menu-dialog [id^=containermenugeneral] > ul > li:not(.blueButton):not(.redButton) > a::after {
    content: "\f009"; /* icon-chevron-right */
    font-family: "icon";
    margin-left: 0.5rem;
    font-size: 0.6rem;
    flex-shrink: 0;
  }
  .mobile-menu-dialog [id^=containermenugeneral] > ul > li:not(.blueButton):not(.redButton) > a:hover,
  .mobile-menu-dialog [id^=containermenugeneral] > ul > li:not(.blueButton):not(.redButton) > a:focus {
    color: #8B1A4B;
  }
  .mobile-menu-dialog .submenu-toggle {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    margin-top: 5px;
    padding: 1rem 0.5rem;
    font-size: 1.125rem;
    color: #1A1A1A;
    font-weight: 600;
    font-family: "Lora", Georgia, "Times New Roman", serif;
    background: none;
    border: none;
    cursor: pointer;
  }
  .mobile-menu-dialog .submenu-toggle i {
    margin-left: 0.5rem;
    font-size: 0.6rem;
    transform: rotate(-90deg);
  }
  .mobile-menu-dialog .submenu-toggle:hover, .mobile-menu-dialog .submenu-toggle:focus {
    color: #8B1A4B;
  }
  .mobile-menu-dialog .submenu-toggle:focus-visible {
    outline: 2px solid #3BB9CB;
    outline-offset: 2px;
  }
  .mobile-menu-dialog ul.sub-menu,
  .mobile-menu-dialog ul.children {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    box-shadow: none;
    margin: 0;
    padding: 1.5rem;
    min-width: 0;
    border-radius: 0;
    background: #FFFFFF;
    z-index: 2001;
    overflow-y: auto;
  }
  .mobile-menu-dialog ul.sub-menu a,
  .mobile-menu-dialog ul.children a {
    font-size: 1.125rem;
    padding: 1rem 0.5rem;
    font-weight: 600;
    font-family: "Lora", Georgia, "Times New Roman", serif;
    width: 100%;
    border: none;
    /* Survol / focus : couleur bleue (pas de contour) */
  }
  .mobile-menu-dialog ul.sub-menu a:hover, .mobile-menu-dialog ul.sub-menu a:focus,
  .mobile-menu-dialog ul.children a:hover,
  .mobile-menu-dialog ul.children a:focus {
    color: #8B1A4B;
  }
  .mobile-menu-dialog li.is-open > ul.sub-menu,
  .mobile-menu-dialog li.is-open > ul.children {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
  }
  .mobile-menu-dialog .mobile-submenu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    flex-shrink: 0;
    width: 100%;
    border: none;
  }
  .mobile-menu-dialog .mobile-menu-back {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem 0;
    font-size: 1rem;
    font-weight: 500;
    font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: #8B1A4B;
  }
  .mobile-menu-dialog .mobile-menu-back i {
    font-size: 0.6rem;
  }
  .mobile-menu-dialog .mobile-menu-back:focus-visible {
    outline: 2px solid #3BB9CB;
    outline-offset: 2px;
  }
  .mobile-menu-dialog ul.sub-menu .mobile-menu-close,
  .mobile-menu-dialog ul.children .mobile-menu-close {
    display: block;
    align-self: auto;
    margin-bottom: 0;
  }
  .mobile-menu-dialog ul.mega-menu {
    min-width: 0;
    min-height: 0;
    padding: 1.5rem;
  }
  .mobile-menu-dialog ul.mega-menu > li:not(.mega-menu-featured) {
    border-bottom: none;
  }
  .mobile-menu-dialog ul.mega-menu > li.mobile-only {
    display: block;
    border-bottom: none;
  }
  .mobile-menu-dialog ul.mega-menu > li.mega-menu-featured {
    display: none;
  }
  .mobile-menu-dialog li.blueButton,
  .mobile-menu-dialog li.redButton {
    border: none;
    margin-top: 1rem;
    display: flex !important;
  }
  .mobile-menu-dialog li.blueButton > a,
  .mobile-menu-dialog li.redButton > a {
    width: auto !important;
    justify-content: center;
    margin-left: 0;
    border-radius: 99999px !important;
    background-color: #8B1A4B !important;
    color: #FFFFFF !important;
    padding: 0.75rem 1rem !important;
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    font-family: "Lora", Georgia, "Times New Roman", serif !important;
    transition: background-color 0.3s ease;
    /* Survol / focus comme desktop : bleu foncé, pas de contour */
  }
  .mobile-menu-dialog li.blueButton > a:hover, .mobile-menu-dialog li.blueButton > a:focus,
  .mobile-menu-dialog li.redButton > a:hover,
  .mobile-menu-dialog li.redButton > a:focus {
    background-color: #6E1339 !important;
    color: #FFFFFF !important;
  }
  .mobile-menu-dialog li.blueButton > a:focus-visible,
  .mobile-menu-dialog li.redButton > a:focus-visible {
    outline: none;
  }
  /* Overlay désactivé — modales plein écran */
}
@media (max-width: 1023px) and (min-width: 768px) and (max-width: 1023px) {
  .mobile-menu-dialog li.blueButton,
  .mobile-menu-dialog li.redButton {
    display: none;
  }
}
@media (max-width: 1023px) {
  .mobile-menu-dialog .mobile-menu-footer {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    margin-top: auto;
    padding-top: 1.5rem;
    flex-shrink: 0;
  }
  .mobile-menu-dialog .mobile-menu-footer .mobile-contact-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.5rem 0.5rem 2px;
    font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 1rem; /* 16px — Figma text/m */
    font-weight: 500;
    line-height: 1.375rem; /* 22px — Figma line-height/m mobile */
    color: #8B1A4B !important;
    text-decoration: none;
    border: none;
    width: auto;
    /* Petits écrans (320-370px) : réduire pour que le mail tienne sur une ligne */
    /* Point → flèche cerclée au survol/focus */
  }
}
@media (max-width: 1023px) and (max-width: 370px) {
  .mobile-menu-dialog .mobile-menu-footer .mobile-contact-link {
    font-size: 0.7rem;
  }
}
@media (max-width: 1023px) {
  .mobile-menu-dialog .mobile-menu-footer .mobile-contact-link::before {
    content: "\f46f"; /* icon-circle (point plein) */
    font-family: "icon";
    font-size: 0.6em;
    line-height: 1;
    flex-shrink: 0;
    transition: all 0.3s ease;
  }
  .mobile-menu-dialog .mobile-menu-footer .mobile-contact-link:hover, .mobile-menu-dialog .mobile-menu-footer .mobile-contact-link:focus {
    color: #6E1339 !important;
    text-decoration: none;
  }
  .mobile-menu-dialog .mobile-menu-footer .mobile-contact-link:hover::before, .mobile-menu-dialog .mobile-menu-footer .mobile-contact-link:focus::before {
    content: "\f004"; /* icon-arrow-right (flèche + contour) — même taille que le point (pas de décalage) */
  }
  .mobile-menu-dialog .mobile-menu-footer .mobile-contact-link:focus-visible {
    outline: 2px solid #3BB9CB;
    outline-offset: 2px;
  }
  .mobile-menu-overlay {
    display: none !important;
  }
  #menu .header-mobile-actions {
    display: flex;
  }
  #menu .header-mobile-actions .menu-toggle {
    display: block !important;
  }
}
/*
Theme Name: Inari Child
Theme URI: https://inari.fr/
Author: Florian Le Guyader
Author URI: https://www.ethicfirst.fr/
Description: Thème sur mesure du site Inari — Atelier fil Blanc. Basé sur le starter theme Generic, forké depuis le thème Ethic First.
Version: 0.1.0
Template: generic
Text Domain: inari-child
*/
/* ═══════════════════════════════════════════════════════════
   Pied de page — maquette « Inari Accueil » (1a)
   Fond bordeaux, quatre colonnes 1.5 / 1 / 1 / 1.1, puis une
   barre légale séparée par un filet blanc translucide.
   ═══════════════════════════════════════════════════════════ */
#footer {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  /* Sur mobile (<768px), le body remplit déjà la viewport → 100vw devient
     redondant ET pose problème avec la scrollbar verticale (100vw inclut la
     scrollbar, body ne l'inclut pas → l'élément dépasse et pousse tout le
     contenu de ~15px vers la droite). On revient à 100% du parent. */
  background-color: #8B1A4B;
  color: rgba(255, 255, 255, 0.8);
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 0.875rem; /* 14px */
  line-height: 1.7;
}
@media (max-width: 767px) {
  #footer {
    width: 100%;
    margin-left: 0;
  }
}

.footer-container,
.subfooter-container {
  max-width: 1536px;
  margin-inline: auto;
  padding-inline: 2.5rem;
}
@media (min-width: 1024px) {
  .footer-container,
  .subfooter-container {
    padding-inline: 5rem;
  }
}

.footer-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  padding-block: 3rem 2.5rem;
  /* Maquette : 1.5fr 1fr 1fr 1.1fr */
}
@media (min-width: 768px) and (max-width: 1023px) {
  .footer-container {
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem 2.5rem;
  }
}
@media (min-width: 1024px) {
  .footer-container {
    grid-template-columns: 1.5fr 1fr 1fr 1.1fr;
    gap: 3rem;
    padding-block: 5rem 3rem;
  }
}

/* ─── Colonne 1 : identité ────────────────────────────────── */
.footer-logo {
  display: block;
  height: auto;
  max-height: 64px;
  width: auto;
  margin-bottom: 1rem;
}
@media (min-width: 1024px) {
  .footer-logo {
    max-height: 84px;
  }
}

/* Repli quand aucun logo blanc n'a été fourni : on éclaircit le logo
   du site pour qu'il reste lisible sur le bordeaux. C'est un pis-aller —
   un vrai logo blanc donne un bien meilleur résultat. */
.footer-logo--inverted {
  filter: brightness(0) invert(1);
}

.footer-tagline {
  margin: 0 0 0.5rem;
  font-family: "Lora", Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: 1.5rem;
  line-height: 1.2;
  color: #EABF5E;
}
@media (min-width: 1024px) {
  .footer-tagline {
    font-size: 1.625rem; /* 26px */
  }
}

.footer-baseline {
  margin: 0;
  max-width: 34ch;
  color: rgba(255, 255, 255, 0.8);
}

/* ─── Intitulés de colonne ────────────────────────────────── */
.footer-col-title {
  margin: 0 0 1rem;
  font-family: "Lora", Georgia, "Times New Roman", serif;
  font-size: 0.9375rem; /* 15px */
  font-weight: 700;
  line-height: 1.3;
  color: #FFFFFF;
}

/* ─── Colonnes 2 et 3 : listes de liens ───────────────────── */
.footer-col--menu ul,
.footer-contact {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.footer-col--menu a,
.footer-contact-link {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  transition: color 0.2s ease;
}
.footer-col--menu a:hover, .footer-col--menu a:focus,
.footer-contact-link:hover,
.footer-contact-link:focus {
  color: #FFFFFF;
  text-decoration: underline;
}
.footer-col--menu a:focus-visible,
.footer-contact-link:focus-visible {
  outline: 2px solid #EABF5E;
  outline-offset: 3px;
}

.footer-contact address {
  font-style: normal;
  color: rgba(255, 255, 255, 0.8);
}

/* ─── Colonne 4 : appel à l'action ────────────────────────── */
.footer-cta-text {
  margin: 0 0 1rem;
  max-width: 28ch;
}

/* Maquette : pastille blanche, texte bordeaux — l'inverse du header. */
.footer-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background-color: #FFFFFF;
  color: #8B1A4B;
  border-radius: 99999px;
  padding: 0.75rem 1.5rem;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.footer-cta i {
  font-size: 1rem;
  line-height: 1;
}
.footer-cta:hover, .footer-cta:focus {
  background-color: #EABF5E;
  color: #3A2408;
}
.footer-cta:focus-visible {
  outline: 2px solid #EABF5E;
  outline-offset: 3px;
}

/* ─── Certifications (Qualiopi…) ──────────────────────────── */
.footer-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.5rem;
}
.footer-logos img {
  height: 44px;
  width: auto;
  /* Ces logos sont fournis sur fond blanc : on leur garde leur fond
     plutôt que de les poser à nu sur le bordeaux. */
  background-color: #FFFFFF;
  padding: 0.25rem;
  border-radius: 0.5rem;
}

/* ─── Barre légale ────────────────────────────────────────── */
.subfooter {
  font-size: 0.78125rem; /* 12.5px */
  color: rgba(255, 255, 255, 0.6);
}

.subfooter-container {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding-block: 1.25rem 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}
@media (min-width: 768px) and (max-width: 1023px) {
  .subfooter-container {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
  }
}

.subfooter-copy {
  margin: 0;
}

.subfooter-menu {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  /* Séparateur « · » entre les mentions, comme dans la maquette. */
}
.subfooter-menu li + li::before {
  content: "·";
  margin-right: 0.5rem;
  color: rgba(255, 255, 255, 0.4);
}
.subfooter-menu a {
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
}
.subfooter-menu a:hover, .subfooter-menu a:focus {
  color: #FFFFFF;
  text-decoration: underline;
}
.subfooter-menu a:focus-visible {
  outline: 2px solid #EABF5E;
  outline-offset: 3px;
}

/*
Theme Name: Inari Child
Theme URI: https://inari.fr/
Author: Florian Le Guyader
Author URI: https://www.ethicfirst.fr/
Description: Thème sur mesure du site Inari — Atelier fil Blanc. Basé sur le starter theme Generic, forké depuis le thème Ethic First.
Version: 0.1.0
Template: generic
Text Domain: inari-child
*/
/* ═══════════════════════════════════════════════════════════ */
/* Hero – Section d'accroche homepage                         */
/* Bloc Gutenberg : Groupe avec classe CSS "hero"             */
/* Structure attendue :                                       */
/*   .hero (Groupe)                                           */
/*     └─ Colonnes                                            */
/*         ├─ Image (col 1)                                   */
/*         └─ Titre + Paragraphe + Boutons (col 2)            */
/* ═══════════════════════════════════════════════════════════ */
.hero {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  /* Sur mobile (<768px), le body remplit déjà la viewport → 100vw devient
     redondant ET pose problème avec la scrollbar verticale (100vw inclut la
     scrollbar, body ne l'inclut pas → l'élément dépasse et pousse tout le
     contenu de ~15px vers la droite). On revient à 100% du parent. */
  /* fond bleu bord à bord (le contenu reste centré) */
  color: #EAF6F8; /* Figma : tous les textes en cyan-50 */
  padding: 0 0 6.5rem 0;
  position: relative;
  overflow: hidden;
  /* Hauteur de la zone non-bleue en bas (= padding-bottom du .hero) */
  /* ─── Fond bleu : limité, laisse la zone non-bleue en bas pour l'image + cercles ─ */
  /* ─── Motif de points décoratif (SVG bleu #5D65E8, 546×668) ─── */
  /* z-index 2 : au-dessus du fond + motif */
  /* ─── Colonnes ──────────────────────────────────────────── */
  /* ─── Colonne image (avec cercles oranges décoratifs) ─── */
  /* Colonne contenant l'image : largeur max 750px */
  /* top : décale seulement l'image vers le bas → elle déborde dans la bande */
  /* blanche (les cercles aussi), sans bouger la colonne texte. */
  /* ─── Titres – Lora Bold, xxxxl (60/68) ─────────────── */
  /* ─── Paragraphe – Montserrat Medium, m (18/26) ───────────── */
  /* ─── Boutons – Montserrat 500, M ─────────────────────────── */
}
@media (max-width: 767px) {
  .hero {
    width: 100%;
    margin-left: 0;
  }
}
@media (max-width: 1023px) {
  .hero {
    padding: 3.75rem 0 5rem;
  }
}
.hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 120px;
  background-color: #8B1A4B;
  z-index: 0;
}
@media (max-width: 1023px) {
  .hero::before {
    bottom: 80px;
  }
}
.hero::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 430px;
  height: 550px;
  background-image: url("img/svg-hero-home-cropped.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: top right;
  pointer-events: none;
  z-index: 1;
}
.hero > .wp-block-group__inner-container,
.hero > div {
  max-width: 1536px;
  margin: 0 auto;
  padding-left: 2.5rem;
  padding-right: 2.5rem;
  /* Sur mobile (<768px), on réduit à 1.5rem pour laisser plus de
     place au contenu (harmonisé avec toutes les sections). */
  position: relative;
  z-index: 2;
}
@media (max-width: 767px) {
  .hero > .wp-block-group__inner-container,
  .hero > div {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}
.hero .wp-block-columns {
  gap: 3rem;
  margin: 0 auto; /* centré : la section est en pleine largeur, le contenu reste à $max_width_size */
  align-items: center !important;
  position: relative;
  top: 3.75rem;
}
@media (max-width: 1023px) {
  .hero .wp-block-columns {
    flex-direction: column-reverse;
    gap: 2rem;
  }
}
.hero .wp-block-column {
  position: relative;
}
.hero .wp-block-column:has(.wp-block-image) {
  max-width: 750px;
}
.hero .wp-block-image {
  margin: 0;
  height: 640px;
  /* Cercles oranges décoratifs en bas-gauche (Figma : points-orange) */
  /* Grand cercle (cyan-200, bordure blanche) en bas-gauche, dépassant */
  /* Petit cercle (rouge-orange foncé, bordure blanche) à droite du premier */
}
.hero .wp-block-image img {
  border-radius: 1rem;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hero .wp-block-image::before, .hero .wp-block-image::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 2;
  /* Bordure de la couleur du fond clair pour créer un effet visuel */
  box-sizing: content-box; /* la bordure s'ajoute autour, garde la taille visible du rond */
}
.hero .wp-block-image::before {
  width: 54px;
  height: 54px;
  background-color: #7FD3DF;
  bottom: -30px;
  left: -24px;
  border: 10px solid #FFFFFF;
}
.hero .wp-block-image::after {
  width: 21px;
  height: 21px;
  background-color: #3BB9CB;
  bottom: -40px;
  left: 64px;
  border: 10px solid #FFFFFF;
}
.hero h1, .hero h2 {
  color: #EAF6F8;
  margin: 0 0 1rem 0;
  font-family: "Lora", Georgia, "Times New Roman", serif;
  font-weight: 900;
  font-size: 2.5rem;
  line-height: 3rem;
  hyphens: manual;
}
@media (min-width: 1024px) {
  .hero h1, .hero h2 {
    font-size: 3.75rem;
    line-height: 4.25rem;
  }
}
.hero p {
  color: #EAF6F8;
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 500;
  margin: 0 0 1.5rem 0 !important;
  font-size: 1.125rem !important; /* 18px */
  line-height: 1.625rem; /* 26px */
}
.hero .wp-block-buttons {
  margin: 0;
  gap: 0.75rem;
}
.hero .wp-block-button__link {
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
  font-weight: 500 !important;
  /* m mobile : 18/22 */
  font-size: 1.125rem !important;
}
@media (min-width: 1024px) {
  .hero .wp-block-button__link {
    /* m desktop : 20/26 */
    font-size: 1.25rem !important;
  }
}

/*
Theme Name: Inari Child
Theme URI: https://inari.fr/
Author: Florian Le Guyader
Author URI: https://www.ethicfirst.fr/
Description: Thème sur mesure du site Inari — Atelier fil Blanc. Basé sur le starter theme Generic, forké depuis le thème Ethic First.
Version: 0.1.0
Template: generic
Text Domain: inari-child
*/
/* ═══════════════════════════════════════════════════════════ */
/* Services cards – Section "Des offres dédiées à l'accessibilité" */
/* Bloc Gutenberg : Groupe avec classe CSS "services-cards"   */
/* Structure attendue :                                        */
/*   .services-cards (Groupe)                                  */
/*     └─ Colonnes (2 col desktop / stack mobile-tablette)     */
/*         ├─ Col 1 (.services-cards__intro) :                 */
/*         │     Titre H2 + Paragraphe + Bouton                */
/*         └─ Col 2 (.services-cards__list) :                  */
/*               .card-offre × N                               */
/* ═══════════════════════════════════════════════════════════ */
.services-cards {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  /* Sur mobile (<768px), le body remplit déjà la viewport → 100vw devient
     redondant ET pose problème avec la scrollbar verticale (100vw inclut la
     scrollbar, body ne l'inclut pas → l'élément dépasse et pousse tout le
     contenu de ~15px vers la droite). On revient à 100% du parent. */
  padding: 3.75rem 0; /* 60px, tous breakpoints (desktop + tablet + mobile) */
  position: relative;
  overflow: hidden;
  /* ─── Motif décoratif : cluster de points orange en bas-gauche ─── */
  /* ─── Colonnes ──────────────────────────────────────────── */
  /* ─── Colonne intro : Titre + paragraphe + bouton ──────── */
  /* Paragraphe d'intro */
  /* ─── Grille des cards ──────────────────────────────────── */
  /* La liste des cards est un <ul class="wp-block-list"> dans la colonne 2 */
}
@media (max-width: 767px) {
  .services-cards {
    width: 100%;
    margin-left: 0;
  }
}
@media (max-width: 1023px) {
  .services-cards {
    padding: 3.75rem 0;
  }
}
.services-cards::before {
  content: "";
  position: absolute;
  width: 50%;
  height: 454px;
  background-image: url("img/dots-bg-orange.svg");
  background-repeat: no-repeat;
  background-position: center top;
  transform: rotate(180deg);
  opacity: 0.12;
  pointer-events: none;
  z-index: 0;
  bottom: 0;
  left: 0;
}
@media (max-width: 767px) {
  .services-cards::before {
    display: none;
  }
}
.services-cards > .wp-block-group__inner-container,
.services-cards > div {
  max-width: 1536px;
  margin: 0 auto;
  padding-left: 2.5rem;
  padding-right: 2.5rem;
  /* Sur mobile (<768px), on réduit à 1.5rem pour laisser plus de
     place au contenu (harmonisé avec toutes les sections). */
  position: relative;
  z-index: 1;
}
@media (max-width: 767px) {
  .services-cards > .wp-block-group__inner-container,
  .services-cards > div {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}
.services-cards .wp-block-columns {
  gap: 3rem;
  margin: 0;
  align-items: flex-start !important;
}
@media (max-width: 1023px) {
  .services-cards .wp-block-columns {
    flex-direction: column !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
    gap: 3rem;
  }
}
.services-cards .wp-block-column {
  flex: 1;
  /* Tablette/mobile : colonnes pleine largeur empilées (override Gutenberg) */
}
@media (max-width: 1023px) {
  .services-cards .wp-block-column {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}
.services-cards h2 {
  color: #161F2C;
  margin: 0 0 1.5rem 0;
  font-family: "Lora", Georgia, "Times New Roman", serif;
  font-weight: 900;
  font-size: 2.5rem;
  line-height: 3rem;
  hyphens: manual;
  /* La couleur du span coloré (bleu via Gutenberg) est respectée naturellement */
}
@media (min-width: 1024px) {
  .services-cards h2 {
    font-size: 3.75rem;
    line-height: 4.25rem;
  }
}
.services-cards .wp-block-column > p,
.services-cards .wp-block-column > .wp-block-paragraph {
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 500; /* Medium */
  font-size: 1.125rem !important; /* 18px */
  line-height: 1.625rem; /* 26px */
  color: #314158;
  margin: 0 0 1.5rem 0 !important;
}
.services-cards .services-cards__list,
.services-cards .wp-block-column .wp-block-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2.5rem; /* Figma : gap-40 entre cards */
  /* Tablette : cards en grille 2 colonnes (cf maquette).            */
  /* align-items par défaut (stretch) → cards de même hauteur.       */
}
@media (max-width: 1023px) {
  .services-cards .services-cards__list,
  .services-cards .wp-block-column .wp-block-list {
    gap: 1.5rem;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .services-cards .services-cards__list,
  .services-cards .wp-block-column .wp-block-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
}

/* ─── Motif décoratif : cluster de points orange en haut-droite ─── */
/* Ciblé par ID Gutenberg (Attributs avancés → HTML anchor : section-offres) */
#section-offres {
  position: relative;
  overflow: hidden;
}
#section-offres::after {
  content: "";
  position: absolute;
  width: 50%;
  height: 554px;
  background-image: url("img/dots-bg-orange.svg");
  background-repeat: no-repeat;
  background-position: center top;
  transform: rotate(180deg);
  opacity: 0.12;
  pointer-events: none;
  z-index: 0;
  top: 0;
  right: 0;
}
@media (max-width: 767px) {
  #section-offres::after {
    width: 100%;
    height: 300px;
    top: 200px;
    transform: none;
  }
}

/* ─── Variante article (single.php) ─────────────────────────── */
/* Layout stack : intro sur toute la largeur en haut, grille de cards    */
/* en dessous (3 cols desktop, 2 tablet, 1 mobile).                      */
/* align-items par défaut (stretch) → cards toujours de même hauteur.    */
.services-cards--article .services-cards__intro {
  max-width: 900px;
  margin-bottom: 3rem;
}
.services-cards--article .services-cards__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
@media (min-width: 768px) and (max-width: 1023px) {
  .services-cards--article .services-cards__list {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 767px) {
  .services-cards--article .services-cards__list {
    grid-template-columns: minmax(0, 1fr);
  }
}

/*
Theme Name: Inari Child
Theme URI: https://inari.fr/
Author: Florian Le Guyader
Author URI: https://www.ethicfirst.fr/
Description: Thème sur mesure du site Inari — Atelier fil Blanc. Basé sur le starter theme Generic, forké depuis le thème Ethic First.
Version: 0.1.0
Template: generic
Text Domain: inari-child
*/
/* ═══════════════════════════════════════════════════════════ */
/* Formations – Section "Nos formations en accessibilité"     */
/* Bloc Gutenberg : Groupe avec classe CSS "formations-section" */
/* Structure attendue :                                        */
/*   .formations-section (Groupe)                              */
/*     ├─ Groupe .formations-section__intro                    */
/*     │   └─ Colonnes (2 col desktop) :                       */
/*     │       ├─ Titre H2                                     */
/*     │       └─ Paragraphe + Bouton                          */
/*     └─ Groupe .formations-section__content                  */
/*         └─ Colonnes (2 col desktop) :                       */
/*             ├─ Liste .container-bloc-formations             */
/*             │   └─ .card-formation × N                      */
/*             └─ Image (.formations-section__media)           */
/* ═══════════════════════════════════════════════════════════ */
.formations-section {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  /* Sur mobile (<768px), le body remplit déjà la viewport → 100vw devient
     redondant ET pose problème avec la scrollbar verticale (100vw inclut la
     scrollbar, body ne l'inclut pas → l'élément dépasse et pousse tout le
     contenu de ~15px vers la droite). On revient à 100% du parent. */
  padding: 3.75rem 0;
  position: relative;
  overflow: hidden; /* clip le décor qui dépasse */
  background-color: #FFFFFF;
  /* Focus visible : outline extérieur clippé par overflow → ring inset. */
  /* variables du décor, en cqw (relatif à la largeur de l'image) */
  --deco-size: 90cqw;
  --deco-right: -8cqw;
  --deco-bottom: -210px;
  --deco-dot-size: 6cqw;
  /* ─── Intro (titre + paragraphe + CTA) ──────────────────── */
  /* .formations-section__intro EST le .wp-block-columns (même élément) */
  /* ─── Titre H2 ──────────────────────────────────────────── */
  /* ─── Contenu (cards + image) ──────────────────────────── */
  /* .formations-section__content EST le .wp-block-columns (même élément) */
}
@media (max-width: 767px) {
  .formations-section {
    width: 100%;
    margin-left: 0;
  }
}
.formations-section .wp-block-button__link:focus-visible {
  box-shadow: inset 0 0 0 2px #FFFFFF, inset 0 0 0 5px #3BB9CB;
}
@media (max-width: 1023px) {
  .formations-section {
    padding: 3.75rem 0 6.75rem;
  }
}
.formations-section > .wp-block-group__inner-container,
.formations-section > div {
  max-width: 1536px;
  margin: 0 auto;
  padding-left: 2.5rem;
  padding-right: 2.5rem;
  /* Sur mobile (<768px), on réduit à 1.5rem pour laisser plus de
     place au contenu (harmonisé avec toutes les sections). */
  position: relative;
  z-index: 1;
}
@media (max-width: 767px) {
  .formations-section > .wp-block-group__inner-container,
  .formations-section > div {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}
.formations-section .formations-section__intro {
  margin-bottom: 5rem;
  gap: 3rem;
  align-items: flex-start !important;
}
@media (max-width: 1023px) {
  .formations-section .formations-section__intro {
    margin-bottom: 3rem;
    flex-direction: column;
    gap: 1.5rem;
  }
}
.formations-section h2 {
  color: #161F2C;
  margin: 0;
  font-family: "Lora", Georgia, "Times New Roman", serif;
  font-weight: 900;
  font-size: 2.5rem;
  line-height: 3rem;
  hyphens: manual;
}
@media (min-width: 1024px) {
  .formations-section h2 {
    font-size: 3.75rem;
    line-height: 4.25rem;
  }
}
.formations-section .formations-section__intro .wp-block-column > p {
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 500;
  font-size: 1.125rem !important; /* 18px */
  line-height: 1.625rem; /* 26px */
  color: #314158;
  margin: 0 0 1rem 0 !important;
}
.formations-section .formations-section__content {
  gap: 3rem;
  margin: 0;
  /* flex-start : l'image garde sa hauteur naturelle (pas d'étirement).        */
  /* La colonne épouse donc la hauteur de l'image → le décor (ancré à la       */
  /* colonne) tombe pile au bas de l'image.                                    */
  align-items: flex-start !important;
  /* Tablette : même disposition que mobile → liste puis image, en colonne.
     L'image (last-child) est limitée à 52% pour ne pas prendre toute la largeur. */
  /* Colonne de l'image (dernière) = référentiel des ronds décoratifs */
  /* Image media côté droit */
}
@media (max-width: 1023px) {
  .formations-section .formations-section__content {
    gap: 2rem;
    /* En colonne, l'axe transversal = largeur. On étire pour éviter que la  */
    /* colonne image (container-type: inline-size → largeur intrinsèque 0)   */
    /* ne se réduise à 0 et masque l'image.                                  */
    align-items: stretch !important;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .formations-section .formations-section__content {
    flex-direction: column;
  }
  .formations-section .formations-section__content > .wp-block-column:first-child {
    width: 100%;
  }
  .formations-section .formations-section__content > .wp-block-column:last-child {
    width: 52%;
  }
}
.formations-section .formations-section__content > .wp-block-column:last-child {
  position: relative;
  container-type: inline-size; /* 1cqw = 1% de la largeur de cette colonne (= l'image) */
  /* Décor : rond ORANGE, ancré au coin bas-droit de l'image (suit l'image) */
  /* Sans z-index : rendu avant l'image → passe dessous */
  /* Décor : petit rond BLEU, calculé d'après le CENTRE du rond orange */
  /* (96.57% en largeur, 15.5% en hauteur du rond orange) → suit la courbe */
}
.formations-section .formations-section__content > .wp-block-column:last-child::before {
  content: "";
  position: absolute;
  width: var(--deco-size);
  height: var(--deco-size);
  right: var(--deco-right);
  bottom: var(--deco-bottom);
  border-radius: 50%;
  background-color: #3BB9CB;
  pointer-events: none;
  /* Tablette : valeurs fixes (px) demandées */
  /* Mobile : valeurs demandées */
}
@media (min-width: 768px) and (max-width: 1023px) {
  .formations-section .formations-section__content > .wp-block-column:last-child::before {
    width: 300px;
    height: 300px;
    right: -120px;
    bottom: -46px;
  }
}
@media (max-width: 767px) {
  .formations-section .formations-section__content > .wp-block-column:last-child::before {
    width: 70cqw;
    height: 70cqw;
    right: -25%;
    bottom: -47px;
  }
}
.formations-section .formations-section__content > .wp-block-column:last-child::after {
  content: "";
  position: absolute;
  width: var(--deco-dot-size);
  height: var(--deco-dot-size);
  right: calc(var(--deco-right) + var(--deco-size) * 0.9657 - var(--deco-dot-size) / 2);
  bottom: -170px;
  border-radius: 50%;
  background-color: #8B1A4B;
  border: 4px solid #FFFFFF;
  pointer-events: none;
  /* Tablette : valeurs fixes (px) demandées */
  /* Mobile : valeurs demandées */
}
@media (min-width: 768px) and (max-width: 1023px) {
  .formations-section .formations-section__content > .wp-block-column:last-child::after {
    right: 150px;
    bottom: -44px;
  }
}
@media (max-width: 767px) {
  .formations-section .formations-section__content > .wp-block-column:last-child::after {
    right: 45%;
    bottom: -47px;
  }
}
.formations-section .formations-section__content .wp-block-image,
.formations-section .formations-section__content .formations-section__media {
  margin: 0;
  position: relative;
  z-index: 1; /* au-dessus du rond orange décoratif */
  /* Cercle décoratif (contour orange clair, bottom-right de l'image) — en cqw */
}
.formations-section .formations-section__content .wp-block-image img,
.formations-section .formations-section__content .formations-section__media img {
  width: 100%;
  height: auto; /* ratio naturel, pas d'étirement */
  object-fit: cover;
  border-radius: 1rem;
  display: block;
}
.formations-section .formations-section__content .wp-block-image::after,
.formations-section .formations-section__content .formations-section__media::after {
  content: "";
  position: absolute;
  bottom: -30px;
  right: -18px;
  width: 13cqw;
  height: 13cqw;
  border-radius: 50%;
  border: 13px solid #3BB9CB;
  background-color: #8B1A4B;
  pointer-events: none;
  z-index: 1;
}

/*
Theme Name: Inari Child
Theme URI: https://inari.fr/
Author: Florian Le Guyader
Author URI: https://www.ethicfirst.fr/
Description: Thème sur mesure du site Inari — Atelier fil Blanc. Basé sur le starter theme Generic, forké depuis le thème Ethic First.
Version: 0.1.0
Template: generic
Text Domain: inari-child
*/
/* ═══════════════════════════════════════════════════════════ */
/* En-tête de la page Formations                              */
/* Bloc Gutenberg : Groupe avec className "formation-hero"     */
/* Contient (dans .formation-hero__inner) :                   */
/*   - Fil d'ariane                                            */
/*   - Colonnes 2 cols (gap 80) :                              */
/*       │ titre Lora Bold 60/68 + bouton Contactez-nous   │
/*       │ sous-titre Lora Bold 40/48 + paragraphe         │ */
/* ═══════════════════════════════════════════════════════════ */
.formation-hero {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  /* Sur mobile (<768px), le body remplit déjà la viewport → 100vw devient
     redondant ET pose problème avec la scrollbar verticale (100vw inclut la
     scrollbar, body ne l'inclut pas → l'élément dépasse et pousse tout le
     contenu de ~15px vers la droite). On revient à 100% du parent. */
  padding: 3.75rem 0; /* 60px, tous breakpoints (desktop + tablet + mobile) */
  background-color: #EAF6F8;
  /* Le fil d'ariane utilise le composant global `.breadcrumb` (cf components/_breadcrumb.scss). */
  /* ─── Layout 2 colonnes (wp:columns interne) ────────────── */
  /* ─── Titre H1 (gauche) ─────────────────────────────────── */
  /* ─── Sous-titre H2 (droite) ────────────────────────────── */
  /* ─── Paragraphe descriptif (droite) ───────────────────── */
}
@media (max-width: 767px) {
  .formation-hero {
    width: 100%;
    margin-left: 0;
  }
}
.formation-hero__inner {
  max-width: 1536px;
  margin: 0 auto;
  padding: 0 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.formation-hero .wp-block-columns {
  gap: 5rem;
  margin: 0 !important;
  align-items: center;
}
@media (max-width: 1023px) {
  .formation-hero .wp-block-columns {
    flex-direction: column !important;
    align-items: flex-start;
    gap: 2.5rem;
  }
}
@media (max-width: 1023px) {
  .formation-hero .wp-block-column {
    flex-basis: 100% !important;
    width: 100% !important;
  }
}
.formation-hero h1 {
  font-family: "Lora", Georgia, "Times New Roman", serif;
  font-weight: 900; /* Black */
  font-size: 3.75rem; /* 60px */
  line-height: 4.25rem; /* 68px */
  color: #161F2C;
  margin: 0 0 1.5rem;
  /* Le mot orange dans le titre — l'auteur applique la couleur "Orange 600" */
  /* via la palette Gutenberg sur le mot, ce qui produit cette classe.       */
}
.formation-hero h1 .has-cyan-500-color,
.formation-hero h1 mark {
  color: #3BB9CB !important;
  background: none;
}
@media (max-width: 767px) {
  .formation-hero h1 {
    font-size: 2.5rem; /* 40px */
    line-height: 3rem;
  }
}
.formation-hero h2 {
  font-family: "Lora", Georgia, "Times New Roman", serif;
  font-weight: 700; /* Bold */
  font-size: 2.5rem; /* 40px */
  line-height: 3rem; /* 48px */
  color: #161F2C;
  margin: 0 0 1.5rem;
}
.formation-hero h2 .has-cyan-500-color,
.formation-hero h2 mark {
  color: #3BB9CB !important;
  background: none;
}
@media (max-width: 767px) {
  .formation-hero h2 {
    font-size: 2rem; /* 32px */
    line-height: 2.5rem;
  }
}
.formation-hero p {
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 500;
  font-size: 1.125rem !important; /* 18px — override le 1.1em du parent */
  line-height: 1.625rem; /* 26px */
  color: #161F2C;
  margin: 0;
}

/*
Theme Name: Inari Child
Theme URI: https://inari.fr/
Author: Florian Le Guyader
Author URI: https://www.ethicfirst.fr/
Description: Thème sur mesure du site Inari — Atelier fil Blanc. Basé sur le starter theme Generic, forké depuis le thème Ethic First.
Version: 0.1.0
Template: generic
Text Domain: inari-child
*/
/* ═══════════════════════════════════════════════════════════ */
/* Grille des cards formations (page Formations dédiée)         */
/* Bloc Gutenberg : Groupe avec className "formation-cards"     */
/*                                                              */
/* Le composant .card-formation lui-même est stylé dans          */
/* components/_cards.scss (orange par défaut, --blue pour bleu). */
/* Ici on ne gère que le wrapper et la grille 2 colonnes.        */
/* ═══════════════════════════════════════════════════════════ */
.formation-cards {
  padding: 3.75rem 0; /* 60px, tous breakpoints (desktop + tablet + mobile) */
  padding-bottom: 0; /* section suivante gère son propre padding-top */
  padding-inline: 2.5rem;
  background-color: #FFFFFF;
}
.formation-cards__grid {
  max-width: 1536px;
  margin: 0 auto;
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.5rem;
  /* Override : sur la page Formations, les cards sont en grille (pas flex).   */
  /* Donc on annule le width: 50%-12px hérité de la version "homepage" qui     */
  /* était en flex-row. La grille s'occupe du dimensionnement.                 */
  /* Icône à 32px (taille Figma) au lieu de 26px hérité du défaut. */
}
@media (max-width: 767px) {
  .formation-cards__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
  }
}
.formation-cards__grid .card-formation {
  max-width: none;
  min-width: 0;
  width: auto;
}
.formation-cards__grid .card-formation__icon {
  font-size: 2rem;
}
.formation-cards__grid .card-formation__icon i {
  font-size: 2rem;
}

/*
Theme Name: Inari Child
Theme URI: https://inari.fr/
Author: Florian Le Guyader
Author URI: https://www.ethicfirst.fr/
Description: Thème sur mesure du site Inari — Atelier fil Blanc. Basé sur le starter theme Generic, forké depuis le thème Ethic First.
Version: 0.1.0
Template: generic
Text Domain: inari-child
*/
/* ═══════════════════════════════════════════════════════════ */
/* Section Qualiopi (page Formations)                           */
/* Bloc Gutenberg : Groupe avec className "formation-qualiopi"  */
/*                                                              */
/* Layout 2 colonnes :                                          */
/*   Gauche : carte navy avec gros titre Lora Bold blanc    */
/*   Droite : logo Qualiopi + paragraphe descriptif             */
/* ═══════════════════════════════════════════════════════════ */
.formation-qualiopi {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  /* Sur mobile (<768px), le body remplit déjà la viewport → 100vw devient
     redondant ET pose problème avec la scrollbar verticale (100vw inclut la
     scrollbar, body ne l'inclut pas → l'élément dépasse et pousse tout le
     contenu de ~15px vers la droite). On revient à 100% du parent. */
  padding: 3.75rem 0; /* 60px, tous breakpoints (desktop + tablet + mobile) */
  background-color: #FFFFFF;
  /* Répartition 45/55 : bloc bleu plus étroit, colonne contenu plus large */
  /* ─── Colonne gauche : carte navy ──────────────────────── */
  /* ─── Colonne droite : image + texte ───────────────────── */
}
@media (max-width: 767px) {
  .formation-qualiopi {
    width: 100%;
    margin-left: 0;
  }
}
.formation-qualiopi__inner {
  max-width: 1536px;
  margin: 0 auto;
  padding: 0 2.5rem;
}
.formation-qualiopi .wp-block-columns {
  gap: 3rem;
  margin: 0 !important;
  align-items: stretch;
}
@media (max-width: 1023px) {
  .formation-qualiopi .wp-block-columns {
    gap: 2rem;
  }
}
.formation-qualiopi .wp-block-column {
  align-self: flex-start;
}
@media (max-width: 1023px) {
  .formation-qualiopi .wp-block-column {
    flex-basis: 100% !important;
    width: 100% !important;
  }
}
.formation-qualiopi > .wp-block-group__inner-container > .wp-block-columns > .wp-block-column:first-child,
.formation-qualiopi .wp-block-columns > .wp-block-column:first-child {
  flex-basis: 45% !important;
}
.formation-qualiopi .wp-block-columns > .wp-block-column:last-child {
  flex-basis: 55% !important;
}
.formation-qualiopi__title-card {
  position: relative;
  background-color: #6E1339;
  border-radius: 1rem;
  padding: 2.5rem;
  display: flex;
  align-items: center;
  height: 100%; /* étiré sur la hauteur de la colonne droite */
  /* Décor : grand rond bleu (contour blanc) + petit point orange,    */
  /* déborde du coin bas-droit de la carte navy.                       */
}
.formation-qualiopi__title-card h2 {
  font-family: "Lora", Georgia, "Times New Roman", serif;
  font-weight: 900; /* Black */
  font-size: 3.75rem; /* 60px */
  line-height: 4.25rem; /* 68px */
  color: #FFFFFF;
  margin: 0;
}
@media (max-width: 1023px) {
  .formation-qualiopi__title-card h2 {
    font-size: 2.5rem; /* 40px */
    line-height: 3rem;
  }
}
.formation-qualiopi__title-card::after {
  content: "";
  position: absolute;
  right: -2rem;
  bottom: -2.5rem;
  width: 126px;
  height: 90px;
  background: url("img/icons/qualiopi-dots.svg") no-repeat center/contain;
  transform: rotate(130deg);
  pointer-events: none;
}
@media (max-width: 767px) {
  .formation-qualiopi__title-card::after {
    width: 90px;
    height: 64px;
    right: -1.25rem;
    bottom: -2rem;
  }
}
.formation-qualiopi__content {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}
@media (max-width: 1023px) {
  .formation-qualiopi__content {
    padding: 1rem 0;
    gap: 1.5rem;
  }
}
.formation-qualiopi .wp-block-image {
  margin: 0;
}
.formation-qualiopi .wp-block-image img {
  display: block;
  max-width: 350px !important;
  width: 100%;
  height: auto;
  margin: 0 auto 1.5rem;
}
@media (max-width: 1023px) {
  .formation-qualiopi .wp-block-image img {
    max-width: 350px !important;
  }
}
.formation-qualiopi p {
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 500;
  font-size: 1.25rem !important; /* 20px — override le 1.1em du parent */
  line-height: 1.625rem; /* 26px */
  color: #314158;
  margin: 0;
}

/*
Theme Name: Inari Child
Theme URI: https://inari.fr/
Author: Florian Le Guyader
Author URI: https://www.ethicfirst.fr/
Description: Thème sur mesure du site Inari — Atelier fil Blanc. Basé sur le starter theme Generic, forké depuis le thème Ethic First.
Version: 0.1.0
Template: generic
Text Domain: inari-child
*/
/* ═══════════════════════════════════════════════════════════ */
/* Sections de contenu d'une page formation détail              */
/* (insérées via le pattern « Formation — squelette »)          */
/*                                                              */
/* Structure d'une section :                                    */
/*   .formation-section                                          */
/*     ├ .formation-section__title (icône ronde + H2)           */
/*     └ contenu (paragraphes, listes, cards, accordéon…)       */
/* ═══════════════════════════════════════════════════════════ */
.formation-section {
  margin-bottom: 3rem;
  /* ─── Titre H2 : rond bleu + icône blanche (CSS pseudo-elements) ──── */
  /* Sélecteur descendant (pas `>`) pour traverser le `.wp-block-group__inner-container` */
  /* que Gutenberg peut insérer entre la section et son contenu.                          */
  /* ─── Variants d'icône (1 par section) ───────────────────────── */
  /* ─── Paragraphe d'intro (juste sous le titre H2) ────── */
  /* ─── Liste à puces (utilisée pour Objectifs) ─────────── */
}
@media (max-width: 1023px) {
  .formation-section {
    padding: 1.5rem 0;
    margin-bottom: 0;
  }
}
.formation-section h2 {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0 0 1.25rem;
  font-family: "Lora", Georgia, "Times New Roman", serif;
  font-weight: 700; /* Bold */
  font-size: 2.5rem !important; /* 40px — override 1.1em parent */
  line-height: 3rem; /* 48px */
  color: #161F2C;
  /* Cercle bleu (sera complété par l'icône via ::after) */
  /* Icône SVG masquée en blanc, overlay sur le cercle */
}
@media (max-width: 767px) {
  .formation-section h2 {
    font-size: 1.875rem !important;
    line-height: 2.25rem;
  }
}
.formation-section h2::before {
  content: "";
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  background-color: #8B1A4B;
  border-radius: 99999px;
}
.formation-section h2::after {
  content: "";
  position: absolute;
  left: 12px; /* (56-32)/2 → centré dans le cercle */
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  background-color: #FFFFFF;
  -webkit-mask: no-repeat center/contain;
  mask: no-repeat center/contain;
}
.formation-section--bolt h2::after {
  -webkit-mask-image: url("img/icons/bolt.svg");
  mask-image: url("img/icons/bolt.svg");
}
.formation-section--target h2::after {
  -webkit-mask-image: url("img/icons/target.svg");
  mask-image: url("img/icons/target.svg");
}
.formation-section--document-text h2::after {
  -webkit-mask-image: url("img/icons/document-text.svg");
  mask-image: url("img/icons/document-text.svg");
}
.formation-section--checklist h2::after {
  -webkit-mask-image: url("img/icons/checklist.svg");
  mask-image: url("img/icons/checklist.svg");
}
.formation-section--square-academic-cap h2::after {
  -webkit-mask-image: url("img/icons/square-academic-cap.svg");
  mask-image: url("img/icons/square-academic-cap.svg");
}
.formation-section--user-circle h2::after {
  -webkit-mask-image: url("img/icons/user-circle.svg");
  mask-image: url("img/icons/user-circle.svg");
}
.formation-section--hand-shake h2::after {
  -webkit-mask-image: url("img/icons/hand-shake.svg");
  mask-image: url("img/icons/hand-shake.svg");
}
.formation-section--stars h2::after {
  -webkit-mask-image: url("img/icons/stars.svg");
  mask-image: url("img/icons/stars.svg");
}
.formation-section h2 + p,
.formation-section .wp-block-group__inner-container > h2 + p {
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 500;
  font-size: 1.125rem !important; /* 18px */
  line-height: 1.625rem; /* 26px */
  color: #314158;
  margin: 0 0 1.5rem;
}
.formation-section ul {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.formation-section ul li {
  position: relative;
  padding-left: 1.5rem;
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 500;
  font-size: 1.125rem !important; /* 18px */
  line-height: 1.625rem;
  color: #314158;
  /* Puce bleue */
}
.formation-section ul li::before {
  content: "\f46f"; /* icon-circle (point plein) */
  font-family: "icon";
  font-size: 0.6em;
  color: #8B1A4B;
  position: absolute;
  left: 0;
  top: 0;
}

/* ─── Mini-card (Durée/Effectifs/Matériels, Profils, Prérequis) ─── */
/* Fond blanc avec bordure slate-300, titre H3 avec icône orange via ::before */
/* L'icône est déterminée par le modifier .formation-info-card--XXX           */
.formation-info-card {
  background-color: #FFFFFF;
  border: 1px solid #CBD5E1;
  border-radius: 1rem;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  /* ─── Variants d'icône (1 par mini-card) ──────────── */
}
.formation-info-card h3 {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 1rem;
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 700; /* Bold */
  font-size: 1.25rem !important; /* 20px — override 1.1em parent */
  line-height: 1.625rem; /* 26px */
  color: #161F2C;
  /* Icône SVG masquée orange (placée à gauche du texte) */
}
.formation-info-card h3::before {
  content: "";
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  background-color: #3BB9CB;
  -webkit-mask: no-repeat center/contain;
  mask: no-repeat center/contain;
}
.formation-info-card p {
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 500;
  font-size: 1.125rem !important; /* 18px */
  line-height: 1.625rem;
  color: #314158;
  margin: 0;
}
.formation-info-card--alarm h3::before {
  -webkit-mask-image: url("img/icons/alarm.svg");
  mask-image: url("img/icons/alarm.svg");
}
.formation-info-card--users-group h3::before {
  -webkit-mask-image: url("img/icons/users-group-two-rounded.svg");
  mask-image: url("img/icons/users-group-two-rounded.svg");
}
.formation-info-card--display h3::before {
  -webkit-mask-image: url("img/icons/display.svg");
  mask-image: url("img/icons/display.svg");
}
.formation-info-card--user-circle h3::before {
  -webkit-mask-image: url("img/icons/user-circle.svg");
  mask-image: url("img/icons/user-circle.svg");
}
.formation-info-card--square-academic-cap h3::before {
  -webkit-mask-image: url("img/icons/square-academic-cap.svg");
  mask-image: url("img/icons/square-academic-cap.svg");
}

/* ─── Variante : ligne de 3 mini-cards en grille ───────────────── */
/* Bloc Gutenberg : Groupe avec className "formation-info-cards"           */
.formation-info-cards {
  margin: 0 0 3rem;
  /* Gutenberg wrappe les enfants dans .wp-block-group__inner-container.       */
  /* On flex ce wrapper interne (ainsi que la card elle-même au cas où le      */
  /* wrapper n'est pas généré selon la version Gutenberg).                     */
  /* Chaque card : grow + shrink, basis à la min-width
     margin: 0 reset (notamment margin-block-start que Gutenberg ajoute
     via .is-layout-flow > * pour le block-gap). */
}
.formation-info-cards > .wp-block-group__inner-container, .formation-info-cards.wp-block-group {
  display: flex !important;
  flex-wrap: wrap;
  gap: 1.5rem;
}
.formation-info-cards .formation-info-card {
  flex: 1 1 234px;
  min-width: 234px;
  max-width: 410px;
  margin: 0 !important;
  /* Sur très petit écran (320px), le min-width de 234px force la card
     à dépasser du conteneur → on stack et on relâche la contrainte. */
}
@media (max-width: 767px) {
  .formation-info-cards .formation-info-card {
    flex-basis: 100%;
    min-width: 0;
    max-width: none;
  }
}

/* ─── Variante : Profils & Prérequis (wrapper cyan-50 + 2 mini-cards) ─── */
/* Bloc Gutenberg : Groupe avec className "formation-profils-prerequis"     */
.formation-profils-prerequis {
  position: relative;
  background-color: #EAF6F8;
  border-radius: 1rem; /* 24, pas 16 */
  padding: 1.25rem;
  margin: 0 0 3rem;
  overflow: visible;
  /* Décor : grand cercle bleu (SVG) en haut-droite, débordement */
  /* Décor : petit cercle bordeaux (SVG) en bas-gauche, débordement */
}
@media (min-width: 768px) and (max-width: 1023px) {
  .formation-profils-prerequis {
    margin: 0;
  }
}
.formation-profils-prerequis::before {
  content: "";
  position: absolute;
  top: -22px;
  right: -20px;
  width: 93px;
  height: 93px;
  background: url("img/icons/formation-deco-big.svg") no-repeat center/contain;
  pointer-events: none;
}
.formation-profils-prerequis::after {
  content: "";
  position: absolute;
  bottom: -15px;
  left: -11px;
  width: 70px;
  height: 70px;
  background: url("img/icons/formation-deco-small.svg") no-repeat center/contain;
  pointer-events: none;
}
.formation-profils-prerequis__row {
  position: relative;
  z-index: 1;
  /* On flex l'inner-container Gutenberg (ou la row elle-même si pas de wrapper) */
  /* Cards à 48% par défaut (2 par ligne).                                 */
  /* Passe à 100% dans la plage 1025-1135px (sidebar visible mais tight)  */
  /* et également en mobile < 768px (pas assez d'espace pour 2 cols).      */
}
.formation-profils-prerequis__row > .wp-block-group__inner-container, .formation-profils-prerequis__row.wp-block-group {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}
.formation-profils-prerequis__row .formation-info-card {
  width: 47%;
  margin: 0 !important;
}
@media (max-width: 1135px) and (min-width: 1025px) {
  .formation-profils-prerequis__row .formation-info-card {
    width: 100%;
  }
}
@media (max-width: 767px) {
  .formation-profils-prerequis__row .formation-info-card {
    width: 100%;
  }
}

/* ─── Force [hidden] sur cards avis + wrap "Charger plus" ─────── */
/* Sinon la règle UA `display: none` est battue par `display: flex` */
/* que Gutenberg met via .is-layout-flex sur les wp-block-group/buttons. */
.formation-avis-card[hidden],
.formation-avis-load-more-wrap[hidden],
.formation-section .wp-block-buttons[hidden] {
  display: none !important;
}

/* ─── Wrapper liste des avis ────────────────────────────────────── */
/* Généré par le shortcode [formation_avis]. On neutralise le style de
   liste par défaut du <ul> pour préserver le rendu visuel des cards. */
.formation-avis-list {
  list-style: none;
  margin: 0;
  padding: 0;
  /* Neutralise la puce bleue héritée de `.formation-section ul li::before`
     (les cards d'avis ne sont pas une liste à puces). */
}
.formation-avis-list li {
  padding-left: 0;
}
.formation-avis-list li::before {
  content: none !important;
}

/* ─── Card Avis (note + texte + utilisateur + entreprise) ──────── */
/* Rendu comme <li class="formation-avis-card"> dans le shortcode.     */
.formation-avis-card {
  background-color: #EAF6F8;
  border-radius: 1rem;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}
.formation-avis-card:last-child {
  margin-bottom: 3rem; /* aligné avec les autres sections */
}
.formation-avis-card__note {
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 700; /* Bold */
  font-size: 1.125rem !important; /* 18px */
  line-height: 1.625rem;
  color: #8B1A4B;
  margin: 0;
}
.formation-avis-card__text {
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 500;
  font-size: 1rem !important; /* 16px */
  line-height: 1.375rem;
  color: #314158;
  margin: 0;
}
.formation-avis-card__author {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.formation-avis-card__name {
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 700; /* Bold */
  font-size: 1.125rem !important; /* 18px */
  line-height: 1.625rem;
  color: #161F2C;
  margin: 0;
}
.formation-avis-card__company {
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 500;
  font-size: 1rem !important; /* 16px */
  line-height: 1.375rem;
  color: #314158;
  margin: 0;
}

/* ─── Variante : Formateur (wrapper bordeaux-100 + author blocks) ─── */
/* Bloc Gutenberg : Groupe avec className "formation-formateur"     */
.formation-formateur {
  position: relative;
  background-color: #F9F0F4;
  border-radius: 1rem;
  padding: 1.25rem;
  margin: 0 0 3rem;
  overflow: visible;
  /* Décor : grand cercle ORANGE en haut-droite */
  /* Décor : petit cercle BORDEAUX en bas-gauche */
}
.formation-formateur::before {
  content: "";
  position: absolute;
  top: -22px;
  right: -20px;
  width: 93px;
  height: 93px;
  background: url("img/icons/formation-deco-big-orange.svg") no-repeat center/contain;
  pointer-events: none;
}
.formation-formateur::after {
  content: "";
  position: absolute;
  bottom: -15px;
  left: -11px;
  width: 46px;
  height: 46px;
  background: url("img/icons/formation-deco-small.svg") no-repeat center/contain;
  pointer-events: none;
}
.formation-formateur__row {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.formation-formateur__author {
  background-color: #FFFFFF;
  border: 1px solid #CBD5E1;
  border-radius: 1rem;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.formation-formateur__author h3 {
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 800; /* ExtraBold */
  font-size: 1.5rem !important; /* 24px */
  line-height: 1.875rem; /* 30px */
  color: #161F2C;
  margin: 0;
}
.formation-formateur__author p {
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 500;
  font-size: 1rem !important; /* 16px */
  line-height: 1.375rem;
  color: #314158;
  margin: 0;
}

/*
Theme Name: Inari Child
Theme URI: https://inari.fr/
Author: Florian Le Guyader
Author URI: https://www.ethicfirst.fr/
Description: Thème sur mesure du site Inari — Atelier fil Blanc. Basé sur le starter theme Generic, forké depuis le thème Ethic First.
Version: 0.1.0
Template: generic
Text Domain: inari-child
*/
/* ═══════════════════════════════════════════════════════════ */
/* Avis Trustfolio – Section "Nous avons d'excellents avis"   */
/* Bloc Gutenberg : Groupe avec classe CSS "reviews-section"  */
/* Contient :                                                  */
/*   [note_trustfolio]  → .trustfolio-rating (étoiles + note) */
/*   Titre H2                                                  */
/*   [avis_trustfolio]  → .cards-review-grid                  */
/* ═══════════════════════════════════════════════════════════ */
.reviews-section {
  background-color: #FFFFFF;
  padding: 0 0 3.75rem;
  /* Ordre DOM = h2 → note → grille (pour le sens de lecture quand CSS off).
     Ordre visuel = note → h2 → grille via flex order.
     NB : le flex doit être sur le PARENT DIRECT de .trustfolio-rating —
     Gutenberg emballe tout dans .wp-block-group__inner-container. */
}
.reviews-section > .wp-block-group__inner-container,
.reviews-section > div {
  max-width: 1536px;
  margin: 0 auto;
  padding-left: 2.5rem;
  padding-right: 2.5rem;
  /* Sur mobile (<768px), on réduit à 1.5rem pour laisser plus de
     place au contenu (harmonisé avec toutes les sections). */
}
@media (max-width: 767px) {
  .reviews-section > .wp-block-group__inner-container,
  .reviews-section > div {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}
@media (max-width: 1023px) {
  .reviews-section {
    padding: 3.75rem 0;
  }
}
.reviews-section > .wp-block-group__inner-container,
.reviews-section > div {
  display: flex;
  flex-direction: column;
}
.reviews-section .trustfolio-rating {
  order: -1;
  text-align: center;
  margin-bottom: 0.5rem;
}

/* ═══════════════════════════════════════════════════════════ */
/* Titre de la section avis — Lora Bold 60/68, centré.    */
/* Ciblé via sa position (juste après le bloc note Trustfolio) */
/* pour fonctionner même si le bloc n'a pas la classe          */
/* "reviews-section".                                          */
/* ═══════════════════════════════════════════════════════════ */
.reviews-section h2,
.trustfolio-rating + h2 {
  color: #161F2C;
  text-align: center;
  margin: 0 0 2.5rem 0;
  font-family: "Lora", Georgia, "Times New Roman", serif;
  font-weight: 900;
  font-size: 2.5rem;
  line-height: 3rem;
  hyphens: manual;
}
@media (min-width: 1024px) {
  .reviews-section h2,
  .trustfolio-rating + h2 {
    font-size: 3.75rem;
    line-height: 4.25rem;
  }
}
@media (max-width: 1023px) {
  .reviews-section h2,
  .trustfolio-rating + h2 {
    margin-bottom: 1.5rem;
  }
}

/*
Theme Name: Inari Child
Theme URI: https://inari.fr/
Author: Florian Le Guyader
Author URI: https://www.ethicfirst.fr/
Description: Thème sur mesure du site Inari — Atelier fil Blanc. Basé sur le starter theme Generic, forké depuis le thème Ethic First.
Version: 0.1.0
Template: generic
Text Domain: inari-child
*/
/* ═══════════════════════════════════════════════════════════ */
/* Chiffres clés – Section "L'Accessibilité est un levier…"   */
/* Bloc Gutenberg : Groupe avec classe CSS "key-figures"      */
/* Structure attendue :                                        */
/*   .key-figures (Groupe, fond cyan-50)                    */
/*     └─ Colonnes (2 col)                                     */
/*         ├─ Col 1 : Groupe .key-figures__highlight (carte)   */
/*         │     ├─ Titre H2                                   */
/*         │     └─ Bouton "Nous découvrir"                    */
/*         └─ Col 2 :                                          */
/*               └─ 3× Groupe .key-figure                      */
/*                     ├─ .key-figure__number                  */
/*                     └─ .key-figure__desc                    */
/* ═══════════════════════════════════════════════════════════ */
.key-figures {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  /* Sur mobile (<768px), le body remplit déjà la viewport → 100vw devient
     redondant ET pose problème avec la scrollbar verticale (100vw inclut la
     scrollbar, body ne l'inclut pas → l'élément dépasse et pousse tout le
     contenu de ~15px vers la droite). On revient à 100% du parent. */
  /* fond orange bord à bord (le contenu reste centré) */
  background-color: #EAF6F8;
  padding: 3.75rem 0;
  /* ─── Colonnes ──────────────────────────────────────────── */
  /* ─── Carte orange (titre + CTA) ────────────────────────── */
  /* Liste Gutenberg (<ul class="wp-block-list">) qui enveloppe les .key-figure :
     grille 2 colonnes centrée avec 5% de gouttière. */
  /* ─── Colonne des chiffres ──────────────────────────────── */
  /* Nombre — Montserrat Bold 60/68 cyan-500 */
  /* Description — Montserrat Medium 20/26 slate-900 */
}
@media (max-width: 767px) {
  .key-figures {
    width: 100%;
    margin-left: 0;
  }
}
.key-figures > .wp-block-group__inner-container,
.key-figures > div {
  max-width: 1536px;
  margin: 0 auto;
  padding-left: 2.5rem;
  padding-right: 2.5rem;
  /* Sur mobile (<768px), on réduit à 1.5rem pour laisser plus de
     place au contenu (harmonisé avec toutes les sections). */
}
@media (max-width: 767px) {
  .key-figures > .wp-block-group__inner-container,
  .key-figures > div {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}
.key-figures .wp-block-columns {
  gap: 3rem;
  margin: 0 auto; /* centré : la section est en pleine largeur, le contenu reste à $max_width_size */
  align-items: stretch !important;
}
@media (max-width: 1023px) {
  .key-figures .wp-block-columns {
    flex-direction: column;
    gap: 2.5rem;
  }
}
.key-figures__highlight {
  background-color: #7FD3DF;
  border-radius: 1rem;
  padding: 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2.5rem;
  position: relative;
  /* Titre H2 — Lora Bold 60/68 */
  /* CTA "Nous découvrir" — bouton blanc, point bleu, texte bleu */
  /* Mobile & tablette : CTA "Nous découvrir" centré */
  /* ─── Décor : 2 cercles en bas-droite de la carte ─── */
  /* Gros cercle bleu (≈ Figma Ellipse 54px) + anneau saumon 10px */
  /* Petit cercle orange (à gauche du bleu, cluster serré comme la maquette) */
}
.key-figures__highlight h2 {
  color: #161F2C;
  margin: 0;
  font-family: "Lora", Georgia, "Times New Roman", serif;
  font-weight: 900;
  font-size: 2.5rem;
  line-height: 3rem;
  hyphens: manual;
}
@media (min-width: 1024px) {
  .key-figures__highlight h2 {
    font-size: 3.75rem;
    line-height: 4.25rem;
  }
}
@media (min-width: 1024px) {
  .key-figures__highlight h2 {
    margin-bottom: 100px;
  }
}
.key-figures__highlight .wp-block-button__link {
  display: inline-flex !important;
  align-items: center;
  gap: 0.5rem;
  background-color: #FFFFFF !important;
  color: #8B1A4B !important;
  border: none !important;
  border-radius: 99999px !important;
  padding: 0.75rem 1rem !important;
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
  font-weight: 700 !important;
  font-size: 1.125rem !important;
  line-height: 1.625rem !important;
}
.key-figures__highlight .wp-block-button__link::before {
  content: "\f46f";
  font-family: "icon";
  font-size: 0.6em;
  line-height: 1;
  flex-shrink: 0;
  transition: all 0.2s ease;
}
.key-figures__highlight .wp-block-button__link:hover, .key-figures__highlight .wp-block-button__link:focus {
  background-color: #EAF6F8 !important;
  color: #6E1339 !important;
}
.key-figures__highlight .wp-block-button__link:hover::before, .key-figures__highlight .wp-block-button__link:focus::before {
  content: "\f004";
  font-size: 1.25em !important;
  color: #6E1339 !important;
}
@media (max-width: 1023px) {
  .key-figures__highlight .wp-block-buttons {
    justify-content: center;
  }
  .key-figures__highlight .wp-block-button {
    text-align: center;
  }
}
.key-figures__highlight::after {
  content: "";
  position: absolute;
  bottom: -18px;
  right: -16px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background-color: #8B1A4B;
  border: 10px solid #EAF6F8; /* bordure saumon = couleur du fond de section */
  box-sizing: content-box; /* la bordure s'ajoute autour, le rond bleu reste à 52px */
  pointer-events: none;
}
.key-figures__highlight::before {
  content: "";
  position: absolute;
  bottom: -24px;
  right: 60px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #3BB9CB;
  pointer-events: none;
}
.key-figures ul.wp-block-list {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 5%;
  list-style: none;
  margin: 0;
  padding: 0;
}
.key-figures .key-figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  width: 45%;
  margin-top: 2rem;
}
.key-figures__number,
.key-figures .key-figure__number {
  font-family: "Lora", Georgia, "Times New Roman", serif;
  font-weight: 900;
  color: #3BB9CB;
  margin: 0;
  font-size: 2.5rem;
  line-height: 3rem;
}
@media (min-width: 1024px) {
  .key-figures__number,
  .key-figures .key-figure__number {
    font-size: 3.75rem;
    line-height: 4.25rem;
  }
}
.key-figures__desc,
.key-figures .key-figure__desc {
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 500;
  font-size: 1.25rem !important; /* 20px — Figma text/l */
  line-height: 1.625rem; /* 26px */
  color: #161F2C;
  margin: 0 !important;
}

/*
Theme Name: Inari Child
Theme URI: https://inari.fr/
Author: Florian Le Guyader
Author URI: https://www.ethicfirst.fr/
Description: Thème sur mesure du site Inari — Atelier fil Blanc. Basé sur le starter theme Generic, forké depuis le thème Ethic First.
Version: 0.1.0
Template: generic
Text Domain: inari-child
*/
/* ═══════════════════════════════════════════════════════════ */
/* Blog cards – Section "Nos derniers articles de blog"       */
/* Bloc Gutenberg : Groupe avec classe CSS "blog-section"     */
/* Contient :                                                  */
/*   Titre H2 + Paragraphe + Bouton                           */
/*   [derniers_articles nombre="3"]  → .cards-blog-grid       */
/* ═══════════════════════════════════════════════════════════ */
.blog-section {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  /* Sur mobile (<768px), le body remplit déjà la viewport → 100vw devient
     redondant ET pose problème avec la scrollbar verticale (100vw inclut la
     scrollbar, body ne l'inclut pas → l'élément dépasse et pousse tout le
     contenu de ~15px vers la droite). On revient à 100% du parent. */
  padding: 3.75rem 0; /* 60px, tous breakpoints (desktop + tablet + mobile) */
  position: relative;
  overflow: hidden; /* clip le motif décoratif */
  background-color: #FFFFFF;
  /* Motif de points bleu décoratif (top-droite) — PNG recoloré via mask. */
  /* Paragraphe d'intro (cible le 1er paragraphe direct, pas les cards) */
  /* Cadrage horizontal du titre & paragraphe quand ils sont enfants directs   */
  /* du groupe (cas sans .wp-block-group__inner-container) : mêmes marges que   */
  /* les autres sections. No-op si un inner-container enveloppe déjà le contenu. */
  /* Bouton "Explorer tous les articles" : de l'air au-dessus et en dessous */
}
@media (max-width: 767px) {
  .blog-section {
    width: 100%;
    margin-left: 0;
  }
}
@media (max-width: 1023px) {
  .blog-section {
    padding: 3.75rem 0;
  }
}
.blog-section::before {
  content: "";
  position: absolute;
  background-color: #8B1A4B;
  -webkit-mask: url("img/dotblue-pattern.png") no-repeat center/contain;
  mask: url("img/dotblue-pattern.png") no-repeat center/contain;
  pointer-events: none;
  z-index: 0;
  top: -226px;
  right: -423px;
  width: 1153px;
  height: 1153px;
  opacity: 0.3;
  transform: rotate(168deg);
}
@media (max-width: 767px) {
  .blog-section::before {
    display: none;
  }
}
.blog-section > .wp-block-group__inner-container,
.blog-section > div {
  max-width: 1536px;
  margin: 0 auto;
  padding-left: 2.5rem;
  padding-right: 2.5rem;
  /* Sur mobile (<768px), on réduit à 1.5rem pour laisser plus de
     place au contenu (harmonisé avec toutes les sections). */
  position: relative;
  z-index: 1;
}
@media (max-width: 767px) {
  .blog-section > .wp-block-group__inner-container,
  .blog-section > div {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}
.blog-section h2 {
  color: #161F2C;
  margin: 0 0 1.5rem 0;
  font-family: "Lora", Georgia, "Times New Roman", serif;
  font-weight: 900;
  font-size: 2.5rem;
  line-height: 3rem;
  hyphens: manual;
}
@media (min-width: 1024px) {
  .blog-section h2 {
    font-size: 3.75rem;
    line-height: 4.25rem;
  }
}
.blog-section > .wp-block-group__inner-container > p,
.blog-section > div > p {
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 500;
  font-size: 1.25rem !important; /* 20px — Figma text/l */
  line-height: 1.625rem; /* 26px */
  color: #314158;
  margin: 0 0 1.5rem 0 !important;
  max-width: 900px;
}
.blog-section > h2,
.blog-section > p {
  max-width: 1536px;
  margin-inline: auto;
  padding-left: 2.5rem;
  padding-right: 2.5rem;
  position: relative;
  z-index: 1;
}
.blog-section .wp-block-buttons {
  margin-top: 1.5rem;
  margin-bottom: 3rem;
}

/*
Theme Name: Inari Child
Theme URI: https://inari.fr/
Author: Florian Le Guyader
Author URI: https://www.ethicfirst.fr/
Description: Thème sur mesure du site Inari — Atelier fil Blanc. Basé sur le starter theme Generic, forké depuis le thème Ethic First.
Version: 0.1.0
Template: generic
Text Domain: inari-child
*/
/* ═══════════════════════════════════════════════════════════ */
/* Media-text – Section "Bien comprendre l'accessibilité…"    */
/* Bloc Gutenberg : Groupe avec classe CSS "media-text"       */
/* Structure attendue :                                        */
/*   .media-text (Groupe, fond bleu)                           */
/*     └─ Colonnes (2 col) :                                   */
/*         ├─ Image (col 1)                                    */
/*         └─ Titre + Paragraphe + Bouton (col 2)              */
/* ═══════════════════════════════════════════════════════════ */
.media-text {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  /* Sur mobile (<768px), le body remplit déjà la viewport → 100vw devient
     redondant ET pose problème avec la scrollbar verticale (100vw inclut la
     scrollbar, body ne l'inclut pas → l'élément dépasse et pousse tout le
     contenu de ~15px vers la droite). On revient à 100% du parent. */
  /* fond bleu bord à bord (le contenu reste centré) */
  background-color: #FFFFFF; /* zone basse blanche (le bleu est posé en ::before) */
  color: #EAF6F8;
  padding: 0 0 6.75rem 0;
  margin-bottom: 3.75rem;
  position: relative;
  overflow: hidden;
  /* Hauteur de la bande blanche en bas (où l'image + cercles débordent) */
  /* Fond bleu : s'arrête avant le bas → laisse une bande blanche dans      */
  /* laquelle l'image déborde (comme le héro).                              */
  /* au-dessus du fond bleu */
  /* ─── Colonnes ──────────────────────────────────────────── */
  /* Colonne texte (droite) : pas de padding vertical. */
  /* ─── Image + décor cercles ─────────────────────────────── */
  /* ─── Titre — Lora Bold 60/68 cyan-50 ────────────── */
  /* ─── Paragraphe — Montserrat Medium 18/26 cyan-50 ─────── */
  /* Bloc boutons : pas de marge par défaut (compense .hero) */
  /* ─── CTA blanc, point bleu, texte bleu ─────────────────── */
}
@media (max-width: 767px) {
  .media-text {
    width: 100%;
    margin-left: 0;
  }
}
.media-text::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 72px;
  background-color: #8B1A4B;
  z-index: 0;
}
.media-text > .wp-block-group__inner-container,
.media-text > div {
  max-width: 1536px;
  margin: 0 auto;
  padding-left: 2.5rem;
  padding-right: 2.5rem;
  /* Sur mobile (<768px), on réduit à 1.5rem pour laisser plus de
     place au contenu (harmonisé avec toutes les sections). */
  position: relative;
  z-index: 1;
}
@media (max-width: 767px) {
  .media-text > .wp-block-group__inner-container,
  .media-text > div {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}
.media-text .wp-block-columns {
  gap: 3rem;
  margin: 0 auto; /* centré : la section est en pleine largeur, le contenu reste à $max_width_size */
  align-items: flex-start !important;
  position: relative;
  top: 3.75rem;
}
@media (max-width: 1023px) {
  .media-text .wp-block-columns {
    flex-direction: column-reverse; /* texte au-dessus, image en dessous */
    gap: 2rem;
  }
}
.media-text > .wp-block-group__inner-container .wp-block-column:last-child,
.media-text > div .wp-block-column:last-child {
  padding-top: 0;
  padding-bottom: 0;
}
.media-text .wp-block-image {
  margin: 0;
  position: relative;
  height: 640px; /* compense .hero (l'image doit rester haute pour déborder dans la bande blanche) */
  /* Cercles décoratifs en bas-droite de l'image (cluster, comme la section Chiffres) */
  /* Grand cercle ROUGE foncé + anneau blanc (= couleur de la bande basse) */
  /* Petit cercle ORANGE + bordure blanche, à gauche du grand */
}
@media (max-width: 1023px) {
  .media-text .wp-block-image {
    height: auto; /* empilé : l'image reprend sa hauteur naturelle */
  }
}
.media-text .wp-block-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 1rem;
  display: block;
}
.media-text .wp-block-image::before, .media-text .wp-block-image::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 2;
}
.media-text .wp-block-image::after {
  width: 52px;
  height: 52px;
  background-color: #2A94A3;
  border: 10px solid #FFFFFF;
  box-sizing: content-box;
  bottom: -28px;
  right: -37px;
  left: unset;
}
.media-text .wp-block-image::before {
  width: 20px;
  height: 20px;
  background-color: #7FD3DF;
  border: 4px solid #FFFFFF;
  box-sizing: content-box;
  bottom: -40px;
  right: 38px;
  left: unset;
}
.media-text h2 {
  color: #EAF6F8;
  margin: 0 0 1.5rem 0;
  font-family: "Lora", Georgia, "Times New Roman", serif;
  font-weight: 900;
  font-size: 2.5rem;
  line-height: 3rem;
  hyphens: manual;
}
@media (min-width: 1024px) {
  .media-text h2 {
    font-size: 3.75rem;
    line-height: 4.25rem;
  }
}
.media-text p {
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 500;
  font-size: 1.125rem !important; /* 18px */
  line-height: 1.625rem; /* 26px */
  color: #EAF6F8;
  margin: 0 0 1.5rem 0 !important;
}
.media-text p strong,
.media-text p b {
  font-weight: 700;
}
.media-text .wp-block-buttons {
  margin: 0;
  gap: 0.75rem;
}
.media-text .wp-block-button__link {
  display: inline-flex !important;
  align-items: center;
  gap: 0.5rem;
  background-color: #FFFFFF !important;
  color: #8B1A4B !important;
  border: none !important;
  border-radius: 99999px !important;
  padding: 0.75rem 1rem !important;
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
  font-weight: 700 !important;
  font-size: 1.125rem !important;
  line-height: 1.625rem !important;
}
.media-text .wp-block-button__link::before {
  content: "\f46f";
  font-family: "icon";
  font-size: 0.6em;
  line-height: 1;
  flex-shrink: 0;
  transition: all 0.2s ease;
}
.media-text .wp-block-button__link:hover, .media-text .wp-block-button__link:focus {
  background-color: #EAF6F8 !important;
  color: #6E1339 !important;
}
.media-text .wp-block-button__link:hover::before, .media-text .wp-block-button__link:focus::before {
  content: "\f004";
  font-size: 1.25em !important;
  color: #6E1339 !important;
}
.media-text .wp-block-button__link::before {
  font-weight: normal;
}

/*
Theme Name: Inari Child
Theme URI: https://inari.fr/
Author: Florian Le Guyader
Author URI: https://www.ethicfirst.fr/
Description: Thème sur mesure du site Inari — Atelier fil Blanc. Basé sur le starter theme Generic, forké depuis le thème Ethic First.
Version: 0.1.0
Template: generic
Text Domain: inari-child
*/
/* ═══════════════════════════════════════════════════════════ */
/* Confiance – Section "Ils nous font confiance"              */
/* Bloc Gutenberg :                                            */
/*   .trust-logos__box (encart gris-bleu — wrapper direct)     */
/*     ├─ Titre H2                                             */
/*     └─ Galerie de logos (.wp-block-gallery)                */
/* ═══════════════════════════════════════════════════════════ */
/* ─── Encart gris-bleu (contient le titre + la galerie) ───── */
.trust-logos__box {
  background-color: #F9F0F4 !important;
  border-radius: 1rem;
  padding: 2rem !important;
  width: calc(100% - 5rem);
  margin: 0 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 5rem;
  align-items: center;
  /* ─── Titre — Lora Bold 40/48, centré ────────────────── */
  /* ─── Galerie de logos (rendue en <ul>/<li> pour l'a11y) ──── */
}
@media (max-width: 1023px) {
  .trust-logos__box {
    gap: 3rem;
    margin: 0 2.5rem;
  }
}
.trust-logos__box h2 {
  font-family: "Lora", Georgia, "Times New Roman", serif;
  font-weight: 700;
  color: #161F2C;
  text-align: center;
  margin: 0 0 2rem 0;
  font-size: 2rem;
  line-height: 2.5rem;
}
@media (min-width: 1024px) {
  .trust-logos__box h2 {
    font-size: 2.5rem;
    line-height: 3rem;
    max-width: 53%;
    margin: 0 auto 2.5rem;
  }
}
.trust-logos__box .wp-block-gallery {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center;
  justify-content: center;
  gap: 3rem;
  margin: 0;
  padding: 0; /* reset ul */
  list-style: none; /* reset ul */
  width: 100%;
}
.trust-logos__box .wp-block-gallery > .wp-block-image {
  list-style: none; /* reset li */
}
@media (min-width: 768px) and (max-width: 1023px) {
  .trust-logos__box .wp-block-gallery {
    gap: 2rem !important;
  }
}
@media (max-width: 767px) {
  .trust-logos__box .wp-block-gallery {
    column-gap: 1.5rem !important;
    row-gap: 2rem !important;
  }
}
.trust-logos__box .wp-block-gallery .wp-block-image,
.trust-logos__box .wp-block-gallery figure {
  margin: 0 !important;
  flex: 1 1 160px !important;
  max-width: 220px;
  height: 80px !important;
}
@media (max-width: 767px) {
  .trust-logos__box .wp-block-gallery .wp-block-image,
  .trust-logos__box .wp-block-gallery figure {
    flex: 0 0 calc(50% - 0.75rem) !important;
    max-width: none;
    height: 56px !important;
  }
}
.trust-logos__box .wp-block-gallery img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

/*
Theme Name: Inari Child
Theme URI: https://inari.fr/
Author: Florian Le Guyader
Author URI: https://www.ethicfirst.fr/
Description: Thème sur mesure du site Inari — Atelier fil Blanc. Basé sur le starter theme Generic, forké depuis le thème Ethic First.
Version: 0.1.0
Template: generic
Text Domain: inari-child
*/
/* ═══════════════════════════════════════════════════════════ */
/* Devis – Section CTA "Faites-vous accompagner au mieux"     */
/* Bloc Gutenberg : Groupe avec classe CSS "devis"            */
/* Structure attendue :                                        */
/*   .devis (Groupe, fond blanc)                               */
/*     └─ Colonnes (2 col) :                                   */
/*         ├─ Titre H2 + Paragraphe (col 1)                    */
/*         └─ Col 2 :                                          */
/*             ├─ Groupe .devis__card  (demande de devis)      */
/*             └─ Groupe .devis__contact (tél + email)         */
/* ═══════════════════════════════════════════════════════════ */
.devis {
  background-color: #FFFFFF;
  padding: 3.75rem 0; /* 60px, tous breakpoints (desktop + tablet + mobile) */
  /* ─── Colonnes ──────────────────────────────────────────── */
  /* ─── Titre — Lora Bold 60/68 (span cyan-500) ─────── */
  /* Paragraphe — Montserrat Medium 20/26 slate-700 */
  /* ─── Encart "Demande de devis" ─────────────────────────── */
  /* .devis__card EST le <a> (la flèche) ; l'encart visible est .card-contact   */
  /* (cf. _cta-contact.scss, qui porte position:relative pour le lien étendu).  */
  /* ─── Encart contacts (tél + email) — rendu en <ul><li> pour l'a11y ─ */
}
.devis > .wp-block-group__inner-container,
.devis > div {
  max-width: 1536px;
  margin: 0 auto;
  padding-left: 2.5rem;
  padding-right: 2.5rem;
  /* Sur mobile (<768px), on réduit à 1.5rem pour laisser plus de
     place au contenu (harmonisé avec toutes les sections). */
}
@media (max-width: 767px) {
  .devis > .wp-block-group__inner-container,
  .devis > div {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}
@media (max-width: 1023px) {
  .devis {
    padding: 3.75rem 0;
  }
}
.devis .wp-block-columns {
  gap: 5rem;
  margin: 0;
  align-items: flex-start !important;
}
@media (min-width: 1024px) {
  .devis .wp-block-columns {
    gap: 10rem; /* 160px — Figma */
  }
}
@media (max-width: 1023px) {
  .devis .wp-block-columns {
    flex-direction: column;
    gap: 2.5rem;
  }
}
.devis h2 {
  color: #161F2C;
  margin: 0 0 1.5rem 0;
  font-family: "Lora", Georgia, "Times New Roman", serif;
  font-weight: 900;
  font-size: 2.5rem;
  line-height: 3rem;
  hyphens: manual;
}
@media (min-width: 1024px) {
  .devis h2 {
    font-size: 3.75rem;
    line-height: 4.25rem;
  }
}
.devis .wp-block-column > p {
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 500;
  font-size: 1.25rem !important; /* 20px — Figma text/l */
  line-height: 1.625rem; /* 26px */
  color: #314158;
  margin: 0 !important;
}
.devis__card {
  background-color: #EAF6F8;
  border-radius: 1rem;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
  text-decoration: none;
  /* Lien étendu : la flèche couvre toute la carte .card-contact (clic partout) */
  /* Bouton rond blanc avec flèche */
}
.devis__card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.devis__card .devis__card-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.devis__card .devis__card-title {
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 800;
  font-size: 1.875rem;
  line-height: 2.25rem;
  color: #2A94A3;
  margin: 0;
}
.devis__card .devis__card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 99999px;
  background-color: #FFFFFF;
  color: #3BB9CB;
  flex-shrink: 0;
}
.devis__card .devis__card-icon i {
  font-size: 1.5rem; /* 24px */
  line-height: 1;
  /* Flèche cerclée (police d'icônes du thème) */
}
.devis__card .devis__card-icon i::before {
  content: "\f004"; /* icon-arrow-right */
  font-family: "icon";
}
.devis__card:hover .devis__card-icon, .devis__card:focus-within .devis__card-icon {
  background-color: #2A94A3;
  color: #FFFFFF;
  /* Icône en blanc au survol/focus */
}
.devis__card:hover .devis__card-icon i,
.devis__card:hover .devis__card-icon i::before, .devis__card:focus-within .devis__card-icon i,
.devis__card:focus-within .devis__card-icon i::before {
  color: #FFFFFF !important;
}
.devis__contact {
  background-color: #EAF6F8;
  border-radius: 1rem;
  margin: 0; /* reset ul */
  padding: 0; /* reset ul */
  list-style: none; /* reset ul */
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.devis__contact > li {
  list-style: none;
  margin: 0;
  padding: 0;
}
.devis__contact a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 800; /* ExtraBold */
  font-size: 1.5rem; /* 24px — text/xl */
  line-height: 1.875rem; /* 30px */
  color: #2A94A3;
  text-decoration: none;
  /* Sous 410px : police fluide pour garder le lien sur une ligne. */
  /* Icônes selon le type de lien (police d'icônes du thème) */
}
@media (max-width: 410px) {
  .devis__contact a {
    font-size: clamp(0.75rem, 5vw, 1.5rem);
    line-height: 1.4;
    white-space: nowrap;
    gap: 0.25rem;
  }
}
.devis__contact a i {
  font-size: 2rem; /* 32px */
  line-height: 1;
  flex-shrink: 0;
}
@media (max-width: 410px) {
  .devis__contact a i {
    font-size: clamp(1rem, 6vw, 2rem);
  }
}
.devis__contact a[href^="tel:"] i::before {
  content: "\f001"; /* icon-phone */
  font-family: "icon";
}
.devis__contact a[href^="mailto:"] i::before {
  content: "\f00e"; /* icon-letter */
  font-family: "icon";
}
.devis__contact a:hover, .devis__contact a:focus {
  text-decoration: none !important;
  color: #6E1339; /* bleu foncé (texte + icône héritée) */
}

/*
Theme Name: Inari Child
Theme URI: https://inari.fr/
Author: Florian Le Guyader
Author URI: https://www.ethicfirst.fr/
Description: Thème sur mesure du site Inari — Atelier fil Blanc. Basé sur le starter theme Generic, forké depuis le thème Ethic First.
Version: 0.1.0
Template: generic
Text Domain: inari-child
*/
@media (min-width: 1024px) {
  .section-levier .wp-block-columns {
    align-items: center !important;
    justify-content: space-between;
  }
}
.section-levier .wp-block-columns .cyan-500 {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.section-levier .wp-block-columns li {
  margin: 1rem 0;
}
.section-levier .wp-block-columns li:first-child {
  margin-top: 0;
}
.section-levier .wp-block-columns li:last-child {
  margin-bottom: 0;
}

/*
Theme Name: Inari Child
Theme URI: https://inari.fr/
Author: Florian Le Guyader
Author URI: https://www.ethicfirst.fr/
Description: Thème sur mesure du site Inari — Atelier fil Blanc. Basé sur le starter theme Generic, forké depuis le thème Ethic First.
Version: 0.1.0
Template: generic
Text Domain: inari-child
*/
/* ═══════════════════════════════════════════════════════════ */
/* Page Blog – liste des articles                             */
/* Structure attendue (blocs Gutenberg sur la page) :          */
/*   Groupe .blog-header                                       */
/*     ├─ [ethic_breadcrumb]  (bloc Shortcode)                 */
/*     ├─ Titre H1                                             */
/*     └─ Paragraphe (description)                             */
/*   [last_articles]          (filtres + grille + pagination)  */
/*   Paragraphe .blog-seo     (texte SEO de bas de page)       */
/* ═══════════════════════════════════════════════════════════ */
/* ─── En-tête navy ───────────────────────────────────────── */
.blog-header {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  /* Sur mobile (<768px), le body remplit déjà la viewport → 100vw devient
     redondant ET pose problème avec la scrollbar verticale (100vw inclut la
     scrollbar, body ne l'inclut pas → l'élément dépasse et pousse tout le
     contenu de ~15px vers la droite). On revient à 100% du parent. */
  /* bandeau navy bord à bord */
  padding: 3.75rem 0; /* 60px, tous breakpoints (desktop + tablet + mobile) */
  background-color: #6E1339;
  color: #FFFFFF;
  text-align: center; /* centre titre + description même sans conteneur interne */
  position: relative;
  overflow: hidden;
  /* Motif de points décoratif en haut-droite (comme le hero) */
  /* Contenu centré, calé sur la largeur du site */
  /* Pages catégorie : pas de padding-bottom (grille directement après) */
  /* Titre — Lora Bold 40/48 → 60/68 */
  /* Description — Montserrat Medium 18/26 */
  /* ─── Fil d'ariane sur fond navy ─────────────────────────── */
}
@media (max-width: 767px) {
  .blog-header {
    width: 100%;
    margin-left: 0;
  }
}
.blog-header::before {
  content: "";
  position: absolute;
  background-image: url("img/dotblue-pattern.png");
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.2;
  pointer-events: none;
  z-index: 0;
  top: -443px;
  right: -256px;
  width: 1153px;
  height: 1153px;
  transform: rotate(90deg);
}
.blog-header > .wp-block-group__inner-container,
.blog-header > div {
  max-width: 1536px;
  margin: 0 auto;
  padding: 0 2.5rem 4.5rem;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  text-align: center;
}
body.category .blog-header > .wp-block-group__inner-container, body.category .blog-header > div {
  padding: 0 2.5rem;
}
.blog-header h1 {
  font-family: "Lora", Georgia, "Times New Roman", serif;
  font-weight: 900;
  font-size: 2.5rem;
  line-height: 3rem;
  hyphens: manual;
  color: #FFFFFF;
  margin: 0 auto;
}
@media (min-width: 1024px) {
  .blog-header h1 {
    font-size: 3.75rem;
    line-height: 4.25rem;
  }
}
.blog-header p {
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 500;
  font-size: 1.125rem; /* 18px */
  line-height: 1.625rem; /* 26px */
  color: #EAF6F8;
  max-width: 1024px;
  margin: 0 auto; /* centré comme bloc même hors conteneur flex */
}
.blog-header .breadcrumb {
  color: #FFFFFF;
  margin-bottom: 0;
}
.blog-header .breadcrumb .breadcrumb-items {
  justify-content: center;
}
@media (max-width: 767px) {
  .blog-header .breadcrumb .breadcrumb-items {
    justify-content: flex-start;
  }
}
.blog-header .breadcrumb .breadcrumb-item::before,
.blog-header .breadcrumb [aria-current=page] {
  color: #FFFFFF;
}
.blog-header .breadcrumb a {
  color: #F9F0F4;
}
.blog-header .breadcrumb a:hover, .blog-header .breadcrumb a:focus {
  color: #FFFFFF;
}
.blog-header .breadcrumb a:focus-visible {
  outline: 2px solid #FFFFFF;
  outline-offset: 2px;
}

/* ─── Liste des articles (shortcode [last_articles]) ─────── */
/* Conteneur calé sur la largeur du site, avec gouttières.    */
.blog-list {
  max-width: 1536px;
  margin: 0 auto;
  padding: 0 2.5rem;
  /* La grille .cards-blog-grid (3 col) est déjà stylée dans _cards.scss */
}
.blog-list__empty {
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 1.125rem;
  color: #314158;
}

/* ─── Titre "XX articles" au-dessus de la grille ─────────── */
.blog-list__count {
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 700;
  font-size: 1.25rem; /* 20px */
  line-height: 1.75rem;
  color: #161F2C;
  margin: 0 0 1.5rem 0;
}

/* Cible du filtrage AJAX (grille + pagination) */
.blog-list__grid:focus {
  outline: none; /* focus programmatique après filtrage : pas de cadre disgracieux */
}
.blog-list__grid.is-loading {
  opacity: 0.5;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

/* Padding vertical sur la grille : uniquement sur les pages catégorie
   (respirations avant/après la grille, puisqu'il n'y a pas de sections
   supplémentaires derrière comme sur la page blog listing). */
body.category .blog-list__grid {
  padding: 3.75rem 0; /* 60px, tous breakpoints (desktop + tablet + mobile) */
}

/* ─── Filtres par catégorie (pills) ──────────────────────── */
.blog-filters {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  margin-top: -3.5rem; /* chevauche le bas du hero navy (-56px) */
  margin-bottom: 3rem;
  position: relative;
  z-index: 2;
}
.blog-filters__title {
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 800; /* ExtraBold */
  font-size: 1.5rem !important; /* 24px */
  line-height: 1.875rem; /* 30px */
  color: #6E1339;
  text-align: center;
  margin: 0;
}
.blog-filters__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.blog-filters__pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  appearance: none; /* reset <button> */
  -webkit-appearance: none;
  cursor: pointer;
  padding: 0.5rem 1rem;
  border: 1px solid #6E1339;
  border-radius: 99999px;
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 700; /* Bold */
  font-size: 1rem; /* 16px */
  line-height: 1.375rem; /* 22px */
  color: #314158;
  background-color: #FFFFFF;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
  /* Actif : fond navy, texte crème + badge check en haut-droite */
}
.blog-filters__pill:hover, .blog-filters__pill:focus-visible {
  background-color: #F9F0F4;
}
.blog-filters__pill:focus-visible {
  outline: 2px solid #3BB9CB;
  outline-offset: 2px;
}
.blog-filters__pill.is-active {
  background-color: #6E1339;
  border-color: #6E1339;
  color: #EAF6F8;
}
.blog-filters__pill.is-active:hover, .blog-filters__pill.is-active:focus-visible {
  background-color: #6E1339;
}
.blog-filters__pill.is-active::after {
  content: "\f058";
  font-family: "Font Awesome 7 Free";
  font-weight: 400;
  position: absolute;
  top: -12px;
  right: -8px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 5px;
  font-size: 1.125rem;
  line-height: 1;
  color: #6E1339;
  background-color: #F9F0F4;
  border-radius: 20px;
}

/* ─── Page blog : les filtres remontent sur le bas du hero ── */
/* Uniquement quand l'en-tête .blog-header est présent (page blog).  */
/* Sur les pages catégorie, les filtres restent normaux sur blanc.   */
body:has(.blog-header) {
  /* Carte blanche arrondie qui chevauche le bas du hero navy */
}
body:has(.blog-header) .blog-list {
  padding-top: 0;
}
body:has(.blog-header) .blog-filters {
  position: relative;
  z-index: 2;
  margin-top: -5.5rem;
  padding: 2rem 1.5rem;
  background: #FFFFFF;
  border-radius: 10px;
}
body:has(.blog-header) .blog-filters p {
  color: #6E1339;
}

/* ─── Pagination (style maquette, boutons AJAX, centrée) ──── */
.blog-pagination {
  display: flex;
  justify-content: center;
  margin-top: 4.5rem;
  margin-bottom: 4.5rem; /* respiration sous la pagination */
  /* Numéros + points : texte simple */
  /* Reset des <button> */
  /* Page courante (aria-current="page") : bleu + point indicateur */
  /* Troncature */
  /* "Suivant" : bleu + flèche cerclée */
}
.blog-pagination ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.blog-pagination li {
  display: flex;
}
.blog-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 500;
  font-size: 1.125rem; /* 18px */
  line-height: 1;
  color: #161F2C;
}
.blog-pagination button.page-numbers {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  border-radius: 0.5rem;
}
.blog-pagination button.page-numbers:hover, .blog-pagination button.page-numbers:focus-visible {
  color: #8B1A4B;
}
.blog-pagination button.page-numbers:focus-visible {
  outline: 2px solid #3BB9CB;
  outline-offset: 2px;
}
.blog-pagination button.page-numbers.current {
  position: relative;
  color: #8B1A4B;
  font-weight: 700;
}
.blog-pagination button.page-numbers.current::after {
  content: "";
  position: absolute;
  bottom: -3px;
  left: 50%;
  transform: translateX(-50%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: #8B1A4B;
}
.blog-pagination button.page-numbers.current:hover, .blog-pagination button.page-numbers.current:focus-visible {
  color: #8B1A4B;
}
.blog-pagination .dots {
  color: #314158;
}
.blog-pagination .next {
  gap: 0.5rem;
  color: #8B1A4B;
  font-weight: 700;
}
.blog-pagination .next::after {
  content: "\f004"; /* flèche cerclée */
  font-family: "icon";
  font-size: 1.1em;
}

/* ─── Texte SEO de bas de page ───────────────────────────── */
.blog-seo {
  max-width: 1536px;
  margin: 1.5rem auto 0;
  padding: 0 2.5rem;
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 500;
  font-size: 0.875rem !important; /* 14px — petit texte discret */
  line-height: 1.5;
  color: #314158;
}

/*
Theme Name: Inari Child
Theme URI: https://inari.fr/
Author: Florian Le Guyader
Author URI: https://www.ethicfirst.fr/
Description: Thème sur mesure du site Inari — Atelier fil Blanc. Basé sur le starter theme Generic, forké depuis le thème Ethic First.
Version: 0.1.0
Template: generic
Text Domain: inari-child
*/
/* ═══════════════════════════════════════════════════════════ */
/* Page Article (single.php)                                  */
/* ═══════════════════════════════════════════════════════════ */
/* ─── En-tête article (fond clair + motif de points orange) ─ */
.article-header {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  /* Sur mobile (<768px), le body remplit déjà la viewport → 100vw devient
     redondant ET pose problème avec la scrollbar verticale (100vw inclut la
     scrollbar, body ne l'inclut pas → l'élément dépasse et pousse tout le
     contenu de ~15px vers la droite). On revient à 100% du parent. */
  padding: 3.75rem 0; /* 60px, tous breakpoints (desktop + tablet + mobile) */
  background-color: #F9F0F4;
  position: relative;
  overflow: hidden;
  /* Motif dot bleu clair décoratif (SVG cropped, haut-droite)              */
  /* Harmonisé avec .hero (accueil) et .experts-hero (page équipe).         */
  /* Titre — Lora Bold 40/48 (pas Black) */
  /* Pill catégorie (contour navy, lien) */
  /* ─── Fil d'ariane (nav.breadcrumb > ol.breadcrumb-items) ─ */
}
@media (max-width: 767px) {
  .article-header {
    width: 100%;
    margin-left: 0;
  }
}
.article-header::before {
  content: "";
  position: absolute;
  top: -350px;
  right: 0;
  width: 546px;
  height: 668px;
  background-image: url("img/svg-hero-home-cropped.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: top right;
  opacity: 0.2;
  pointer-events: none;
  z-index: 0;
}
.article-header__inner {
  max-width: 1536px;
  margin: 0 auto;
  padding: 0 2.5rem;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.article-header__main {
  display: flex;
  gap: 3rem;
  /* Tablette : on garde les 2 colonnes en ligne ; empilement en mobile seulement */
}
@media (max-width: 767px) {
  .article-header__main {
    flex-direction: column;
    align-items: stretch;
    gap: 2rem;
  }
}
.article-header__text {
  flex: 2; /* texte ~2/3, image ~1/3 (maquette) */
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.article-header__title {
  font-family: "Lora", Georgia, "Times New Roman", serif;
  font-weight: 700;
  font-size: 2.5rem; /* 40px */
  line-height: 3rem; /* 48px */
  color: #161F2C;
  margin: 0;
}
@media (max-width: 767px) {
  .article-header__title {
    font-size: 2rem; /* 32px */
    line-height: 2.5rem;
  }
}
.article-header__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
}
.article-header__cat {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1rem;
  border: 1px solid #6E1339;
  border-radius: 99999px;
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.375rem;
  color: #314158;
  text-decoration: none;
  transition: background-color 0.2s ease;
}
.article-header__cat:hover, .article-header__cat:focus-visible {
  background-color: #FFFFFF;
}
.article-header__cat:focus-visible {
  outline: 2px solid #3BB9CB;
  outline-offset: 2px;
}
.article-header__date {
  margin: 0; /* reset du <p> (override global p { margin: 20px 0 }) */
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 500;
  font-size: 1.125rem; /* 18px */
  line-height: 1.625rem;
  color: #161F2C;
}
.article-header__sep {
  color: #3BB9CB;
}
.article-header__image {
  flex: 1;
  min-width: 0;
  aspect-ratio: 1024/683;
  border-radius: 1rem;
  overflow: hidden;
}
.article-header__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (max-width: 767px) {
  .article-header__image {
    flex: none;
    width: 100%;
  }
}
.article-header .breadcrumb {
  padding: 0;
}
.article-header .breadcrumb-items {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.375rem;
}
.article-header .breadcrumb-item {
  display: flex;
  align-items: center;
  color: #161F2C; /* page courante */
  /* séparateur "/" devant chaque élément sauf le premier */
}
.article-header .breadcrumb-item + .breadcrumb-item::before {
  content: "/";
  margin-right: 0.5rem;
  color: #6E1339;
}
.article-header .breadcrumb-item a {
  color: #6E1339;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.article-header .breadcrumb-item a:hover, .article-header .breadcrumb-item a:focus {
  color: #8B1A4B;
}
.article-header .breadcrumb-item a:focus-visible {
  outline: 2px solid #3BB9CB;
  outline-offset: 2px;
}

/* ─── Corps de l'article (2 colonnes) ──────────────────────── */
.article-body {
  padding: 3.75rem 0; /* 60px, tous breakpoints (desktop + tablet + mobile) */
}
.article-body__container {
  max-width: 1536px;
  margin: 0 auto;
  padding: 0 2.5rem;
  display: grid;
  grid-template-columns: min(45%, 450px) 1fr;
  gap: 2rem;
  align-items: start;
}
@media (max-width: 1023px) {
  .article-body__container {
    grid-template-columns: minmax(0, 1fr); /* empilé + minmax(0,) évite le débord horizontal */
    gap: 2.5rem;
  }
}

/* Sidebar (sommaire + auteur) — collante en desktop */
.article-sidebar {
  position: sticky;
  top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  /* Garantit que TOC et carte auteur ont strictement la même largeur. */
  /* Tablette : TOC et carte auteur côte à côte en 2 colonnes égales */
}
.article-sidebar > * {
  width: 100%;
  box-sizing: border-box;
}
@media (max-width: 1023px) {
  .article-sidebar {
    position: static;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .article-sidebar {
    flex-direction: row;
    align-items: stretch;
  }
  .article-sidebar > * {
    flex: 1 1 0;
    width: auto;
  }
}

/* ─── Contenu de l'article (the_content) ───────────────────── */
.article-content {
  min-width: 0; /* évite le débordement dans la grille */
  /* Paragraphes — Montserrat Medium 18/26 */
  /* Paragraphe d'intro (lead) — 20/26 */
  /* Titres — Lora Bold */
  /* Liens */
  /* Listes */
  /* Images */
  /* Ancrage : décale le scroll sous l'en-tête sticky (mobile) */
  /* ─── Appel de note de bas de page ─────────────────────── */
  /* Méthode access42 : <sup><a id="nhN" href="#nbN" aria-describedby="nbN">[N]</a></sup>. */
  /* ─── Mise en exergue (paragraph block style) ──────────── */
  /* Paragraphe avec class .is-style-mise-en-exergue : bordures bleues haut/bas, */
  /* texte Montserrat ExtraBold bleu 30/36. */
  /* ─── Citation (wp:quote) ───────────────────────────────── */
  /* Guillemet ouvrant Montserrat ExtraBold 78.75px orange, texte navy ExtraBold 30/36. */
  /* ─── Bloc fichier (PDF à télécharger) ──────────────────── */
  /* Lien du doc en bleu souligné + bouton "Télécharger" secondary (fond blanc, bordure bleue). */
}
.article-content > *:first-child {
  margin-top: 0;
}
.article-content p {
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 500;
  font-size: 1.125rem; /* 18px */
  line-height: 1.625rem; /* 26px */
  color: #161F2C;
  margin: 0 0 1.5rem;
}
.article-content > p:first-of-type {
  font-size: 1.25rem; /* 20px */
}
.article-content h2 {
  font-family: "Lora", Georgia, "Times New Roman", serif;
  font-weight: 700;
  font-size: 2.5rem; /* 40px */
  line-height: 3rem; /* 48px */
  color: #161F2C;
  margin: 3rem 0 1rem;
}
@media (max-width: 767px) {
  .article-content h2 {
    font-size: 2rem;
    line-height: 2.5rem;
  }
}
.article-content h3 {
  font-family: "Lora", Georgia, "Times New Roman", serif;
  font-weight: 700;
  font-size: 1.875rem; /* 30px */
  line-height: 2.25rem; /* 36px */
  color: #161F2C;
  margin: 2rem 0 1rem;
}
.article-content a {
  color: #8B1A4B;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.article-content a:hover, .article-content a:focus {
  color: #6E1339;
}
.article-content strong,
.article-content b {
  font-weight: 700;
}
.article-content ul,
.article-content ol {
  margin: 0 0 1.5rem;
  padding-left: 1.5rem;
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 500;
  font-size: 1.125rem;
  line-height: 1.625rem;
  color: #161F2C;
}
.article-content ul li,
.article-content ol li {
  margin-bottom: 0.5rem;
}
.article-content ul {
  list-style: disc;
}
.article-content ol {
  list-style: decimal;
}
.article-content img {
  max-width: 100%;
  height: auto;
  border-radius: 1rem;
}
.article-content h2,
.article-content h3 {
  scroll-margin-top: 6.25rem; /* 100px */
}
.article-content sup a[id^=nh] {
  color: #8B1A4B;
  text-decoration: none;
  font-weight: 700;
}
.article-content sup a[id^=nh]:hover, .article-content sup a[id^=nh]:focus {
  text-decoration: underline;
}
.article-content p.is-style-mise-en-exergue {
  border-top: 1px solid #8B1A4B;
  border-bottom: 1px solid #8B1A4B;
  padding: 1.25rem;
  margin: 2rem 0;
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 800; /* ExtraBold */
  font-size: 1.875rem !important; /* 30px — override du p { font-size: 1.1em !important } parent */
  line-height: 2.25rem; /* 36px */
  color: #8B1A4B;
}
.article-content .wp-block-quote {
  position: relative;
  margin: 3rem 0;
  padding-left: 50px; /* 42px colonne guillemet + 8px gap */
  border: none;
  quotes: none;
}
.article-content .wp-block-quote::before {
  content: "“";
  position: absolute;
  top: 0.75rem;
  left: 0;
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* Montserrat */
  font-weight: 800; /* ExtraBold */
  font-size: 78.75px;
  line-height: 89.25px;
  color: #3BB9CB;
}
.article-content .wp-block-quote p {
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 800; /* ExtraBold */
  font-size: 1.875rem; /* 30px */
  line-height: 2.25rem; /* 36px */
  color: #161F2C;
  margin: 0;
}
.article-content .wp-block-quote cite {
  display: block;
  margin-top: 0.75rem;
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 0.875rem; /* 14px */
  line-height: 1.125rem; /* 18px */
  color: #314158;
}
.article-content .wp-block-quote cite::before {
  content: "— ";
  color: #314158;
}
.article-content .wp-block-file {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin: 1.5rem 0;
}
.article-content .wp-block-file > a:first-child {
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 500;
  color: #8B1A4B;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.article-content .wp-block-file .wp-block-file__button {
  background-color: #FFFFFF;
  color: #8B1A4B;
  border: 2px solid #8B1A4B;
  border-radius: 99999px;
  padding: 0.75rem 1.5rem;
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.375rem;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.article-content .wp-block-file .wp-block-file__button:hover, .article-content .wp-block-file .wp-block-file__button:focus {
  background-color: #F9F0F4;
  color: #8B1A4B;
}
.article-content .wp-block-file .wp-block-file__button:focus-visible {
  outline: 2px solid #3BB9CB;
  outline-offset: 2px;
}

/* ─── Notes de bas de page (footer en fin d'article) ───────── */
/* Structure par item : numéro (col 24px right-aligned) | texte (flex-1) | icône retour (24px) */
/* Numérotation via CSS counters → HTML reste simple (<ol> + <li> + <p>). */
.article-footnotes {
  margin-top: 3rem;
  padding: 1.5rem 0;
  /* Lien de retour : <img> 24×24 (SVG décoratif avec alt="") à droite de chaque ligne */
}
.article-footnotes h2 {
  font-family: "Lora", Georgia, "Times New Roman", serif;
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 2rem;
  color: #161F2C;
  margin: 0 0 1rem;
}
.article-footnotes ol {
  list-style: none;
  counter-reset: footnote;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.article-footnotes li {
  counter-increment: footnote;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding-bottom: 0.75rem;
  scroll-margin-top: 6.25rem;
  /* Numéro auto en colonne 24px right-aligned */
  /* Surbrillance quand on saute vers la note via le lien d'appel */
}
.article-footnotes li::before {
  content: counter(footnote) ".";
  flex: 0 0 24px;
  text-align: right;
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 700; /* Bold */
  font-size: 1rem; /* 16px */
  line-height: 1.375rem; /* 22px */
  color: #314158;
}
.article-footnotes li:target {
  background-color: #F9F0F4;
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
  outline: 2px solid #3BB9CB;
  outline-offset: 0;
}
.article-footnotes li p {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 500; /* Medium */
  font-size: 1rem; /* 16px */
  line-height: 1.375rem; /* 22px */
  color: #314158;
}
.article-footnotes__back {
  flex: 0 0 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  text-decoration: none;
}
.article-footnotes__back img {
  display: block;
  width: 24px;
  height: 24px;
}
.article-footnotes__back:focus-visible {
  outline: 2px solid #3BB9CB;
  outline-offset: 2px;
}

/* ─── Bloc "Nos sources" (Groupe Gutenberg .article-sources) ─── */
/* Fond bleu clair, titre Lora Bold 40px, liens bleu + icône SVG external. */
.article-sources {
  background-color: #F9F0F4;
  border-radius: 1rem;
  padding: 1.5rem;
  margin: 3rem 0;
}
.article-sources h2 {
  font-family: "Lora", Georgia, "Times New Roman", serif;
  font-weight: 700; /* Bold */
  font-size: 2.5rem; /* 40px */
  line-height: 3rem; /* 48px */
  color: #161F2C;
  margin: 0 0 1.5rem !important;
}
.article-sources ul {
  list-style: disc;
  margin: 0 !important;
  padding-left: 1.5rem;
  color: #8B1A4B; /* couleur des puces */
}
.article-sources ul li {
  margin-bottom: 0.5rem;
  color: #161F2C;
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 500;
  font-size: 1.125rem; /* 18px */
  line-height: 1.625rem; /* 26px */
}
.article-sources a {
  color: #8B1A4B;
  text-decoration: underline;
  text-underline-offset: 3px;
  /* Icône external-link en SVG, ajoutée automatiquement après le texte */
}
.article-sources a::after {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-left: 0.5rem;
  background-color: currentColor;
  -webkit-mask: url("img/icons/square-top-down.svg") no-repeat center/contain;
  mask: url("img/icons/square-top-down.svg") no-repeat center/contain;
  vertical-align: middle;
}
.article-sources a:hover, .article-sources a:focus {
  color: #6E1339;
}

/* ─── Sommaire (table des matières, généré en JS) ──────────── */
.article-toc {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 1rem;
  padding: 1.25rem;
  /* Sous-section (H3) : léger retrait */
}
.article-toc[hidden] {
  display: none;
}
.article-toc__title {
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 700;
  font-size: 1.125rem; /* 18px */
  line-height: 1.5rem;
  color: #161F2C;
  margin: 0 0 1rem;
}
.article-toc__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.article-toc__item--h3 {
  padding-left: 1rem;
}
.article-toc__link {
  display: block;
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 500;
  font-size: 1rem; /* 16px */
  line-height: 1.375rem;
  color: #161F2C;
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 0.5rem 1rem;
  border-left: 7px solid transparent;
  /* Section courante : bleu + barre à gauche, sans soulignement */
}
.article-toc__link:hover, .article-toc__link:focus {
  color: #8B1A4B;
}
.article-toc__link:focus-visible {
  outline: 2px solid #3BB9CB;
  outline-offset: 2px;
}
.article-toc__link.is-active {
  color: #8B1A4B;
  font-weight: 700;
  text-decoration: none;
  border-left-color: #8B1A4B;
}

/* ─── Bloc auteur (carte bleue) ────────────────────────────── */
.article-author {
  position: relative;
  background-color: #8B1A4B;
  border: 1px solid #CBD5E1;
  border-radius: 1rem;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  color: #FFFFFF;
  /* Point orange en haut-droite */
}
.article-author::after {
  content: "";
  position: absolute;
  top: 15px;
  right: 19px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: #3BB9CB;
}
.article-author__name {
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 700; /* Montserrat Bold */
  font-size: 1.25rem; /* 20px */
  line-height: 1.625rem; /* 26px */
  color: #FFFFFF;
  margin: 0;
  padding-right: 1.5rem; /* place pour le point */
}
.article-author__bio {
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 500;
  font-size: 1rem; /* 16px */
  line-height: 1.375rem; /* 22px */
  color: #FFFFFF;
  margin: 0;
}

/* ─── Articles similaires (même catégorie) ─────────────────── */
/* Reprend la section « derniers articles » de l'accueil : fond blanc, */
/* motif de points, titre + accroche + bouton, puis grille .cards-blog-grid. */
.related-articles {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  /* Sur mobile (<768px), le body remplit déjà la viewport → 100vw devient
     redondant ET pose problème avec la scrollbar verticale (100vw inclut la
     scrollbar, body ne l'inclut pas → l'élément dépasse et pousse tout le
     contenu de ~15px vers la droite). On revient à 100% du parent. */
  padding: 3.75rem 0; /* 60px, tous breakpoints (desktop + tablet + mobile) */
  position: relative;
  overflow: hidden;
  background-color: #FFFFFF;
  /* Motif de points bleu en haut-droite (PNG recoloré via mask) */
  /* Bouton « Explorer tous les articles » (pill bleu, point → flèche cerclée) */
  /* Sélecteur doublé pour battre `* p:last-of-type { margin-bottom: 0 }` du thème parent */
}
@media (max-width: 767px) {
  .related-articles {
    width: 100%;
    margin-left: 0;
  }
}
.related-articles::before {
  content: "";
  position: absolute;
  background-color: #8B1A4B;
  -webkit-mask: url("img/dotblue-pattern.png") no-repeat center/contain;
  mask: url("img/dotblue-pattern.png") no-repeat center/contain;
  pointer-events: none;
  z-index: 0;
  top: -106px;
  right: -350px;
  width: 1153px;
  height: 1153px;
  opacity: 0.15;
  transform: rotate(165deg);
}
.related-articles__inner {
  max-width: 1536px;
  margin: 0 auto;
  padding: 0 2.5rem;
  position: relative;
  z-index: 1;
}
.related-articles__title {
  font-family: "Lora", Georgia, "Times New Roman", serif;
  font-weight: 900;
  font-size: 2.5rem;
  line-height: 3rem;
  hyphens: manual;
  color: #161F2C;
  margin: 0 0 1.5rem;
}
@media (min-width: 1024px) {
  .related-articles__title {
    font-size: 3.75rem;
    line-height: 4.25rem;
  }
}
.related-articles__title span {
  color: #3BB9CB;
}
.related-articles__desc {
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 500;
  font-size: 1.25rem; /* 20px */
  line-height: 1.625rem;
  color: #314158;
  max-width: 900px;
  margin: 0 0 1.5rem;
}
.related-articles .related-articles__cta {
  margin: 0 0 5rem;
}
.related-articles .related-articles__cta a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background-color: #8B1A4B;
  color: #FFFFFF;
  border-radius: 99999px;
  padding: 0.75rem 1rem;
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.625rem;
  text-decoration: none;
  transition: background-color 0.2s ease;
}
.related-articles .related-articles__cta a::before {
  content: "\f46f";
  font-family: "icon";
  font-size: 0.6em;
  line-height: 1;
  flex-shrink: 0;
  transition: all 0.2s ease;
}
.related-articles .related-articles__cta a:hover::before, .related-articles .related-articles__cta a:focus::before {
  content: "\f004";
  font-size: 1.25em;
}
.related-articles .related-articles__cta a:hover, .related-articles .related-articles__cta a:focus {
  background-color: #6E1339;
}
.related-articles .related-articles__cta a:focus-visible {
  outline: 2px solid #3BB9CB;
  outline-offset: 2px;
}

/*
Theme Name: Inari Child
Theme URI: https://inari.fr/
Author: Florian Le Guyader
Author URI: https://www.ethicfirst.fr/
Description: Thème sur mesure du site Inari — Atelier fil Blanc. Basé sur le starter theme Generic, forké depuis le thème Ethic First.
Version: 0.1.0
Template: generic
Text Domain: inari-child
*/
/* ═══════════════════════════════════════════════════════════ */
/* Page détail d'une formation (single-formation.php — CPT)    */
/* Structure :                                                  */
/*   .formation-single-hero          — header navy auto         */
/*   .formation-single-body          — corps 2 colonnes         */
/*     ├ .formation-single-content   — the_content() Gutenberg  */
/*     └ .formation-single-sidebar   — prix + form (sticky)     */
/*   .formation-single-related       — autres formations        */
/* ═══════════════════════════════════════════════════════════ */
/* ─── 1. Header navy ──────────────────────────────────────── */
.formation-single-hero {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  /* Sur mobile (<768px), le body remplit déjà la viewport → 100vw devient
     redondant ET pose problème avec la scrollbar verticale (100vw inclut la
     scrollbar, body ne l'inclut pas → l'élément dépasse et pousse tout le
     contenu de ~15px vers la droite). On revient à 100% du parent. */
  padding: 3.75rem 0; /* 60px, tous breakpoints (desktop + tablet + mobile) */
  background-color: #8B1A4B;
  position: relative;
  overflow: hidden;
  /* Motif dot pattern décoratif (haut-droite) — même dispo que hero recherche */
  /* Breadcrumb : variante blanche sur fond sombre */
}
@media (max-width: 767px) {
  .formation-single-hero {
    width: 100%;
    margin-left: 0;
  }
}
.formation-single-hero::before {
  content: "";
  position: absolute;
  background-image: url("img/dotblue-pattern.png");
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.2;
  pointer-events: none;
  z-index: 0;
  top: -422px;
  right: -313px;
  width: 1153px;
  height: 1153px;
  transform: rotate(90deg);
}
.formation-single-hero__inner {
  max-width: 1536px;
  margin: 0 auto;
  padding: 0 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  position: relative;
  z-index: 1;
  /* Aligné sur .formation-single-body__container mobile */
}
@media (max-width: 767px) {
  .formation-single-hero__inner {
    padding: 0 1.5rem;
  }
}
.formation-single-hero .breadcrumb {
  padding: 0;
}
.formation-single-hero .breadcrumb a {
  color: #F9F0F4;
}
.formation-single-hero .breadcrumb a:hover, .formation-single-hero .breadcrumb a:focus {
  color: #FFFFFF;
}
.formation-single-hero .breadcrumb .breadcrumb-item::before,
.formation-single-hero .breadcrumb [aria-current=page] {
  color: #FFFFFF;
}
.formation-single-hero__title {
  font-family: "Lora", Georgia, "Times New Roman", serif;
  font-weight: 900; /* Black */
  font-size: 3.75rem; /* 60px */
  line-height: 4.25rem; /* 68px */
  color: #FFFFFF;
  margin: 0;
}
@media (max-width: 767px) {
  .formation-single-hero__title {
    font-size: 2.5rem; /* 40px */
    line-height: 3rem;
  }
}
.formation-single-hero__desc {
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 500;
  font-size: 1.125rem !important; /* 18px — override le 1.1em parent */
  line-height: 1.625rem; /* 26px */
  color: #EAF6F8;
  max-width: 1024px;
  margin: 0;
}
.formation-single-hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem 0.75rem 0.5rem;
  background-color: #FFFFFF;
  color: #8B1A4B;
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 700;
  font-size: 1.125rem; /* 18px */
  line-height: 1.625rem;
  border-radius: 99999px;
  text-decoration: none;
  transition: background-color 0.2s ease;
  width: fit-content;
  /* Point bleu rond à gauche du label */
}
.formation-single-hero__cta::before {
  content: "\f46f"; /* icon-circle (point plein) */
  font-family: "icon";
  font-weight: normal;
  font-size: 0.6em;
  line-height: 1;
  color: #8B1A4B;
  flex-shrink: 0;
  margin-left: 0.5rem;
  transition: all 0.2s ease;
}
.formation-single-hero__cta:hover, .formation-single-hero__cta:focus {
  background-color: #EAF6F8;
  color: #6E1339;
}
.formation-single-hero__cta:hover::before, .formation-single-hero__cta:focus::before {
  content: "\f004"; /* flèche cerclée (comme les autres CTA) */
  font-size: 1.25em;
  color: #6E1339;
}
.formation-single-hero__cta:focus-visible {
  outline: 2px solid #FFFFFF;
  outline-offset: 2px;
}

/* ─── 2. Corps 2 colonnes ─────────────────────────────────── */
.formation-single-body {
  padding: 3.75rem 0; /* 60px, tous breakpoints (desktop + tablet + mobile) */
  /* Clipe les décors des cards internes (formation-single-pricing::after
     avec right: -31px, formation-profils-prerequis::before avec right: -20px,
     etc.) qui débordent horizontalement de leur conteneur — sinon sur mobile
     ils sortent du viewport et créent une barre de scroll horizontale ou
     l'impression que le contenu colle au bord droit.
     `clip` (au lieu de `hidden`) préserve le sticky de la sidebar. */
  overflow-x: clip;
}
.formation-single-body__container {
  max-width: 1536px;
  margin: 0 auto;
  padding: 0 2.5rem;
  display: grid;
  grid-template-columns: 1fr minmax(0, min(45%, 450px));
  gap: 3rem;
  align-items: start;
  /* Petit écran (320px) : le padding-x hérité de 40px consomme 25% de
     la viewport. On aligne sur le padding des autres sections finales
     (.formation-single-related, .cas-clients-section, etc.) pour un
     rendu cohérent. */
}
@media (max-width: 1023px) {
  .formation-single-body__container {
    /* `minmax(0, 1fr)` au lieu de `1fr` : force la colonne à respecter
       la largeur du grid, sans pouvoir être poussée par du contenu
       min-content plus large (une image, un mot long, une card avec
       min-width, etc.). Sans ça, la colonne peut déborder à droite. */
    grid-template-columns: minmax(0, 1fr);
    gap: 2.5rem;
  }
}
@media (max-width: 767px) {
  .formation-single-body__container {
    padding: 0 1.5rem;
  }
}

/* Contenu Gutenberg (the_content) */
.formation-single-content {
  min-width: 0;
  /* Liens dans le contenu de la formation (cohérent avec .article-content)   */
  /* Exclus les liens-boutons Gutenberg (wp-block-button__link) qui ont leur  */
  /* propre style (pill, pas de soulignement).                                 */
}
.formation-single-content > *:first-child {
  margin-top: 0;
}
.formation-single-content a:not(.wp-block-button__link) {
  color: #8B1A4B;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.formation-single-content a:not(.wp-block-button__link):hover, .formation-single-content a:not(.wp-block-button__link):focus {
  color: #6E1339;
}
.formation-single-content a:not(.wp-block-button__link):focus-visible {
  outline: 2px solid #3BB9CB;
  outline-offset: 2px;
}

/* Sidebar : sticky en desktop */
.formation-single-sidebar {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  position: sticky;
  top: 1.5rem;
}
@media (max-width: 1023px) {
  .formation-single-sidebar {
    position: static;
  }
}

/* ─── Pricing (cards inter + intra dans la sidebar) ──────── */
.formation-single-pricing {
  position: relative;
  background-color: #2A94A3;
  border: 1px solid #CBD5E1;
  border-radius: 1rem;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  color: #FFFFFF;
  /* Décor : 2 ronds orange (grand + petit), en haut-droite */
  /* Encart contact (sur fond orange clair, dans la card bordeaux) */
}
.formation-single-pricing::after {
  content: "";
  position: absolute;
  top: -19px;
  right: -31px;
  width: 126px;
  height: 90px;
  background: url("img/icons/formation-dots.svg") no-repeat center/contain;
  transform: rotate(125deg);
  pointer-events: none;
}
.formation-single-pricing__block {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.formation-single-pricing__block + .formation-single-pricing__block {
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.formation-single-pricing__title {
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 800; /* ExtraBold */
  font-size: 1.5rem; /* 24px */
  line-height: 1.875rem; /* 30px */
  color: #FFFFFF;
  margin: 0;
}
.formation-single-pricing__price {
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 700; /* Bold */
  font-size: 1.125rem !important; /* 18px — override 1.1em parent */
  line-height: 1.625rem; /* 26px */
  color: #FFFFFF;
  margin: 0;
}
.formation-single-pricing__price strong {
  font-weight: 700;
}
.formation-single-pricing__dates {
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 500;
  font-size: 1rem !important; /* 16px */
  line-height: 1.375rem; /* 22px */
  color: #FFFFFF;
  margin: 0;
  /* Si <ul> (multi-lignes) : neutralise les styles par défaut de la liste */
  list-style: none;
  padding: 0;
}
.formation-single-pricing__dates li {
  margin: 0 0 0.25rem;
}
.formation-single-pricing__dates li:last-child {
  margin-bottom: 0;
}
.formation-single-pricing__intra {
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 500;
  font-size: 1.125rem !important; /* 18px */
  line-height: 1.625rem; /* 26px */
  color: #FFFFFF;
  margin: 0;
}
.formation-single-pricing__contact {
  background-color: #EAF6F8;
  border-radius: 0.5rem;
  padding: 1rem;
  margin-top: 0;
}
.formation-single-pricing__contact p {
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 500;
  font-size: 1.125rem !important; /* 18px */
  line-height: 1.625rem; /* 26px */
  color: #2A94A3;
  margin: 0 0 1rem;
}
.formation-single-pricing__contact ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.formation-single-pricing__contact a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 700; /* Bold */
  font-size: 1.25rem; /* 20px */
  line-height: 1.625rem;
  color: #2A94A3;
  text-decoration: none;
  /* Icône (24×24) à gauche du lien, via SVG mask en cyan-800 */
}
.formation-single-pricing__contact a::before {
  content: "";
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  background-color: currentColor;
  -webkit-mask: no-repeat center/contain;
  mask: no-repeat center/contain;
}
.formation-single-pricing__contact a[href^="tel:"]::before {
  -webkit-mask-image: url("img/icons/phone-rounded.svg");
  mask-image: url("img/icons/phone-rounded.svg");
}
.formation-single-pricing__contact a[href^="mailto:"]::before {
  -webkit-mask-image: url("img/icons/letter.svg");
  mask-image: url("img/icons/letter.svg");
}
.formation-single-pricing__contact a:hover, .formation-single-pricing__contact a:focus {
  text-decoration: underline;
}

/* ─── Form d'inscription (carte bleu clair) ─────────────── */
.formation-single-form {
  background-color: #F9F0F4;
  border: 1px solid #CBD5E1;
  border-radius: 1rem;
  padding: 1.25rem;
  color: #161F2C;
  scroll-margin-top: 6.25rem;
  /* Classes wrapper de ligne / hint / RGPD — propres à ce form */
}
.formation-single-form__title {
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 800; /* ExtraBold */
  font-size: 1.5rem; /* 24px */
  line-height: 1.875rem;
  color: #161F2C;
  margin: 0 0 1rem;
}
.formation-single-form__intro {
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 500;
  font-size: 1rem !important; /* 16px */
  line-height: 1.375rem;
  color: #314158;
  margin: 0 0 1rem;
}
.formation-single-form .wpcf7 .formation-form-row {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 1rem 0 0 0;
}
.formation-single-form .wpcf7 .formation-form__hint {
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 1.125rem;
  color: #161F2C;
}
.formation-single-form .wpcf7 .formation-form-rgpd {
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 500;
  font-size: 0.875rem !important;
  line-height: 1.25rem;
  color: #314158;
  margin: 0;
}

/* ─── 3. Section « Découvrez d'autres formations » ─────── */
.formation-single-related {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  /* Sur mobile (<768px), le body remplit déjà la viewport → 100vw devient
     redondant ET pose problème avec la scrollbar verticale (100vw inclut la
     scrollbar, body ne l'inclut pas → l'élément dépasse et pousse tout le
     contenu de ~15px vers la droite). On revient à 100% du parent. */
  padding: 3.75rem 0; /* 60px, tous breakpoints (desktop + tablet + mobile) */
  background-color: #FFFFFF;
  position: relative;
  overflow: hidden;
}
@media (max-width: 767px) {
  .formation-single-related {
    width: 100%;
    margin-left: 0;
  }
}
.formation-single-related__inner {
  max-width: 1536px;
  margin: 0 auto;
  padding: 0 2.5rem;
}
.formation-single-related__title {
  font-family: "Lora", Georgia, "Times New Roman", serif;
  font-weight: 900;
  font-size: 2.5rem;
  line-height: 3rem;
  hyphens: manual;
  color: #161F2C;
  margin: 0 0 3rem;
}
@media (min-width: 1024px) {
  .formation-single-related__title {
    font-size: 3.75rem;
    line-height: 4.25rem;
  }
}
@media (min-width: 1024px) {
  .formation-single-related__title {
    max-width: 66%;
  }
}
.formation-single-related__title span {
  color: #3BB9CB;
}
.formation-single-related .formation-cards {
  padding: 2.5rem 0 0;
}

/* ─── Section « Nos cas d'usage » (full-width, via [cas_clients]) ─── */
.cas-clients-section {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  /* Sur mobile (<768px), le body remplit déjà la viewport → 100vw devient
     redondant ET pose problème avec la scrollbar verticale (100vw inclut la
     scrollbar, body ne l'inclut pas → l'élément dépasse et pousse tout le
     contenu de ~15px vers la droite). On revient à 100% du parent. */
  padding: 3.75rem 0; /* 60px, tous breakpoints (desktop + tablet + mobile) */
  background-color: #FFFFFF;
  position: relative;
  overflow: hidden;
}
@media (max-width: 767px) {
  .cas-clients-section {
    width: 100%;
    margin-left: 0;
  }
}
.cas-clients-section__inner {
  max-width: 1536px;
  margin: 0 auto;
  padding: 0 2.5rem;
}
.cas-clients-section__title {
  font-family: "Lora", Georgia, "Times New Roman", serif;
  font-weight: 900;
  font-size: 2.5rem;
  line-height: 3rem;
  hyphens: manual;
  color: #161F2C;
  margin: 0 0 3rem;
}
@media (min-width: 1024px) {
  .cas-clients-section__title {
    font-size: 3.75rem;
    line-height: 4.25rem;
  }
}
.cas-clients-section__title span {
  color: #3BB9CB;
}

/* ─── 4. Section « Nos derniers articles de blog » ──────── */
.formation-single-blog {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  /* Sur mobile (<768px), le body remplit déjà la viewport → 100vw devient
     redondant ET pose problème avec la scrollbar verticale (100vw inclut la
     scrollbar, body ne l'inclut pas → l'élément dépasse et pousse tout le
     contenu de ~15px vers la droite). On revient à 100% du parent. */
  padding: 3.75rem 0; /* 60px, tous breakpoints (desktop + tablet + mobile) */
  background-color: #FFFFFF;
  position: relative;
  overflow: hidden;
}
@media (max-width: 767px) {
  .formation-single-blog {
    width: 100%;
    margin-left: 0;
  }
}
.formation-single-blog__inner {
  max-width: 1536px;
  margin: 0 auto;
  padding: 0 2.5rem;
}
.formation-single-blog__title {
  font-family: "Lora", Georgia, "Times New Roman", serif;
  font-weight: 900;
  font-size: 2.5rem;
  line-height: 3rem;
  hyphens: manual;
  color: #161F2C;
  margin: 0 0 1.5rem;
}
@media (min-width: 1024px) {
  .formation-single-blog__title {
    font-size: 3.75rem;
    line-height: 4.25rem;
  }
}
.formation-single-blog__title span {
  color: #3BB9CB;
}
.formation-single-blog__desc {
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 500;
  font-size: 1.25rem !important; /* 20px */
  line-height: 1.625rem;
  color: #314158;
  max-width: 900px;
  margin: 0 0 1.5rem;
}
.formation-single-blog__cta {
  margin: 0 0 3rem;
}
.formation-single-blog__cta a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background-color: #8B1A4B;
  color: #FFFFFF;
  border-radius: 99999px;
  padding: 0.75rem 1rem;
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.625rem;
  text-decoration: none;
  transition: background-color 0.2s ease;
}
.formation-single-blog__cta a::before {
  content: "\f46f";
  font-family: "icon";
  font-size: 0.6em;
  line-height: 1;
  flex-shrink: 0;
  transition: all 0.2s ease;
}
.formation-single-blog__cta a:hover::before, .formation-single-blog__cta a:focus::before {
  content: "\f004";
  font-size: 1.25em;
}
.formation-single-blog__cta a:hover, .formation-single-blog__cta a:focus {
  background-color: #6E1339;
}
.formation-single-blog__cta a:focus-visible {
  outline: 2px solid #3BB9CB;
  outline-offset: 2px;
}

/*
Theme Name: Inari Child
Theme URI: https://inari.fr/
Author: Florian Le Guyader
Author URI: https://www.ethicfirst.fr/
Description: Thème sur mesure du site Inari — Atelier fil Blanc. Basé sur le starter theme Generic, forké depuis le thème Ethic First.
Version: 0.1.0
Template: generic
Text Domain: inari-child
*/
/* ═══════════════════════════════════════════════════════════ */
/* Page Contact (assemblage Gutenberg via pattern              */
/* « Page Contact »). Structure :                              */
/*   .contact-page                                              */
/*     └ container (max 1536)                                   */
/*         └ 2 cols : info (titre + carte téléphone/mail)       */
/*                    + form (CF7)                              */
/* ═══════════════════════════════════════════════════════════ */
.contact-page {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  /* Sur mobile (<768px), le body remplit déjà la viewport → 100vw devient
     redondant ET pose problème avec la scrollbar verticale (100vw inclut la
     scrollbar, body ne l'inclut pas → l'élément dépasse et pousse tout le
     contenu de ~15px vers la droite). On revient à 100% du parent. */
  padding: 3.75rem 0; /* 60px, tous breakpoints (desktop + tablet + mobile) */
  background-color: #FFFFFF;
  /* Layout 2 cols : info à gauche, form à droite.
     Gutenberg insère un .wp-block-group__inner-container entre le group
     et ses enfants — c'est lui qu'il faut passer en flex. */
  /* ─── Colonne gauche : titre + intro + carte contact ──── */
  /* Carte téléphone / e-mail (fond orange clair) */
  /* ─── Colonne droite : formulaire CF7 ─────────────────── */
  /* Classes spécifiques au form Contact (intro, rows, RGPD) */
}
@media (max-width: 767px) {
  .contact-page {
    width: 100%;
    margin-left: 0;
  }
}
.contact-page__container {
  max-width: 1536px;
  margin: 0 auto;
  padding: 0 2.5rem;
}
.contact-page__columns > .wp-block-group__inner-container {
  display: flex;
  gap: 5rem;
  align-items: flex-start;
}
@media (max-width: 1023px) {
  .contact-page__columns > .wp-block-group__inner-container {
    flex-direction: column;
    gap: 2.5rem;
  }
}
.contact-page__col {
  flex: 1 1 0;
  min-width: 0;
}
.contact-page .breadcrumb {
  padding: 0;
  margin-bottom: 1.5rem;
}
.contact-page__title {
  font-family: "Lora", Georgia, "Times New Roman", serif;
  font-weight: 900;
  font-size: 2.5rem;
  line-height: 3rem;
  hyphens: manual;
  color: #161F2C;
  margin: 0 0 1.5rem;
}
@media (min-width: 1024px) {
  .contact-page__title {
    font-size: 3.75rem;
    line-height: 4.25rem;
  }
}
.contact-page__title mark,
.contact-page__title .contact-page__title-accent {
  background: transparent;
  color: #3BB9CB;
}
.contact-page__intro {
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 500;
  font-size: 1.25rem !important; /* 20px */
  line-height: 1.625rem;
  color: #161F2C;
  margin: 0 0 1.5rem;
  max-width: 36rem;
}
.contact-page__info-card {
  background-color: #EAF6F8;
  border-radius: 1rem;
  padding: 1.5rem;
}
.contact-page__info-card ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.contact-page__info-card a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 800; /* ExtraBold */
  font-size: 1.5rem; /* 24px */
  line-height: 1.875rem;
  color: #2A94A3;
  text-decoration: none;
  /* Sous 410px : police fluide + gap réduit pour garder tel/email sur 1 ligne */
}
.contact-page__info-card a::before {
  content: "";
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  background-color: currentColor;
  -webkit-mask: no-repeat center/contain;
  mask: no-repeat center/contain;
}
.contact-page__info-card a[href^="tel:"]::before {
  -webkit-mask-image: url("img/icons/phone-rounded.svg");
  mask-image: url("img/icons/phone-rounded.svg");
}
.contact-page__info-card a[href^="mailto:"]::before {
  -webkit-mask-image: url("img/icons/letter.svg");
  mask-image: url("img/icons/letter.svg");
}
.contact-page__info-card a:hover, .contact-page__info-card a:focus {
  text-decoration: underline;
}
@media (max-width: 410px) {
  .contact-page__info-card a {
    font-size: clamp(0.75rem, 5vw, 1.5rem);
    line-height: 1.4;
    white-space: nowrap;
    gap: 0.25rem;
  }
}
.contact-page__form {
  background-color: #FFFFFF;
  border-radius: 1rem;
  margin-top: 0;
}
.contact-page .wpcf7 {
  /* Variante 2 colonnes (Nom + Prénom) */
}
.contact-page .wpcf7 .contact-form-intro {
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 500;
  font-size: 1rem !important; /* 16px */
  line-height: 1.375rem;
  color: #314158;
  margin: 0 0 0.25rem;
}
.contact-page .wpcf7 .contact-form-row {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 1rem 0 0 0;
}
.contact-page .wpcf7 .contact-form-row--2col {
  flex-direction: row;
  gap: 1.5rem;
}
@media (max-width: 767px) {
  .contact-page .wpcf7 .contact-form-row--2col {
    flex-direction: column;
    gap: 1rem;
  }
}
.contact-page .wpcf7 .contact-form-row--2col .contact-form-col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.contact-page .wpcf7 .contact-form__hint {
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 1.125rem;
  color: #161F2C;
}
.contact-page .wpcf7 .contact-form-rgpd {
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 500;
  font-size: 0.875rem !important;
  line-height: 1.25rem;
  color: #314158;
  margin: 0;
}

/*
Theme Name: Inari Child
Theme URI: https://inari.fr/
Author: Florian Le Guyader
Author URI: https://www.ethicfirst.fr/
Description: Thème sur mesure du site Inari — Atelier fil Blanc. Basé sur le starter theme Generic, forké depuis le thème Ethic First.
Version: 0.1.0
Template: generic
Text Domain: inari-child
*/
/* ═══════════════════════════════════════════════════════════ */
/* Page Résultats de recherche (search.php)                    */
/*   .search-results-page                                       */
/*     ├ .search-results-hero        — header navy              */
/*     ├ .search-results-listing     — grille 3 cols .card-blog */
/*     │   └ .search-results-pagination                         */
/*     └ .search-results-empty       — fallback aucun résultat  */
/* ═══════════════════════════════════════════════════════════ */
.search-results-page {
  display: block;
}

/* ─── 1. Header navy ────────────────────────────────────────── */
.search-results-hero {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  /* Sur mobile (<768px), le body remplit déjà la viewport → 100vw devient
     redondant ET pose problème avec la scrollbar verticale (100vw inclut la
     scrollbar, body ne l'inclut pas → l'élément dépasse et pousse tout le
     contenu de ~15px vers la droite). On revient à 100% du parent. */
  padding: 3.75rem 0; /* 60px, tous breakpoints (desktop + tablet + mobile) */
  padding-inline: 2.5rem;
  background-color: #8B1A4B;
  position: relative;
  overflow: hidden;
  text-align: center;
  color: #FFFFFF;
  /* Motif dot pattern décoratif (haut-droite) */
}
@media (max-width: 767px) {
  .search-results-hero {
    width: 100%;
    margin-left: 0;
  }
}
.search-results-hero::before {
  content: "";
  position: absolute;
  background-image: url("img/dotblue-pattern.png");
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.2;
  pointer-events: none;
  z-index: 0;
  top: -422px;
  right: -313px;
  width: 1153px;
  height: 1153px;
  transform: rotate(90deg);
}
.search-results-hero__inner {
  max-width: 1536px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  align-items: center;
  position: relative;
  z-index: 1;
}
.search-results-hero .breadcrumb {
  padding: 0;
  justify-content: center;
}
.search-results-hero .breadcrumb a {
  color: #F9F0F4;
}
.search-results-hero .breadcrumb a:hover, .search-results-hero .breadcrumb a:focus {
  color: #FFFFFF;
}
.search-results-hero .breadcrumb .breadcrumb-item::before,
.search-results-hero .breadcrumb [aria-current=page] {
  color: #FFFFFF;
}
.search-results-hero__title {
  font-family: "Lora", Georgia, "Times New Roman", serif;
  font-weight: 900;
  font-size: 3.75rem; /* 60px */
  line-height: 4.25rem; /* 68px */
  color: #FFFFFF;
  margin: 0;
  max-width: 64rem;
}
@media (max-width: 767px) {
  .search-results-hero__title {
    font-size: 2.5rem;
    line-height: 3rem;
  }
}

/* ─── 2. Listing : grille 3 cols + pagination ───────────────── */
.search-results-listing {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  /* Sur mobile (<768px), le body remplit déjà la viewport → 100vw devient
     redondant ET pose problème avec la scrollbar verticale (100vw inclut la
     scrollbar, body ne l'inclut pas → l'élément dépasse et pousse tout le
     contenu de ~15px vers la droite). On revient à 100% du parent. */
  padding: 3.75rem 0; /* 60px, tous breakpoints (desktop + tablet + mobile) */
  padding-inline: 5rem;
  background-color: #FFFFFF;
}
@media (max-width: 767px) {
  .search-results-listing {
    width: 100%;
    margin-left: 0;
  }
}
@media (max-width: 1023px) {
  .search-results-listing {
    padding-inline: 2.5rem;
  }
}

.search-results-grid {
  list-style: none;
  max-width: 1536px;
  margin: 0 auto;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2.5rem;
  align-items: stretch; /* Cellules toutes à la hauteur de la plus grande */
  /* Card-blog scopée à la grille de recherche : description tronquée
     à 3 lignes avec ellipsis + hauteur égale + lien poussé en bas. */
}
@media (max-width: 1023px) {
  .search-results-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
  }
}
@media (max-width: 767px) {
  .search-results-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
.search-results-grid > li {
  display: flex;
  height: 100%; /* Force le li à remplir la cellule stretched du grid */
}
.search-results-grid .card-blog {
  flex: 1;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.search-results-grid .card-blog__content {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.search-results-grid .card-blog__link {
  margin-top: auto; /* Pousse le lien tout en bas quelle que soit la taille de l'extrait/titre */
}
.search-results-grid .card-blog__excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* La pagination utilise le composant partagé `.ef-pagination`
   (cf. sass/components/_pagination.scss). Margin top spécifique ici : */
.search-results-listing .ef-pagination {
  margin-top: 3rem;
}

/* ─── 4. État "aucun résultat" ──────────────────────────────── */
.search-results-empty {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  /* Sur mobile (<768px), le body remplit déjà la viewport → 100vw devient
     redondant ET pose problème avec la scrollbar verticale (100vw inclut la
     scrollbar, body ne l'inclut pas → l'élément dépasse et pousse tout le
     contenu de ~15px vers la droite). On revient à 100% du parent. */
  padding: 3.75rem 0; /* 60px, tous breakpoints (desktop + tablet + mobile) */
  padding-inline: 5rem;
  background-color: #FFFFFF;
  max-width: 1536px;
  margin: 0 auto;
  text-align: center;
}
@media (max-width: 767px) {
  .search-results-empty {
    width: 100%;
    margin-left: 0;
  }
}
@media (max-width: 1023px) {
  .search-results-empty {
    padding-inline: 2.5rem;
  }
}
.search-results-empty p {
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 500;
  font-size: 1.125rem;
  line-height: 1.625rem;
  color: #314158;
  margin: 0 0 1.5rem;
}
.search-results-empty__links {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: flex;
  justify-content: center;
  gap: 1.5rem;
}
.search-results-empty__links a {
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 700;
  color: #8B1A4B;
  text-decoration: underline;
}
.search-results-empty__links a:hover, .search-results-empty__links a:focus {
  color: #6E1339;
}

/*
Theme Name: Inari Child
Theme URI: https://inari.fr/
Author: Florian Le Guyader
Author URI: https://www.ethicfirst.fr/
Description: Thème sur mesure du site Inari — Atelier fil Blanc. Basé sur le starter theme Generic, forké depuis le thème Ethic First.
Version: 0.1.0
Template: generic
Text Domain: inari-child
*/
/* ═══════════════════════════════════════════════════════════ */
/* Template "Page simple" (page-simple.php)                    */
/* Pages type mentions légales, RGPD, cookies, déclaration     */
/* d'accessibilité — hero navy standard + contenu texte.       */
/* ═══════════════════════════════════════════════════════════ */
.page-simple {
  /* ─── Hero navy standard (aligné .search-results-hero, .audits-hero…) ─── */
  /* ─── Contenu texte ─────────────────────────────────────── */
}
.page-simple__hero {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  /* Sur mobile (<768px), le body remplit déjà la viewport → 100vw devient
     redondant ET pose problème avec la scrollbar verticale (100vw inclut la
     scrollbar, body ne l'inclut pas → l'élément dépasse et pousse tout le
     contenu de ~15px vers la droite). On revient à 100% du parent. */
  padding: 3.75rem 0; /* 60px, tous breakpoints (desktop + tablet + mobile) */
  padding-inline: 2.5rem;
  background-color: #8B1A4B;
  position: relative;
  overflow: hidden;
  text-align: center;
  color: #FFFFFF;
}
@media (max-width: 767px) {
  .page-simple__hero {
    width: 100%;
    margin-left: 0;
  }
}
.page-simple__hero::before {
  content: "";
  position: absolute;
  background-image: url("img/dotblue-pattern.png");
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.2;
  pointer-events: none;
  z-index: 0;
  top: -422px;
  right: -313px;
  width: 1153px;
  height: 1153px;
  transform: rotate(90deg);
}
.page-simple__hero-inner {
  max-width: 1536px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  align-items: center;
  position: relative;
  z-index: 1;
}
.page-simple__hero-inner .breadcrumb {
  padding: 0;
  justify-content: center;
}
.page-simple__hero-inner .breadcrumb a {
  color: #F9F0F4;
}
.page-simple__hero-inner .breadcrumb a:hover, .page-simple__hero-inner .breadcrumb a:focus {
  color: #FFFFFF;
}
.page-simple__hero-inner .breadcrumb .breadcrumb-item::before,
.page-simple__hero-inner .breadcrumb [aria-current=page] {
  color: #FFFFFF;
}
.page-simple__title {
  font-family: "Lora", Georgia, "Times New Roman", serif;
  font-weight: 900;
  font-size: 3.75rem; /* 60px */
  line-height: 4.25rem; /* 68px */
  color: #FFFFFF;
  margin: 0;
  max-width: 64rem;
}
@media (max-width: 767px) {
  .page-simple__title {
    font-size: 2.5rem;
    line-height: 3rem;
  }
}
.page-simple__content {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  /* Sur mobile (<768px), le body remplit déjà la viewport → 100vw devient
     redondant ET pose problème avec la scrollbar verticale (100vw inclut la
     scrollbar, body ne l'inclut pas → l'élément dépasse et pousse tout le
     contenu de ~15px vers la droite). On revient à 100% du parent. */
  padding: 3.75rem 0; /* 60px, tous breakpoints (desktop + tablet + mobile) */
  padding-inline: 2.5rem;
  background-color: #FFFFFF;
}
@media (max-width: 767px) {
  .page-simple__content {
    width: 100%;
    margin-left: 0;
  }
}
.page-simple__content-inner {
  max-width: 1536px;
  margin: 0 auto;
  padding: 0 2.5rem;
  /* Typo standard pour le corps des mentions légales / RGPD */
}
.page-simple__content-inner h2 {
  font-family: "Lora", Georgia, "Times New Roman", serif;
  font-weight: 900;
  font-size: 2rem;
  line-height: 2.5rem;
  color: #161F2C;
  margin: 2.5rem 0 1rem;
}
.page-simple__content-inner h2:first-child {
  margin-top: 0;
}
.page-simple__content-inner h3 {
  font-family: "Lora", Georgia, "Times New Roman", serif;
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 2rem;
  color: #161F2C;
  margin: 2rem 0 0.75rem;
}
.page-simple__content-inner p, .page-simple__content-inner li {
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.625rem;
  color: #314158;
}
.page-simple__content-inner p {
  margin: 0 0 1rem;
}
.page-simple__content-inner ul, .page-simple__content-inner ol {
  margin: 0 0 1rem 1.5rem;
  padding: 0;
}
.page-simple__content-inner li {
  margin: 0 0 0.5rem;
}
.page-simple__content-inner a {
  color: #8B1A4B;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.page-simple__content-inner a:hover, .page-simple__content-inner a:focus {
  color: #6E1339;
}
.page-simple__content-inner a:focus-visible {
  outline: 3px solid #3BB9CB;
  outline-offset: 2px;
}

/* Neutralise .page-simple-* si présent sur <body> (WP ajoute .page-simple-<slug>
   automatiquement quand un template a un nom qui matche) — évite de perturber le
   styling ci-dessus. Le sélecteur .page-simple ci-dessus cible le wrapper .page-simple__* */
/* ═══════════════════════════════════════════════════════════ */
/* Shortcode [plan_site] — plan du site HTML dynamique.        */
/* S'insère dans une page utilisant le template page-simple.php  */
/* ═══════════════════════════════════════════════════════════ */
.plan-site {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}
.plan-site__section {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.plan-site__section-title {
  font-family: "Lora", Georgia, "Times New Roman", serif;
  font-weight: 900;
  font-size: 2rem;
  line-height: 2.5rem;
  color: #161F2C;
  margin: 0;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid #F9F0F4;
}
.plan-site__subsection {
  font-family: "Lora", Georgia, "Times New Roman", serif;
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.75rem;
  color: #161F2C;
  margin: 1.5rem 0 0.5rem;
}
.plan-site__subsection a {
  color: inherit;
  text-decoration: none;
}
.plan-site__subsection a:hover, .plan-site__subsection a:focus {
  color: #8B1A4B;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.plan-site__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem 2rem;
}
@media (max-width: 767px) {
  .plan-site__list {
    grid-template-columns: minmax(0, 1fr);
  }
}
.plan-site__list li {
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 1rem;
  line-height: 1.5rem;
  margin: 0;
}
.plan-site__list a {
  color: #8B1A4B;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: #F9F0F4;
  transition: text-decoration-color 0.15s ease;
}
.plan-site__list a:hover, .plan-site__list a:focus {
  color: #6E1339;
  text-decoration-color: currentColor;
}
.plan-site__list a:focus-visible {
  outline: 3px solid #3BB9CB;
  outline-offset: 2px;
}