/* ==========================================================================
   etape5.css — classes produites par la conversion WPBakery (étape 5)
   Thème enfant Bretagne VTC — 0.1.4 — 09/09/2026

   Chargée après theme.css, dont elle dépend : elle ne déclare aucune
   variable et ne redéfinit aucun composant existant.

   NE CONTIENT PAS de composant bouton : la conversion réutilise le
   .bvtc-bouton du thème. Voir la note au §4.

   Les largeurs, gouttières et hauteurs ci-dessous ne sont pas génériques.
   Elles correspondent exactement à ce que contient l'export du 09/09/2026 :
   colonnes 1/2, 1/3, 2/3, 1/4, 3/4 ; gap 30, 20, 10 ; espaceurs de 20 à
   300 px. Rien de plus.
   ========================================================================== */

/* --- Rangées et colonnes ------------------------------------------------
   La gouttière est portée par la RANGÉE dans --bvtc-gap, et les colonnes
   calculent leur largeur à partir de cette valeur locale. Sans cela, une
   rangée en gap="10" calculerait ses colonnes sur la gouttière par défaut
   et la dernière passerait à la ligne.
   ----------------------------------------------------------------------- */

.bvtc-rangee {
	--bvtc-gap: var(--bv-gouttiere);
	display: flex;
	flex-wrap: wrap;
	gap: var(--bvtc-gap);
	align-items: flex-start;
	width: 100%;
	margin-inline: auto;
}

.bvtc-rangee--gap-10 { --bvtc-gap: calc(var(--bv-gouttiere) / 2); }
.bvtc-rangee--gap-20 { --bvtc-gap: calc(var(--bv-gouttiere) * 0.75); }
.bvtc-rangee--gap-30 { --bvtc-gap: var(--bv-gouttiere); }

.bvtc-rangee--centre { align-items: center; }

/* stretch_row et stretch_row_content : la rangée sort de la largeur de
   lecture. Ne suppose aucun conteneur particulier. */
.bvtc-rangee--pleine {
	width: 100vw;
	max-width: 100vw;
	margin-left: 50%;
	transform: translateX(-50%);
}

.bvtc-colonne {
	flex: 1 1 100%;
	min-width: 0;   /* sans quoi un tableau ou une image large déborde */
}

/* Chaque colonne retire la part de gouttière qui lui revient : sans ce
   calc(), deux moitiés plus un gap dépassent 100 % et la seconde tombe. */
@media (min-width: 768px) {
	.bvtc-colonne--1-1 { flex-basis: 100%; }
	.bvtc-colonne--1-2 { flex-basis: calc(50%      - (var(--bvtc-gap) / 2)); }
	.bvtc-colonne--1-3 { flex-basis: calc(33.3333% - (var(--bvtc-gap) * 2 / 3)); }
	.bvtc-colonne--2-3 { flex-basis: calc(66.6666% - (var(--bvtc-gap) / 3)); }
	.bvtc-colonne--1-4 { flex-basis: calc(25%      - (var(--bvtc-gap) * 3 / 4)); }
	.bvtc-colonne--3-4 { flex-basis: calc(75%      - (var(--bvtc-gap) / 4)); }
}

/* Palier intermédiaire : les quarts en demis plutôt qu'en pleine largeur,
   sinon une rangée de quatre vignettes fait quatre écrans de haut. */
@media (min-width: 480px) and (max-width: 767.98px) {
	.bvtc-colonne--1-4 { flex-basis: calc(50% - (var(--bvtc-gap) / 2)); }
}

/* --- Blocs de texte ----------------------------------------------------- */

.bvtc-texte > :first-child { margin-top: 0; }
.bvtc-texte > :last-child  { margin-bottom: 0; }

/* Les tableaux hérités du contenu WPBakery peuvent être larges. */
.bvtc-texte table { display: block; overflow-x: auto; max-width: 100%; }

/* --- Images -------------------------------------------------------------
   Seule la valeur alignment="center" existe dans le contenu ; les trois
   sont prévues au cas où une page en gagnerait une.
   ----------------------------------------------------------------------- */

.bvtc-figure { margin: 0 0 20px; }

.bvtc-figure img {
	display: block;
	height: auto;
	max-width: 100%;
	border-radius: var(--bv-rayon-carte);
}

.bvtc-figure--center { text-align: center; }
.bvtc-figure--center img { margin-inline: auto; }
.bvtc-figure--right  { text-align: right; }
.bvtc-figure--right img { margin-left: auto; }
.bvtc-figure--left   { text-align: left; }

.bvtc-figure a { display: inline-block; }

/* --- Boutons ------------------------------------------------------------
   AUCUN composant bouton n'est défini ici. Le thème en a déjà un —
   .bvtc-bouton, avec --encre et --ligne — et en ajouter un second sous un
   autre nom donnerait deux composants concurrents dans le même thème.

   La conversion émet donc les classes du thème. Correspondance retenue :
       mulled-wine (130), black (2), danger (1)  ->  .bvtc-bouton--encre
       inverse (1)                               ->  .bvtc-bouton--ligne
   shape="square" (5) est ignoré : la maquette n'a que des pilules.

   Seule la mise en page de la ligne qui porte le bouton est définie ici,
   parce qu'un inline-block ne se centre pas tout seul.
   ----------------------------------------------------------------------- */

.bvtc-bouton-bloc { margin: 20px 0; }
.bvtc-bouton-bloc--centre { text-align: center; }
.bvtc-bouton-bloc--droite { text-align: right; }

/* --- Accordéons — <details> / <summary> ---------------------------------
   207 des 256 blocs portaient style="round".
   Le focus clavier est déjà traité par la règle :focus-visible globale de
   theme.css — ne rien redéfinir ici.
   ----------------------------------------------------------------------- */

.bvtc-accordeon {
	border: 1px solid var(--bv-filet);
	border-radius: var(--bv-rayon-carte);
	background: var(--bv-fond-carte);
	margin-bottom: 12px;
}

.bvtc-accordeon > summary {
	/* les deux lignes suivantes retirent le triangle par défaut */
	list-style: none;
	cursor: pointer;

	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 20px;
	min-height: 44px;          /* cible tactile */
	font-weight: 500;
	color: var(--bv-encre);
}

.bvtc-accordeon > summary::-webkit-details-marker { display: none; }

/* Chevron dessiné en CSS : aucune image, aucune police d'icônes. */
.bvtc-accordeon > summary::after {
	content: "";
	flex: 0 0 auto;
	width: 0.55em;
	height: 0.55em;
	border-right: 2px solid var(--bv-rouge);
	border-bottom: 2px solid var(--bv-rouge);
	transform: rotate(45deg) translate(-0.1em, -0.1em);
	transition: transform .2s ease;
}

.bvtc-accordeon[open] > summary::after {
	transform: rotate(-135deg) translate(-0.1em, -0.1em);
}

.bvtc-accordeon__corps { padding: 0 20px 20px; }
.bvtc-accordeon__corps > :first-child { margin-top: 0; }
.bvtc-accordeon__corps > :last-child  { margin-bottom: 0; }

/* --- Espaceurs ----------------------------------------------------------
   Hauteurs réellement présentes : 20px (63x), 45px (63x), 200px (60x),
   80px (8x), 300px (3x), 150px (2x), 100px (2x), 50px (1x).
   Réduites sur petit écran : 300 px de vide sur un téléphone, c'est un
   écran entier de rien.
   ----------------------------------------------------------------------- */

.bvtc-espace     { width: 100%; }
.bvtc-espace--s  { height: 20px; }
.bvtc-espace--m  { height: 45px; }
.bvtc-espace--l  { height: 80px; }
.bvtc-espace--xl { height: 160px; }

@media (max-width: 767.98px) {
	.bvtc-espace--l  { height: 48px; }
	.bvtc-espace--xl { height: 64px; }
}

/* --- Séparateurs --------------------------------------------------------- */

.bvtc-separateur {
	border: 0;
	border-top: 1px solid var(--bv-filet);
	margin: 32px 0;
}

.bvtc-separateur-titre { text-align: center; margin: 32px 0 16px; }

/* --- Impression ---------------------------------------------------------
   Les accordéons fermés doivent s'imprimer ouverts.
   ----------------------------------------------------------------------- */

@media print {
	.bvtc-accordeon__corps { display: block !important; }
	.bvtc-accordeon > summary::after { display: none; }
	.bvtc-espace { height: 0 !important; }
}