/*
 * Gabarit « Pilier » — pages métier (architecture, corporate, gîtes,
 * immobilier, spectacle). Chargé uniquement sur ce gabarit (functions.php).
 *
 * Référence : maquettes/archi-B-page-de-reference.html et les piliers
 * corporate, gîtes, immobilier (même feuille). Les valeurs par défaut sont
 * celles des 13 maquettes majoritaires ; la page architecture porte la
 * classe « reference » sur son ouverture, qui rétablit les siennes.
 * Classes de la maquette conservées, posées sur des blocs natifs via
 * className. Règle de spécificité : deux classes, ou une classe et un
 * élément (voir CLAUDE.md). Tailles fixes en rem (racine 16 px).
 */

/* ---------- Ouverture : H1 + texte ---------- */
.wp-block-group.ouvre{grid-template-columns:1fr 1.3fr;gap:56px;padding:70px 0 46px;align-items:start}
.ouvre h1{font-size:clamp(1.85rem,4vw,3rem);font-weight:200;line-height:1.07;letter-spacing:-.038em;max-width:14ch}
.ouvre.reference h1{font-size:clamp(1.95rem,4.2vw,3.2rem);max-width:13ch}
.ouvre h1 strong{font-weight:500}
.ouvre p.chapo{font-size:clamp(1.05rem,1.6vw,1.24rem);line-height:1.6;letter-spacing:-.016em;max-width:46ch;margin-bottom:16px}

/* ---------- Mosaïque d'ouverture : 2fr / 1fr, la grande sur deux rangs ---------- */
.wp-block-group.ouverture{display:grid;grid-template-columns:2fr 1fr;gap:2px;align-items:start;margin-top:10px}
.ouverture .wp-block-image{position:relative;margin:0;aspect-ratio:3/2;overflow:hidden;background:var(--wp--preset--color--attente)}
.ouverture .wp-block-image:first-child{grid-row:span 2}
.ouverture .wp-block-image img,
.jalon .wp-block-image img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ouverture .legende{grid-column:1/-1;max-width:1480px;margin:0 auto;width:100%;padding:12px 40px 0;gap:12px;
	font-family:var(--wp--preset--font-family--mono);font-size:.625rem;letter-spacing:.08em;color:var(--wp--preset--color--gris)}
.legende p{margin:0;max-width:none;font-size:inherit;line-height:normal;color:inherit}

/* ---------- Sections à deux colonnes ---------- */
.wp-block-group.deux{grid-template-columns:.8fr 1.2fr;gap:56px;padding:72px 0;border-bottom:1px solid var(--wp--preset--color--filet);align-items:start}
.wp-block-group.deux.une-colonne{display:block}
.wp-block-group.deux.sans-filet{border-bottom:0}
.deux h2{font-size:clamp(1.25rem,2.3vw,1.8rem);font-weight:300;letter-spacing:-.03em;line-height:1.15;max-width:19ch}
.wp-block-post-content:has(.ouvre.reference) .deux:not(.une-colonne) h2{max-width:18ch}
.une-colonne h2{max-width:26ch;margin-bottom:34px}
.deux p.sous{display:block;margin:0 0 12px;max-width:none;font-family:var(--wp--preset--font-family--mono);font-size:.625rem;line-height:normal;
	letter-spacing:.12em;text-transform:uppercase;color:var(--wp--preset--color--ardoise)}
.deux p a{border-bottom:1px solid var(--wp--preset--color--filet)}

/* Liste à tirets */
.wp-block-list.liste{list-style:none;margin:6px 0 0;padding:0}
.liste li{position:relative;padding:13px 0 13px 22px;border-bottom:1px solid var(--wp--preset--color--filet);font-size:.90625rem;line-height:1.65;color:var(--wp--preset--color--encre-douce)}
.liste li::before{content:"";position:absolute;left:0;top:21px;width:9px;height:1px;background:var(--wp--preset--color--ardoise)}
.liste li strong{font-weight:500;color:var(--wp--preset--color--encre)}

/* ---------- Chronologie en jalons ---------- */
.wp-block-group.chrono{padding:8px 0 0}
.wp-block-group.jalon{grid-template-columns:168px 1fr 1.02fr;gap:42px;padding:40px 0;border-top:1px solid var(--wp--preset--color--filet);align-items:start}
.wp-block-group.jalon:first-child{border-top:0}
.jalon p.quand{margin:0;max-width:none;font-family:var(--wp--preset--font-family--mono);font-size:.625rem;letter-spacing:.13em;text-transform:uppercase;
	color:var(--wp--preset--color--ardoise);line-height:1.8}
.jalon .quand strong{display:block;margin-top:7px;font-family:var(--wp--preset--font-family--sans);font-size:1.45rem;font-weight:300;letter-spacing:-.03em;
	color:var(--wp--preset--color--encre);text-transform:none;line-height:1.1}
.jalon h3{font-size:clamp(1.1rem,1.9vw,1.42rem);font-weight:400;letter-spacing:-.026em;line-height:1.2;margin-bottom:11px}
.jalon p{max-width:56ch}
.jalon p + p{margin-top:13px}
.jalon .wp-block-image{position:relative;margin:0;aspect-ratio:3/2;overflow:hidden;background:var(--wp--preset--color--attente);align-self:start}
.jalon p.recu{margin:0;max-width:none;font-family:var(--wp--preset--font-family--mono);font-size:.65625rem;color:var(--wp--preset--color--gris);line-height:2;
	border-left:2px solid var(--wp--preset--color--ardoise);padding-left:16px}
.jalon .recu strong{display:block;margin-bottom:8px;color:var(--wp--preset--color--encre);letter-spacing:.1em;text-transform:uppercase;font-size:.59375rem;font-weight:400}

/* ---------- Cartes de prestations (corporate) ---------- */
.wp-block-group.presta{grid-template-columns:repeat(3,1fr);gap:2px;margin-top:8px}
.presta > .wp-block-group{background:var(--wp--preset--color--papier-2);padding:28px 26px 32px}
.presta h3{font-size:1.05rem;font-weight:400;letter-spacing:-.02em;line-height:normal;margin-bottom:11px}
.presta p{max-width:62ch;font-size:.84375rem;line-height:1.85;color:var(--wp--preset--color--encre-douce)}
.presta p.etiquette{display:block;max-width:none;margin-top:15px;font-family:var(--wp--preset--font-family--mono);font-size:.59375rem;line-height:normal;
	letter-spacing:.12em;text-transform:uppercase;color:var(--wp--preset--color--ardoise)}

/* ---------- Image dans une colonne de section ---------- */
.deux .wp-block-image{position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--wp--preset--color--attente)}
.deux .wp-block-image img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Image posée au milieu d'une colonne (entre deux questions, avant une liste) : même respiration en dessous qu'au-dessus (26 px). */
.deux .wp-block-image + p,.deux .wp-block-image + .wp-block-list{margin-top:1.625rem}
.wp-block-post-content:has(.ouvre.reference) .deux .wp-block-image + .wp-block-list{margin-top:1.625rem} /* l'emporte sur le 8 px de la page de référence */

/* ---------- Pastilles (« matériel » : .mat ; plateformes, objectifs : .plates) ---------- */
.wp-block-list.mat,.wp-block-list.plates{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 0;padding:0;list-style:none}
.wp-block-post-content:has(.ouvre.reference) .wp-block-list.mat{margin-top:8px}
.mat li,.plates li{font-family:var(--wp--preset--font-family--mono);font-size:.6875rem;line-height:normal;color:var(--wp--preset--color--gris);
	border:1px solid var(--wp--preset--color--filet);padding:8px 13px}

/* ---------- Références ---------- */
.wp-block-list.logos{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin:0;padding:0;list-style:none;
	background:var(--wp--preset--color--filet);border:1px solid var(--wp--preset--color--filet)}
.logos li{display:flex;align-items:center;justify-content:center;padding:26px 12px;background:var(--wp--preset--color--papier);
	font-family:var(--wp--preset--font-family--mono);font-size:.6875rem;line-height:normal;color:var(--wp--preset--color--gris);text-align:center}

/* ---------- Chantiers photographiés : deux images 3/2 sous les références (essai validé par Eric le 19/10/2026) ---------- */
.deux .wp-block-group.chantiers{grid-template-columns:1fr 1fr;gap:3px;margin-top:1.5rem}
.chantiers .wp-block-image{margin:0}
@media (max-width:600px){.deux .wp-block-group.chantiers{grid-template-columns:1fr}}

/* ---------- La salle (spectacle) : bande sombre où vivent les photos ---------- */
.wp-block-group.salle{margin-top:0;background:var(--wp--preset--color--nuit);color:#EDEFEE;padding-top:64px;padding-bottom:86px}
.salle .intitule{align-items:baseline;gap:24px;padding-bottom:18px;border-bottom:1px solid rgba(237,239,238,.16);margin-bottom:34px}
.salle h2{font-size:clamp(1.2rem,2.3vw,1.7rem);font-weight:300;letter-spacing:-.028em;line-height:normal;color:#EDEFEE}
.salle .intitule p{margin:0;max-width:none;font-family:var(--wp--preset--font-family--mono);font-size:.625rem;line-height:normal;
	letter-spacing:.12em;text-transform:uppercase;color:rgba(237,239,238,.55)}
.wp-block-group.scene{display:grid;grid-template-columns:repeat(6,1fr);gap:3px}
.scene .wp-block-image{position:relative;margin:0;overflow:hidden;background:#15171A;aspect-ratio:3/2}
.scene .wp-block-image img{width:100%;height:100%;object-fit:cover;display:block}
:where(body:not(.editor-styles-wrapper)) .scene .wp-block-image img{opacity:0;transform:scale(1.03);transition:opacity 1.1s ease,transform 1.4s var(--wp--custom--courbe)}
.scene .wp-block-image.vu img{opacity:1;transform:none}
/* Largeur choisie dans l'éditeur (styles du bloc Image) : 4, 3 ou 2 colonnes sur 6. */
.scene .is-style-large{grid-column:span 4}
.scene .is-style-moitie{grid-column:span 3}
.scene .is-style-tiers{grid-column:span 2}
.scene .wp-element-caption{position:absolute;left:0;right:0;bottom:0;margin:0;padding:34px 18px 14px;
	font-family:var(--wp--preset--font-family--mono);font-size:.59375rem;letter-spacing:.09em;line-height:normal;color:rgba(237,239,238,.88);
	background:linear-gradient(180deg,rgba(10,11,12,0),rgba(10,11,12,.8));opacity:0;transition:opacity .45s ease}
.scene .wp-block-image:hover .wp-element-caption{opacity:1}
.salle p.apres{margin-top:40px;max-width:58ch;font-size:.90625rem;line-height:1.9;color:rgba(237,239,238,.74)}
.salle .apres strong{color:#EDEFEE;font-weight:400}

/* ---------- 900 px et moins ---------- */
@media (max-width:900px){
	.wp-block-group.ouverture{grid-template-columns:1fr}
	.ouverture .wp-block-image:first-child{grid-row:auto}
	.ouverture .legende{padding:12px 20px 0}
	.wp-block-group.ouvre,.wp-block-group.deux{grid-template-columns:1fr;gap:22px}
	.wp-block-group.jalon{grid-template-columns:1fr;gap:18px;padding:32px 0}
	.wp-block-list.logos{grid-template-columns:repeat(2,1fr)}
	.wp-block-group.presta{grid-template-columns:1fr}
	.wp-block-group.scene{grid-template-columns:1fr;gap:2px}
	.scene .is-style-large,.scene .is-style-moitie,.scene .is-style-tiers{grid-column:span 1}
	.wp-block-group.salle{padding-top:44px;padding-bottom:56px}
	.scene .wp-element-caption{opacity:1}
}

/* ---------- Réduction des animations ---------- */
@media (prefers-reduced-motion:reduce){
	.scene .wp-block-image img{opacity:1;transform:none}
}