/*
Theme Name: Envol Coaching
Theme URI: https://envol-coaching.com
Author: Mick Gbaguidi
Description: Thème bloc sur mesure d'Envol Coaching — coaching professionnel et personnel à Lille. Tout le contenu est en blocs natifs, modifiable dans l'éditeur.
Version: 1.0.3
Requires at least: 6.6
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: envol-coaching
Tags: block-theme, full-site-editing, one-column
*/

/* Système de design relevé sur la référence (bleus, blanc froid, serif + sans + manuscrite).
   Principe de conversion : les classes de la maquette sont posées sur les blocs via className.
   Les règles qui visent un élément interne d'un bloc (img d'une figure, lien d'un bouton,
   lien de navigation) sont qualifiées par la classe du bloc : le CSS des blocs est imprimé
   après cette feuille et gagne à spécificité égale. */

:root {
  --bleu: #2C54AE;
  --bleu-vif: #3263D0;
  --nuit: #1A2A5E;
  --pale: #E5EBF7;
  --fond: #F5F7FA;
  --encre: #23262E;
  --gris: #5B606B;

  --serif: "Playfair Display", Georgia, serif;
  --sans: "Poppins", system-ui, sans-serif;
  --script: "Allison", cursive;

  --large: 1160px;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.7;
  color: var(--encre);
  background-color: var(--fond);
  /* voile de marbre froid */
  background-image:
    radial-gradient(ellipse 60% 40% at 12% 18%, rgba(255,255,255,.95), transparent 70%),
    radial-gradient(ellipse 45% 30% at 85% 32%, rgba(214,219,228,.55), transparent 70%),
    radial-gradient(ellipse 55% 35% at 30% 58%, rgba(222,226,234,.6), transparent 70%),
    radial-gradient(ellipse 50% 30% at 78% 80%, rgba(255,255,255,.9), transparent 70%),
    linear-gradient(160deg, #F7F8FB 0%, #EEF1F5 45%, #F6F7FA 100%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}

/* height:auto obligatoire : sinon l'attribut height des blocs image l'emporte sur aspect-ratio */
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }

/* Gutenberg applique margin-block-start entre frères. Neutralisé dans theme.json
   (blockGap: "0px") et, en filet de sécurité, ici À SPÉCIFICITÉ NULLE — jamais en
   .wp-block-group > * : cette version-là écraserait toutes les marges des composants. */
:where(.wp-block-group) > :where(*), :where(.wp-block-buttons) { margin-block: 0; }
figure.wp-block-image { margin: 0; }
.wp-block-list { margin: 0; }

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

.wp-block-buttons.alignement-centre { justify-content: center; }
.wp-block-button .wp-block-button__link {
  display: inline-block;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: .12em;
  text-decoration: none;
  padding: 7px 28px;
  border: 1px solid currentColor;
  border-radius: 0;
  cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s;
}
.wp-block-button.btn-plein .wp-block-button__link { background: var(--bleu-vif); border-color: var(--bleu-vif); color: #fff; text-transform: uppercase; }
.wp-block-button.btn-plein .wp-block-button__link:hover { background: var(--nuit); border-color: var(--nuit); }
.wp-block-button.btn-blanc .wp-block-button__link { background: #fff; border-color: #fff; color: var(--bleu); }
.wp-block-button.btn-blanc .wp-block-button__link:hover { background: var(--pale); }

/* ---------- En-tête ---------- */

.entete { background: #fff; position: relative; z-index: 10; }
.entete-inner {
  max-width: 1340px;
  margin: 0 auto;
  padding: 14px 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.wp-block-site-logo.logo img { width: 82px; height: 82px; }
.entete-droite { display: flex; align-items: center; gap: 40px; }

.wp-block-navigation.menu .wp-block-navigation__container { gap: 34px; }
.wp-block-navigation.menu .wp-block-navigation-item__content {
  font-family: var(--sans);
  font-size: 11.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--encre);
}
.wp-block-navigation.menu .wp-block-navigation-item__content:hover,
.wp-block-navigation.menu .current-menu-item > .wp-block-navigation-item__content { color: var(--bleu-vif); }
/* panneau mobile : le CSS du bloc est imprimé après cette feuille, d'où le !important */
.wp-block-navigation.menu .wp-block-navigation__responsive-container.is-menu-open {
  background-color: #fff !important;
  color: var(--encre) !important;
}
.wp-block-navigation.menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { gap: 22px; }
.wp-block-navigation.menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { font-size: 15px; }
.entete-cta .wp-block-button .wp-block-button__link { padding: 6px 14px; }

/* ---------- Bandeau photo sombre ---------- */

.hero {
  position: relative;
  height: 560px;
  overflow: hidden;
  background: #2a2c33;
}
.wp-block-image.hero-photo { position: absolute; inset: 0; margin: 0; z-index: 0; }
.wp-block-image.hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
  filter: grayscale(.55) contrast(.95);
}
.wp-block-image.hero-photo.cadre-bas img { object-position: 50% 100%; }
.wp-block-image.hero-photo.cadre-sentier img { object-position: 50% 75%; }
/* le voile est un pseudo-élément : un groupe vide serait un bloc vide dans l'éditeur */
.hero::before { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(30, 32, 40, .62); }
.hero-titre {
  position: absolute;
  z-index: 2;
  left: 38%;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--serif);
  font-weight: 400;
  font-size: 64px;
  color: #fff;
  line-height: 1.02;
  hyphens: none;
}
/* seconde ligne : <em> nu (format italique natif), stylé par son contexte */
.hero-titre em {
  display: block;
  width: fit-content;
  position: relative;
  font-size: 1.625em;
  font-style: italic;
  font-weight: 500;
  letter-spacing: -.01em;
  transition: transform .9s cubic-bezier(.2, .7, .2, 1);
}
/* survol : le mot s'élance, un trait se trace dessous, les points s'espacent comme des pas */
.hero-titre em::before {
  content: "";
  position: absolute;
  left: .04em;
  right: 0;
  bottom: .04em;
  height: 2px;
  background: rgba(255, 255, 255, .85);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .9s cubic-bezier(.2, .7, .2, 1) .1s;
}
.hero-accueil .hero-titre em::after {
  content: "...";
  letter-spacing: -.02em;
  transition: letter-spacing .8s cubic-bezier(.2, .7, .2, 1) .15s;
}
@media (hover: hover) {
  .hero-titre:hover em { transform: translateX(28px); }
  .hero-titre:hover em::before { transform: scaleX(1); }
  .hero-accueil .hero-titre:hover em::after { letter-spacing: .2em; }
}

/* ---------- Accroche + portrait détouré ---------- */

.accroche {
  position: relative;
  max-width: var(--large);
  margin: 0 auto;
  height: 620px;
}
.accroche::before {
  content: "";
  position: absolute;
  left: 70px;
  top: 96px;
  width: 520px;
  height: 400px;
  background: rgba(213, 224, 246, .62);
}
.accroche-titre {
  position: absolute;
  left: 0;
  top: 118px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 62px;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--bleu-vif);
  letter-spacing: .005em;
  white-space: nowrap;
}
.accroche-titre em { font-style: italic; }
.accroche-titre strong { font-weight: inherit; color: var(--nuit); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 8px; }
.wp-block-image.accroche-portrait { position: absolute; margin: 0; left: 540px; bottom: 0; width: 500px; }
.wp-block-image.accroche-portrait img { width: 100%; height: auto; }

/* ---------- Bande bleue ---------- */

.bande {
  background: var(--bleu);
  color: #fff;
  text-align: center;
  padding: 76px 24px 84px;
}
.bande-texte {
  font-family: var(--serif);
  font-size: 34px;
  line-height: 1.42;
  font-weight: 500;
  max-width: 860px;
  margin: 0 auto 30px;
  text-wrap: balance;
}

/* ---------- Signature manuscrite ---------- */

.role { background: #fff; }
.role-inner {
  max-width: 1260px;
  margin: 0 auto;
  padding: 120px 40px;
  display: grid;
  grid-template-columns: .9fr 1.4fr;
  align-items: center;
  gap: 60px;
}
.role-script { font-family: var(--script); color: var(--nuit); line-height: .85; text-align: center; }
.role-script-l1 { font-size: 92px; }
.role-script-grand { font-size: 210px; margin-top: -10px; }
.role-lignes { text-align: center; font-family: var(--serif); font-size: 21px; color: var(--encre); }
.role-lignes p + p { margin-top: 14px; }
.role-lignes strong { font-weight: 400; font-size: 42px; color: var(--bleu-vif); line-height: 1.1; }

/* ---------- Portrait rond ---------- */

.rencontre { background: var(--bleu); padding: 72px 24px; }
.rencontre-inner {
  max-width: 1060px;
  margin: 0 auto;
  position: relative;
  display: flex;
  align-items: center;
}
.wp-block-image.rencontre-rond {
  flex: 0 0 360px;
  height: 360px;
  margin: 0 -90px 0 0;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  z-index: 2;
}
.wp-block-image.rencontre-rond img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.rencontre-panneau {
  flex: 1;
  background: #3A62BC;
  color: #fff;
  padding: 52px 64px 52px 150px;
  min-height: 300px;
}
.rencontre-intro { font-family: var(--serif); font-size: 16px; line-height: 1.55; margin-bottom: 24px; }
.rencontre-titre { font-family: var(--serif); font-size: 30px; line-height: 1.4; margin-bottom: 30px; }

/* ---------- Titres de section communs ---------- */

.titre-section {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 50px;
  line-height: 1.15;
  color: var(--bleu-vif);
  text-align: center;
  text-wrap: balance;
}
.chapeau { max-width: 640px; margin: 22px auto 0; text-align: center; font-size: 14px; color: var(--encre); }
/* les mots soulignés sont des <strong> nus (format natif), stylés en soulignement */
.chapeau strong, .carte-etape strong {
  font-weight: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.amorce { font-family: var(--serif); font-size: 24px; text-align: center; margin-top: 26px; color: var(--encre); }
.script-label, .script-etape { font-family: var(--script); color: #4a4f5c; line-height: 1; }

/* ---------- Pourquoi ---------- */

.pourquoi { padding: 120px 40px 110px; }
.pourquoi-liste {
  list-style: none;
  padding: 0;
  max-width: 1000px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 56px;
}
.wp-block-list.pourquoi-liste { margin: 54px auto 0; }
.pourquoi-liste li { border-top: 1px solid rgba(44, 84, 174, .28); padding: 16px 0 18px; font-size: 14px; }
.pourquoi-liste li::first-letter { text-transform: uppercase; }
.pourquoi-fin {
  font-family: var(--serif);
  font-size: 30px;
  color: var(--bleu-vif);
  text-align: center;
  margin: 64px auto 0;
  max-width: 720px;
  text-wrap: balance;
  line-height: 1.3;
}
.pourquoi-sous { text-align: center; margin-top: 10px; font-size: 14px; }

/* ---------- Accompagnements (accueil) ---------- */

.offres { background: #fff; padding: 120px 40px; }
.offres-grille {
  max-width: var(--large);
  margin: 64px auto 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.offres-col { display: flex; flex-direction: column; gap: 20px; }
.script-label { font-size: 76px; text-align: center; margin-bottom: 0; }
.carte {
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
  background: var(--bleu);
  color: #fff;
  padding: 26px 28px 24px;
  transition: transform .25s;
}
.carte:hover { transform: translateY(-4px); }
.carte-nuit { background: var(--nuit); }
.carte h3 { font-family: var(--serif); font-weight: 400; font-size: 24px; line-height: 1.25; margin-bottom: 12px; }
.carte p { font-size: 13px; line-height: 1.65; opacity: .92; }
.carte .carte-accroche { font-family: var(--serif); font-size: 19px; line-height: 1.4; opacity: 1; margin-bottom: 14px; }
.carte ul { list-style: none; padding: 0; }
.carte .wp-block-list { margin: 18px 0 0; }
.carte li { font-size: 13px; padding: 9px 0; border-top: 1px solid rgba(255,255,255,.22); }
.carte .carte-lien {
  margin-top: auto;
  padding-top: 18px;
  font-size: 11px;
  line-height: 1.7;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: 1;
}
.carte-lien a { text-decoration: underline; text-underline-offset: 4px; }
/* toute la carte est cliquable : le lien s'étend sur la carte */
.carte-lien a::after { content: ""; position: absolute; inset: 0; }

/* ---------- Méthode (accueil) ---------- */

.methode { padding: 120px 40px; text-align: center; }
.etapes { max-width: 1000px; margin: 60px auto 0; text-align: left; }
.etape { display: grid; grid-template-columns: 1fr 520px; align-items: center; gap: 40px; }
.etape + .etape { margin-top: 34px; }
.etape-inverse { grid-template-columns: 520px 1fr; margin-left: -60px; }
.etape-inverse .script-etape { order: 2; }
.script-etape { font-size: 88px; text-align: center; }
.carte-etape { background: var(--bleu); color: #fff; padding: 30px 34px; }
.carte-etape.carte-nuit { background: var(--nuit); }
.carte-etape h3 { font-family: var(--serif); font-weight: 400; font-size: 23px; margin-bottom: 14px; }
.carte-etape h3.majuscules { text-transform: uppercase; font-size: 20px; letter-spacing: .02em; }
.carte-etape p { font-size: 13px; line-height: 1.65; }
.carte-etape p + p { margin-top: 10px; }
.methode-fin { font-family: var(--serif); font-style: italic; font-size: 22px; margin: 64px auto 26px; max-width: 640px; }

/* ---------- Premier pas (formulaire + pile) ---------- */

.contact-bande {
  background:
    radial-gradient(ellipse 50% 70% at 85% 70%, rgba(110, 145, 220, .45), transparent 70%),
    var(--bleu);
  color: #fff;
  padding: 110px 40px;
  overflow: hidden;
}
.contact-inner {
  max-width: var(--large);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.contact-texte { text-align: center; }
.contact-texte h2 { font-family: var(--serif); font-weight: 400; font-size: 42px; line-height: 1.2; margin-bottom: 20px; text-wrap: balance; }
.contact-texte > p { font-size: 14px; max-width: 480px; margin-left: auto; margin-right: auto; }
.contact-texte > p strong { font-weight: 600; }
.contact-formats { margin-top: 26px; font-size: 12px; letter-spacing: .06em; opacity: .85; }

/* Contact Form 7 : le formulaire porte la classe .formulaire (html_class du shortcode) */
.formulaire { max-width: 440px; margin: 32px auto 0; }
.formulaire .champs { display: grid; gap: 12px; }
.formulaire .wpcf7-form-control-wrap { display: block; }
.formulaire input[type="text"], .formulaire input[type="email"], .formulaire input[type="tel"], .formulaire textarea {
  display: block;
  width: 100%;
  font: inherit;
  font-size: 13px;
  padding: 12px 16px;
  border: 0;
  border-radius: 0;
  background: #fff;
  color: var(--encre);
  resize: vertical;
}
.formulaire input[type="submit"] {
  justify-self: center;
  margin-top: 6px;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .12em;
  line-height: normal;
  padding: 10px 28px;
  border: 1px solid #fff;
  border-radius: 0;
  background: #fff;
  color: var(--bleu);
  cursor: pointer;
  transition: background-color .2s;
}
.formulaire input[type="submit"]:hover { background: var(--pale); }
.formulaire .wpcf7-spinner { display: none; }
.formulaire .wpcf7-not-valid-tip { color: #fff; font-size: 12px; margin-top: 4px; text-align: left; }
.formulaire .wpcf7-response-output { margin: 16px 0 0; padding: 10px 14px; border: 1px solid rgba(255,255,255,.6); color: #fff; font-size: 13px; }

.pile { position: relative; height: 520px; }
.pile::before, .pile::after, .pile-couverture {
  position: absolute;
  left: 50%; top: 50%;
  width: 360px; height: 470px;
  margin: -235px 0 0 -180px;
  box-shadow: 0 18px 40px rgba(10, 20, 60, .28);
}
/* les deux feuilles de dessous sont des pseudo-éléments */
.pile::before { content: ""; background: #E9EDF5; transform: rotate(9deg) translate(46px, 6px); }
.pile::after { content: ""; background: #fff; transform: rotate(4.5deg) translate(22px, 2px); }
.pile-couverture { z-index: 1; transform: rotate(-1.5deg); overflow: hidden; background: var(--nuit); }
.wp-block-image.pile-photo { position: absolute; inset: 0; margin: 0; }
.wp-block-image.pile-photo img { width: 100%; height: 100%; object-fit: cover; }
.pile-legende {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 90px 28px 28px;
  background: linear-gradient(to top, rgba(26, 42, 94, .92), transparent);
  color: #fff;
}
.pile-script { font-family: var(--script); font-size: 76px; line-height: 1; }
.pile-sous { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; margin-top: 10px; }

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

.pied { background: #fff; padding: 90px 40px 0; }
.pied-inner {
  max-width: var(--large);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1.1fr 1.1fr;
  gap: 48px;
}
.pied-script { font-family: var(--script); font-size: 84px; line-height: .9; color: var(--nuit); }
.pied-signature { font-family: var(--serif); font-size: 22px; line-height: 1.4; color: var(--bleu-vif); margin-top: 14px; }
.pied-petit { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; margin-top: 16px; color: var(--gris); }
.pied-titre { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--bleu-vif); margin-bottom: 14px; }
.pied ul { list-style: none; padding: 0; }
.pied li { font-size: 13px; padding: 4px 0; }
.pied li a { text-decoration: none; }
.pied li a:hover { color: var(--bleu-vif); }
.pied-bas {
  max-width: var(--large);
  margin: 70px auto 0;
  padding: 22px 0 28px;
  border-top: 1px solid rgba(44, 84, 174, .2);
  font-size: 12px;
  color: var(--gris);
}

/* =====================================================
   Pages internes — mêmes composants, déclinés
   ===================================================== */

.fond-blanc { background: #fff; }

.hero-page { height: 470px; }
.hero-page .hero-titre { font-size: 56px; }
.hero-page .hero-titre em { font-size: 1.57em; }

.intro-page { padding: 110px 40px 40px; }
.intro-page .chapeau { font-size: 15px; max-width: 700px; }

.sommaire {
  max-width: var(--large);
  margin: 56px auto 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  text-align: center;
}
.sommaire .script-label { font-size: 64px; }
.sommaire ul { list-style: none; padding: 0; }
.sommaire .wp-block-list { margin: 6px 0 0; }
.sommaire li { padding: 6px 0; }
.sommaire a {
  font-size: 11.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--bleu-vif);
  border-bottom: 1px solid rgba(50, 99, 208, .35);
  padding-bottom: 2px;
}
.sommaire a:hover { border-color: var(--bleu-vif); }

/* Intertitre de groupe : grand mot manuscrit */
.groupe { text-align: center; padding: 110px 40px 0; }
.groupe .script-label { font-size: 128px; line-height: .9; }
.groupe-sous { font-family: var(--serif); font-size: 20px; margin-top: 6px; }

/* Bloc d'accompagnement : texte + photo avec carte qui déborde */
.offre { padding: 90px 40px 130px; scroll-margin-top: 20px; }
.offre-inner {
  max-width: var(--large);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: 90px;
  align-items: start;
}
.offre-inverse .offre-texte { order: 2; }
.offre-inverse .offre-media { order: 1; }
.offre-surtitre { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--bleu-vif); }
.offre h2 { font-family: var(--serif); font-weight: 400; font-size: 48px; line-height: 1.12; color: var(--bleu-vif); margin-top: 10px; }
.offre-sous { font-family: var(--serif); font-size: 22px; line-height: 1.4; margin-top: 14px; }
.offre-texte > p:not(.offre-surtitre):not(.offre-sous) { margin-top: 16px; }
.offre-questions { list-style: none; padding: 0; }
.wp-block-list.offre-questions { margin: 22px 0 0; }
.offre-questions li { font-family: var(--serif); font-style: italic; font-size: 20px; line-height: 1.45; color: var(--nuit); padding: 4px 0; }
.offre-texte > p.offre-liste-titre { font-family: var(--serif); font-size: 20px; margin-top: 34px; }
.offre-liste { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; }
.wp-block-list.offre-liste { margin: 14px 0 0; }
.offre-liste li { border-top: 1px solid rgba(44, 84, 174, .28); padding: 11px 0 12px; font-size: 13.5px; }
.offre-liste li::first-letter { text-transform: uppercase; }

.offre-media { position: relative; padding-bottom: 70px; }
.wp-block-image.offre-photo { margin: 0 0 0 auto; width: 88%; aspect-ratio: 4 / 5; overflow: hidden; }
.wp-block-image.offre-photo img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.1s cubic-bezier(.2, .7, .2, 1), filter 1.1s;
}
.offre-inverse .wp-block-image.offre-photo { margin: 0 auto 0 0; }
.wp-block-image.offre-photo.cadre-droite img { object-position: 85% 50%; }
.offre-carte {
  position: absolute;
  left: -36px;
  bottom: 0;
  width: 72%;
  background: var(--bleu);
  color: #fff;
  padding: 32px 34px;
  transition: transform .7s cubic-bezier(.2, .7, .2, 1), box-shadow .7s;
}
.offre-inverse .offre-carte { left: auto; right: -36px; }
.offre-carte.carte-nuit { background: var(--nuit); }
.offre-carte .offre-carte-titre { font-size: 11px; font-weight: 400; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 12px; opacity: .85; }
.offre-carte .offre-carte-phrase { font-family: var(--serif); font-size: 23px; line-height: 1.38; }
.offre-carte p + p { margin-top: 12px; font-size: 13px; line-height: 1.65; }
/* variante paysage : photo large, carte qui ne mord que sur le bas */
.offre-media.media-paysage { padding-bottom: 0; margin-top: 40px; }
.media-paysage .wp-block-image.offre-photo { width: 100%; aspect-ratio: 4 / 3; }
.offre-media.media-paysage .offre-carte { position: relative; left: auto; bottom: auto; width: 80%; margin: -56px 0 0 -36px; }
/* survol : la photo s'avance doucement dans son cadre, la carte se soulève */
.offre-media:hover .wp-block-image.offre-photo img { transform: scale(1.07); filter: saturate(1.08); }
.offre-media:hover .offre-carte { transform: translateY(-10px); box-shadow: 0 22px 44px rgba(10, 20, 60, .22); }

/* Grille des six étapes */
.etapes-grille {
  max-width: var(--large);
  margin: 70px auto 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  padding-bottom: 50px;
}
.etapes-grille .carte-etape { position: relative; padding: 34px 34px 38px; min-height: 250px; }
.etapes-grille .carte-etape:nth-child(3n+2) { transform: translateY(50px); }
.carte-etape .etape-num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 64px;
  line-height: 1;
  opacity: .32;
  position: absolute;
  top: 20px;
  right: 26px;
}
.etapes-grille .carte-etape h3 { font-size: 30px; margin: 34px 0 12px; }
.etapes-grille .carte-etape p { font-size: 13.5px; }

/* Philosophie : quatre engagements */
.philosophie { padding: 120px 40px; background: #fff; text-align: center; }
.philosophie .script-label { font-size: 72px; }
.philosophie .titre-section { margin-top: 4px; }
.valeurs {
  max-width: var(--large);
  margin: 60px auto 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  text-align: left;
}
.valeurs > .wp-block-group { border-top: 2px solid var(--bleu-vif); padding-top: 22px; }
.valeurs h3 { font-family: var(--serif); font-weight: 400; font-size: 28px; color: var(--bleu-vif); margin-bottom: 8px; }
.valeurs p { font-size: 14px; }

/* À propos : texte + photo encadrée d'un panneau pâle */
.parcours { padding: 120px 40px; }
.parcours-inner {
  max-width: var(--large);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 100px;
  align-items: center;
}
.parcours-texte h2 { font-family: var(--serif); font-weight: 400; font-size: 46px; line-height: 1.2; text-transform: uppercase; color: var(--bleu-vif); }
.parcours-texte h2 em { font-style: italic; }
.parcours-texte p { margin-top: 18px; font-size: 14.5px; }
.parcours-texte strong { font-weight: 500; color: var(--nuit); }
/* marges de figure de la maquette validée (marges navigateur par défaut, 1em 40px) */
.wp-block-image.parcours-media { position: relative; margin: 1em 40px; }
.wp-block-image.parcours-media::before {
  content: "";
  position: absolute;
  left: -60px;
  top: 60px;
  width: 100%;
  height: 100%;
  background: rgba(213, 224, 246, .7);
}
.wp-block-image.parcours-media img { position: relative; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 20%; }

.citation { background: var(--bleu); color: #fff; text-align: center; padding: 100px 24px; }
.citation .citation-texte {
  margin: 0 auto;
  max-width: 900px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 40px;
  line-height: 1.35;
  text-wrap: balance;
}
.citation .citation-suite { margin-top: 26px; font-family: var(--serif); font-size: 20px; opacity: .9; }

.reperes {
  max-width: var(--large);
  margin: 0 auto;
  padding: 110px 40px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
  text-align: center;
}
.reperes .script-label { font-size: 60px; }
.reperes h3 { font-family: var(--serif); font-weight: 400; font-size: 26px; color: var(--bleu-vif); margin-top: 6px; }
/* WordPress remet à zéro la marge du premier enfant d'un groupe (:root :where(.is-layout-flow) > :first-child,
   spécificité 0,2,0) : la marge de l'étiquette manuscrite, premier enfant, doit être plus spécifique */
.reperes > .wp-block-group > p { margin-top: 8px; }
.reperes p:not(.script-label) { font-size: 14px; }

/* FAQ */
.faq { padding: 110px 40px 120px; }
.faq-liste { max-width: 860px; margin: 56px auto 0; }
.wp-block-details.faq-item { border-top: 1px solid rgba(44, 84, 174, .3); }
.wp-block-details.faq-item:last-child { border-bottom: 1px solid rgba(44, 84, 174, .3); }
.wp-block-details.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 26px 0;
  font-family: var(--serif);
  font-size: 24px;
  color: var(--encre);
}
.wp-block-details.faq-item summary::-webkit-details-marker { display: none; }
.wp-block-details.faq-item summary::after {
  content: "+";
  flex: 0 0 auto;
  font-family: var(--sans);
  font-weight: 300;
  font-size: 30px;
  line-height: 1;
  color: var(--bleu-vif);
  transition: transform .25s;
}
.wp-block-details.faq-item[open] summary::after { transform: rotate(45deg); }
.wp-block-details.faq-item[open] summary { color: var(--bleu-vif); }
.wp-block-details.faq-item > p { font-size: 14.5px; padding-right: 60px; }
.wp-block-details.faq-item > p + p { margin-top: 12px; }
.wp-block-details.faq-item > p:last-child { padding-bottom: 28px; }

/* Contact */
.contact-page { padding: 0 40px 120px; }
.contact-page-inner {
  max-width: var(--large);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 90px;
  align-items: start;
}
.contact-page-texte { padding-top: 110px; }
.contact-page-texte .amorce { text-align: left; margin-top: 0; font-size: 28px; line-height: 1.35; }
.contact-page-texte .parlons { font-family: var(--serif); font-style: italic; font-size: 64px; color: var(--bleu-vif); line-height: 1.1; margin-top: 10px; }
.coordonnees { list-style: none; padding: 0; }
.wp-block-list.coordonnees { margin: 40px 0 0; }
.coordonnees li { border-top: 1px solid rgba(44, 84, 174, .28); padding: 14px 0; display: flex; gap: 24px; font-size: 14px; }
.coordonnees li:last-child { border-bottom: 1px solid rgba(44, 84, 174, .28); }
.coordonnees strong { flex: 0 0 120px; font-weight: 400; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--bleu-vif); padding-top: 2px; }
.coordonnees a { text-decoration: none; }
.coordonnees a:hover { color: var(--bleu-vif); }
.contact-carte {
  position: relative;
  z-index: 3;
  margin-top: -130px;
  background: var(--bleu);
  color: #fff;
  padding: 48px 46px 44px;
  box-shadow: 0 24px 50px rgba(10, 20, 60, .22);
}
.contact-carte h2 { font-family: var(--serif); font-weight: 400; font-size: 32px; line-height: 1.25; }
.contact-carte > p { font-size: 13.5px; margin-top: 12px; }
.contact-carte .formulaire { max-width: none; margin: 28px 0 0; }
.contact-carte .formulaire input[type="submit"] { justify-self: start; }

.mot-fin { text-align: center; padding: 20px 40px 120px; }
.mot-fin p:first-child { font-family: var(--serif); font-size: 32px; line-height: 1.35; color: var(--bleu-vif); max-width: 760px; margin: 0 auto; text-wrap: balance; }
.mot-fin p + p { margin-top: 12px; font-size: 14px; }

/* Mentions légales */
.legal { max-width: 820px; margin: 0 auto; padding: 100px 40px 120px; }
.legal .titre-section { text-align: left; }
.legal h2.legal-titre { font-family: var(--serif); font-weight: 400; font-size: 26px; color: var(--bleu-vif); margin-top: 48px; }
.legal p, .legal li { font-size: 14.5px; margin-top: 10px; }
.legal ul { padding-left: 18px; }
.legal .wp-block-list { margin: 1em 0; }

:where(a, button, input, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--bleu-vif); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .hero-titre em, .hero-titre em::before, .hero-titre em::after,
  .wp-block-image.offre-photo img, .offre-carte, .carte { transition: none; }
  .offre-media:hover .wp-block-image.offre-photo img, .offre-media:hover .offre-carte { transform: none; }
}

/* ---------- Mobile ---------- */

@media (max-width: 980px) {
  .entete-inner { padding: 10px 20px; }
  .wp-block-site-logo.logo img { width: 64px; height: 64px; }
  .wp-block-buttons.entete-cta { display: none; }

  .hero { height: 380px; }
  .hero-titre { left: 24px; right: 24px; font-size: 40px; }
  .hero-titre em { font-size: 1.65em; }

  .accroche { height: auto; padding: 56px 16px 0; }
  .accroche::before { left: 34px; top: 40px; width: calc(100% - 50px); height: 290px; }
  .accroche-titre { position: relative; top: 0; left: 0; font-size: 38px; padding-left: 4px; white-space: normal; }
  .wp-block-image.accroche-portrait { position: relative; left: auto; width: 100%; max-width: 380px; margin: 30px auto 0; }

  .bande { padding: 56px 20px 64px; }
  .bande-texte { font-size: 24px; }

  .role-inner { grid-template-columns: 1fr; padding: 80px 20px; gap: 40px; }
  .role-script-l1 { font-size: 64px; }
  .role-script-grand { font-size: 140px; }
  .role-lignes { font-size: 18px; }
  .role-lignes strong { font-size: 32px; }

  .rencontre { padding: 56px 16px; }
  .rencontre-inner { flex-direction: column; }
  .wp-block-image.rencontre-rond { flex: 0 0 auto; width: 240px; height: 240px; margin: 0 0 -80px; }
  .rencontre-panneau { padding: 110px 26px 40px; }
  .rencontre-titre { font-size: 23px; }

  .titre-section { font-size: 36px; }
  .amorce { font-size: 20px; }
  .pourquoi, .offres, .methode { padding: 80px 16px; }
  .pourquoi-liste { grid-template-columns: 1fr; }
  .pourquoi-fin { font-size: 24px; }

  .offres-grille { grid-template-columns: 1fr; gap: 40px; }
  .script-label { font-size: 54px; }

  .etape, .etape-inverse { grid-template-columns: 1fr; gap: 6px; margin-left: 0; }
  .etape-inverse .script-etape { order: 0; }
  .script-etape { font-size: 56px; text-align: left; }
  .carte-etape { padding: 26px 24px; }

  .contact-bande { padding: 80px 16px; }
  .contact-inner { grid-template-columns: 1fr; gap: 50px; }
  .contact-texte h2 { font-size: 32px; }
  .pile { height: 400px; }
  .pile::before, .pile::after, .pile-couverture { width: 260px; height: 340px; margin: -170px 0 0 -130px; }
  .pile::before { transform: rotate(9deg) translate(26px, 4px); }
  .pile::after { transform: rotate(4.5deg) translate(12px, 2px); }
  .pile-script { font-size: 50px; }

  .pied { padding: 64px 20px 0; }
  .pied-inner { grid-template-columns: 1fr; gap: 34px; }

  /* pages internes */
  .hero-page { height: 340px; }
  .hero-page .hero-titre { font-size: 30px; }
  .hero-page .hero-titre em { font-size: 1.47em; }

  .intro-page { padding: 72px 16px 20px; }
  .sommaire { grid-template-columns: 1fr; gap: 16px; }

  .groupe { padding: 80px 16px 0; }
  .groupe .script-label { font-size: 92px; }
  .groupe-sous { font-size: 17px; }

  .offre { padding: 56px 16px 80px; }
  .offre-inner { grid-template-columns: 1fr; gap: 40px; }
  .offre-inverse .offre-texte, .offre-inverse .offre-media { order: 0; }
  .offre h2 { font-size: 34px; }
  .offre-sous { font-size: 19px; }
  .offre-liste { grid-template-columns: 1fr; }
  .offre-media { padding-bottom: 0; }
  .wp-block-image.offre-photo, .offre-inverse .wp-block-image.offre-photo { width: 100%; }
  .offre-carte, .offre-inverse .offre-carte { position: relative; left: auto; right: auto; width: auto; margin: -60px 16px 0; }
  .offre-carte .offre-carte-phrase { font-size: 20px; }
  .offre-media.media-paysage { margin-top: 0; }
  .offre-media.media-paysage .offre-carte { width: auto; margin: -50px 16px 0; }

  .etapes-grille { grid-template-columns: 1fr; gap: 18px; padding-bottom: 0; }
  .etapes-grille .carte-etape:nth-child(3n+2) { transform: none; }
  .etapes-grille .carte-etape { min-height: 0; }

  .philosophie { padding: 80px 16px; }
  .valeurs { grid-template-columns: 1fr; gap: 28px; }

  .parcours { padding: 72px 16px; }
  .parcours-inner { grid-template-columns: 1fr; gap: 60px; }
  .parcours-texte h2 { font-size: 32px; }
  .wp-block-image.parcours-media { margin-left: 30px; }
  .wp-block-image.parcours-media::before { left: -30px; top: 30px; }

  .citation { padding: 70px 20px; }
  .citation .citation-texte { font-size: 27px; }

  .reperes { grid-template-columns: 1fr; padding: 72px 16px; gap: 36px; }

  .faq { padding: 72px 16px 80px; }
  .wp-block-details.faq-item summary { font-size: 19px; padding: 20px 0; }
  .wp-block-details.faq-item > p { padding-right: 0; }

  .contact-page { padding: 0 16px 80px; }
  .contact-page-inner { grid-template-columns: 1fr; gap: 50px; }
  .contact-page-texte { padding-top: 0; order: 2; }
  .contact-carte { margin-top: -60px; padding: 34px 24px; }
  .contact-page-texte .parlons { font-size: 48px; }
  .coordonnees li { flex-direction: column; gap: 2px; }
  .coordonnees strong { flex: none; }

  .mot-fin { padding: 0 16px 80px; }
  .mot-fin p:first-child { font-size: 25px; }

  .legal { padding: 64px 16px 80px; }
}