/*
Theme Name: École de Camblain
Theme URI: https://www.saint-jean-baptiste-de-la-salle.fr/
Description: Thème de l'École Saint-Jean-Baptiste de La Salle, Camblain-l'Abbé. Collège et lycée de garçons en internat.
Version: 1.0.0
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 7.4
Text Domain: camblain
License: GNU General Public License v2 or later
*/

/* ---------- Généralités ---------- */
html { scroll-behavior: smooth; }
[id] { scroll-margin-top: 24px; }
img { max-width: 100%; height: auto; }
.wp-site-blocks > main { margin-top: 0; }

.section { padding-top: 88px; padding-bottom: 88px; }
.section.compacte { padding-top: 48px; padding-bottom: 48px; }
@media (max-width: 781px) { .section { padding-top: 56px; padding-bottom: 56px; } }

.surtitre { font-weight: 700; font-size: 15px !important; letter-spacing: 1px; text-transform: uppercase; color: var(--wp--preset--color--primaire); margin-bottom: -6px !important; }
.surtitre-clair { color: var(--wp--preset--color--accent); }
.texte-doux { color: var(--wp--preset--color--texte); }

/* Rangée titre + texte, alignés en bas */
.entete-section { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px 48px; }
.entete-section > * { margin: 0 !important; }
.entete-section > .wp-block-group { max-width: 40rem; }
.entete-section > p { max-width: 32rem; }

/* Grilles responsives */
.grille-2, .grille-3, .grille-4 { display: grid; gap: 18px; }
.grille-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 32px 56px; align-items: center; }
.grille-3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grille-4 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.grille-2 > *, .grille-3 > *, .grille-4 > * { margin: 0 !important; min-width: 0; }

/* Cartes */
.carte { background: #fff; border: 1px solid var(--wp--preset--color--bordure); border-radius: 22px; overflow: hidden; display: flex; flex-direction: column; color: var(--wp--preset--color--nuit); }
.carte > * { margin: 0 !important; }
.carte > figure img { display: block; width: 100%; height: 220px; object-fit: cover; }
.carte .corps { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 8px; flex-grow: 1; }
.carte .corps > * { margin: 0 !important; }
.carte .corps p { color: var(--wp--preset--color--texte); }
.carte .numero { font-family: var(--wp--preset--font-family--bricolage); font-weight: 800; color: var(--wp--preset--color--primaire) !important; font-size: 15px; }
.carte .lien-fort { font-weight: 700; margin-top: auto !important; }
.carte .lien-fort a { text-decoration: none; }
.carte .libelle { font-size: 13px !important; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--wp--preset--color--primaire) !important; }
.carte.sans-bord { border: 0; }

/* Photos arrondies */
.arrondi img { border-radius: 20px; display: block; width: 100%; object-fit: cover; }
.h-200 img { height: 200px; } .h-220 img { height: 220px; } .h-240 img { height: 240px; } .h-260 img { height: 260px; } .h-300 img { height: 300px; } .h-520 img { height: 520px; }
@media (max-width: 781px) { .h-520 img { height: 320px; } }
.pos-haut img { object-position: center 25%; }
.pos-milieu-haut img { object-position: center 35%; }
.pos-bas img { object-position: center 65%; }
.pos-gauche img { object-position: 25% center; }
.pos-droite img { object-position: 72% 35%; }

/* Mosaïques */
.mosaique { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 220px; gap: 14px; }
.mosaique > * { margin: 0 !important; min-width: 0; height: 100%; }
.mosaique figure img { width: 100%; height: 100%; object-fit: cover; border-radius: 20px; display: block; }
.mosaique .grand { grid-column: span 2; grid-row: span 2; }
.mosaique .large { grid-column: span 2; }
@media (max-width: 781px) {
  .mosaique { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 170px; }
}

.mosaique-hero { display: grid; grid-template-columns: minmax(0, 1fr) 263px; grid-template-rows: 190px 190px 180px; gap: 14px; }
.mosaique-hero > * { margin: 0 !important; min-width: 0; height: 100%; }
.mosaique-hero img { width: 100%; height: 100%; object-fit: cover; border-radius: 24px; display: block; }
.mosaique-hero .communion { grid-column: 2; grid-row: 1 / 3; }
.mosaique-hero .bandeau { grid-column: 1 / 3; }
.mosaique-hero .bandeau img { object-position: 72% 35%; }
@media (max-width: 600px) {
  .mosaique-hero { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-rows: auto; }
  .mosaique-hero > figure img { height: 220px; }
  .mosaique-hero .communion, .mosaique-hero .bandeau { grid-column: auto; grid-row: auto; }
  .mosaique-hero .communion img { height: auto; aspect-ratio: 2 / 3; }
}

.duo-photos { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; }
.duo-photos > * { margin: 0 !important; }
.duo-photos .portrait img { width: 220px; height: 220px; object-fit: cover; object-position: center 25%; border-radius: 24px; display: block; }
.duo-photos .paysage { flex: 1 1 260px; min-width: 0; }
.duo-photos .paysage img { width: 100%; height: 220px; object-fit: cover; object-position: center 30%; border-radius: 24px; display: block; }

/* Pastilles */
.pastilles { list-style: none; padding: 0 !important; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.pastilles li { background: var(--wp--preset--color--fond); border: 1px solid var(--wp--preset--color--bordure); border-radius: 999px; padding: 8px 16px; font-weight: 700; font-size: 15px; }
.pastilles.sur-fond li { background: #fff; }
.pastilles.premiere-jaune li:first-child { background: var(--wp--preset--color--accent); border-color: var(--wp--preset--color--accent); }
.pastilles.pointilles li { background: #fff; border: 1.5px dashed #8A96B2; font-weight: 600; color: var(--wp--preset--color--texte); }

/* Liste à coches */
.coches { list-style: none; padding: 0 !important; display: flex; flex-direction: column; gap: 10px; }
.coches li { padding-left: 34px; position: relative; }
.coches li::before { content: ""; position: absolute; left: 0; top: 2px; width: 22px; height: 22px; background: no-repeat center / 22px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B2F6B' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }

/* Chiffres clés */
.chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 24px; }
.chiffres > * { margin: 0 !important; }
.chiffres .chiffre { font-family: var(--wp--preset--font-family--bricolage); font-weight: 800; font-size: 44px !important; line-height: 1; color: var(--wp--preset--color--primaire); margin: 0 0 4px !important; }
.chiffres p { margin: 0; color: var(--wp--preset--color--texte); }

/* Encarts colorés */
.encart { border-radius: 28px; padding: 44px !important; }
.encart > * { margin-top: 0; }
@media (max-width: 600px) { .encart { padding: 28px !important; } }
.encart-photo { border-radius: 28px; overflow: hidden; display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.encart-photo > * { margin: 0 !important; }
.encart-photo > .wp-block-group { padding: 44px; display: flex; flex-direction: column; justify-content: center; gap: 16px; }
.encart-photo > .wp-block-group > * { margin: 0 !important; }
.encart-photo figure img { width: 100%; height: 100%; min-height: 300px; object-fit: cover; display: block; }

/* Citation du directeur */
.citation { font-family: var(--wp--preset--font-family--bricolage); font-weight: 500; font-size: var(--wp--preset--font-size--grand) !important; line-height: 1.35; }

/* Témoignages */
.temoignage figure img { height: 220px; object-fit: cover; object-position: center 25%; }
.temoignage .citation-ancien { font-size: 18px; color: var(--wp--preset--color--nuit) !important; }
.temoignage .signature { font-size: 15px; color: var(--wp--preset--color--legende) !important; }

/* Liste horaires (journée type) */
.journee { list-style: none; padding: 0 !important; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(8, auto); grid-auto-flow: column; column-gap: 32px; }
.journee li { padding: 10px 0; border-bottom: 1px solid #3A4E8A; display: flex; gap: 16px; }
.journee li strong { width: 60px; flex-shrink: 0; color: var(--wp--preset--color--accent); }
@media (max-width: 600px) { .journee { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; } }

/* Étapes numérotées */
.etape .numero-rond { width: 44px; height: 44px; border-radius: 999px; background: var(--wp--preset--color--primaire); color: #fff !important; display: flex; align-items: center; justify-content: center; font-weight: 800; margin: 0 !important; }
.etape:last-child .numero-rond { background: var(--wp--preset--color--accent); color: var(--wp--preset--color--nuit) !important; }
.etape { padding: 26px; }
.etape > * { margin: 0 !important; }

/* FAQ */
.faq .wp-block-details { border-top: 1px solid var(--wp--preset--color--bordure); padding: 18px 0; }
.faq .wp-block-details:last-child { border-bottom: 1px solid var(--wp--preset--color--bordure); }
.faq summary { font-weight: 700; font-size: 19px; cursor: pointer; }
.faq .wp-block-details p { color: var(--wp--preset--color--texte); margin-top: 12px; }

/* Infos (encadrés à droite de l'admission) */
.infos { display: flex; flex-direction: column; gap: 18px; }
.infos > * { margin: 0 !important; border-radius: 24px; padding: 28px !important; }
.infos .prix { font-family: var(--wp--preset--font-family--bricolage); font-weight: 800; font-size: 40px !important; line-height: 1; color: var(--wp--preset--color--primaire); }

/* Section sombre : liens et listes en clair */
.has-nuit-background-color a, .has-primaire-background-color a { color: inherit; }
.liste-liturgie { list-style: none; padding: 0 !important; }
.liste-liturgie li { display: flex; gap: 20px; padding: 14px 0; border-top: 1px solid #2B3757; }
.liste-liturgie li:last-child { border-bottom: 1px solid #2B3757; }
.liste-liturgie li strong { width: 110px; flex-shrink: 0; color: var(--wp--preset--color--accent); }

/* Trajets */
.trajets { list-style: none; padding: 0 !important; }
.trajets li { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-top: 1px solid var(--wp--preset--color--nuit); }
.trajets li:last-child { border-bottom: 1px solid var(--wp--preset--color--nuit); }

/* En-tête */
.bandeau-haut { font-size: 14px; padding-top: 8px; padding-bottom: 8px; }
.bandeau-haut a { color: #fff; text-decoration: none; }
.bandeau-haut .wp-block-group { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; align-items: center; }
.bandeau-haut .wp-block-group > * { margin: 0 !important; }
.entete-principale { padding-top: 16px; padding-bottom: 16px; border-bottom: 1px solid #E3E7EF; }
.entete-principale > .wp-block-group { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 28px; }
.entete-principale > .wp-block-group > * { margin: 0 !important; }
.marque { display: flex; align-items: center; gap: 14px; }
.marque > * { margin: 0 !important; }
.marque .logo-insigne img { width: 60px; height: 60px; object-fit: contain; display: block; }
.marque .sous-titre { font-size: 14px !important; color: var(--wp--preset--color--legende); }
.menu-et-boutons { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; }
.menu-et-boutons > * { margin: 0 !important; }
.menu-et-boutons .wp-block-navigation a { text-decoration: none; }
.wp-block-button.is-style-outline .wp-block-button__link { border: 1.5px solid var(--wp--preset--color--nuit); color: var(--wp--preset--color--nuit); background: transparent; padding: 12px 22px; }
.boutons-entete .wp-block-button__link { padding: 11px 20px; font-size: 15px; }

/* Pied de page */
.pied a { color: #D7DDEC; }
.pied .colonnes-pied { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 32px; }
.pied .colonnes-pied > * { margin: 0 !important; }
.pied .colonnes-pied p { margin: 0 0 8px; color: #D7DDEC; }
.pied .colonnes-pied .titre-colonne { color: #fff; font-weight: 700; }
.pied .logo-pied img { width: 72px; height: 72px; object-fit: contain; background: #fff; border-radius: 18px; padding: 4px; box-sizing: border-box; }
.pied .bas-de-page { border-top: 1px solid #2B3757; padding-top: 20px; margin-top: 40px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 14px; color: #D7DDEC; }
.pied .bas-de-page > * { margin: 0 !important; }

/* Contact */
.coordonnees { background: #fff; border-radius: 22px; padding: 26px !important; }
.coordonnees > * { margin: 0 0 10px !important; }
.zone-formulaire { background: #fff; border-radius: 28px; padding: 40px !important; }
.zone-formulaire > * { margin-top: 0; }
@media (max-width: 600px) { .zone-formulaire { padding: 24px !important; } }

/* Bloc vidéo */
.video-placeholder { border-radius: 28px; overflow: hidden; }
.video-placeholder iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; border-radius: 28px; }

/* Compléments */
.grille-2.aligne-haut { align-items: start; }
.pastille-intro { display: inline-block; align-self: flex-start; background: #fff; border: 1px solid var(--wp--preset--color--bordure); border-radius: 999px; padding: 6px 14px; font-size: 14px !important; font-weight: 600; color: var(--wp--preset--color--primaire); }
.mosaique-duo, .mosaique-suivi { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 200px; }
.mosaique-duo .large, .mosaique-suivi .large { grid-column: span 2; grid-row: span 1; height: 100%; }
.mosaique-duo .large img, .mosaique-suivi .large img { object-position: center 40%; }
.badge-cambridge { display: flex; align-items: center; gap: 18px; background: #fff; border-radius: 20px; padding: 16px 22px; align-self: flex-start; width: fit-content; }
.badge-cambridge > * { margin: 0 !important; }
.badge-cambridge .logo-cambridge img { width: 80px; height: auto; display: block; }
.pictogramme { font-size: 28px !important; line-height: 1; }
.consigne { border: 2px dashed var(--wp--preset--color--accent); border-radius: 14px; padding: 14px 18px; font-size: 15px !important; }
.has-fond-background-color .consigne, .zone-formulaire .consigne { color: var(--wp--preset--color--texte); }
.trajets-clairs li { border-color: #3A4E8A !important; }
.colonne-etroite { max-width: 880px !important; }
.infos > .has-background { border-radius: 24px; }
.sports figure figcaption { text-align: left; font-family: var(--wp--preset--font-family--bricolage); font-size: 22px; margin-top: 10px; color: var(--wp--preset--color--nuit); }
.encart-photo .wp-block-heading { margin: 0; }
.encart.has-accent-background-color, .encart-photo.has-accent-background-color { color: var(--wp--preset--color--nuit); }
.encart.has-fond-background-color { padding: 10px !important; }
.encart.has-fond-background-color > .wp-block-group { padding: 34px; }
.encart.has-fond-background-color > .mosaique { padding: 0; }
.carte.etape { border: 0; }
.has-nuit-background-color .wp-block-image figcaption, .has-primaire-background-color .wp-block-image figcaption { color: inherit; }
.wp-block-navigation__responsive-container-open { color: var(--wp--preset--color--nuit); }