/*
 * pages.css — RI17, gabarits de pages internes
 * (agent wordpress-engineer : template-reparations.php, template-tarifs.php,
 * template-modele.php, template-atelier.php, template-contact.php,
 * template-faq.php, page.php, index.php, single.php, archive.php, 404.php)
 *
 * RÈGLE DE CE FICHIER : uniquement des compléments propres à ces pages,
 * TOUJOURS préfixés .ri17-page-... Aucune classe partagée (.ri17-section,
 * .ri17-carte, .ri17-grille, .ri17-bouton, .ri17-fil, .ri17-encart,
 * .ri17-faq, .ri17-tuile, .ri17-cta-bloc, .ri17-liste-lignes/.ri17-ligne,
 * .ri17-stats, .ri17-form/.ri17-champ, .ri17-bouton--primaire/--secondaire,
 * etc.) n'est redéfinie ici : ces classes appartiennent à style.css,
 * possédé par un autre agent de la mission. Seuls les jetons de conception
 * (variables --ri17-*) déjà exposés par style.css sont réutilisés.
 *
 * Chargée en dépendance de la feuille de style principale (handle 'ri17') —
 * voir inc/ri17-page-helpers.php, ri17_page_assets().
 */

/* =========================================================================
   CONTENUS DE RÉSERVE — maquette §0 « Contenus de réserve »
   -------------------------------------------------------------------------
   Toute zone dont la maquette montre la structure mais dont la donnée réelle
   N'EXISTE PAS (avis, note, photo produit, année de sortie, catégorie absente
   du catalogue) est rendue avec cette marque visible. Jamais un faux avis,
   jamais une note chiffrée, jamais une statistique inventée.

   La classe de contrat imposée par la spécification est `.ri17-reserve`. Elle
   n'est pas encore définie dans style.css (fichier possédé par un autre agent
   de la mission) : ce fichier fournit donc l'apparence sous le nom PRÉFIXÉ
   `.ri17-page-reserve`, posé conjointement dans le HTML
   (class="ri17-reserve ri17-page-reserve"). Le jour où style.css définit
   `.ri17-reserve`, les deux coexistent sans conflit et ce bloc peut être
   retiré tel quel.
   ========================================================================= */
.ri17-page-reserve {
	position: relative;
	border: 1px dashed var(--ri17-bleu-300);
	border-radius: var(--ri17-rayon);
	background: repeating-linear-gradient(
		135deg,
		var(--ri17-bleu-50) 0 10px,
		#fff 10px 20px
	);
	color: var(--ri17-encre-doux);
	font-size: .88rem;
	line-height: 1.5;
}
.ri17-page-reserve strong { color: var(--ri17-bleu-900); }

/* =========================================================================
   Bandeau CTA clair — maquette §2 : « fond bleu très clair, bord bleu ».
   Distinct de .ri17-encart (marine, style.css), conservé pour les autres
   bandeaux du site.
   ========================================================================= */
.ri17-page-cta-clair {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ri17-pas-4);
	background: var(--ri17-bleu-50);
	border: 1px solid var(--ri17-bleu-300);
	border-radius: var(--ri17-rayon-encart);
	padding: var(--ri17-pas-5);
}
.ri17-page-cta-clair__icone {
	flex: none;
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border-radius: 12px;
	background: #fff;
	border: 1px solid var(--ri17-bleu-100);
}
.ri17-page-cta-clair__icone svg {
	width: 24px;
	height: 24px;
	stroke: var(--ri17-bleu-700);
}
.ri17-page-cta-clair__texte { flex: 1 1 16rem; }
.ri17-page-cta-clair__texte h2 {
	margin: 0 0 .2rem;
	font-size: 1.15rem;
	color: var(--ri17-bleu-900);
}
.ri17-page-cta-clair__texte p {
	margin: 0;
	color: var(--ri17-encre-doux);
}
.ri17-page-cta-clair .ri17-bouton { flex: none; }

/* =========================================================================
   Réparations — template-reparations.php (maquette §2, grille 3 × 3)
   ========================================================================= */
.ri17-page-reparations__icone {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 11px;
	background: var(--ri17-bleu-50);
	margin-bottom: var(--ri17-pas-2);
}
.ri17-page-reparations__icone svg {
	width: 22px;
	height: 22px;
	stroke: var(--ri17-bleu-700);
}
.ri17-page-reparations__carte { gap: var(--ri17-pas-1); }

/* =========================================================================
   Tarifs — template-tarifs.php (maquette §3)
   ========================================================================= */
.ri17-page-tarifs__recherche {
	margin-top: var(--ri17-pas-5);
	max-width: 38rem;
}

/* --- cartes de catégories : visuel, titre, sous-titre --- */
.ri17-page-tarifs-cats {
	list-style: none;
	margin: var(--ri17-pas-5) 0 0;
	padding: 0;
	display: grid;
	gap: var(--ri17-pas-4);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
}
.ri17-page-tarifs-cat > a,
.ri17-page-tarifs-cat > div {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: .35rem;
	height: 100%;
	min-height: 44px;
	padding: var(--ri17-pas-5) var(--ri17-pas-3);
	background: #fff;
	border: 1px solid var(--ri17-bord);
	border-radius: var(--ri17-rayon-carte);
	text-align: center;
	text-decoration: none;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.ri17-page-tarifs-cat > a:hover {
	border-color: var(--ri17-bleu-300);
	box-shadow: var(--ri17-ombre);
}
.ri17-page-tarifs-cat__vignette {
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	border-radius: 14px;
	background: var(--ri17-bleu-50);
	margin-bottom: var(--ri17-pas-2);
}
.ri17-page-tarifs-cat__vignette svg {
	width: 28px;
	height: 28px;
	stroke: var(--ri17-bleu-700);
}
.ri17-page-tarifs-cat__nom {
	font-weight: 700;
	color: var(--ri17-bleu-900);
}
.ri17-page-tarifs-cat__sous {
	font-size: .85rem;
	color: var(--ri17-encre-doux);
}
/* Catégorie rendue mais non cliquable (absente du catalogue réel). */
.ri17-page-tarifs-cat--inactive > div { opacity: .75; }
.ri17-page-tarifs-cat--inactive .ri17-page-tarifs-cat__vignette svg { stroke: var(--ri17-encre-doux); }
.ri17-page-tarifs-cat .ri17-page-reserve {
	display: block;
	margin-top: var(--ri17-pas-2);
	padding: .3rem .5rem;
	font-size: .78rem;
	font-weight: 700;
}

/* --- « Modèles populaires » : lignes vignette + nom + chevron --- */
.ri17-page-tarifs-groupe {
	/* compense l'en-tête collant (.ri17-entete, style.css) sur les ancres */
	scroll-margin-top: 90px;
	padding-block: var(--ri17-pas-5) 0;
}
.ri17-page-tarifs-groupe h3 {
	margin: 0 0 var(--ri17-pas-3);
	font-size: 1.15rem;
	color: var(--ri17-bleu-900);
}
.ri17-page-tarifs-modeles {
	list-style: none;
	margin: 0;
	padding: 0;
	border: 1px solid var(--ri17-bord);
	border-radius: var(--ri17-rayon-carte);
	background: #fff;
	overflow: hidden;
}
.ri17-page-tarifs-modeles li + li { border-top: 1px solid var(--ri17-bord); }
.ri17-page-tarifs-modeles a {
	display: flex;
	align-items: center;
	gap: var(--ri17-pas-3);
	min-height: 56px;
	padding: .6rem var(--ri17-pas-4);
	text-decoration: none;
	color: var(--ri17-encre);
}
.ri17-page-tarifs-modeles a:hover { background: var(--ri17-bleu-50); }
.ri17-page-tarifs-modeles__vignette {
	flex: none;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 10px;
	background: var(--ri17-bleu-50);
}
.ri17-page-tarifs-modeles__vignette svg {
	width: 20px;
	height: 20px;
	stroke: var(--ri17-bleu-700);
}
.ri17-page-tarifs-modeles__nom {
	flex: 1;
	font-weight: 600;
	color: var(--ri17-bleu-900);
	min-width: 0;
	overflow-wrap: anywhere;
}
.ri17-page-tarifs-modeles__chevron {
	flex: none;
	width: 20px;
	height: 20px;
	stroke: var(--ri17-encre-doux);
}

/* =========================================================================
   Fiche modèle — template-modele.php (maquette §4)
   ========================================================================= */
.ri17-page-modele__entete {
	display: grid;
	gap: var(--ri17-pas-6);
	align-items: start;
	margin-top: var(--ri17-pas-5);
}
@media (min-width: 56em) {
	.ri17-page-modele__entete {
		grid-template-columns: minmax(0, 24rem) minmax(0, 1fr);
	}
}

/* --- galerie : structure de la maquette, contenu en réserve marquée --- */
.ri17-page-modele__galerie {
	padding: var(--ri17-pas-4);
	text-align: center;
}
.ri17-page-modele__scene {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ri17-pas-2);
	min-height: 15rem;
}
.ri17-page-modele__fleche {
	flex: none;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #fff;
	border: 1px solid var(--ri17-bord);
}
.ri17-page-modele__fleche svg {
	width: 20px;
	height: 20px;
	stroke: var(--ri17-encre-doux);
}
.ri17-page-modele__visuel {
	flex: 1;
	display: grid;
	place-items: center;
}
.ri17-page-modele__visuel svg {
	width: 45%;
	max-width: 8rem;
	height: auto;
	stroke: var(--ri17-bleu-300);
	stroke-width: 1.4;
}
.ri17-page-modele__pastilles {
	display: flex;
	justify-content: center;
	gap: .4rem;
	margin-top: var(--ri17-pas-3);
}
.ri17-page-modele__pastilles i {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--ri17-bleu-300);
}
.ri17-page-modele__pastilles i:first-child { background: var(--ri17-bleu-700); }
.ri17-page-modele__mention {
	margin: var(--ri17-pas-3) 0 0;
	font-size: .82rem;
}

/* --- colonne d'informations --- */
.ri17-page-modele__infos h1 { margin-top: 0; }
.ri17-page-modele__note {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem;
	padding: .55rem .7rem;
	margin: 0 0 var(--ri17-pas-4);
}
.ri17-page-modele__etoiles {
	color: var(--ri17-bleu-300);
	letter-spacing: .12em;
	font-size: 1.05rem;
}
.ri17-page-modele__etiquettes {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ri17-pas-2);
	list-style: none;
	margin: 0 0 var(--ri17-pas-5);
	padding: 0;
}
.ri17-page-modele__etiquette {
	padding: .25rem .65rem;
	border-radius: 999px;
	background: var(--ri17-bleu-50);
	border: 1px solid var(--ri17-bleu-100);
	color: var(--ri17-bleu-700);
	font-size: .8rem;
	font-weight: 700;
}
.ri17-page-modele__etiquette.ri17-page-reserve {
	background: none;
	font-weight: 600;
}
.ri17-page-modele__reassurance {
	display: grid;
	gap: var(--ri17-pas-3);
	list-style: none;
	margin: 0 0 var(--ri17-pas-5);
	padding: 0;
}
@media (min-width: 34em) {
	.ri17-page-modele__reassurance { grid-template-columns: repeat(3, 1fr); }
}
.ri17-page-modele__reassurance li {
	display: flex;
	gap: .6rem;
	align-items: flex-start;
	padding: var(--ri17-pas-3);
	background: #fff;
	border: 1px solid var(--ri17-bord);
	border-radius: var(--ri17-rayon);
	font-size: .85rem;
	color: var(--ri17-encre-doux);
}
.ri17-page-modele__reassurance svg {
	flex: none;
	width: 20px;
	height: 20px;
	stroke: var(--ri17-bleu-700);
	margin-top: .1rem;
}
.ri17-page-modele__reassurance strong {
	display: block;
	color: var(--ri17-bleu-900);
	font-size: .92rem;
	margin-bottom: .15rem;
}
.ri17-page-modele__devis { min-height: 44px; }
.ri17-page-modele__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ri17-pas-3);
	margin-top: var(--ri17-pas-5);
}

/* --- réparations disponibles (rendu par [ri17_tarifs], classes conservées) --- */
.ri17-page-modele__reparations { margin-top: var(--ri17-pas-5); }
.ri17-page-modele__choisir { margin-top: var(--ri17-pas-5); }

/* --- « Pourquoi nous confier votre … ? » : 4 colonnes --- */
.ri17-page-modele__pourquoi li { text-align: center; }
.ri17-page-modele__pourquoi svg {
	width: 30px;
	height: 30px;
	stroke: var(--ri17-bleu-700);
}
.ri17-page-modele__pourquoi h3 {
	margin: var(--ri17-pas-3) 0 .3rem;
	font-size: 1.05rem;
	color: var(--ri17-bleu-900);
}
.ri17-page-modele__pourquoi p {
	margin: 0;
	font-size: .9rem;
	color: var(--ri17-encre-doux);
}

/* =========================================================================
   Atelier — template-atelier.php
   ========================================================================= */
.ri17-page-atelier__mise {
	display: grid;
	gap: var(--ri17-pas-6);
	align-items: start;
}
@media (min-width: 48em) {
	.ri17-page-atelier__mise {
		grid-template-columns: minmax(0, 22rem) 1fr;
	}
}
.ri17-page-atelier__photo {
	margin: 0;
}
.ri17-page-atelier__photo img {
	width: 100%;
	max-width: 22rem;
	border-radius: var(--ri17-rayon-carte);
	border: 1px solid var(--ri17-bord);
	box-shadow: var(--ri17-ombre);
}
.ri17-page-atelier__note {
	color: var(--ri17-encre-doux);
}
.ri17-page-atelier__note small {
	font-size: .82rem;
}

/* =========================================================================
   Contact — template-contact.php
   ========================================================================= */
.ri17-page-contact__mise {
	display: grid;
	gap: var(--ri17-pas-6);
	align-items: start;
}
@media (min-width: 48em) {
	.ri17-page-contact__mise {
		grid-template-columns: minmax(0, 20rem) 1fr;
	}
}
.ri17-page-contact__coordonnees .ri17-ligne {
	margin-bottom: var(--ri17-pas-4);
}

/* =========================================================================
   Actualités — index.php, archive.php, single.php (cartes rendues par
   inc/ri17-page-helpers.php::ri17_page_carte_actualite())
   ========================================================================= */
.ri17-page-actu {
	padding: 0;
	overflow: hidden;
}
.ri17-page-actu__vignette {
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--ri17-fond);
}
.ri17-page-actu__vignette img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.ri17-page-actu > :not(.ri17-page-actu__vignette) {
	padding-inline: var(--ri17-pas-5);
}
.ri17-page-actu > :first-child:not(.ri17-page-actu__vignette) {
	padding-top: var(--ri17-pas-5);
}
.ri17-page-actu > :last-child {
	padding-bottom: var(--ri17-pas-5);
}
.ri17-page-actu__cat {
	margin: var(--ri17-pas-3) 0 0;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--ri17-bleu-700);
}
.ri17-page-actu__cat a {
	color: inherit;
	text-decoration: none;
}
.ri17-page-actu__date {
	margin: 0;
	color: var(--ri17-encre-doux);
	font-size: .85rem;
}

.ri17-page-actus-vide {
	background: #fff;
	border: 1px dashed var(--ri17-bord);
	border-radius: var(--ri17-rayon-carte);
	padding: var(--ri17-pas-6);
	text-align: center;
	color: var(--ri17-encre-doux);
	font-weight: 600;
}

.ri17-page-actu-nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--ri17-pas-3);
	margin-block: var(--ri17-pas-6);
	padding-top: var(--ri17-pas-5);
	border-top: 1px solid var(--ri17-bord);
}
.ri17-page-actu-nav a {
	font-weight: 600;
	text-decoration: none;
}

/* =========================================================================
   404 — 404.php
   ========================================================================= */
.ri17-page-404__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ri17-pas-3);
}