/* ═══════════════════════════════════════════════════════════════
   Prépa ESEO Cours Lumière : styles de composants.
   Les couleurs et la typographie viennent de theme.json ; ce
   fichier ne contient que ce que les blocs ne savent pas faire.
   ═══════════════════════════════════════════════════════════════ */

:root{
  --brand:          var(--wp--preset--color--brand, #509E2F);
  --brand-dark:     var(--wp--preset--color--brand-dark, #3D7A23);
  --brand-light:    var(--wp--preset--color--brand-light, #EDF5E8);
  --berry:          var(--wp--preset--color--berry, #8A1538);
  --berry-light:    var(--wp--preset--color--berry-light, #F7E4E9);
  --eseo-blue:      var(--wp--preset--color--eseo-blue, #31AFE2);
  --eseo-blue-deep: var(--wp--preset--color--eseo-blue-deep, #146287);
  --ink:            var(--wp--preset--color--ink, #353735);
  --ink-soft:       var(--wp--preset--color--ink-soft, #6B706B);
  --line:           var(--wp--preset--color--line, #E0E1DD);
  --bg-alt:         var(--wp--preset--color--bg-alt, #F6F7F5);

  --r: 14px;
  --r-lg: 24px;
  --shadow: 0 2px 4px rgba(0,0,0,.04), 0 12px 32px rgba(0,0,0,.06);
}

/*
 * Modèle de boîte.
 *
 * Omission de la conversion depuis la maquette : sans cette règle, la
 * largeur déclarée s'ajoute au rembourrage. L'en-tête, limité à 1200 px
 * avec 24 px de marge intérieure de chaque côté, occupait donc 1248 px et
 * débordait de 48 px par rapport à toutes les autres sections. Le logo et
 * le bouton de navigation ne s'alignaient plus sur le reste de la page.
 */
*, *::before, *::after{ box-sizing:border-box }

/*
 * Espace sous la dernière section.
 *
 * WordPress applique un écart automatique entre les blocs de premier
 * niveau du gabarit : en-tête, contenu, pied de page. Cela laissait
 * 24 px de blanc entre le bloc « Inscriptions ouvertes » et le pied de
 * page. Nos sections gèrent elles-mêmes leur respiration.
 */
.wp-site-blocks > * + *{ margin-block-start:0 }

/* ─── Images responsives ──────────────────────────────────── */
/*
 * Règle de base indispensable.
 *
 * Chaque <img> porte des attributs width et height, nécessaires pour que
 * le navigateur réserve la place et évite les sauts de mise en page. Mais
 * quand les deux sont présents, ils fixent la taille réellement utilisée
 * et un aspect-ratio en CSS est ignoré.
 *
 * Sans "height:auto", les vignettes de la vie de campus s'affichaient en
 * 227 x 1050 px au lieu de 227 x 290 : étirées sur toute leur hauteur
 * native. C'était l'écart visible entre la maquette et le site en ligne.
 */
img{max-width:100%; height:auto; display:block}

/* Les visuels sont enveloppés dans <picture> pour servir du WebP et la
   bonne largeur selon l'écran. <picture> est inline par défaut : sans ces
   règles, il ne remplit pas son conteneur. */
picture{display:block; width:100%; height:100%}

/* ─── Utilitaires ─────────────────────────────────────────── */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.hp{position:absolute; left:-9999px}

:focus-visible{outline:3px solid var(--eseo-blue); outline-offset:3px; border-radius:6px}

.eyebrow{
  font-size:.76rem; font-weight:700; letter-spacing:.15em;
  text-transform:uppercase; color:var(--berry); margin:0 0 .9em;
}
.lede{font-size:1.13rem; color:var(--ink-soft)}

/* Souligné tracé à main levée sous les titres de section */
.souligne{position:relative}
.souligne::after{
  content:''; display:block; width:min(280px,44%); height:9px; margin:16px auto 0;
  background:var(--eseo-blue);
  border-radius:60% 40% 55% 45% / 100% 100% 60% 60%;
  transform:rotate(-.6deg);
}
.souligne.has-text-align-left::after{margin-left:0}

/* ─── En-tête ─────────────────────────────────────────────── */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.95); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.logo-cl img{height:46px; width:auto}
.logo-eseo img{height:32px; width:auto}
.site-header .wp-block-navigation a{font-size:.95rem; font-weight:600; color:var(--ink)}
.site-header .wp-block-navigation a:hover{color:var(--brand)}

/* Rail d'actions vertical, emprunté au site ESEO */
.rail{position:fixed; right:0; top:50%; transform:translateY(-50%); z-index:45;
      display:flex; flex-direction:column; gap:2px}
.rail a{background:var(--brand-dark); color:#fff; text-decoration:none;
        padding:16px 12px; font-size:.74rem; font-weight:700; letter-spacing:.06em;
        text-transform:uppercase; writing-mode:vertical-rl; text-orientation:mixed;
        transition:background .15s ease}
.rail a:first-child{border-radius:var(--r) 0 0 0}
.rail a:last-child{border-radius:0 0 0 var(--r)}
.rail a:hover{background:var(--brand)}
@media (max-width:1180px){ .rail{display:none} }

/* ─── Héros ───────────────────────────────────────────────── */
/*
 * Structure : un conteneur pleine largeur en position relative, l'image de
 * fond et le voile en position absolue derrière, et un conteneur intérieur
 * qui fixe la colonne de texte.
 *
 * Le conteneur intérieur n'est pas décoratif. Sans lui, la mise en page
 * « contenue » de WordPress applique margin-inline:auto à chaque enfant,
 * qui se centre alors sur SA propre largeur : le titre limité à 19
 * caractères, le paragraphe à 58, la pastille sur son texte. Cinq éléments,
 * cinq abscisses de départ différentes. Les deux groupes sont donc en mise
 * en page « flux » et l'alignement est géré ici.
 */
.hero{
  position:relative; overflow:hidden; color:#fff;
  min-height:min(78vh,660px);
  display:flex; flex-direction:column; justify-content:center;
  padding-block:clamp(72px,10vw,120px);
}

/* Fond et voile couvrent toute la largeur. */
.hero-bg, .hero-veil{
  position:absolute; inset:0; max-width:none !important;
  margin:0 !important; width:100%; height:100%;
}
.hero-bg{z-index:0}
.hero-bg img{width:100%; height:100%; object-fit:cover; object-position:50% 40%}

/* Voile de lisibilité, plus dense à gauche là où se trouve le texte. */
.hero-veil{
  z-index:1; pointer-events:none;
  background:linear-gradient(90deg,
    rgba(0,0,0,.82) 0%, rgba(0,0,0,.68) 40%,
    rgba(0,0,0,.45) 70%, rgba(0,0,0,.28) 100%);
}

/* La colonne de texte : une seule marge automatique, ici et nulle part
   ailleurs. Tous les enfants s'alignent sur son bord gauche. */
.hero-inner{
  position:relative; z-index:2;
  width:100%; max-width:1200px;
  margin-inline:auto; padding-inline:24px;
}
.hero-inner > *{margin-inline:0}
.hero-inner > *:first-child{margin-block-start:0}

.hero h1{max-width:19ch; text-shadow:0 2px 24px rgba(0,0,0,.5)}
.hero-inner > p{max-width:58ch}
.hero p:not(.eyebrow):not(.badge-ligne){text-shadow:0 1px 12px rgba(0,0,0,.55)}

/* Surtitre en bleu ESEO, conformément à la maquette. Il était illisible
   auparavant non pas à cause de la couleur mais d'un voile trop clair. */
.hero .eyebrow{color:var(--eseo-blue); text-shadow:0 1px 10px rgba(0,0,0,.6)}
.hero-soft{display:block; color:var(--eseo-blue); text-shadow:0 2px 24px rgba(0,0,0,.55)}

/* Bouton secondaire : contour blanc sur la photo. */
.hero-btn-ghost .wp-block-button__link{
  background:transparent; color:#fff; border:2px solid #fff;
}
.hero-btn-ghost .wp-block-button__link:hover{background:rgba(255,255,255,.14)}

/* La pastille est un <span> dans un paragraphe : le paragraphe occupe la
   largeur de la colonne, la pastille épouse son texte. Elle ne peut donc
   plus se recentrer sur elle-même. */
.badge-ligne{margin-block:6px 0}
.badge{
  display:inline-block; background:var(--eseo-blue); color:#0d2b38;
  border-radius:100px; padding:9px 22px; font-size:.92rem; font-weight:700;
}

/* ─── Citation ────────────────────────────────────────────── */
/* Le bloc bordeaux décalé est un ::after en z-index négatif : il doit passer
   DERRIÈRE le fond de la carte. Ne pas ajouter isolation:isolate ni z-index
   ici, cela créerait un contexte d'empilement et le bordeaux recouvrirait
   l'intérieur de la carte au lieu de dépasser en bas à droite. */
.quote-card{
  background:var(--bg-alt); border-radius:var(--r-lg);
  padding:clamp(28px,4vw,44px); position:relative;
}
.quote-card::after{
  content:''; position:absolute; inset:14px -14px -14px 14px;
  background:var(--berry); border-radius:var(--r-lg); z-index:-1;
}
.qmark{font-size:4.4rem; font-weight:800; line-height:.66; color:var(--berry);
       display:block; margin:0 0 16px}
.quote-text{font-size:clamp(1.05rem,1.8vw,1.24rem); line-height:1.55; color:var(--berry)}
.quote-who{font-size:.95rem; color:var(--ink-soft)}
.quote-who strong{display:block; color:var(--berry); font-weight:700; font-size:1.08rem}

/* ─── Mosaïque de chiffres ────────────────────────────────── */
.mosaic{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.tile{border-radius:var(--r); padding:30px 26px; min-height:190px;
      display:flex; flex-direction:column; justify-content:flex-end}
.tile-num{background:var(--berry-light)}
.tile-num .tile-figure{font-size:2.5rem; font-weight:800; color:var(--ink);
                       line-height:1; margin:0 0 10px}
.tile-num .tile-label{font-size:.92rem; color:var(--ink-soft); line-height:1.4;
                      font-weight:600; margin:0}
.tile-accent{background:var(--brand)}
.tile-accent .tile-figure{color:#fff}
.tile-accent .tile-label{color:rgba(255,255,255,.95)}
.tile-photo{position:relative; overflow:hidden; padding:0}
.tile-photo picture{position:absolute; inset:0}
.tile-photo img{width:100%; height:100%; object-fit:cover}
.tile-wide{grid-column:span 2}

/* ─── Cartes ──────────────────────────────────────────────── */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
.card{border-radius:var(--r); overflow:hidden; background:#fff;
      border:1px solid var(--line); box-shadow:var(--shadow);
      display:flex; flex-direction:column}
.card-img{aspect-ratio:4/3; overflow:hidden}
.card-img img{width:100%; height:100%; object-fit:cover}
.card-body{padding:26px}
.card-icon{width:44px; height:44px; border-radius:12px; background:var(--brand-light);
           display:grid; place-items:center; margin-bottom:16px}
.card-icon svg{width:22px; height:22px; stroke:var(--brand-dark); fill:none;
               stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round}
.card h3{margin:0 0 .4em}
.card p{margin:0; font-size:.96rem; color:var(--ink-soft)}

/* ─── Parcours ────────────────────────────────────────────── */
.steps{display:grid; grid-template-columns:1fr 1fr; gap:24px}
.step{background:#fff; border:1px solid var(--line); border-radius:var(--r);
      padding:34px; box-shadow:var(--shadow)}
.step-num{font-size:.78rem; font-weight:700; color:var(--berry);
          letter-spacing:.13em; text-transform:uppercase; display:block; margin-bottom:12px}
.step h3{margin:0 0 .5em}
.step ul{margin:16px 0 0; padding-left:20px; color:var(--ink-soft); font-size:.96rem}
.step li{margin-bottom:7px}

.highlight{background:var(--brand-light); border-left:5px solid var(--eseo-blue);
           padding:30px 34px; border-radius:0 var(--r) var(--r) 0}
.highlight p{margin:0; font-size:1.08rem}
.highlight strong{color:var(--brand-dark)}

/* ─── Fab lab et blocs à deux colonnes ────────────────────── */
.split-img{border-radius:var(--r-lg); overflow:hidden}
.split-img img{width:100%; height:100%; object-fit:cover; aspect-ratio:4/3}
.tags{display:flex; flex-wrap:wrap; gap:10px}
.tag{background:var(--brand-light); color:var(--brand-dark); border-radius:100px;
     padding:8px 18px; font-size:.88rem; font-weight:600}

/* ─── Bande vie de campus ─────────────────────────────────── */
.strip{display:grid; grid-template-columns:repeat(5,1fr); gap:16px}
.strip-item{text-align:center}
.strip-img{border-radius:var(--r); overflow:hidden}
.strip-img img{width:100%; aspect-ratio:3/4; object-fit:cover}
.strip-item p{margin:12px 0 0; font-size:.92rem; font-weight:600}

/* ─── Pastilles de domaines ───────────────────────────────── */
.pills{display:flex; gap:12px; flex-wrap:wrap; justify-content:center}
.pill{background:#fff; border:1px solid var(--line); border-radius:100px;
      padding:12px 22px; font-size:.93rem; font-weight:600; color:var(--ink);
      transition:border-color .15s, color .15s}
.pill:hover{border-color:var(--eseo-blue); color:var(--eseo-blue-deep)}

/* ─── Raisons numérotées ──────────────────────────────────── */
.reasons{display:grid; grid-template-columns:repeat(3,1fr); gap:2px;
         background:var(--line); border-radius:var(--r); overflow:hidden}
.reason{background:#fff; padding:30px 26px; transition:background .15s ease}
.reason:hover{background:var(--brand-light)}
.reason b{display:block; font-size:1.5rem; font-weight:800; color:var(--berry); margin-bottom:10px}
.reason h3{font-size:1.02rem; margin:0 0 .35em}
.reason p{margin:0; font-size:.92rem; color:var(--ink-soft)}

/* ─── FAQ ─────────────────────────────────────────────────── */
.faq details{border-bottom:1px solid var(--line); padding:22px 0}
.faq summary{cursor:pointer; font-weight:700; font-size:1.06rem; list-style:none;
             display:flex; justify-content:space-between; align-items:center; gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+'; font-size:1.6rem; color:var(--brand-dark);
                    line-height:1; flex-shrink:0}
.faq details[open] summary::after{content:'\2212'}
.faq details p{margin:14px 0 0; color:var(--ink-soft)}

/* Tableau des frais de scolarité. En-têtes de ligne et de colonne
   explicites : un lecteur d'écran annonce ainsi « 2e tranche, 836 160 »
   plutôt qu'un chiffre isolé. */
.tarifs{width:100%; border-collapse:collapse; margin-top:18px; font-size:.95rem}
.tarifs th, .tarifs td{padding:10px 14px; text-align:left; border-bottom:1px solid var(--line)}
.tarifs thead th{background:var(--brand-light); color:var(--brand-dark);
                 font-weight:700; font-size:.82rem; letter-spacing:.05em;
                 text-transform:uppercase}
.tarifs tbody th{font-weight:600; color:var(--ink)}
.tarifs td:last-child, .tarifs thead th:last-child{text-align:right;
                 font-variant-numeric:tabular-nums; white-space:nowrap}
.tarifs tfoot th, .tarifs tfoot td{background:var(--berry-light); font-weight:700;
                 color:var(--ink); border-bottom:none}
@media (max-width:560px){
  .tarifs{font-size:.88rem}
  .tarifs th, .tarifs td{padding:9px 8px}
}

/* ─── Formulaire ──────────────────────────────────────────── */
.form-band{background:var(--brand-light); border-radius:var(--r-lg);
           padding:clamp(30px,4vw,48px); text-align:left; color:var(--ink)}
.form-band h3{font-size:1.5rem; margin:0 0 .3em; color:var(--brand-dark)}
.form-band > p{color:var(--ink-soft); max-width:52ch}
.fields{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:24px}
.fields input{padding:14px 16px; border:1px solid var(--line); border-radius:10px;
              font:inherit; font-size:.96rem; background:#fff; color:var(--ink); width:100%}
.fields input::placeholder{color:var(--ink-soft)}
.form-band button{margin-top:20px; border:none; cursor:pointer; font-family:inherit}
.form-msg{border-radius:10px; padding:12px 16px; font-size:.94rem; font-weight:600}
.form-msg-ok{background:#fff; color:var(--brand-dark); border:1px solid var(--brand)}
.form-msg-ko{background:#fff; color:var(--berry); border:1px solid var(--berry)}

/* ─── Pied de page ────────────────────────────────────────── */
.site-footer{background:var(--ink); color:rgba(255,255,255,.78); font-size:.94rem}
.site-footer h3{color:#fff; font-size:.78rem; letter-spacing:.13em;
                text-transform:uppercase; font-weight:700; margin:0 0 16px}
.site-footer a{color:rgba(255,255,255,.78); text-decoration:none}
.site-footer a:hover{color:#fff; text-decoration:underline}
.site-footer .legal{border-top:1px solid rgba(255,255,255,.15); padding-top:22px;
                    font-size:.84rem; color:rgba(255,255,255,.52)}

/* ─── Garde-fous face aux marges par défaut des blocs ─────── */
/* WordPress applique une marge haute automatique entre blocs frères.
   Sur les composants ci-dessous, elle casse l'alignement voulu. */
.tile > p, .card p, .reason p, .step p, .strip-item p, .faq details p{
  margin-block-start:0;
}
.hero > *{margin-block-start:0}
.hero > * + *{margin-block-start:1em}
.hero .badge{margin-block-start:6px}
.quote-card > *{margin-block-start:0}
.quote-card .quote-who{margin-block-start:18px}

/* ─── Adaptations écrans ──────────────────────────────────── */
@media (max-width:980px){
  .cards, .reasons{grid-template-columns:1fr}
  .strip{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:1fr}
  .mosaic{grid-template-columns:repeat(2,1fr)}
  .fields{grid-template-columns:1fr}
}
@media (max-width:600px){
  .mosaic{grid-template-columns:1fr}
  .tile-wide{grid-column:span 1}
  .strip{grid-template-columns:1fr 1fr}
}