/*
Theme Name: Lamine Digital Coach
Author: Lamine Camara
Description: Thème bloc sur mesure de Lamine Digital Coach — coach IA & Microsoft 365. Tout le contenu est éditable dans l'éditeur de blocs.
Version: 1.0.0
Requires at least: 6.6
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lamine-digital-coach
*/

/* ==========================================================================
   Lamine Digital Coach — maquette
   Registre relevé sur la référence : capitale condensée + linéale neutre,
   noir sur gris froid #F7F7F7, quatre couleurs vives en pastilles cerclées,
   ombre dure, inclinaisons, alignement à gauche, grande échelle.
   ========================================================================== */


:root {
  --encre: #0B0B0B;
  --fond: #F7F7F7;
  --blanc: #FFFFFF;
  --vert: #68B068;
  --bleu: #5890E4;
  --lilas: #E8C8E8;
  --jaune: #FCF074;
  --gris: #4A4A4A;

  --f-titre: "Bebas Neue", Impact, "Arial Narrow", sans-serif;
  --f-texte: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --marge: clamp(20px, 5.3vw, 76px);
  --retrait: clamp(20px, 11vw, 160px);
  --section: clamp(88px, 10vw, 152px);
  --trait: 2px;
  --ombre: 0 3px 0 var(--encre);
  --ombre-etiquette: -2px 3px 0 var(--encre);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font: 400 16px/1.6 var(--f-texte);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
/* Fond posé sur main : le mode de fusion des photos (multiply) a besoin d'un fond peint sous elles */
main { display: block; background: var(--fond); }
figure { margin: 0; }
h1, h2, h3, h4, p, ul, ol, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }

/* ---------- Pastille : le seul composant de la référence ---------- */
.pastille {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  padding: .5em 1.05em .55em;
  border: var(--trait) solid var(--encre);
  border-radius: 999px;
  background: var(--blanc);
  box-shadow: var(--ombre);
  color: var(--encre);
  font: 500 14px/1.2 var(--f-texte);
  text-decoration: none;
  white-space: nowrap;
  transition: transform .15s ease, box-shadow .15s ease;
}
a.pastille:hover, button.pastille:hover { transform: translateY(2px); box-shadow: 0 1px 0 var(--encre); }
a.pastille:focus-visible, button.pastille:focus-visible { outline: 3px solid var(--bleu); outline-offset: 3px; }
.pastille--jaune { background: var(--jaune); }
.pastille--vert  { background: var(--vert); }
.pastille--bleu  { background: var(--bleu); }
.pastille--lilas { background: var(--lilas); }

.bouton { font-size: 15px; font-weight: 600; padding: .85em 1.5em .9em; }
.boutons { display: flex; flex-wrap: wrap; gap: 14px; }

/* Étiquette : pastille collée de travers sur un titre */
.etiquette {
  position: absolute;
  z-index: 2;
  padding: .38em .95em .42em;
  border: var(--trait) solid var(--encre);
  border-radius: 999px;
  background: var(--blanc);
  box-shadow: var(--ombre-etiquette);
  color: var(--encre);
  font: 500 13px/1.2 var(--f-texte);
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  transform: rotate(var(--r, -6deg));
  transform-origin: center;
}
.etiquette--vert  { background: var(--vert); }
.etiquette--bleu  { background: var(--bleu); }
.etiquette--lilas { background: var(--lilas); }
.etiquette--jaune { background: var(--jaune); }

.ligne { position: relative; display: inline-block; }

/* ---------- Titres ---------- */
.titre-section {
  font: 400 clamp(60px, 8.2vw, 124px)/.95 var(--f-titre);
  text-transform: uppercase;
}
.surtitre {
  font: 400 clamp(32px, 3vw, 44px)/1 var(--f-titre);
  text-transform: uppercase;
}

/* ---------- En-tête ---------- */
.entete {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 40px var(--marge) 26px;
}
.logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.logo__signe { width: 32px; height: 32px; fill: var(--encre); flex: none; }
.logo__nom {
  font: 400 34px/1 var(--f-titre);
  text-transform: uppercase;
  letter-spacing: .01em;
  white-space: nowrap;
}
.nav { margin-left: auto; }
:root .nav { margin-left: auto; }
.nav__liste { display: flex; }
.nav__lien { padding: .45em 1em .5em; }
.nav__lien.est-actif { background: var(--encre); color: var(--blanc); }
.entete__cta { margin-left: clamp(16px, 4vw, 64px); }
:root .entete__cta { margin-left: clamp(16px, 4vw, 64px); }
.entete__menu { display: none; cursor: pointer; }

/* ---------- Héros ---------- */
.heros {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(640px, calc(100vh - 106px), 900px);
  padding: 16px var(--marge) 72px var(--retrait);
}
.heros__texte { position: relative; z-index: 2; }
.heros__titre {
  font: 400 clamp(64px, 9.3vw, 140px)/.98 var(--f-titre);
  text-transform: uppercase;
}
.heros__titre .ligne { display: block; width: max-content; }
.heros__titre, .appel__titre, .domaine__nom, .public__titre, .titre-section { hyphens: none; text-wrap: balance; }
.heros__chapo {
  text-wrap: pretty;
  max-width: 340px;
  margin-top: 32px;
  font-size: 14px;
  line-height: 1.5;
}
:root .heros__chapo { margin-top: 32px; }
.heros .boutons { margin-top: 30px; }
figure.heros__photo {
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: 0;
  width: 48%;
  pointer-events: none;
  mix-blend-mode: multiply;
}
figure.heros__photo img {
  width: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 12%), linear-gradient(180deg, transparent 0%, #000 10%, #000 88%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0%, #000 12%), linear-gradient(180deg, transparent 0%, #000 10%, #000 88%, transparent 100%);
  mask-composite: intersect;
}

/* ---------- Pour qui ---------- */
.publics {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 48px clamp(40px, 6vw, 120px);
  padding: var(--section) var(--marge) var(--section) var(--retrait);
}
.publics__tete { position: sticky; top: 40px; align-self: start; }
.publics__tete p { max-width: 360px; margin-top: 28px; color: var(--gris); }
.publics__liste { display: grid; gap: clamp(56px, 6vw, 96px); padding-top: 14px; }
.public { display: grid; gap: 18px; justify-items: start; }
.public__titre {
  font: 400 clamp(44px, 5vw, 76px)/.95 var(--f-titre);
  text-transform: uppercase;
}
.public p { max-width: 420px; font-size: 16px; color: var(--gris); }

/* ---------- Domaines ---------- */
.domaines { padding: var(--section) var(--marge); }
.domaines__tete {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px 40px;
  padding-left: calc(var(--retrait) - var(--marge));
  margin-bottom: clamp(40px, 5vw, 72px);
}
:root .domaines__tete { margin-bottom: clamp(40px, 5vw, 72px); }
.domaines__tete p { max-width: 380px; color: var(--gris); }
.domaines__liste { display: grid; }
.domaine {
  display: grid;
  grid-template-columns: calc(var(--retrait) - var(--marge)) minmax(0, 1fr) 240px;
  align-items: center;
  gap: 0 24px;
  padding: clamp(10px, 1.2vw, 18px) 0;
}
.domaine__num { font: 500 14px/1 var(--f-texte); padding-top: .4em; }
.domaine__nom {
  font: 400 clamp(48px, 6.6vw, 100px)/1 var(--f-titre);
  text-transform: uppercase;
}
.domaine__desc { font-size: 15px; line-height: 1.5; color: var(--gris); }

/* ---------- Méthode ---------- */
.methode {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 0 clamp(32px, 4vw, 72px);
  align-items: center;
  padding: var(--section) 0 var(--section) var(--retrait);
}
.methode__intro { max-width: 400px; margin-top: 28px; font-size: 16px; color: var(--gris); }
:root .methode__intro { margin-top: 28px; }
figure.methode__photo { mix-blend-mode: multiply; }
figure.methode__photo img {
  width: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 16%), linear-gradient(180deg, transparent 0%, #000 10%, #000 86%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0%, #000 16%), linear-gradient(180deg, transparent 0%, #000 10%, #000 86%, transparent 100%);
  mask-composite: intersect;
}
.etapes {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 40px clamp(24px, 3vw, 48px);
  margin-top: clamp(40px, 4vw, 64px);
  padding-right: var(--marge);
}
:root .etapes { margin-top: clamp(40px, 4vw, 64px); }
.etape { display: grid; gap: 10px; justify-items: start; align-content: start; }
.etape__num {
  display: grid;
  place-items: center;
  min-width: 72px;
  height: 46px;
  padding: 0 18px;
  border: var(--trait) solid var(--encre);
  border-radius: 999px;
  box-shadow: var(--ombre);
  background: var(--blanc);
  font: 400 32px/1 var(--f-titre);
  padding-top: 3px;
  margin-bottom: 8px;
}
:root .etape__num { margin-bottom: 8px; }
.etape__num--jaune { background: var(--jaune); }
.etape__num--vert  { background: var(--vert); }
.etape__num--bleu  { background: var(--bleu); }
.etape__num--lilas { background: var(--lilas); }
.etape__titre { font: 600 19px/1.3 var(--f-texte); }
.etape p { font-size: 15px; line-height: 1.55; color: var(--gris); max-width: 320px; }

/* ---------- Témoignages ---------- */
.avis { padding: var(--section) var(--marge) var(--section) var(--retrait); }
.avis__liste {
  display: grid;
  gap: clamp(72px, 7vw, 112px);
  margin-top: clamp(48px, 5vw, 80px);
}
:root .avis__liste { margin-top: clamp(48px, 5vw, 80px); }
.citation { position: relative; max-width: 880px; }
.citation:nth-child(2) { margin-left: clamp(0px, 22vw, 340px); max-width: 760px; }
.citation:nth-child(3) { margin-left: clamp(0px, 8vw, 120px); }
.citation p {
  text-wrap: pretty;
  font-size: clamp(24px, 2.6vw, 38px);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -.015em;
}
.citation__auteur { position: relative; display: inline-block; margin-top: 22px; font-size: 14px; }
:root .citation__auteur { margin-top: 22px; }
.references {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(72px, 7vw, 112px);
}
:root .references { margin-top: clamp(72px, 7vw, 112px); }

/* ---------- Appel final ---------- */
.appel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34vw;
  align-items: center;
  padding: var(--section) 0 clamp(40px, 4vw, 64px) var(--retrait);
}
.appel__texte { position: relative; z-index: 2; }
.appel__titre {
  font: 400 clamp(44px, 5.7vw, 88px)/.98 var(--f-titre);
  text-transform: uppercase;
}
.appel__titre .ligne { display: block; width: max-content; max-width: 100%; }
.appel .boutons { margin-top: 40px; }
figure.appel__photo { margin-left: -4vw; mix-blend-mode: multiply; }
figure.appel__photo img {
  width: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 26%), linear-gradient(180deg, transparent 0%, #000 18%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0%, #000 26%), linear-gradient(180deg, transparent 0%, #000 18%);
  mask-composite: intersect;
}

/* ---------- Pied de page ---------- */
.pied { padding: clamp(64px, 7vw, 104px) var(--marge) 32px; }
.pied__haut {
  display: grid;
  grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr));
  gap: 40px;
  padding-bottom: 56px;
}
.pied__marque p { max-width: 340px; margin-top: 20px; color: var(--gris); font-size: 15px; }
.pied__titre { font: 600 13px/1 var(--f-texte); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 18px; }
:root .pied__titre { margin-bottom: 18px; }
.pied__col p, .pied__liens { font-size: 15px; line-height: 1.8; }
.pied__col p + p { margin-top: 12px; color: var(--gris); }
.pied__col a:not(.pastille), .pied__legal a { text-decoration: none; }
.pied__col a:not(.pastille):hover, .pied__legal a:hover { text-decoration: underline; }
.pied__bas {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 32px;
  padding-top: 24px;
  border-top: var(--trait) solid var(--encre);
  font-size: 14px;
}
.pied__legal { display: flex; gap: 24px; }

/* ==========================================================================
   Pages internes
   ========================================================================== */
.heros--page { min-height: clamp(520px, 68vh, 700px); }
.heros__chapo--large { max-width: 440px; }
figure.heros__photo--page { width: 46%; }
figure.heros__photo--portrait { top: 0; width: 30%; max-width: 440px; }
figure.heros__photo--portrait img { height: 100%; object-fit: cover; object-position: 40% 62%; }
.pastilles-ligne { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
:root .pastilles-ligne { margin-top: 28px; }
.pastilles-ligne .pastille { font-size: 14px; }
.pastilles-ligne .pastille:nth-child(3n+1) { transform: rotate(-1.5deg); }
.pastilles-ligne .pastille:nth-child(3n+2) { transform: rotate(1deg); }

/* Formations : pile de pastilles à droite du titre */
.formats {
  position: absolute;
  right: var(--marge);
  top: 50%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 16px;
  transform: translateY(-50%);
}
.formats__item { font-size: clamp(18px, 1.7vw, 24px); padding: .55em 1.2em .6em; }
.formats__item--1 { transform: rotate(-4deg) translateX(-36px); }
.formats__item--2 { transform: rotate(3deg); }
.formats__item--3 { transform: rotate(-2deg) translateX(-72px); }
.formats__item--4 { transform: rotate(5deg) translateX(-12px); }
.formats__item--5 { transform: rotate(-3deg) translateX(-44px); }
.formats__item--6 { transform: rotate(2deg) translateX(-4px); }

/* À propos : parcours */
.parcours { padding: var(--section) var(--marge) var(--section) var(--retrait); }
.parcours__liste { display: grid; gap: clamp(40px, 4vw, 60px); margin-top: clamp(40px, 5vw, 72px); }
:root .parcours__liste { margin-top: clamp(40px, 5vw, 72px); }
.jalon {
  display: grid;
  grid-template-columns: minmax(200px, 3fr) minmax(0, 4fr) minmax(0, 4fr);
  gap: 12px 40px;
  align-items: baseline;
}
.jalon__date { font: 400 clamp(40px, 4.6vw, 68px)/1 var(--f-titre); text-transform: uppercase; }
.jalon__titre { font: 600 20px/1.3 var(--f-texte); }
.jalon__lieu { margin-top: 6px; font-size: 15px; color: var(--gris); }
:root .jalon__lieu { margin-top: 6px; }
.jalon__desc { max-width: 420px; font-size: 15px; color: var(--gris); }

/* À propos : méthode */
.manifeste { padding: var(--section) var(--marge) var(--section) var(--retrait); }
.manifeste__phrase {
  margin-top: 28px;
  font: 400 clamp(60px, 9.3vw, 140px)/.95 var(--f-titre);
  text-transform: uppercase;
}
:root .manifeste__phrase { margin-top: 28px; }
.manifeste__texte { max-width: 420px; margin-top: 32px; color: var(--gris); }
:root .manifeste__texte { margin-top: 32px; }

/* À propos : valeurs et formations suivies */
.valeurs {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(48px, 6vw, 120px);
  padding: var(--section) var(--marge) var(--section) var(--retrait);
}
.valeurs__liste { display: grid; gap: 40px; margin-top: clamp(32px, 4vw, 56px); }
:root .valeurs__liste { margin-top: clamp(32px, 4vw, 56px); }
.valeur__titre { font: 400 clamp(36px, 3.8vw, 56px)/1 var(--f-titre); text-transform: uppercase; }
.valeur p { max-width: 460px; margin-top: 10px; color: var(--gris); }
.certifs { padding-top: 14px; }
.certifs__liste { display: grid; gap: 28px; margin-top: 28px; }
:root .certifs__liste { margin-top: 28px; }
.certif { display: grid; gap: 8px; justify-items: start; }
.certif__annee { font-size: 13px; padding: .3em .9em .35em; }
.certif__titre { font: 600 17px/1.35 var(--f-texte); }
.certif p, .certifs__texte { font-size: 15px; color: var(--gris); }
.certifs__langues { margin-top: 56px; }
:root .certifs__langues { margin-top: 56px; }
.certifs__texte { margin-top: 14px; }
:root .certifs__texte { margin-top: 14px; }

/* Services : offres */
.offres { padding: var(--section) var(--marge) calc(var(--section) * .6); }
.offres__liste { display: grid; gap: clamp(56px, 6vw, 96px); }
.offre { display: grid; grid-template-columns: calc(var(--retrait) - var(--marge)) minmax(0, 1fr); gap: 0 24px; }
.offre__num { padding-top: 1.4em; font: 500 14px/1 var(--f-texte); }
.offre__nom { font: 400 clamp(48px, 6.6vw, 100px)/1 var(--f-titre); text-transform: uppercase; }
.offre__desc { max-width: 520px; margin-top: 16px; color: var(--gris); }
:root .offre__desc { margin-top: 16px; }

/* Services : organisations */
.organisations { padding: var(--section) var(--marge) var(--section) var(--retrait); }
.organisations__tete, .catalogue__tete {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  gap: 24px 64px;
  align-items: end;
}
.organisations__tete p, .catalogue__tete p { color: var(--gris); }
.organisations__liste {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(32px, 4vw, 64px);
  margin-top: clamp(48px, 5vw, 80px);
}
:root .organisations__liste { margin-top: clamp(48px, 5vw, 80px); }
.programme { display: grid; gap: 14px; justify-items: start; align-content: start; }
.programme__tag { font-size: 13px; padding: .3em .9em .35em; transform: rotate(-3deg); }
.programme:nth-child(2) .programme__tag { transform: rotate(3deg); }
.programme__titre { font: 400 clamp(36px, 3.4vw, 52px)/1 var(--f-titre); text-transform: uppercase; }
.programme__points { display: grid; gap: 8px; font-size: 15px; color: var(--gris); }
.programme__points li, .fiche__liste li { position: relative; padding-left: 20px; }
.programme__points li::before, .fiche__liste li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--encre);
}
.organisations .boutons { margin-top: 56px; }

/* Formations : catalogue à onglets */
.catalogue { padding: var(--section) var(--marge) var(--section) var(--retrait); }
.onglets { display: flex; flex-wrap: wrap; gap: 12px; margin: clamp(40px, 4vw, 64px) 0 clamp(48px, 5vw, 72px); }
:root .onglets { margin: clamp(40px, 4vw, 64px) 0 clamp(48px, 5vw, 72px); }
.onglet { cursor: pointer; font-size: 15px; padding: .6em 1.2em .65em; user-select: none; }
.onglet:hover { transform: translateY(2px); box-shadow: 0 1px 0 var(--encre); }
.onglet:focus-visible { outline: 3px solid var(--bleu); outline-offset: 3px; }
.onglet.est-actif { background: var(--encre); color: var(--blanc); }
.fiche { display: none; }
.fiche.est-actif { display: block; }
.fiche__tete { display: grid; gap: 22px; }
.fiche__titre { font: 400 clamp(48px, 6.6vw, 100px)/1 var(--f-titre); text-transform: uppercase; }
.fiche__outils { margin-top: 0; }
:root .fiche__outils { margin-top: 0; }
.fiche__grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 40px clamp(32px, 4vw, 64px);
  margin-top: clamp(40px, 4vw, 64px);
}
:root .fiche__grille { margin-top: clamp(40px, 4vw, 64px); }
.fiche__label { margin-bottom: 14px; font: 600 13px/1 var(--f-texte); text-transform: uppercase; letter-spacing: .08em; }
:root .fiche__label { margin-bottom: 14px; }
.fiche__liste { display: grid; gap: 10px; font-size: 15px; line-height: 1.5; }
.fiche__liste--num { counter-reset: etape; }
.fiche__liste--num li { counter-increment: etape; padding-left: 32px; }
.fiche__liste--num li::before {
  content: counter(etape, decimal-leading-zero);
  top: .05em;
  width: auto;
  height: auto;
  background: none;
  font: 400 19px/1.2 var(--f-titre);
}
.fiche__infos { display: grid; gap: 36px; }
.info .fiche__label { margin-bottom: 6px; }
.info p { font-size: 15px; line-height: 1.5; color: var(--gris); }
.fiche .boutons { margin-top: 48px; }

/* Contact */
.heros--contact { min-height: clamp(400px, 50vh, 540px); }
.contact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(48px, 6vw, 120px);
  align-items: start;
  padding: clamp(24px, 3vw, 48px) var(--marge) var(--section) var(--retrait);
}
.formulaire { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 24px; margin-top: 32px; }
:root .formulaire { margin-top: 32px; }
.champ { display: grid; gap: 8px; }
.champ--large, .formulaire__note, .formulaire__envoi { grid-column: 1 / -1; }
.champ label { font: 600 13px/1 var(--f-texte); text-transform: uppercase; letter-spacing: .08em; }
.champ input, .champ select, .champ textarea {
  width: 100%;
  padding: 12px 20px;
  border: var(--trait) solid var(--encre);
  border-radius: 999px;
  background: var(--blanc);
  box-shadow: var(--ombre);
  color: var(--encre);
  font: 400 16px/1.4 var(--f-texte);
  appearance: none;
}
.champ select {
  padding-right: 48px;
  background: var(--blanc) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230B0B0B' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 20px center / 12px 8px;
}
/* même courbure que les bouts des pastilles (moitié de la hauteur d'un champ) */
.champ textarea { min-height: 168px; border-radius: 24px; resize: vertical; }
.champ input:focus, .champ select:focus, .champ textarea:focus { outline: 3px solid var(--bleu); outline-offset: 2px; }
.formulaire__note { font-size: 14px; color: var(--gris); }
.formulaire__note a { color: var(--encre); }
.formulaire__envoi .bouton { cursor: pointer; appearance: none; -webkit-appearance: none; }
.formulaire__statut { grid-column: 1 / -1; font-weight: 500; }

.contact__tag { --r: -6deg; position: relative; display: inline-block; margin-bottom: 18px; }
:root .contact__tag { margin-bottom: 18px; }
.contact__bloc + .contact__bloc .contact__tag { --r: 5deg; }
.contact__titre { font: 400 clamp(48px, 5vw, 76px)/.95 var(--f-titre); text-transform: uppercase; }
.contact__intro { max-width: 440px; margin-top: 16px; color: var(--gris); }
:root .contact__intro { margin-top: 16px; }
.coordonnees { padding: 0 var(--marge) var(--section) var(--retrait); }
.coordonnees__grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 40px; margin-top: 28px; }
:root .coordonnees__grille { margin-top: 28px; }
.coordonnees p { margin-top: 12px; line-height: 1.7; }
.coordonnees a:not(.pastille) { text-decoration: none; }
.coordonnees a:not(.pastille):hover { text-decoration: underline; }
.coordonnees__label { font: 600 13px/1 var(--f-texte); text-transform: uppercase; letter-spacing: .08em; }
.coordonnees .pastille { margin-top: 12px; }

/* Pages légales */
.legal { padding: clamp(56px, 6vw, 96px) var(--marge) var(--section) var(--retrait); }
.legal__texte { max-width: 720px; margin-top: clamp(40px, 4vw, 64px); }
:root .legal__texte { margin-top: clamp(40px, 4vw, 64px); }
.legal__texte h2 { margin: 40px 0 12px; font: 600 19px/1.3 var(--f-texte); }
.legal__texte h2:first-child { margin-top: 0; }
.legal__texte p { color: var(--gris); }
.legal__texte p + p { margin-top: 12px; }
.legal__texte a { color: var(--encre); }
mark { padding: 0 .2em; background: var(--jaune); color: var(--encre); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1100px) {
  .etapes { grid-template-columns: 1fr 1fr; }
  .jalon { grid-template-columns: 200px minmax(0, 1fr); }
  .jalon__desc { grid-column: 2; }
  .fiche__grille { grid-template-columns: 1fr 1fr; }
  .fiche__infos { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .nav__lien { padding: .45em .8em .5em; font-size: 14px; }
  .entete__cta { margin-left: 8px; }
:root .entete__cta { margin-left: 8px; }
  .domaine { grid-template-columns: 40px minmax(0, 1fr); }
  .domaine__desc { grid-column: 2; max-width: 520px; margin-top: 6px; }
:root .domaine__desc { margin-top: 6px; }
  .pied__haut { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .entete { flex-wrap: wrap; }
  .entete__cta { display: none; }

  .heros { flex-direction: column; align-items: stretch; min-height: 0; padding: 32px var(--marge) 0; }
  figure.heros__photo { position: relative; width: auto; margin: 24px calc(var(--marge) * -1) 0; }
  figure.heros__photo img { -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 18%); mask-image: linear-gradient(180deg, transparent 0%, #000 18%); }

  .publics { grid-template-columns: 1fr; padding-left: var(--marge); }
  .publics__tete { position: static; }
  .parcours, .manifeste, .valeurs, .organisations, .catalogue, .legal { padding-left: var(--marge); }
  .valeurs, .contact { grid-template-columns: 1fr; }
  .organisations__tete, .catalogue__tete { grid-template-columns: 1fr; }
  .organisations__liste { grid-template-columns: 1fr; }
  .contact { padding-left: var(--marge); }
  .coordonnees { padding-left: var(--marge); }
  .coordonnees__grille { grid-template-columns: 1fr; }
  figure.heros__photo--portrait { width: auto; max-width: none; height: 90vw; }
  figure.heros__photo--portrait img { height: 100%; object-fit: cover; object-position: 50% 30%; }
  .formats { position: static; flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 10px; margin-top: 36px; transform: none; }
:root .formats { margin-top: 36px; }
  .formats__item { font-size: 15px; transform: none !important; }
  .domaines__tete { padding-left: 0; }
  .methode { grid-template-columns: 1fr; padding: var(--section) var(--marge); }
  figure.methode__photo { margin: 24px calc(var(--marge) * -1) 0; }
  .etapes { grid-template-columns: 1fr 1fr; padding-right: 0; }
  .avis { padding-left: var(--marge); }
  .appel { grid-template-columns: 1fr; padding: var(--section) var(--marge) 0; }
  figure.appel__photo { margin: 24px calc(var(--marge) * -1) 0; }
  figure.appel__photo img { -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 25%); mask-image: linear-gradient(180deg, transparent 0%, #000 25%); }
  .citation:nth-child(n) { margin-left: 0; }
}

@media (max-width: 640px) {
  .logo__nom { font-size: 22px; }
  .logo__signe { width: 28px; height: 28px; }
  .heros__titre { font-size: clamp(52px, 16vw, 76px); }
  .etiquette { font-size: 12px; }
  .heros__titre .etiquette { font-size: 11px; }
  .heros:not(.heros--page) .heros__titre .ligne:nth-child(1) .etiquette { left: 56% !important; top: -36% !important; }
  .heros:not(.heros--page) .heros__titre .ligne:nth-child(2) .etiquette { left: 64% !important; top: 70% !important; }
  .heros:not(.heros--page) .heros__titre .ligne:nth-child(3) .etiquette { left: 46% !important; top: 78% !important; }
  .heros:not(.heros--page) .heros__titre .ligne:nth-child(4) .etiquette { left: 96% !important; top: 38% !important; }
  .public__titre .ligne { display: flex; flex-direction: column-reverse; align-items: flex-start; }
  .public__titre .etiquette { position: relative; left: auto !important; top: auto !important; margin: 0 0 12px 4px; }
  .heros--page .heros__titre .ligne { display: block; width: max-content; max-width: 100%; }
  .heros--page .heros__titre .etiquette { left: auto !important; right: -6px; top: 70% !important; font-size: 11px; }
  .heros--page .heros__titre .ligne:first-child .etiquette { top: -30% !important; }
  .heros--page .heros__titre .etiquette ~ .etiquette { display: none; }
  .jalon { grid-template-columns: 1fr; }
  .jalon__desc { grid-column: 1; }
  .formulaire { grid-template-columns: 1fr; }
  .fiche__grille, .fiche__infos { grid-template-columns: 1fr; }
  .domaine { grid-template-columns: 1fr; }
  .domaine__num { padding: 0 0 4px; }
  .domaine__desc { grid-column: 1; }
  .domaine__nom { font-size: clamp(36px, 11vw, 52px); }
  .domaine__nom .ligne, .offre__nom .ligne { display: inline; }
  .domaine__nom .etiquette, .offre__nom .etiquette { position: relative; left: auto !important; top: auto !important; display: inline-block; margin: 6px 0 0 8px; vertical-align: middle; }
  .etapes { grid-template-columns: 1fr; }
  .appel__titre .ligne { width: auto; display: inline; }
  .appel__titre .etiquette { position: relative; left: auto !important; top: auto !important; display: inline-block; margin: 0 6px; vertical-align: middle; }
  .pied__haut { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ==========================================================================
   Adaptations WordPress
   Le CSS des blocs est imprimé APRÈS cette feuille : à spécificité égale,
   c'est lui qui gagne. Chaque surcharge ci-dessous est donc plus spécifique
   que la règle du bloc qu'elle remplace (references/blocs-gutenberg.md).
   ========================================================================== */

/* Espacement automatique : coupé dans theme.json (blockGap 0px), filet à spécificité nulle */
:where(.wp-block-group) > :where(*),
:where(.wp-block-buttons) { margin-block: 0; }
img { height: auto; }

/* ---------- Logo : paragraphe éditable, signe en masque CSS ---------- */
.logo a {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--encre);
  font: 400 34px/1 var(--f-titre);
  text-transform: uppercase;
  letter-spacing: .01em;
  text-decoration: none;
  white-space: nowrap;
}
.logo a::before {
  content: "";
  flex: none;
  width: 32px;
  height: 32px;
  background: var(--encre);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M20 2c1.4 9.6 5.4 13.6 15 15-9.6 1.4-13.6 5.4-15 15-1.4-9.6-5.4-13.6-15-15 9.6-1.4 13.6-5.4 15-15z'/%3E%3Ccircle cx='33' cy='33' r='4'/%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 40 40'%3E%3Cpath d='M20 2c1.4 9.6 5.4 13.6 15 15-9.6 1.4-13.6 5.4-15 15-1.4-9.6-5.4-13.6-15-15 9.6-1.4 13.6-5.4 15-15z'/%3E%3Ccircle cx='33' cy='33' r='4'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------- Boutons : core/button ---------- */
.wp-block-buttons.boutons { display: flex; flex-wrap: wrap; gap: 14px; }
.wp-block-button .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  padding: .85em 1.5em .9em;
  border: var(--trait) solid var(--encre);
  border-radius: 999px;
  background: var(--blanc);
  box-shadow: var(--ombre);
  color: var(--encre);
  font: 600 15px/1.2 var(--f-texte);
  text-decoration: none;
  white-space: nowrap;
  transition: transform .15s ease, box-shadow .15s ease;
}
.wp-block-button.is-style-jaune .wp-block-button__link { background: var(--jaune); }
.wp-block-button .wp-block-button__link:hover { transform: translateY(2px); box-shadow: 0 1px 0 var(--encre); color: var(--encre); }
.wp-block-button .wp-block-button__link:focus-visible { outline: 3px solid var(--bleu); outline-offset: 3px; }
.entete__cta .wp-block-button .wp-block-button__link,
.boutons--petit .wp-block-button .wp-block-button__link { padding: .5em 1.05em .55em; font-size: 14px; font-weight: 500; }
.pied__col .wp-block-button .wp-block-button__link:hover,
.coordonnees .wp-block-button .wp-block-button__link:hover { text-decoration: none; }
.coordonnees .wp-block-buttons { margin-top: 12px; }

/* ---------- Navigation : core/navigation ---------- */
.entete .wp-block-navigation.nav { margin-left: auto; }
.wp-block-navigation.nav .wp-block-navigation__container { gap: 0; }
.wp-block-navigation.nav .wp-block-navigation-item__content.wp-block-navigation-item__content {
  display: inline-flex;
  padding: .45em 1em .5em;
  border: var(--trait) solid var(--encre);
  border-radius: 999px;
  background: var(--blanc);
  box-shadow: var(--ombre);
  color: var(--encre);
  font: 500 14px/1.2 var(--f-texte);
  text-decoration: none;
  white-space: nowrap;
  transition: transform .15s ease, box-shadow .15s ease;
}
.wp-block-navigation.nav .wp-block-navigation-item__content.wp-block-navigation-item__content:hover { transform: translateY(2px); box-shadow: 0 1px 0 var(--encre); }
.wp-block-navigation.nav .current-menu-item > .wp-block-navigation-item__content.wp-block-navigation-item__content { background: var(--encre); color: var(--blanc); }
/* Bouton d'ouverture mobile : la pastille « Menu » de la maquette */
.wp-block-navigation.nav .wp-block-navigation__responsive-container-open {
  align-items: center;
  gap: 6px;
  padding: .45em 1em .5em;
  border: var(--trait) solid var(--encre);
  border-radius: 999px;
  background: var(--blanc);
  box-shadow: var(--ombre);
  color: var(--encre);
  font: 500 14px/1.2 var(--f-texte);
}
.wp-block-navigation.nav .wp-block-navigation__responsive-container-open::after { content: "Menu"; }
.wp-block-navigation.nav .wp-block-navigation__responsive-container-open svg { width: 18px; height: 18px; }
/* Le panneau mobile s'ouvre blanc sur blanc sans ceci : seule place justifiée pour !important */
.wp-block-navigation.nav .wp-block-navigation__responsive-container.is-menu-open {
  padding: 28px var(--marge) !important;
  background-color: var(--fond) !important;
  color: var(--encre) !important;
}
.wp-block-navigation.nav .is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container { gap: 12px; align-items: flex-start; }
.wp-block-navigation.nav .is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content.wp-block-navigation-item__content { padding: .55em 1.2em .6em; font-size: 18px; }

/* ---------- Titres à étiquettes : titre + paragraphes positionnés ---------- */
.titre-zone { position: relative; width: max-content; max-width: 100%; }
.titre-zone > .etiquette { position: absolute; z-index: 2; margin: 0; transform: translate(-50%, -50%) rotate(var(--r, -6deg)); }
/* Les <span> de la maquette sont devenus des paragraphes : les règles « .x p » ne doivent pas les toucher */
.titre-zone > .etiquette { max-width: none; color: var(--encre); font: 500 13px/1.2 var(--f-texte); }
.etape .etape__num { max-width: none; color: var(--encre); font: 400 32px/1 var(--f-titre); }
.certif .certif__annee { font-size: 13px; color: var(--encre); }
.contact__bloc .contact__tag { max-width: none; margin-top: 0; color: var(--encre); }
.pied__marque .logo { max-width: none; margin-top: 0; }
.manifeste .titre-zone { margin-top: 28px; }
.manifeste .manifeste__phrase { margin-top: 0; }

/* ---------- Citations : core/quote, l'auteur est l'étiquette ---------- */
.wp-block-quote.citation cite {
  position: relative;
  display: inline-block;
  margin-top: 22px;
  padding: .38em .95em .42em;
  border: var(--trait) solid var(--encre);
  border-radius: 999px;
  background: var(--blanc);
  box-shadow: var(--ombre-etiquette);
  color: var(--encre);
  font: 500 14px/1.2 var(--f-texte);
  font-style: normal;
  white-space: nowrap;
}
.avis__liste .citation:nth-child(1) cite { background: var(--jaune); transform: rotate(-4deg); }
.avis__liste .citation:nth-child(2) cite { background: var(--vert); transform: rotate(3deg); }
.avis__liste .citation:nth-child(3) cite { background: var(--bleu); transform: rotate(-3deg); }

/* ---------- Pages légales : les champs à compléter sont surlignés ---------- */
.legal__texte strong { padding: 0 .2em; background: var(--jaune); font-weight: inherit; }

/* ---------- Formulaire : Contact Form 7, classes de la maquette ---------- */
.formulaire .wpcf7-form-control-wrap { display: block; }
.formulaire .wpcf7-form-control-wrap > input,
.formulaire .wpcf7-form-control-wrap > select,
.formulaire .wpcf7-form-control-wrap > textarea { display: block; }
.formulaire.init .wpcf7-response-output,
.formulaire.resetting .wpcf7-response-output,
.formulaire.submitting .wpcf7-response-output { display: none; }
.formulaire .hidden-fields-container { display: none; }
.formulaire input[type="submit"] { cursor: pointer; appearance: none; -webkit-appearance: none; }
.formulaire .wpcf7-not-valid-tip { margin-top: 6px; color: #B3261E; font-size: 13px; }
.wpcf7 .formulaire .wpcf7-response-output {
  grid-column: 1 / -1;
  margin: 0;
  padding: 12px 20px;
  border: var(--trait) solid var(--encre);
  border-radius: 24px;
  background: var(--blanc);
  font-size: 15px;
}
.formulaire .wpcf7-spinner { margin: 0 0 0 12px; vertical-align: middle; }

/* ---------- Responsive propre à WordPress ---------- */
@media (max-width: 900px) {
  .entete .wp-block-navigation.nav { order: 3; width: 100%; margin-left: 0; }
  /* « body .is-layout-flex { display:flex } » battrait .entete__cta : on masque le conteneur, plus fort */
  .entete .wp-block-buttons.entete__cta { display: none; }
}
@media (max-width: 599px) {
  .entete { flex-wrap: nowrap; }
  .entete .wp-block-navigation.nav { order: 0; width: auto; margin-left: auto; }
}
@media (max-width: 640px) {
  .logo a { font-size: 22px; }
  .titre-zone > .etiquette { font-size: 12px; }
  .heros--page .titre-zone > .etiquette { font-size: 11px; }
  .logo a::before { width: 28px; height: 28px; }
  .wp-block-quote.citation cite { white-space: normal; }
  .titre-zone--flux { width: auto; }
  .titre-zone--flux > .etiquette { position: relative; left: auto; top: auto; display: inline-block; margin: 10px 8px 0 0; transform: rotate(var(--r)); }
  .titre-zone--dessus { display: flex; flex-direction: column-reverse; align-items: flex-start; }
  .titre-zone--dessus > .etiquette { position: relative; left: auto; top: auto; margin: 0 0 12px 4px; transform: rotate(var(--r)); }
}

/* Positions des étiquettes, relevées sur la maquette (centre, en % du titre) */
.et-accueil-1 { --r: -5deg; left: 76.2%; top: -0.6%; }
.et-accueil-2 { --r: -12deg; left: -1.2%; top: 30.9%; }
.et-accueil-3 { --r: 11deg; left: 89.6%; top: 65.9%; }
.et-accueil-4 { --r: -7deg; left: 26.4%; top: 92.4%; }
.et-accueil-5 { --r: -6deg; left: 84.3%; top: 7%; }
.et-accueil-6 { --r: 5deg; left: 1.5%; top: -5%; }
.et-accueil-7 { --r: -4deg; left: 86.7%; top: 55%; }
.et-accueil-8 { --r: -6deg; left: 110.4%; top: 7.8%; }
.et-accueil-9 { --r: 7deg; left: 100.8%; top: 55.8%; }
.et-accueil-10 { --r: -9deg; left: 100.8%; top: 21.8%; }
.et-accueil-11 { --r: 5deg; left: 96.3%; top: 61.8%; }
.et-accueil-12 { --r: -4deg; left: 96.8%; top: 17.8%; }
.et-accueil-13 { --r: 8deg; left: 61.2%; top: 13.2%; }
.et-accueil-14 { --r: -6deg; left: 77.6%; top: 91.2%; }
.et-a-propos-1 { --r: -6deg; left: 101.3%; top: 8.9%; }
.et-a-propos-2 { --r: 8deg; left: 61.2%; top: 13.2%; }
.et-a-propos-3 { --r: -6deg; left: 77.6%; top: 91.2%; }
.et-services-1 { --r: -6deg; left: 65.8%; top: -4.6%; }
.et-services-2 { --r: 8deg; left: -1%; top: 81.4%; }
.et-services-3 { --r: -9deg; left: 90%; top: 85.4%; }
.et-services-4 { --r: -6deg; left: 94.2%; top: 5.8%; }
.et-services-5 { --r: 8deg; left: 61.2%; top: 13.2%; }
.et-services-6 { --r: -6deg; left: 77.6%; top: 91.2%; }
.et-formations-1 { --r: -7deg; left: 59.3%; top: -1.3%; }
.et-formations-2 { --r: 9deg; left: -2.1%; top: 34.7%; }
.et-formations-3 { --r: -5deg; left: 28.6%; top: 49.7%; }
.et-formations-4 { --r: 7deg; left: 91.1%; top: 86.7%; }
.et-formations-5 { --r: -7deg; left: 73.5%; top: 36.9%; }
.et-formations-6 { --r: 8deg; left: 104%; top: 87.5%; }
.et-contact-1 { --r: -6deg; left: 62.9%; top: -2.3%; }
.et-contact-2 { --r: 8deg; left: 103.6%; top: 77.7%; }
@media (max-width: 640px) {
  .et-accueil-1 { left: 74.7%; top: -3.7%; }
  .et-accueil-2 { left: 82.8%; top: 47.8%; }
  .et-accueil-3 { left: 71.3%; top: 74.8%; }
  .et-accueil-4 { left: 48.3%; top: 89.8%; }
  .et-a-propos-1 { left: 119.7%; top: 15.3%; }
  .et-services-1 { left: 88%; top: -8.7%; }
  .et-services-2 { display: none; }
  .et-services-3 { display: none; }
  .et-formations-1 { left: 66.1%; top: -4.4%; }
  .et-formations-2 { display: none; }
  .et-formations-3 { left: 93.4%; top: 95.6%; }
  .et-formations-4 { display: none; }
  .et-contact-1 { left: 67.6%; top: -4.4%; }
  .et-contact-2 { left: 84.7%; top: 95.6%; }
}