/* ==========================================================================
   Page hub « Cave à vin enterrée »
   Maquette : Cave enterree - Page Hub.dc.html (v1.0, 15/08/2026)

   Cette feuille ne porte QUE les composants propres à la page (cartes,
   simulateur, tableaux, encadrés). Toute la structure — largeur de contenu,
   bandes alternées, sommaire — reste celle du thème :

     .container            largeur Bootstrap, identique aux autres pages
     .page                 titrage et liens du thème
     .bg-black / .bg-white bandes, avec pt-5 pb-5
     nav.toc.sps           sommaire flottant, piloté par le script de footer.php

   Rien ici ne redéfinit ces classes : les blocs ont donc exactement la même
   taille et le même rythme que sur « Meilleures caves de service ».

   Seul ajout de la maquette au design system : le vert bouteille du parcours
   devis, tenu à l'écart du rouge marchand réservé à l'affiliation.
   ========================================================================== */

.cex-ent {
	--or:          #B8A070;
	--or-fonce:    #8A7248;
	--or-clair:    #E0D6C0;
	--vert:        #1E5445;   /* CTA lead — exclusif au parcours devis */
	--vert-fonce:  #174236;
	--vert-pale:   #F1F6F3;
	--rouge:       #7A1018;   /* marchand / affiliation — réservé */
	--encre:       #1D2327;
	--gris-texte:  #3B4045;
	--gris-doux:   #6C757D;
	--gris-pale:   #9AA0A6;
	--fond-clair:  #F8F8F8;
	--fond-gris:   #F0F0F0;
	--bord:        #E8E4DC;
	--bord-chaud:  #DDD6C8;
	--texte-sombre:#C9C6C0;
	--serif: 'Playfair Display', Georgia, serif;
}

.cex-ent *,
.cex-ent *::before,
.cex-ent *::after { box-sizing: border-box; }

/* Texte courant sur bande noire */
.bg-black .cex-ent__lede,
.bg-black .cex-ent__list li { color: var(--texte-sombre); }
.bg-black .cex-ent__list strong { color: #fff; }

/* --------------------------------------------------------------------------
   Titrage de section — reprend l'eyebrow doré du thème (.page-category)
   -------------------------------------------------------------------------- */
.cex-ent__head { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.cex-ent__eyebrow {
	font-size: 13px; font-weight: 700; letter-spacing: 0.2em;
	text-transform: uppercase; color: var(--or); margin: 0;
}
.cex-ent__eyebrow--lead { color: var(--vert); }
.cex-ent__lede { font-size: 16px; line-height: 1.8; color: var(--gris-texte); max-width: 56em; margin: 0; }

.cex-ent__col { display: flex; flex-direction: column; gap: 30px; }

/* --------------------------------------------------------------------------
   Hero

   L'en-tête utilise le gabarit .page-header p-4 mt-3 mb-3 du thème, sans
   habillage supplémentaire : c'est le même bloc que sur les comparatifs.
   Seule la rangée d'appels à l'action est propre à cette page.
   -------------------------------------------------------------------------- */
.cex-ent__hero-actions { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; justify-content: center; margin-top: 6px; }
.cex-ent__hero-note { font-size: 13px; color: var(--gris-doux); text-align: left; line-height: 1.5; }

.cex-ent__hero-media { display: flex; gap: 24px; align-items: stretch; flex-wrap: wrap; }
.cex-ent__hero-img { flex: 1 1 380px; min-height: 260px; object-fit: cover; }
.cex-ent__brief {
	width: 300px; background: var(--fond-gris); border-top: 3px solid var(--or);
	padding: 22px; display: flex; flex-direction: column; gap: 10px;
}
.cex-ent__brief-title { font-family: var(--serif); font-size: 19px; font-weight: 700; }

/* Gabarit affiché à la place d'un visuel non fourni : nomme le fichier attendu */
.cex-ent__ph {
	width: 100%;
	background: repeating-linear-gradient(45deg, #ECE8E0 0 9px, #E2DDD3 9px 18px);
	border: 1px solid var(--bord-chaud);
	display: flex; align-items: flex-end; padding: 13px;
}
.cex-ent__ph span {
	font-family: ui-monospace, Menlo, monospace;
	font-size: 11px; color: #4C5054; background: #fff; padding: 5px 7px;
}

/* --------------------------------------------------------------------------
   Listes
   -------------------------------------------------------------------------- */
.cex-ent__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.cex-ent__list li { display: flex; gap: 10px; font-size: 15px; line-height: 1.6; color: var(--gris-texte); }
.cex-ent__list li::before { content: '◆'; color: var(--or); flex: none; }

.cex-ent__pros { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 15px; line-height: 1.55; color: var(--gris-texte); }
.cex-ent__pros li { display: flex; gap: 10px; }
.cex-ent__pros li::before { font-weight: 900; flex: none; }
.cex-ent__pros li.is-plus::before { content: '+'; color: var(--vert); }
.cex-ent__pros li.is-moins::before { content: '−'; color: var(--rouge); }

/* --------------------------------------------------------------------------
   Boutons — le vert est réservé au parcours devis
   -------------------------------------------------------------------------- */
.cex-ent .cex-ent__cta {
	display: inline-block;
	background: var(--vert); color: #fff;
	font-size: 15px; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase;
	padding: 17px 30px; text-align: center; text-decoration: none;
	border: 0; cursor: pointer; transition: background .15s;
}
.cex-ent .cex-ent__cta:hover,
.cex-ent .cex-ent__cta:focus { background: var(--vert-fonce); color: #fff; text-decoration: none; }
.cex-ent .cex-ent__cta--block { display: block; width: 100%; font-size: 13px; padding: 15px; }
.cex-ent .cex-ent__cta--ghost {
	background: #fff; color: var(--vert); border: 1px solid var(--vert); font-size: 13px; padding: 15px;
}
.cex-ent .cex-ent__cta--ghost:hover { background: var(--vert-pale); color: var(--vert); }

/* --------------------------------------------------------------------------
   Cartes des trois types
   -------------------------------------------------------------------------- */
.cex-ent__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.cex-ent__card {
	background: #fff; box-shadow: 0 2px 14px rgba(0,0,0,.1);
	display: flex; flex-direction: column; position: relative;
}
.cex-ent__card-body { padding: 26px 24px 24px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.cex-ent__card-img { width: 100%; height: 200px; object-fit: cover; display: block; }
.cex-ent__ph.cex-ent__card-img { border: 0; align-items: flex-end; justify-content: flex-end; padding: 12px; }
.cex-ent__card-sub { font-family: var(--serif); font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--or); }
.cex-ent .cex-ent__card h3 { margin: 0 0 4px; }
.cex-ent__card-foot { margin-top: auto; padding-top: 18px; display: flex; flex-direction: column; gap: 14px; }

.cex-ent__ribbon { position: absolute; top: 18px; left: -8px; z-index: 2; }
.cex-ent__ribbon span {
	display: block; background: var(--or); color: #fff;
	font-size: 12px; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; padding: 9px 16px;
}
.cex-ent__ribbon i { display: block; width: 8px; height: 10px; background: var(--or-fonce); }

.cex-ent__price-box { background: var(--fond-gris); padding: 14px 16px; }
.cex-ent__price-label { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gris-doux); margin-bottom: 2px; }
.cex-ent__price-value { font-family: var(--serif); font-size: 26px; font-weight: 700; }

/* --------------------------------------------------------------------------
   Tableaux — défilement horizontal plutôt que débordement
   -------------------------------------------------------------------------- */
.cex-ent__table-wrap { overflow-x: auto; background: #fff; color: var(--encre); }
.cex-ent__table { width: 100%; border-collapse: collapse; min-width: 700px; font-size: 15px; margin: 0; }
.cex-ent__table thead th {
	background: #101010; color: var(--or);
	font-size: 12px; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase;
	padding: 16px 20px; text-align: left;
}
.cex-ent__table td,
.cex-ent__table tbody th { padding: 15px 20px; border-bottom: 1px solid var(--bord); text-align: left; }
.cex-ent__table tbody th { font-weight: 700; }
.cex-ent__table tbody tr:nth-child(even) { background: var(--fond-clair); }
.cex-ent__table .is-muted { color: var(--gris-doux); }
.cex-ent__table tfoot th,
.cex-ent__table tfoot td {
	font-family: var(--serif); font-size: 19px; font-weight: 700;
	background: var(--fond-gris); border-top: 2px solid var(--or); padding: 18px 20px; text-align: left;
}
.cex-ent__table--fab tbody th { font-family: var(--serif); font-size: 19px; }

/* --------------------------------------------------------------------------
   Encadrés
   -------------------------------------------------------------------------- */
.cex-ent__note { border: 1px solid var(--or); padding: 24px 26px; display: flex; flex-direction: column; gap: 12px; }
.cex-ent__note-title { font-family: var(--serif); font-size: 21px; font-weight: 700; color: var(--or); }
.cex-ent__aside {
	background: var(--fond-gris); border-left: 4px solid var(--rouge);
	padding: 16px 20px; font-size: 15px; line-height: 1.7; color: var(--gris-texte);
}
.cex-ent__aside--lead { border-left-color: var(--vert); }
.cex-ent__cta-box {
	background: #101010; border: 1px solid #2A2A2A; padding: 26px;
	display: flex; flex-direction: column; justify-content: center; gap: 16px; text-align: center;
}
.cex-ent__cta-box p { font-family: var(--serif); font-size: 21px; line-height: 1.4; color: #fff; margin: 0; }

.cex-ent__split { display: grid; grid-template-columns: 1.5fr 1fr; gap: 24px; }
.cex-ent__media-row { display: grid; grid-template-columns: 420px 1fr; gap: 36px; align-items: center; }
.cex-ent__media-row--reverse { grid-template-columns: 1fr 420px; }
.cex-ent__media-row img { width: 100%; height: auto; }
.cex-ent__specs { display: flex; gap: 12px; flex-wrap: wrap; }
.cex-ent__specs span { background: var(--fond-gris); border-top: 2px solid var(--or); padding: 12px 16px; font-size: 14px; }

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */
.cex-ent__faq { display: flex; flex-direction: column; gap: 22px; }
.cex-ent__faq-item { display: flex; flex-direction: column; gap: 8px; }
.cex-ent__faq-item p { font-size: 16px; line-height: 1.8; color: var(--texte-sombre); margin: 0; }
.cex-ent__faq-item hr { border: 0; border-top: 1px solid #2A2A2A; margin: 8px 0 0; }
.cex-ent__faq-cta {
	border: 1px solid var(--or); padding: 26px;
	display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.cex-ent__faq-cta p { font-family: var(--serif); font-size: 22px; color: #fff; margin: 0; }

/* --------------------------------------------------------------------------
   Simulateur
   -------------------------------------------------------------------------- */
.cex-sim { background: #fff; display: grid; grid-template-columns: 1fr 400px; box-shadow: 0 10px 40px rgba(0,0,0,.4); color: var(--encre); }
.cex-sim__form { padding: 30px 32px 32px; display: flex; flex-direction: column; gap: 22px; }
.cex-sim__field { display: flex; flex-direction: column; gap: 10px; border: 0; margin: 0; padding: 0; min-width: 0; }
.cex-sim__legend {
	font-size: 12px; font-weight: 900; letter-spacing: 0.12em;
	text-transform: uppercase; color: var(--gris-doux);
	padding: 0; float: none; width: auto; margin: 0;
}
.cex-sim__row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.cex-sim__opts { display: flex; gap: 10px; }
.cex-sim__opts--3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }

/* Vrais boutons radio, masqués mais focusables : utilisable au clavier */
.cex-sim__opt { position: relative; flex: 1; display: flex; }
.cex-sim__opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.cex-sim__opt label {
	flex: 1; cursor: pointer; margin: 0;
	border: 1px solid var(--bord-chaud); background: #fff;
	padding: 16px 18px; font-size: 15px;
	display: flex; flex-direction: column; gap: 3px;
	transition: border-color .12s, background .12s;
}
.cex-sim__opt--chip label { padding: 14px 17px; text-align: center; justify-content: center; }
.cex-sim__opt input:checked + label {
	border: 2px solid var(--vert); background: var(--vert-pale); padding: 15px 17px; font-weight: 700;
}
.cex-sim__opt--chip input:checked + label { padding: 13px 16px; }
.cex-sim__opt input:focus-visible + label { outline: 2px solid var(--vert); outline-offset: 2px; }
.cex-sim__opt-sub { font-size: 13px; color: var(--gris-doux); font-weight: 400; }
.cex-sim__opt input:checked + label .cex-sim__opt-sub { color: var(--vert); }

.cex-sim__breakdown { border-top: 1px solid var(--bord); padding-top: 20px; display: flex; flex-direction: column; gap: 12px; }
.cex-sim__breakdown-box { background: var(--fond-clair); border-top: 3px solid var(--or); padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; }
.cex-sim__lines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.cex-sim__line { display: flex; flex-direction: column; gap: 5px; }
.cex-sim__line-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 15px; }
.cex-sim__line-range { color: var(--gris-doux); white-space: nowrap; letter-spacing: .18em; }
.cex-sim__bar { display: block; height: 6px; background: var(--or); }
.cex-sim__bar--sur { background: var(--rouge); }

.cex-sim__result { background: var(--fond-clair); border-left: 1px solid var(--bord); padding: 30px; display: flex; flex-direction: column; gap: 20px; }
.cex-ent .cex-sim__total { font-family: var(--serif); font-size: 34px; font-weight: 700; line-height: 1.15; margin: 0; }
.cex-sim__total span { color: var(--or); }
.cex-sim__context { font-size: 13px; color: var(--gris-doux); line-height: 1.5; margin: 0; }
.cex-sim__bounds { background: #fff; border-top: 3px solid var(--or); padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; line-height: 1.6; color: var(--gris-texte); }
.cex-sim__bounds small { color: var(--gris-doux); font-size: 13px; }
.cex-sim__foot { margin-top: auto; display: flex; flex-direction: column; gap: 12px; }
.cex-sim__hint { font-size: 12px; color: var(--gris-doux); text-align: center; margin: 6px 0 0; }
.cex-sim__capture { border-top: 1px solid var(--bord); padding-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.cex-sim__capture label { font-size: 15px; font-weight: 700; margin: 0; }
.cex-sim__capture input[type="email"] {
	border: 1px solid var(--bord-chaud); background: #fff; padding: 14px 16px;
	font-size: 15px; color: var(--encre); outline: none; width: 100%;
}
.cex-sim__capture input[type="email"]:focus { border-color: var(--vert); }
.cex-sim__legal { font-size: 12px; color: var(--gris-doux); line-height: 1.5; margin: 0; }
.cex-sim__sent { background: var(--vert-pale); border-left: 4px solid var(--vert); padding: 18px 20px; display: flex; flex-direction: column; gap: 8px; }
.cex-sim__sent strong { font-size: 15px; color: var(--vert); }
.cex-sim__sent span { font-size: 14px; line-height: 1.6; color: var(--gris-texte); }
.cex-sim__error { font-size: 13px; color: var(--rouge); margin: 0; }
.cex-ent [hidden] { display: none !important; }

/* --------------------------------------------------------------------------
   Bloc devis
   -------------------------------------------------------------------------- */
.cex-ent__devis { display: grid; grid-template-columns: 1fr 340px; gap: 24px; align-items: start; }
.cex-ent__devis-form { background: #fff; box-shadow: 0 2px 18px rgba(0,0,0,.1); border-top: 3px solid var(--vert); padding: 30px 34px 34px; }
.cex-ent__steps { background: #101010; color: #fff; padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.cex-ent__steps-title { font-family: var(--serif); font-size: 20px; font-weight: 700; color: var(--or); }
.cex-ent__steps ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; counter-reset: etape; }
.cex-ent__steps li { display: flex; gap: 12px; font-size: 14px; line-height: 1.55; color: var(--texte-sombre); counter-increment: etape; }
.cex-ent__steps li::before { content: counter(etape); font-family: var(--serif); font-size: 20px; color: var(--or); flex: none; }
.cex-ent__promises { display: flex; gap: 24px; flex-wrap: wrap; justify-content: center; font-size: 14px; color: var(--vert); font-weight: 700; margin: 4px 0 0; list-style: none; padding: 0; }
.cex-ent__promises li::before { content: '◆ '; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1199px) {
	.cex-sim { grid-template-columns: 1fr; }
	.cex-sim__result { border-left: 0; border-top: 1px solid var(--bord); }
	.cex-ent__devis { grid-template-columns: 1fr; }
	.cex-ent__cards { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 991px) {
	.cex-ent__cards { grid-template-columns: 1fr; }
	.cex-ent__split,
	.cex-ent__media-row,
	.cex-ent__media-row--reverse { grid-template-columns: 1fr; }
	.cex-ent__media-row--reverse img,
	.cex-ent__media-row--reverse .cex-ent__ph { order: 2; }
	.cex-ent__brief { width: 100%; }
}

@media (max-width: 767px) {
	.cex-sim__form, .cex-sim__result { padding: 22px 18px; }
	.cex-sim__row,
	.cex-sim__opts--3 { grid-template-columns: 1fr; }
	.cex-sim__opts { flex-direction: column; }
	.cex-ent .cex-sim__total { font-size: 27px; }
	.cex-ent__devis-form { padding: 22px 18px; }
	.cex-ent__faq-cta { flex-direction: column; align-items: stretch; text-align: center; }
}

/* --------------------------------------------------------------------------
   Galerie de réalisations (#galerie)

   Mosaïque en trois colonnes Bootstrap, images aux proportions naturelles
   avec .shadow et .rounded : seul le fond de section est stylé ici — un
   sable clair de la palette, distinct du blanc qui précède et du noir qui
   suit.
   -------------------------------------------------------------------------- */
.galerie-enterree { background: #F0EDE6; }

/* Cadrage des vignettes.
   Le ratio vient du réglage « Format des vignettes » de la page, transmis
   par la variable --galerie-ratio posée sur la section (auto = proportions
   libres, l'empilement Masonry reprend les hauteurs naturelles).
   object-fit recadre sans déformer ; height:auto neutralise l'attribut
   height de la balise, qui figeait la hauteur pendant que w-100 étirait
   la largeur — c'est la protection anti-étirement, elle ne se retire pas. */
.galerie-enterree img {
	height: auto;
	aspect-ratio: var(--galerie-ratio, 4 / 3);
	object-fit: cover;
	display: block;
}

/* Légende en surimpression : titre du chantier + département, posés sur un
   dégradé qui garantit la lisibilité quelle que soit la photo. Le coin
   arrondi et l'ombre sont portés par la figure, qui rogne le dégradé. */
.galerie-item {
	position: relative;
	overflow: hidden;
}
.galerie-item::after {
	content: '';
	position: absolute; inset: 0;
	background: linear-gradient(to top, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0) 45%);
	pointer-events: none;
}
.galerie-item figcaption {
	position: absolute; inset: auto 0 0 0;
	z-index: 2;
	padding: 14px 16px;
	color: #fff;
	display: flex; flex-direction: column; gap: 2px;
}
.galerie-item__titre {
	font-family: var(--serif, Georgia, serif);
	font-size: 17px; font-weight: 700; line-height: 1.3;
}
.galerie-item__dept {
	font-size: 11px; font-weight: 700;
	letter-spacing: 0.14em; text-transform: uppercase;
	color: var(--or, #B8A070);
}

@media print {
	.cex-ent .cex-ent__cta, .cex-sim__capture { display: none; }
	.cex-ent__cta-box { background: #fff; color: #000; }
}