/* ==========================================================================
   Études de cas (page-etude-de-cas.php). Chargé après css/service.css.
   Met en forme les blocs de l'éditeur aux couleurs de la charte. Classes à
   poser dans l'éditeur (Avancé → Classe CSS additionnelle) :
     etude-fiche          bloc Colonnes : fiche projet à filets jaunes
     etude-bande          bloc Groupe : section pleine largeur, numérotée
     etude-bande--sombre  + fond anthracite coupé en diagonale
     etude-bande--gris    + fond gris clair
     etude-intro          bloc Colonnes : titre de section à gauche, texte à droite
     etude-videos         bloc Colonnes : vidéo verticale + vidéo paysage
     etude-site           bloc Colonnes : bannières + newsletter
     etude-pleine         bloc Galerie : une image par ligne sur mobile
   ========================================================================== */

.etude { overflow-x: clip; }

/* ---------- En-tête : texte + visuel coupé en diagonale sur le plan jaune ---------- */
.etude-haut__grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(36px, 5vw, 88px);
  align-items: center;
}
.etude-haut--visuel .etude-haut__grille { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
.service-tete .etude-haut__grille > * { max-width: none; }
.etude-haut__surtitre {
  margin-top: clamp(20px, 2.4vw, 32px);
  font-weight: 800;
  font-size: .9375rem;
  letter-spacing: .08em;
  color: var(--gris-texte);
}
.etude-haut__surtitre::before {
  content: "";
  display: inline-block;
  width: 28px;
  height: 3px;
  margin-right: 12px;
  vertical-align: .3em;
  background: var(--ocre);
}
.etude-haut .service-titre { margin-top: 8px; }
.etude-haut__visuel { margin: 0; }
.etude-haut__visuel img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  /* bord gauche à -15°, comme les plans diagonaux du site (tan 15° × 10/16) */
  clip-path: polygon(16.75% 0, 100% 0, 100% 100%, 0 100%);
}

/* ---------- Contenu ---------- */
.etude-contenu { counter-reset: etude; }
.etude-contenu > * { margin: 0; }
.etude-contenu > * + * { margin-top: clamp(20px, 2.2vw, 32px); }
.etude-contenu > .etude-bande { margin-top: 0; }
.etude-contenu > .etude-fiche:first-child { margin-top: clamp(24px, 3vw, 48px); }
.etude-contenu > :last-child:not(.etude-bande) { margin-bottom: var(--section); }

.etude-contenu h2 {
  font-family: var(--police-titre);
  font-weight: 900;
  font-size: clamp(2rem, 3.6vw, 3.25rem);
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: lowercase;
}
/* Barre-curseur : jaune sur fond clair comme sur anthracite, jamais de la couleur du titre */
.etude-contenu h2::after {
  content: "";
  display: inline-block;
  width: .09em;
  height: .84em;
  margin-left: .1em;
  vertical-align: -.07em;
  border-radius: .045em;
  background: var(--jaune);
}
.etude-contenu h3 {
  font-family: var(--police-titre);
  font-weight: 900;
  font-size: clamp(1.25rem, 1.6vw, 1.5rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-transform: lowercase;
}
.etude-contenu p { max-width: 44em; }
.etude-contenu p a, .etude-contenu li a {
  text-decoration-color: var(--jaune);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

/* ---------- Fiche projet : filets jaunes, comme les bénéfices des pages services ---------- */
.etude-contenu .etude-fiche.wp-block-columns {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px clamp(20px, 2.4vw, 40px);
  margin-bottom: clamp(16px, 2vw, 32px);
}
.etude-fiche > .wp-block-column { padding-top: 18px; border-top: 3px solid var(--jaune); }
.etude-fiche p { margin: 0; font-size: 1.0625rem; line-height: 1.45; }
.etude-fiche p + p { margin-top: 6px; }
.etude-contenu .etude-fiche .etude-fiche__label { font-weight: 800; font-size: .9375rem; color: var(--gris-texte); }

/* ---------- Bandes pleine largeur, numérotées ---------- */
.etude-bande {
  margin-inline: calc(50% - 50vw);
  padding: clamp(64px, 7vw, 120px) calc(50vw - 50%);
}
.etude-bande > *, .etude-bande > .wp-block-group__inner-container > * { margin: 0; }
.etude-bande > * + *, .etude-bande > .wp-block-group__inner-container > * + * { margin-top: clamp(20px, 2.2vw, 32px); }
.etude-bande--gris { background: var(--fond-alt); }
.etude-bande--sombre {
  padding-block: calc(clamp(64px, 7vw, 120px) + var(--coupe) * .7);
  background: var(--anthracite);
  color: var(--blanc);
  clip-path: polygon(0 var(--coupe), 100% 0, 100% calc(100% - var(--coupe)), 0 100%);
}
.etude-bande--sombre :focus-visible { outline-color: var(--jaune); }

/* Tête de section : titre à gauche, texte à droite ; numéro de section en surtitre */
.etude-contenu .etude-intro.wp-block-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 16px clamp(40px, 6vw, 112px);
  align-items: end;
  margin-bottom: clamp(16px, 2.4vw, 40px);
}
.etude-intro p { margin: 0; font-size: clamp(1.125rem, 1rem + .4vw, 1.375rem); line-height: 1.5; max-width: 30em; }
.etude-bande--sombre .etude-intro p { color: #E4E4E4; }
.etude-bande h2::before {
  counter-increment: etude;
  content: counter(etude, decimal-leading-zero);
  content: counter(etude, decimal-leading-zero) / "";
  display: block;
  margin-bottom: 16px;
  padding-left: 40px;
  background: linear-gradient(var(--ocre), var(--ocre)) 0 50% / 28px 3px no-repeat;
  font-family: var(--police-texte);
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: .08em;
  color: var(--gris-texte);
}
.etude-bande--sombre h2::before { color: var(--gris-clair); background-image: linear-gradient(var(--jaune), var(--jaune)); }

/* ---------- Galeries et images : grille nette, zoom au clic ---------- */
/* WordPress calcule la largeur des colonnes avec cette variable : on la règle elle, pas gap seul */
.etude-contenu .wp-block-gallery.has-nested-images {
  --wp--style--unstable-gallery-gap: clamp(12px, 1.6vw, 24px);
  gap: var(--wp--style--unstable-gallery-gap);
  align-items: flex-start;
}
.etude-contenu .wp-block-gallery.has-nested-images figure.wp-block-image { background: none; }
.etude-contenu .wp-block-image img { border-radius: 0; }
.etude-contenu .wp-block-gallery figcaption,
.etude-contenu .wp-block-image figcaption,
.etude-contenu .wp-block-video figcaption,
.etude-contenu .wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
  position: static;
  max-height: none;
  margin-top: 12px;
  padding: 0;
  background: none;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
  text-align: left;
  color: inherit;
  text-shadow: none;
}
.etude-contenu .wp-block-gallery.has-nested-images figure.wp-block-image:has(figcaption)::before { display: none; }
.etude-contenu .wp-lightbox-container img { transition: transform .5s var(--sortie); }
@media (hover: hover) {
  .etude-contenu .wp-lightbox-container:hover img { transform: scale(1.015); }
}
.etude-contenu .wp-lightbox-container button { background-color: var(--jaune); }
.etude-contenu .wp-lightbox-container button svg { fill: var(--anthracite); }

/* Agrandissement plein écran : fond anthracite, croix blanche */
.wp-lightbox-overlay .scrim { background-color: var(--anthracite) !important; }
.wp-lightbox-overlay .close-button { fill: var(--blanc) !important; }
.wp-lightbox-overlay .close-button:focus-visible { outline: 3px solid var(--jaune); outline-offset: 2px; }

/* ---------- Vidéos ---------- */
.etude-contenu .wp-block-video { margin: 0; }
.etude-contenu .wp-block-video video { display: block; width: 100%; height: auto; background: #000; }
.etude-contenu .wp-block-columns { gap: clamp(16px, 2.4vw, 40px); }
.etude-contenu .etude-site .wp-block-image { margin: 0; }

/* ---------- Boutons de l'éditeur → bouton anthracite du site (jaune sur anthracite) ---------- */
.etude-contenu .wp-block-buttons { gap: 12px 24px; }
.etude-contenu .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  min-height: 52px;
  padding: 0 1.6em;
  border-radius: 2px;
  background: var(--anthracite);
  color: var(--blanc);
  font-family: var(--police-texte);
  font-weight: 600;
  font-size: 1.0625rem;
  text-decoration: none;
}
.etude-bande--sombre .wp-block-button__link { background: var(--jaune); color: var(--anthracite); }
@media (hover: hover) {
  .etude-contenu .wp-block-button__link:hover { background: var(--jaune); color: var(--anthracite); }
  .etude-bande--sombre .wp-block-button__link:hover { background: var(--blanc); }
}

/* ---------- Tablette ---------- */
@media (max-width: 999px) {
  .etude-haut--visuel .etude-haut__grille { grid-template-columns: minmax(0, 1fr); }
  .etude-haut__visuel { max-width: 640px; }
  .etude-haut__texte { padding-right: 12vw; }   /* le texte ne passe pas sous le plan jaune */
  .etude-contenu .etude-fiche.wp-block-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .etude-contenu .etude-intro.wp-block-columns { grid-template-columns: minmax(0, 1fr); align-items: start; }
}

/* ---------- Mobile ---------- */
@media (max-width: 781px) {
  /* Colonnes empilées : la vidéo verticale et la newsletter gardent une largeur raisonnable */
  .etude-videos > .wp-block-column:first-child { max-width: 320px; }
  .etude-site > .wp-block-column:last-child { max-width: 420px; }
}
@media (max-width: 639px) {
  .etude-contenu h2 { font-size: 1.875rem; }
  .etude-bande h2::before { margin-bottom: 12px; }
}
@media (max-width: 599px) {
  /* Galeries larges (imprimés) : une image par ligne */
  .etude-contenu .etude-pleine.wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) { width: 100%; }
  /* Galeries de 3 (posts, stories) : 3 colonnes plutôt qu'un 2 + 1 bancal */
  .etude-contenu .wp-block-gallery.has-nested-images.columns-3 figure.wp-block-image:not(#individual-image) {
    width: calc((100% - 2 * var(--wp--style--unstable-gallery-gap)) / 3);
  }
  .etude-contenu .wp-lightbox-container button { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .etude-contenu .wp-lightbox-container img { transition: none; }
}