/*
Theme Name: Le Cabinet 119
Theme URI: https://www.lecabinet119.com
Author: Le Cabinet 119
Description: Thème bloc sur mesure du Cabinet 119 — plateforme ivoirienne d’information juridique, de formation et d’innovation. Tout le contenu est éditable dans l’éditeur de blocs.
Version: 1.0.5
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lecabinet119
Tags: block-theme, full-site-editing, one-column
*/

/* ==========================================================================
   Registre relevé sur la référence « Lexio » : tout sombre, un seul accent
   sable, serif contrasté + italique pour les titres, sans-serif pour le reste,
   cadres arrondis encartés sur photo plein écran, pilules.

   Rappel Gutenberg : le CSS d'un bloc est imprimé APRÈS cette feuille. À
   spécificité égale, le bloc gagne : toute surcharge d'un style de bloc est
   donc écrite plus spécifique (figure.x img, .x .wp-block-button__link…).
   ========================================================================== */

/* Satoshi est hébergée dans le thème (assets/fonts, licence Fontshare FFL) :
   aucun serveur tiers à joindre, que certains bloqueurs filtrent. */
@font-face { font-family: 'Satoshi'; src: url('assets/fonts/satoshi-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Satoshi'; src: url('assets/fonts/satoshi-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Satoshi'; src: url('assets/fonts/satoshi-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  --nuit: #050505;
  --charbon: #0D0D0D;
  --verre: rgba(255, 255, 255, .12);
  --verre-trait: rgba(255, 255, 255, .22);
  --sable: #C6A787;
  --encre: #1A2329;
  --blanc: #FCFCFA;
  --blanc-doux: rgba(252, 252, 250, .74);
  --trait: rgba(252, 252, 250, .16);

  --serif: 'Playfair Display', 'Times New Roman', serif;
  --sans: 'Satoshi', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --retrait: clamp(12px, 8.2vw, 150px);   /* marge du cadre encarté, relevée : 8,2 % */
  --rayon: 20px;
  --fleche: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E");
  --fleche-blanche: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FCFCFA' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  position: relative;   /* l'en-tête absolu suit la barre d'administration */
  margin: 0;
  background: var(--nuit);
  color: var(--blanc);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }   /* height:auto obligatoire : sinon l'attribut height des blocs image l'emporte */
h1, h2, h3 { margin: 0; font-weight: 400; hyphens: none; text-wrap: balance; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }
.visuellement-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

:where(a, button, input, textarea):focus-visible { outline: 2px solid var(--sable); outline-offset: 3px; }

/* Neutraliser l'espacement automatique de Gutenberg : d'abord blockGap "0px"
   dans theme.json, puis ce filet à spécificité nulle — jamais .wp-block-group > *,
   qui é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-buttons { gap: 0; }

/* Les mots du titre animé sont saisis dans la page (éditables), le script les lit */
.mots-du-heros { display: none; }

/* ---------- Le cadre : le dispositif central de la référence ---------- */
.cadre {
  position: relative;
  border: 3px solid var(--blanc);   /* relevé sur la référence : ~3 px de blanc franc */
  border-radius: var(--rayon);
}

/* ---------- Boutons (core/button : la classe est sur le conteneur) ---------- */
.wp-block-button.bouton-plein,
.wp-block-button.bouton-nav { display: inline-block; background: none; border: 0; padding: 0; border-radius: 0; }

.bouton-plein .wp-block-button__link,
.bouton-envoyer {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  height: 52px;
  padding: 0 7px 0 20px;
  border: 0;
  border-radius: 999px;
  background-color: var(--sable);
  color: var(--encre);
  font: 500 17px/1 var(--sans);
  text-decoration: none;
  cursor: pointer;
  transition: background-color .25s;
}
.bouton-plein .wp-block-button__link:hover { background-color: #D4B899; color: var(--encre); }
/* la pastille ronde et sa flèche : un pseudo-élément, rien dans le contenu */
.bouton-plein .wp-block-button__link::after {
  content: '';
  flex: none;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--encre) var(--fleche-blanche) center / 16px no-repeat;
  transition: transform .3s;
}
.bouton-plein .wp-block-button__link:hover::after { transform: translateX(3px); }

/* bouton d'envoi des formulaires Contact Form 7 : un <input>, pas de pseudo-élément
   possible — la pastille est dessinée en arrière-plan */
input.bouton-envoyer {
  padding: 0 57px 0 20px;
  background:
    var(--fleche-blanche) right 17px center / 16px no-repeat,
    radial-gradient(circle at calc(100% - 25px) 50%, var(--encre) 18px, transparent 18.5px),
    var(--sable);
  -webkit-appearance: none;
  appearance: none;
}
input.bouton-envoyer:hover {
  background:
    var(--fleche-blanche) right 17px center / 16px no-repeat,
    radial-gradient(circle at calc(100% - 25px) 50%, var(--encre) 18px, transparent 18.5px),
    #D4B899;
}

/* ---------- En-tête : la pilule de verre ---------- */
.entete {
  position: absolute;
  z-index: 40;
  top: calc(11vh + 28px);
  left: calc(var(--retrait) + 34px);
  right: calc(var(--retrait) + 34px);
}
.entete.est-flottant {
  position: fixed;
  top: 14px;
  left: var(--retrait);
  right: var(--retrait);
  animation: descendre .45s cubic-bezier(.2, .7, .2, 1);
}
.admin-bar .entete.est-flottant { top: calc(32px + 14px); }
.entete.est-flottant .nav-pilule::before { background: rgba(20, 20, 20, .72); }
@keyframes descendre { from { transform: translateY(-130%); } }

.nav-pilule {
  position: relative;
  display: flex;
  align-items: center;
  gap: 32px;
  height: 78px;
  padding: 0 14px 0 22px;
  border: 1px solid var(--verre-trait);
  border-radius: 999px;
}
/* le verre est porté par un pseudo-élément : un backdrop-filter sur la pilule
   elle-même enfermerait le menu mobile (position: fixed) dans la pilule */
.nav-pilule::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--verre);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.marque.wp-block-site-logo { line-height: 0; }
/* ratio fixé : WordPress arrondit les attributs width/height (180 × 43) et le
   navigateur s'y fie plutôt qu'au fichier — le logo s'élargirait de 4 px */
.marque.wp-block-site-logo img { height: 40px; width: auto; max-width: none; aspect-ratio: 1124 / 274; }

/* core/navigation */
.wp-block-navigation.menu { margin-left: auto; }
.menu .wp-block-navigation__container,
.menu.wp-block-navigation .wp-block-navigation__responsive-container-content { gap: 30px; }
.menu .wp-block-navigation-item { font-size: 15px; font-weight: 500; }
.menu .wp-block-navigation-item__content {
  text-decoration: none;
  opacity: .92;
  transition: color .2s, opacity .2s;
}
.menu .wp-block-navigation-item__content:hover,
.menu .current-menu-item > .wp-block-navigation-item__content { color: var(--sable); opacity: 1; }

.boutons-nav { flex: none; }
.bouton-nav .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  height: 50px;
  padding: 0 20px;
  border-radius: 999px;
  background-color: var(--sable);
  color: var(--encre);
  font: 500 15px/1.6 var(--sans);
  text-decoration: none;
  white-space: nowrap;
}

/* bouton d'ouverture et panneau du menu mobile (core/navigation) */
.menu .wp-block-navigation__responsive-container-open,
.menu .wp-block-navigation__responsive-container-close {
  place-items: center;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--sable);
  color: var(--encre);
}
.menu .wp-block-navigation__responsive-container-open svg,
.menu .wp-block-navigation__responsive-container-close svg { width: 24px; height: 24px; fill: currentColor; }
/* le panneau s'ouvre blanc sur blanc sans ceci : le CSS du bloc est imprimé après */
.wp-block-navigation.menu .wp-block-navigation__responsive-container.is-menu-open {
  background-color: rgba(5, 5, 5, .97) !important;
  color: var(--blanc) !important;
  padding: 120px var(--retrait) 40px calc(var(--retrait) + 24px);
}
.wp-block-navigation.menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { align-items: flex-start; gap: 6px; }
.wp-block-navigation.menu .is-menu-open .wp-block-navigation-item { font-family: var(--serif); font-size: 40px; font-weight: 400; }
.wp-block-navigation.menu .is-menu-open .wp-block-navigation__responsive-container-close { position: absolute; top: 34px; right: var(--retrait); display: grid; }

/* ---------- Héros ---------- */
.heros {
  position: relative;
  min-height: max(100vh, 680px);
  padding: 11vh var(--retrait);
  display: flex;
  overflow: hidden;
}
.heros-photo { position: absolute; inset: 0; }
figure.heros-photo img {
  width: 100%; height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 62% 30%;
  filter: saturate(.55) brightness(.62) contrast(1.05);
  animation: travelling 28s ease-in-out infinite alternate;
}
.heros-photo::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(5, 5, 5, .8) 0%, rgba(5, 5, 5, .62) 50%, rgba(5, 5, 5, .55) 100%),
    linear-gradient(0deg, rgba(5, 5, 5, .85) 0%, rgba(5, 5, 5, 0) 45%),
    linear-gradient(180deg, rgba(5, 5, 5, .5) 0%, rgba(5, 5, 5, 0) 30%);
}
@keyframes travelling {
  from { transform: scale(1.04) translate(0, 0); }
  to   { transform: scale(1.14) translate(-1.5%, -1%); }
}
.heros-cadre {
  flex: 1;
  display: flex;
  align-items: flex-end;
  padding: 160px 3.6vw 8.5vh;
}
.heros-contenu { max-width: 860px; }

.titre-heros {
  font-family: var(--serif);
  font-size: clamp(46px, 6.5vw, 104px);
  line-height: 1.17;
  letter-spacing: -.005em;
}
/* L'animation juridique : le mot en italique change, souligné qui se remplit.
   Le titre ne contient qu'un <em> nu (format italique natif) : il est stylé
   par son contexte, jamais par une classe. */
.titre-heros em {
  display: block;
  position: relative;
  width: max-content;
  max-width: 100%;
  font-style: italic;
  color: var(--sable);
}
.titre-heros em .lettre {
  display: inline-block;
  white-space: pre;
  animation: lettre-entre .7s cubic-bezier(.2, .7, .2, 1) both;
}
.titre-heros em.sort .lettre { animation: lettre-sort .45s ease-in both; }
@keyframes lettre-entre { from { opacity: 0; transform: translateY(.32em); filter: blur(6px); } }
@keyframes lettre-sort  { to   { opacity: 0; transform: translateY(-.22em); filter: blur(6px); } }
.titre-heros em::after {
  content: '';
  position: absolute;
  left: 2px; right: 0; bottom: .06em;
  height: 2px;
  background: var(--sable);
  opacity: .55;
  transform-origin: left;
  transform: scaleX(0);
}
.titre-heros em.joue::after { animation: souligne 3.6s linear forwards; }
@keyframes souligne { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.chapeau-heros {
  max-width: 560px;
  margin-top: 30px;
  font-size: 17px;
  line-height: 1.5;
  color: var(--blanc);
}
.heros .wp-block-buttons { margin-top: 64px; }

/* ---------- Blocs communs ---------- */
.bloc { margin-top: clamp(96px, 10vw, 150px); }
.surtitre {
  margin-bottom: 22px;
  color: var(--sable);
  font-size: 15px;
  font-weight: 500;
}
.titre-section {
  font-family: var(--serif);
  font-size: clamp(36px, 4.3vw, 66px);
  line-height: 1.12;
}
.titre-section em { font-style: italic; color: var(--sable); }
.texte {
  max-width: 580px;
  margin-top: 28px;
  color: var(--blanc-doux);
  line-height: 1.7;
}

/* ---------- Panneau : bloc arrondi encarté, photo qui déborde ---------- */
.panneau {
  margin-inline: var(--retrait);
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: 6vw;
  align-items: center;
  padding: 72px 64px;
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  background: var(--charbon);
}
.panneau.inverse { grid-template-columns: .92fr 1.08fr; }
.panneau.inverse .panneau-photo { order: -1; }
.ambition {
  max-width: 560px;
  margin-top: 34px;
  padding-top: 30px;
  border-top: 1px solid var(--trait);
  font-family: var(--serif);
  font-style: italic;
  font-size: 23px;
  line-height: 1.45;
}
/* « Notre ambition : » est un gras natif, stylé par son contexte */
.ambition strong {
  display: block;
  margin-bottom: 10px;
  font-family: var(--sans);
  font-style: normal;
  font-size: 15px;
  font-weight: 500;
  color: var(--sable);
}
.lien-fleche { margin-top: 40px; }
.lien-fleche a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid var(--trait);
  padding-bottom: 6px;
  transition: border-color .2s, color .2s;
}
.lien-fleche a::after {
  content: '';
  width: 15px; height: 15px;
  background: currentColor;
  -webkit-mask: var(--fleche) center / contain no-repeat;
  mask: var(--fleche) center / contain no-repeat;
}
.lien-fleche a:hover { color: var(--sable); border-color: var(--sable); }

/* « .panneau > » n'est pas décoratif : la mise en page de WordPress annule la
   marge du premier et du dernier enfant d'un groupe avec :root :where(.is-layout-flow)
   > :first-child / :last-child, de spécificité (0,2,0) — il faut la dépasser. */
.panneau > figure.panneau-photo {
  position: relative;
  align-self: stretch;
  margin: -150px 0;   /* la photo déborde du bloc, en haut comme en bas */
}
figure.panneau-photo img {
  width: 100%;
  height: 100%;
  min-height: 520px;
  object-fit: cover;
  object-position: 62% 40%;
  border-radius: var(--rayon);
  filter: saturate(.5) brightness(.82) contrast(1.05);
}
/* la légende de l'image devient le badge de verre */
figure.panneau-photo figcaption {
  position: absolute;
  left: 20px; bottom: 20px;
  margin: 0;
  padding: 12px 20px;
  border: 1px solid var(--verre-trait);
  border-radius: 999px;
  background: rgba(10, 10, 10, .42);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: var(--blanc);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.6;
  text-align: left;
}
figure.panneau-photo figcaption strong { color: var(--sable); font-weight: 500; margin-inline: 4px; }

/* ---------- Bande : photo plein écran + cadre encarté ---------- */
.bande {
  position: relative;
  padding: 11vh var(--retrait);
  overflow: hidden;
}
.panneau + .bande { margin-top: clamp(170px, 16vw, 240px); }   /* place pour la photo qui déborde */
.bande + .bande { margin-top: 0; padding-top: 4vh; }
.bande-photo { position: absolute; inset: 0; }
figure.bande-photo img {
  width: 100%; height: 100%;
  max-width: none;
  object-fit: cover;
  filter: saturate(.6) brightness(.7);
}
.bande-photo::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(var(--nuit), rgba(5, 5, 5, .78) 22%, rgba(5, 5, 5, .78) 78%, var(--nuit));
}
.bande-cadre { padding: 72px 3.6vw 64px; }

/* ---------- Solutions (accueil) ---------- */
.solutions-tete {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 6vw;
  align-items: end;
}
.jauges { display: grid; gap: 26px; }
/* la piste et son remplissage sont deux pseudo-éléments : aucun bloc vide */
.jauge {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  padding-bottom: 14px;
}
.jauge::before, .jauge::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
}
.jauge::before { background: var(--trait); }
.jauge::after {
  background: var(--sable);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.8s cubic-bezier(.2, .7, .2, 1);
}
.jauge:nth-child(2)::after { transition-delay: .2s; }
.jauge:nth-child(3)::after { transition-delay: .4s; }
.jauges.est-visible .jauge::after { transform: scaleX(1); }
.jauge-nom { font-weight: 500; }
.jauge-valeur { font-family: var(--serif); font-style: italic; font-size: 20px; color: var(--sable); line-height: 1.2; }

/* ---------- Liste numérotée (core/list ordonnée, numéros par compteur CSS) ---------- */
.liste-numerotee {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 6vw;
  margin-top: 72px;
  counter-reset: numero;
}
.liste-numerotee li {
  display: flex;
  align-items: baseline;
  gap: 22px;
  padding: 22px 0;
  border-top: 1px solid var(--trait);
  font-size: 18px;
  line-height: 1.45;
}
.liste-numerotee li::before {
  counter-increment: numero;
  content: counter(numero, decimal-leading-zero);
  flex: none;
  width: 34px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 21px;
  color: var(--sable);
}
.num {
  flex: none;
  width: 34px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 21px;
  color: var(--sable);
}

/* ---------- Newsletter ---------- */
.newsletter { padding-bottom: 11vh; }
.newsletter figure.bande-photo img { filter: saturate(.4) brightness(.5) blur(1.5px); transform: scale(1.03); }
.newsletter-cadre {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6vw;
  align-items: end;
  padding: 64px 3.6vw;
}
.newsletter .texte { margin-top: 20px; }

/* ---------- Formulaires (Contact Form 7, gabarits aux classes de la maquette) ---------- */
.wpcf7 .wpcf7-form-control-wrap { display: block; }   /* sinon +5 à 13 px sous chaque champ */
.wpcf7 form { margin: 0; }
.wpcf7 .hidden-fields-container { display: none; }
.form-newsletter { display: flex; gap: 12px; }
.form-newsletter input[type="email"] {
  display: block;
  width: 340px;
  height: 52px;
  padding: 0 24px;
  border: 1px solid var(--verre-trait);
  border-radius: 999px;
  background: var(--verre);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: var(--blanc);
  font: 16px var(--sans);
}
.form-newsletter input::placeholder { color: rgba(252, 252, 250, .6); }
.wpcf7 .wpcf7-spinner { position: absolute; margin: 14px 10px; }
.wpcf7 .champ-envoi, .form-newsletter .champ-envoi { position: relative; }
.wpcf7 .wpcf7-not-valid-tip { margin-top: 8px; color: var(--sable); font-size: 14px; }
.wpcf7 form .wpcf7-response-output {
  margin: 20px 0 0;
  padding: 12px 18px;
  border: 1px solid var(--verre-trait);
  border-radius: 14px;
  color: var(--blanc);
  font-size: 15px;
}
.wpcf7 form.init .wpcf7-response-output, .wpcf7 form.resetting .wpcf7-response-output, .wpcf7 form.submitting .wpcf7-response-output { display: none; }
.wpcf7 form.sent .wpcf7-response-output { border-color: var(--sable); }

/* ---------- Pied de page ---------- */
.pied {
  margin-inline: var(--retrait);
  padding: 24px 0 40px;
}
.pied-haut {
  display: flex;
  align-items: center;
  gap: 40px;
  padding-bottom: 40px;
}
.pied .marque.wp-block-site-logo img { height: 44px; }
.wp-block-navigation.pied-menu { margin-left: auto; }
.pied-menu .wp-block-navigation__container { flex-wrap: wrap; gap: 10px 28px; }
.pied-menu .wp-block-navigation-item { font-size: 15px; }
.pied-menu .wp-block-navigation-item__content { text-decoration: none; opacity: .8; }
.pied-menu .wp-block-navigation-item__content:hover { color: var(--sable); opacity: 1; }

/* core/social-links : cercles de verre, icône blanche */
.wp-block-social-links.reseaux { display: flex; gap: 10px; margin: 0; padding: 0; }
.wp-block-social-links.reseaux .wp-social-link {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  margin: 0;
  border: 1px solid var(--verre-trait);
  border-radius: 50%;
  background: transparent;
  color: var(--blanc);
  font-size: 17px;
  line-height: 1.6;
  transition: border-color .2s, background-color .2s, color .2s;
}
.wp-block-social-links.reseaux .wp-social-link a { padding: 0; color: inherit; }
.wp-block-social-links.reseaux .wp-social-link svg { width: 18px; height: 18px; fill: currentColor; }
.wp-block-social-links.reseaux .wp-social-link:hover { border-color: var(--sable); background: var(--sable); color: var(--encre); transform: none; }

.pied-bas {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding-top: 28px;
  border-top: 1px solid var(--trait);
  font-size: 14px;
  color: rgba(252, 252, 250, .6);
}
.pied-courriel a { color: var(--blanc); text-decoration: none; }
.pied-courriel a:hover { color: var(--sable); }

/* ==========================================================================
   Pages internes — les composants de l'accueil, déclinés.
   ========================================================================== */

/* ---------- Héros de page : même cadre, plus court ---------- */
.heros-page { min-height: max(86vh, 660px); }
.heros-page .heros-cadre { padding-bottom: 8vh; }
.heros-page .heros-contenu { max-width: 1000px; }
.titre-page {
  font-family: var(--serif);
  font-size: clamp(42px, 5.4vw, 86px);
  line-height: 1.14;
}
.titre-page em { font-style: italic; color: var(--sable); }
.heros-page .chapeau-heros { max-width: 640px; }
.heros-page .wp-block-buttons { margin-top: 48px; }

/* ---------- Texte courant sur plusieurs paragraphes ---------- */
.texte + .texte { margin-top: 18px; }
.accroche {
  margin-top: 24px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 24px;
  line-height: 1.4;
  color: var(--sable);
}

/* ---------- Axes (Le Cabinet 119) ---------- */
.axes { margin-top: 64px; }
.axe {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: 6vw;
  padding: 48px 0 56px;
  border-top: 1px solid var(--trait);
}
.axe .num { display: block; margin-bottom: 16px; }
.axe-verbe { font-family: var(--serif); font-size: clamp(40px, 4.3vw, 66px); line-height: 1.05; }
.axe-sous { margin-top: 14px; font-family: var(--serif); font-style: italic; font-size: 24px; line-height: 1.3; color: var(--sable); }
.axe-corps .texte:first-child { margin-top: 0; }
.axe-corps .ambition { font-size: 21px; }

/* ---------- Appel à l'action dans une bande ---------- */
.appel {
  display: grid;
  grid-template-columns: 1.3fr .7fr;
  gap: 6vw;
  align-items: end;
}
.appel-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 26px; }
.appel-actions .lien-fleche { margin-top: 0; }

/* ---------- Cartes en grille ---------- */
.cartes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 3.6vw;
  margin-top: 64px;
}
.cartes.quatre { grid-template-columns: repeat(4, 1fr); }
.carte { padding: 30px 0 44px; border-top: 1px solid var(--trait); }
.carte .num { display: block; margin-bottom: 18px; }
.carte h3 { font-family: var(--serif); font-size: 26px; line-height: 1.2; }
.carte p:not(.num) { margin-top: 12px; font-size: 16px; line-height: 1.65; color: var(--blanc-doux); }

/* ---------- Deux colonnes de texte, sans cadre ---------- */
.duo {
  margin-inline: var(--retrait);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6vw;
  padding-inline: 64px;
}
.duo .texte:first-child { margin-top: 0; }

/* ---------- Affiches du client : jamais recadrées ---------- */
.panneau > figure.panneau-photo.affiche { align-self: start; margin: -120px 0 0; position: sticky; top: 110px; }
figure.panneau-photo.affiche img { height: auto; min-height: 0; object-fit: contain; filter: none; }
.panneau.a-affiche + .bande { margin-top: clamp(96px, 10vw, 150px); }   /* l'affiche ne déborde qu'en haut */

/* ---------- Page qui se termine sans bande photo ---------- */
.wp-block-post-content > :last-child:not(.bande) { margin-bottom: clamp(96px, 10vw, 150px); }

/* ---------- En-tête de section sur deux colonnes ---------- */
.tete-section {
  margin-inline: var(--retrait);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6vw;
  align-items: end;
}
.tete-section .texte { margin-top: 0; }

/* ---------- Médiathèque ---------- */
.ressources {
  margin: 56px var(--retrait) 0;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 24px;
}
.ressource-phare {
  position: relative;
  display: flex;
  min-height: 540px;
  padding: 14px;
  border-radius: var(--rayon);
  overflow: hidden;
}
.ressource-phare .bande-photo::after { background: linear-gradient(180deg, rgba(5, 5, 5, .35), rgba(5, 5, 5, .85)); }
.ressource-phare .cadre {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 40px 36px;
  border-radius: 14px;
}
.ressource-phare h3 { font-family: var(--serif); font-size: clamp(34px, 3.4vw, 52px); line-height: 1.1; }
.ressource-phare h3 em { font-style: italic; color: var(--sable); }
.ressource-phare .texte { margin-top: 16px; }
.ressource-phare .wp-block-buttons { align-self: flex-start; margin-top: 32px; }
.ressources-avenir { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.carte-panneau {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 258px;
  padding: 32px 28px 28px;
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  background: var(--charbon);
}
.carte-panneau h3 { font-family: var(--serif); font-size: 26px; line-height: 1.2; }
.carte-panneau p { font-size: 16px; line-height: 1.6; color: var(--blanc-doux); }
.carte-panneau .etiquette {
  align-self: flex-start;
  margin-top: auto;
  padding: 7px 14px;
  border: 1px solid var(--verre-trait);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.6;
  color: var(--sable);
}

/* ---------- Simulex IA ---------- */
.simulateur {
  margin-inline: var(--retrait);
  display: grid;
  grid-template-columns: .72fr 1.28fr;
  gap: 4.5vw;
  align-items: start;
}
.simulateur > * { min-width: 0; }   /* sinon la largeur minimale du simulateur élargit la grille */
.simulateur-cote { position: sticky; top: 120px; }
.atouts { margin-top: 36px; }
.atout { padding: 22px 0; border-top: 1px solid var(--trait); }
.atout-mot { font-family: var(--serif); font-style: italic; font-size: 30px; line-height: 1.1; color: var(--sable); }
.atout p:not(.atout-mot) { margin-top: 6px; color: var(--blanc-doux); }
.simulateur #sxRoot { padding: 0; }   /* la carte du simulateur, elle, est inchangée */
/* le style des titres du thème (theme.json) ne doit pas atteindre le simulateur */
#sxRoot .sx-title { line-height: 1.6; }

/* ---------- Contacts ---------- */
.contact { grid-template-columns: .9fr 1.1fr; align-items: start; }
.coordonnee { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--trait); }
.coordonnee .surtitre { margin-bottom: 8px; }
.coordonnee a { font-family: var(--serif); font-size: 30px; text-decoration: none; transition: color .2s; }
.coordonnee a:hover { color: var(--sable); }
.contact .wp-block-social-links.reseaux { margin-top: 28px; }
.formulaire { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 16px; }
.champ { display: grid; gap: 8px; }
.champ.large, .formulaire .champ-envoi { grid-column: 1 / -1; }
.champ label { font-size: 14px; font-weight: 500; color: var(--blanc-doux); }
.champ input, .champ textarea {
  width: 100%;
  height: 54px;
  padding: 0 22px;
  border: 1px solid var(--verre-trait);
  border-radius: 999px;
  background: var(--verre);
  color: var(--blanc);
  font: 16px var(--sans);
}
.champ textarea { height: 180px; padding: 18px 22px; border-radius: var(--rayon); resize: vertical; line-height: 1.6; }
.champ input::placeholder, .champ textarea::placeholder { color: rgba(252, 252, 250, .5); }
.formulaire .champ-envoi { justify-self: start; margin-top: 6px; }

/* ---------- Apparition au défilement ---------- */
.revele { opacity: 0; transform: translateY(28px); transition: opacity .9s ease, transform .9s cubic-bezier(.2, .7, .2, 1); }
.revele.est-visible { opacity: 1; transform: none; }

/* ---------- Tablette ---------- */
@media (max-width: 1180px) {
  /* .nav-pilule en préfixe : « body .is-layout-flex { display:flex } » (0,1,1) l'emporterait */
  .nav-pilule .boutons-nav { display: none; }
  .nav-pilule { justify-content: space-between; }
  /* core/navigation ne bascule qu'à 600 px : on avance la bascule à 1180 px */
  .menu .wp-block-navigation__responsive-container:not(.is-menu-open) { display: none !important; }
  .menu .wp-block-navigation__responsive-container-open:not(.always-shown) { display: grid !important; }
}

/* Les grilles ne passent sur une colonne qu'à 1024 px : le canevas de l'éditeur
   (≈ 1145 px sur un portable, barre latérale ouverte) montre ainsi la mise en
   page du site, pas celle de la tablette. */
@media (max-width: 1024px) {
  .panneau, .panneau.inverse { grid-template-columns: 1fr; padding: 56px 40px 0; }
  .panneau.inverse .panneau-photo { order: 0; }
  .panneau > figure.panneau-photo, .panneau > figure.panneau-photo.affiche { margin: 0 0 -80px; }
  .panneau > figure.panneau-photo.affiche { position: relative; top: auto; }
  .panneau.sans-photo { padding-bottom: 56px; }
  .panneau + .bande { margin-top: 180px; }
  .solutions-tete { grid-template-columns: 1fr; gap: 48px; }
  .newsletter-cadre { grid-template-columns: 1fr; }
  .axe, .appel, .duo, .tete-section, .simulateur, .ressources { grid-template-columns: 1fr; }
  .axe { gap: 24px; }
  .appel, .duo, .tete-section { gap: 32px; }
  .duo { padding-inline: 40px; }
  .cartes, .cartes.quatre { grid-template-columns: 1fr 1fr; }
  .simulateur-cote { position: static; }
}

/* ---------- Mobile ---------- */
@media (max-width: 782px) {
  .admin-bar .entete.est-flottant { top: calc(46px + 10px); }
}
@media (max-width: 760px) {
  body { font-size: 16px; }
  .entete { top: 24px; left: 22px; right: 22px; }
  .entete.est-flottant { top: 10px; left: 10px; right: 10px; }
  .nav-pilule { height: 64px; padding: 0 6px 0 18px; }
  .marque.wp-block-site-logo img { height: 30px; }
  .menu .wp-block-navigation__responsive-container-open { width: 50px; height: 50px; }
  .heros { padding: 12px; min-height: max(100svh, 640px); }
  .heros-cadre { padding: 120px 20px 36px; }
  .titre-heros { font-size: 44px; }
  .chapeau-heros { font-size: 16px; margin-top: 22px; }
  .heros .wp-block-buttons { margin-top: 36px; }
  .bloc { margin-top: 72px; }
  .panneau, .panneau.inverse { margin-inline: 12px; padding: 40px 22px 0; }
  .panneau.sans-photo { padding-bottom: 40px; }
  .panneau > figure.panneau-photo, .panneau > figure.panneau-photo.affiche { margin-bottom: -48px; }
  .ambition { font-size: 20px; }
  .bande { padding: 12px; }
  .panneau + .bande { margin-top: 120px; }
  .bande + .bande { padding-top: 0; }
  .bande-cadre { padding: 40px 20px 28px; }
  .liste-numerotee { grid-template-columns: 1fr; margin-top: 48px; }
  .liste-numerotee li { font-size: 16px; padding: 18px 0; }
  .newsletter-cadre { padding: 40px 20px; gap: 32px; }
  .form-newsletter { flex-direction: column; }
  .form-newsletter input[type="email"] { width: 100%; }
  .form-newsletter .champ-envoi { align-self: flex-start; }
  .heros-page { min-height: max(88svh, 600px); }
  .titre-page { font-size: 40px; }
  .heros-page .wp-block-buttons { margin-top: 32px; }
  .cartes, .cartes.quatre, .ressources-avenir, .atouts, .formulaire { grid-template-columns: 1fr; }
  .atout + .atout { border-left: 0; border-top: 1px solid var(--trait); }
  .duo, .tete-section, .ressources, .simulateur { margin-inline: 12px; }
  .duo { padding-inline: 22px; }
  .axe-verbe { font-size: 40px; }
  .ressource-phare { min-height: 440px; }
  .coordonnee a { font-size: 24px; }
  .pied { margin-inline: 22px; }
  .pied-haut { flex-direction: column; align-items: flex-start; gap: 28px; }
  .wp-block-navigation.pied-menu { margin-left: 0; }
  .pied-bas { flex-direction: column; gap: 8px; }
}
@media (max-width: 600px) {
  .admin-bar .entete.est-flottant { top: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .revele { opacity: 1; transform: none; }
  .jauge::after { transform: none; }
}