/*
Theme Name: Canailles
Theme URI: https://github.com/dendrolag/wordpress-themes
Author: Dendrolag
Description: Thème vitrine d'une page pour un restaurant ou une auberge de village. Tout le contenu est administrable depuis le menu « Le restaurant » : ardoise du jour, suggestions, horaires, coordonnées, photos, couleurs et polices. Pensé pour le référencement local et pour être décliné sur plusieurs établissements sans toucher au code.
Version: 1.0.0
Requires at least: 6.3
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: canailles
Tags: one-column, custom-colors, custom-menu, restaurant, translation-ready

Les polices fournies dans assets/fonts sont sous licence SIL Open Font License 1.1 :
Abril Fatface, Cormorant Garamond, Karla et Parisienne.

Aucune couleur littérale ne doit apparaître dans ce fichier en dehors du bloc
:root de repli ci-dessous et des ombres portées noires. Toute couleur d'identité
passe par une propriété personnalisée, écrite par inc/branding.php depuis les
réglages : c'est ce qui permet d'habiller un second établissement sans code.
*/

/* --------------------------------------------------------------------------
   1. Valeurs de repli
   Les réglages du thème réécrivent ce bloc dans l'en-tête de la page.
   -------------------------------------------------------------------------- */

:root {
	--fond: #17241f;
	--fond-rgb: 23, 36, 31;
	--fond-alt: #1c2b24;
	--carte: #223229;
	--carte-rgb: 34, 50, 41;
	--profond: #14201b;
	--profond-rgb: 20, 32, 27;
	--encart: #10160f;
	--ardoise: #10160f;
	--bois: #2f2117;
	--bois-clair: #3b2a1b;
	--bois-sombre: #251809;
	--bois-bordure: #6b4a2f;
	--bois-bordure-claire: #8a6234;
	--or: #e4b429;
	--or-rgb: 228, 180, 41;
	--or-survol: #f0c545;
	--or-texte: #14201b;
	--or-guirlande: #f6d155;
	--or-guirlande-rgb: 246, 209, 85;
	--terracotta: #d98466;
	--olive: #8fa06a;
	--olive-rgb: 143, 160, 106;
	--texte: #f5efe0;
	--texte-rgb: 245, 239, 224;
	--texte-2: #e8e0cf;
	--texte-3: #b9c4b2;
	--texte-3-rgb: 185, 196, 178;
	--texte-4: #9fb09a;
	--drapeau-1: #0d3b8c;
	--drapeau-2: #f5efe0;
	--drapeau-3: #c8102e;

	--titre: "Cormorant Garamond", Georgia, serif;
	--logo: "Abril Fatface", Georgia, serif;
	--manuscrit: "Parisienne", cursive;
	--courant: "Karla", system-ui, sans-serif;

	--pad-section: 18px;
	--rayon-bouton: 6px;
	--rayon-carte: 8px;
	--rayon-encart: 10px;
	--rayon-puce: 5px;
	--rupture: 860px;
	--transition: .2s;
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */

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

html {
	scroll-behavior: smooth;
	/* L'en-tête collant ne doit pas masquer la cible d'une ancre. */
	scroll-padding-top: 96px;
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--fond);
	color: var(--texte);
	font-family: var(--courant);
	font-size: 16px;
	line-height: 1.5;
	overflow-x: hidden;
}

/* Place pour la barre d'action fixe du bas, qui n'existe que sur la page
   d'accueil et sous le point de rupture. */
body.home {
	padding-bottom: calc(78px + env(safe-area-inset-bottom));
}

img {
	max-width: 100%;
	height: auto;
}

a {
	color: var(--or);
	text-decoration: none;
	transition: color var(--transition);
}

a:hover {
	color: var(--or-survol);
}

h1,
h2,
h3,
p,
ul,
ol,
dl,
dd,
figure,
blockquote {
	margin: 0;
}

ul,
ol {
	padding: 0;
	list-style: none;
}

address {
	font-style: normal;
}

iframe {
	display: block;
	border: 0;
}

:focus-visible {
	outline: 3px solid var(--or);
	outline-offset: 2px;
	border-radius: 3px;
}

.saut-contenu {
	position: absolute;
	left: -9999px;
	z-index: 100;
	padding: 12px 18px;
	background: var(--or);
	color: var(--or-texte);
	font-weight: 700;
}

.saut-contenu:focus {
	left: 8px;
	top: 8px;
	color: var(--or-texte);
}

/* Visible des seuls lecteurs d'écran. */
.sr-uniquement {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Affichage selon la largeur. Les composants qui ont besoin d'un display
   particulier le déclarent dans la requête de média du bas de fichier. */
.sur-desktop {
	display: none;
}

/* --------------------------------------------------------------------------
   3. Éléments partagés
   -------------------------------------------------------------------------- */

.page {
	display: flex;
	flex-direction: column;
}

.section {
	padding: 22px var(--pad-section) 24px;
}

.section-entete {
	margin-bottom: 16px;
}

.section-entete--centre {
	text-align: center;
}

.titre {
	margin: 0;
	color: var(--texte);
	font-family: var(--titre);
	font-weight: 700;
	line-height: 1.1;
	text-wrap: balance;
}

.titre--section {
	font-size: 30px;
}

.titre--encart {
	font-size: 24px;
}

.texte {
	margin: 10px 0 0;
	color: var(--texte-3);
	font-size: 15px;
	text-wrap: pretty;
}

.texte--centre {
	margin-inline: auto;
	max-width: 46ch;
	text-align: center;
}

.manuscrit {
	margin: 0;
	color: var(--terracotta);
	font-family: var(--manuscrit);
	font-weight: 400;
	line-height: 1.25;
}

.manuscrit--accroche {
	font-size: 24px;
}

.manuscrit--grand {
	margin: 16px 0 10px;
	font-size: 29px;
}

.manuscrit--or {
	color: var(--or);
	font-size: 26px;
}

.intertitre {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 12px;
	color: var(--olive);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .24em;
	text-transform: uppercase;
}

.intertitre-trait {
	width: 26px;
	height: 1px;
	background: var(--olive);
}

.badge {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 5px 11px;
	border-radius: var(--rayon-puce);
	font-size: 9.5px;
	font-weight: 800;
	letter-spacing: .16em;
	text-transform: uppercase;
}

.badge--plein {
	background: var(--terracotta);
	color: var(--or-texte);
}

.badge--doux {
	background: rgba(var(--or-rgb), .16);
	color: var(--terracotta);
}

.badge--google {
	background: var(--carte);
	border: 1px solid rgba(var(--texte-rgb), .14);
	color: var(--texte-2);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
}

.canailles-icone {
	flex: none;
}

.icone--or {
	color: var(--or);
}

.canailles-etoiles {
	display: block;
	color: var(--or);
	fill: var(--or);
}

/* Cadre en attente d'une photo. Jamais visible une fois le site rempli. */
.canailles-photo-vide {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 90px;
	background: var(--carte);
	border: 1px dashed rgba(var(--texte-rgb), .22);
	border-radius: 4px;
}

/* Boutons ----------------------------------------------------------------- */

.bouton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	min-height: 48px;
	padding: 12px 20px;
	border: 1.5px solid transparent;
	border-radius: var(--rayon-bouton);
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	transition: background var(--transition), transform var(--transition), border-color var(--transition);
}

.bouton--or {
	background: var(--or);
	color: var(--or-texte);
	font-weight: 800;
}

.bouton--or:hover {
	background: var(--or-survol);
	color: var(--or-texte);
	transform: translateY(-1px);
}

.bouton--contour {
	background: rgba(var(--texte-rgb), .08);
	border-color: rgba(var(--texte-rgb), .4);
	color: var(--texte);
}

.bouton--contour:hover {
	background: rgba(var(--texte-rgb), .16);
	color: var(--texte);
	transform: translateY(-1px);
}

.bouton--sombre {
	background: var(--profond);
	color: var(--texte);
}

.bouton--sombre:hover {
	background: var(--carte);
	color: var(--texte);
}

/* --------------------------------------------------------------------------
   4. En-tête
   -------------------------------------------------------------------------- */

.entete-barre {
	position: sticky;
	top: 0;
	z-index: 20;
}

.guirlande {
	height: 18px;
	background-color: var(--encart);
	background-image: radial-gradient(circle at 9px 10px, var(--or-guirlande) 0 3px, rgba(var(--or-guirlande-rgb), .3) 4px, transparent 6px);
	background-repeat: repeat-x;
	background-size: 26px 18px;
	border-bottom: 1px solid rgba(var(--or-guirlande-rgb), .18);
}

.entete {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 11px 16px;
	background-color: var(--bois);
	border-bottom: 3px solid var(--bois-bordure);
	box-shadow: 0 6px 18px rgba(0, 0, 0, .4);
}

.a-bois .entete,
.a-bois .pied {
	background-image:
		repeating-linear-gradient(90deg, rgba(0, 0, 0, .26) 0 1px, transparent 1px 6px),
		repeating-linear-gradient(90deg, rgba(255, 255, 255, .04) 0 1px, transparent 1px 19px),
		linear-gradient(180deg, var(--bois-clair) 0%, var(--bois-sombre) 100%);
}

.entete-nav {
	display: flex;
	align-items: center;
	gap: 26px;
}

.entete-liens {
	display: none;
}

.entete-tel {
	min-height: 48px;
	padding: 0 16px;
	font-size: 14.5px;
	white-space: nowrap;
}

.entete-tel-numero {
	display: none;
}

/* Logo -------------------------------------------------------------------- */

.logo-lien {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 44px;
	color: var(--texte);
}

.logo-lien:hover {
	color: var(--texte);
}

.logo-type {
	color: var(--or);
	font-size: 8.5px;
	font-weight: 700;
	letter-spacing: .34em;
	text-transform: uppercase;
	text-shadow: 0 1px 0 rgba(0, 0, 0, .6);
}

.logo-nom {
	font-family: var(--logo);
	font-size: 19px;
	line-height: 1.1;
	color: var(--texte);
	text-shadow: 0 2px 0 rgba(0, 0, 0, .55), 0 -1px 0 rgba(255, 255, 255, .08);
}

.logo-lieu {
	margin-top: 2px;
	color: var(--bois-bordure-claire);
	font-size: 8.5px;
	letter-spacing: .2em;
	text-transform: uppercase;
}

.logo-image {
	max-height: 54px;
	width: auto;
}

.drapeau {
	display: flex;
	width: 58px;
	height: 3px;
	margin-top: 8px;
	border-radius: 2px;
	overflow: hidden;
}

.drapeau span {
	flex: 1;
}

.drapeau span:nth-child(1) { background: var(--drapeau-1); }
.drapeau span:nth-child(2) { background: var(--drapeau-2); }
.drapeau span:nth-child(3) { background: var(--drapeau-3); }

.entete .drapeau {
	display: none;
}

/* --------------------------------------------------------------------------
   5. Haut de page
   -------------------------------------------------------------------------- */

.hero {
	position: relative;
	height: 330px;
	padding: 0;
	overflow: hidden;
}

.hero-photo,
.hero-photo img,
.hero-photo .canailles-photo-vide {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	border-radius: 0;
	object-fit: cover;
}

.hero-voile {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg,
		rgba(var(--profond-rgb), .45) 0%,
		rgba(var(--profond-rgb), .3) 30%,
		rgba(var(--profond-rgb), .97) 100%);
}

.hero-contenu {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	padding: 0 var(--pad-section) 20px;
}

.hero-lieu {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 9px;
	color: var(--or);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
}

.hero-titre {
	margin: 0;
	color: var(--texte);
	font-family: var(--titre);
	font-weight: 700;
	font-size: 34px;
	line-height: 1.05;
	text-wrap: balance;
}

/* --------------------------------------------------------------------------
   6. Bloc d'action, téléphone seulement
   -------------------------------------------------------------------------- */

.action {
	background: var(--profond);
	padding-top: 16px;
	padding-bottom: 20px;
}

.action-statut {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 9px;
	margin-bottom: 12px;
	padding: 11px 14px;
	background: rgba(var(--olive-rgb), .16);
	border: 1px solid rgba(var(--olive-rgb), .4);
	border-radius: var(--rayon-bouton);
	font-size: 14px;
	color: var(--texte-2);
}

.action-statut.est-ferme {
	background: rgba(var(--texte-rgb), .06);
	border-color: rgba(var(--texte-rgb), .18);
}

.action-pastille {
	flex: none;
	width: 9px;
	height: 9px;
	background: var(--olive);
	border-radius: 50%;
}

.est-ferme .action-pastille {
	background: var(--terracotta);
}

.action-statut-detail {
	color: var(--texte-3);
	font-size: 13.5px;
}

.action-appel {
	width: 100%;
	min-height: 64px;
	gap: 10px;
}

.action-appel-texte {
	display: flex;
	flex-direction: column;
	line-height: 1.1;
	text-align: left;
}

.action-appel-sur {
	font-size: 9.5px;
	font-weight: 800;
	letter-spacing: .16em;
	text-transform: uppercase;
	opacity: .75;
}

.action-appel-numero {
	font-family: var(--logo);
	font-size: 22px;
	font-weight: 400;
	letter-spacing: .3px;
}

.action-secondaires {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	margin-top: 10px;
}

.action-secondaires .bouton {
	font-size: 14px;
	padding: 12px 8px;
}

.action-note {
	margin: 12px 0 0;
	color: var(--texte-4);
	font-size: 12.5px;
	text-align: center;
}

/* Horaires ---------------------------------------------------------------- */

.horaires {
	font-size: 14.5px;
}

.horaires--action {
	display: flex;
	flex-direction: column;
	margin-top: 18px;
	border-top: 1px solid rgba(var(--texte-rgb), .14);
}

/* Les horaires de la section accès feraient doublon avec ceux du bloc
   d'action : ils n'apparaissent que sur ordinateur, où le bloc d'action
   n'existe pas. */
.horaires--acces {
	display: none;
}

.horaires-ligne {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 11px 0;
	border-bottom: 1px solid rgba(var(--texte-rgb), .14);
}

.horaires dt {
	font-weight: 700;
}

.horaires dd {
	color: var(--texte-3);
	text-align: right;
}

/* --------------------------------------------------------------------------
   7. Ardoise
   -------------------------------------------------------------------------- */

.ardoise-section {
	padding-top: 20px;
}

.ardoise {
	padding: 22px 20px 24px;
	background-color: var(--ardoise);
	background-image: radial-gradient(circle at 70% 15%, rgba(255, 255, 255, .05), transparent 55%);
	border: 9px solid var(--bois-bordure);
	border-radius: 5px;
	box-shadow:
		inset 0 0 40px rgba(0, 0, 0, .65),
		inset 0 0 0 2px rgba(0, 0, 0, .45);
}

.ardoise-entete {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 16px;
}

.ardoise-titre {
	flex: none;
	margin: 0;
	color: var(--texte);
	font-family: var(--manuscrit);
	font-weight: 400;
	/* Le titre reste sur une seule ligne, y compris sur les petits écrans. */
	font-size: min(34px, 8.6vw);
	line-height: 1;
	white-space: nowrap;
}

.ardoise-mention {
	flex: 1 1 auto;
	color: var(--or);
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: .16em;
	text-align: right;
	text-transform: uppercase;
}

.ardoise-plats {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.ardoise-plat {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
}

.ardoise-plat-libelle {
	display: block;
	color: var(--terracotta);
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .18em;
	text-transform: uppercase;
}

.ardoise-plat-nom {
	display: block;
	font-family: var(--titre);
	font-weight: 500;
	font-size: 20px;
	line-height: 1.2;
}

.ardoise-plat-prix {
	flex: none;
	color: var(--or);
	font-weight: 700;
	font-size: 16px;
}

/* Le récapitulatif des prix n'existe que sur ordinateur. */
.ardoise-prix {
	display: none;
}

/* --------------------------------------------------------------------------
   8. Suggestions
   -------------------------------------------------------------------------- */

.suggestions {
	background: var(--fond-alt);
	border-top: 1px solid rgba(var(--texte-rgb), .1);
	border-bottom: 1px solid rgba(var(--texte-rgb), .1);
	padding-bottom: 26px;
}

.cartes {
	display: grid;
	gap: 12px;
}

.cartes--plats {
	grid-template-columns: 1fr 1fr;
}

.carte {
	background: var(--carte);
	border: 1px solid rgba(var(--texte-rgb), .1);
	border-radius: var(--rayon-carte);
	overflow: hidden;
}

.carte--plat {
	transition: transform var(--transition), box-shadow var(--transition);
}

.carte-photo {
	position: relative;
	height: 104px;
}

.carte-photo img,
.carte-photo .canailles-photo-vide {
	width: 100%;
	height: 100%;
	border: 0;
	border-radius: 0;
	object-fit: cover;
}

.carte-corps {
	padding: 11px 12px 13px;
}

.carte-titre {
	margin: 0 0 4px;
	color: var(--texte);
	font-family: var(--titre);
	font-weight: 700;
	font-size: 17px;
	line-height: 1.15;
}

.carte-prix {
	color: var(--terracotta);
	font-weight: 800;
	font-size: 14.5px;
}

/* --------------------------------------------------------------------------
   9. Plateau à emporter
   -------------------------------------------------------------------------- */

.emporter-bloc {
	background: var(--carte);
	border: 1px solid rgba(var(--texte-rgb), .14);
	border-radius: var(--rayon-carte);
	overflow: hidden;
}

.emporter-photo {
	position: relative;
	height: 140px;
}

.emporter-photo img,
.emporter-photo .canailles-photo-vide {
	width: 100%;
	height: 100%;
	border: 0;
	border-radius: 0;
	object-fit: cover;
}

.emporter-texte {
	padding: 18px;
}

.emporter-texte .titre {
	margin: 12px 0 8px;
	font-size: 26px;
}

.emporter-infos {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px 26px;
	margin: 14px 0;
}

.emporter-prix {
	display: flex;
	align-items: baseline;
	gap: 8px;
}

.emporter-prix-montant {
	color: var(--terracotta);
	font-family: var(--logo);
	font-size: 28px;
	line-height: 1;
}

.emporter-prix-mention,
.emporter-heures {
	color: var(--texte-4);
	font-size: 13px;
}

.emporter-jours {
	display: block;
	color: var(--texte);
	font-weight: 700;
	font-size: 15px;
}

.emporter-retrait {
	line-height: 1.35;
}

.emporter .bouton {
	width: 100%;
	min-height: 50px;
	font-size: 15.5px;
}

/* --------------------------------------------------------------------------
   10. Réservez votre table
   -------------------------------------------------------------------------- */

/* Sur téléphone, le bloc d'action du haut et la barre fixe du bas remplissent
   déjà ce rôle : cette section ferait doublon. */
.reserver {
	display: none;
	background: var(--profond);
	border-top: 10px solid var(--bois-bordure);
	text-align: center;
}

.reserver .titre {
	margin: 6px 0 14px;
}

.pave-tel {
	/* Largeur au contenu, mais toujours seul sur sa ligne. */
	display: flex;
	width: fit-content;
	flex-direction: column;
	align-items: center;
	gap: 5px;
	min-width: 320px;
	margin: 34px auto 26px;
	padding: 26px 34px;
	background: var(--or);
	color: var(--or-texte);
	border-radius: var(--rayon-bouton);
	transition: transform var(--transition), box-shadow var(--transition);
}

.pave-tel:hover {
	background: var(--or-survol);
	color: var(--or-texte);
	transform: translateY(-3px);
	box-shadow: 0 16px 34px rgba(0, 0, 0, .35);
}

.pave-tel-sur {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: .2em;
	text-transform: uppercase;
	opacity: .75;
}

.pave-tel-numero {
	font-family: var(--logo);
	font-size: 36px;
	line-height: 1.15;
	letter-spacing: .5px;
}

.encart-mail {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 16px 26px;
	background: var(--encart);
	border: 1px solid rgba(var(--texte-rgb), .14);
	border-radius: var(--rayon-carte);
	color: var(--texte-3);
	font-size: 15.5px;
}

.encart-mail a {
	font-weight: 800;
	font-size: 17px;
	word-break: break-word;
}

.reserver-note {
	margin: 22px 0 0;
	color: var(--texte-4);
	font-size: 14.5px;
}

/* --------------------------------------------------------------------------
   11. Notre maison
   -------------------------------------------------------------------------- */

.maison-cadre {
	position: relative;
	height: 200px;
	border: 10px solid var(--bois-bordure);
	border-radius: 4px;
	overflow: hidden;
	box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .4);
	background: var(--carte);
}

.maison-cadre img,
.maison-cadre .canailles-photo-vide {
	width: 100%;
	height: 100%;
	border: 0;
	border-radius: 0;
	object-fit: cover;
}

/* --------------------------------------------------------------------------
   12. Horaires & accès
   -------------------------------------------------------------------------- */

.acces-carte {
	margin-top: 18px;
	background: var(--fond-alt);
	border: 1px solid rgba(var(--texte-rgb), .16);
	border-radius: var(--rayon-carte);
	overflow: hidden;
}

.acces-carte iframe {
	width: 100%;
	height: 210px;
	filter: saturate(.85) brightness(.95);
}

.acces-carte-credit {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 12px;
	padding: 12px 16px;
	color: var(--texte-4);
	font-size: 12.5px;
}

.acces-carte-credit a {
	font-weight: 700;
}

.acces-adresse {
	margin-top: 16px;
	font-size: 15px;
	line-height: 1.7;
}

/* Sur écran tactile, un numéro ou un mail sont des boutons : ils doivent
   offrir une cible d'au moins 44 pixels de haut. */
.acces-adresse a,
.pied-contact a,
.acces-carte-credit a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

.acces-ville {
	color: var(--texte-3);
}

.acces-adresse a {
	font-weight: 700;
}

.acces-itineraire {
	margin-top: 16px;
	font-size: 15px;
	font-weight: 700;
}

.acces-itineraire a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
}

.communes {
	margin-top: 18px;
}

.communes-titre {
	margin-bottom: 8px;
	color: var(--olive);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.communes-liste {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
}

.communes-liste li {
	display: inline-block;
	padding: 6px 11px;
	background: var(--carte);
	border: 1px solid rgba(var(--texte-rgb), .14);
	border-radius: var(--rayon-puce);
	color: var(--texte-2);
	font-size: 12.5px;
}

/* Sur téléphone, on cite les trois communes les plus proches. */
.communes-liste li:nth-child(n+4) {
	display: none;
}

/* --------------------------------------------------------------------------
   13. Encart gîtes
   -------------------------------------------------------------------------- */

.gites-encart {
	padding: 20px 18px;
	background: var(--fond-alt);
	border: 1.5px dashed rgba(var(--or-rgb), .5);
	border-radius: var(--rayon-carte);
}

.gites-encart .titre {
	margin: 12px 0 8px;
}

.gites-encart .bouton {
	margin-top: 16px;
}

/* --------------------------------------------------------------------------
   14. Avis
   -------------------------------------------------------------------------- */

.avis {
	background: var(--fond-alt);
	border-top: 1px solid rgba(var(--texte-rgb), .1);
}

.avis-entete {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 16px;
}

.avis-entete .titre {
	font-size: 26px;
}

.avis-source {
	display: flex;
	align-items: center;
	gap: 12px;
	color: var(--texte-4);
	font-size: 14px;
}

.carte--avis {
	padding: 16px;
}

.avis-texte {
	margin: 10px 0;
	color: var(--texte-2);
	font-size: 14.5px;
	line-height: 1.5;
}

.avis-auteur {
	color: var(--texte);
	font-weight: 700;
	font-size: 13.5px;
}

.avis-cta {
	margin-top: 14px;
}

.avis-cta-texte {
	margin-bottom: 10px;
	color: var(--texte-3);
	font-size: 15px;
	text-align: center;
}

.avis-cta .bouton {
	width: 100%;
	min-height: 52px;
	background: var(--carte);
	border-color: rgba(var(--texte-rgb), .35);
	color: var(--texte);
}

/* --------------------------------------------------------------------------
   15. Pied de page
   -------------------------------------------------------------------------- */

.pied {
	padding: 26px var(--pad-section) 24px;
	background-color: var(--bois);
	border-top: 3px solid var(--bois-bordure-claire);
	color: var(--texte-3);
}

.pied-colonnes {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.logo--pied .logo-nom {
	font-size: 22px;
}

.logo-baseline {
	margin-top: 4px;
	color: var(--or);
	font-family: var(--manuscrit);
	font-size: 22px;
	line-height: 1.2;
}

.pied-contact {
	font-size: 13.5px;
	line-height: 1.75;
}

.pied-contact a {
	color: var(--texte-3);
}

.pied-contact a:hover {
	color: var(--or);
}

.pied-reseaux {
	display: flex;
	gap: 16px;
	font-size: 13.5px;
	font-weight: 700;
}

.pied-reseaux a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 44px;
}

.pied-bas {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 10px 14px;
	margin-top: 20px;
	padding-top: 14px;
	border-top: 1px solid rgba(var(--texte-3-rgb), .2);
	color: var(--texte-4);
	font-size: 11.5px;
}

.pied-liens {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

.pied-liens a {
	color: var(--texte-4);
}

/* --------------------------------------------------------------------------
   16. Barre d'action fixe, téléphone seulement
   -------------------------------------------------------------------------- */

.barre-fixe {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 30;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	padding: 12px var(--pad-section) calc(12px + env(safe-area-inset-bottom));
	background: linear-gradient(180deg,
		rgba(var(--fond-rgb), 0) 0%,
		rgba(var(--fond-rgb), .94) 32%,
		var(--fond) 100%);
	backdrop-filter: blur(8px);
}

.barre-fixe .bouton {
	min-height: 52px;
	box-shadow: 0 8px 22px rgba(0, 0, 0, .5);
}

.barre-fixe .bouton--contour {
	background: var(--carte);
	border-color: rgba(var(--texte-rgb), .35);
}

/* Page simple, pour les mentions légales -------------------------------- */

.section--texte {
	max-width: 70ch;
	margin: 0 auto;
	padding-top: 40px;
	padding-bottom: 40px;
}

.contenu-simple .texte a {
	text-decoration: underline;
}

/* --------------------------------------------------------------------------
   17. Tablette : la composition reste celle du téléphone, mais le contenu
   cesse de s'étirer sur toute la largeur.
   -------------------------------------------------------------------------- */

@media (min-width: 600px) and (max-width: 859px) {

	:root {
		--pad-section: 28px;
	}

	/* Le contenu se centre dans une colonne lisible en élargissant les marges,
	   sans avoir à ajouter de conteneur dans le HTML. */
	.section,
	.pied,
	.entete,
	.barre-fixe,
	.hero-contenu {
		padding-inline: max(var(--pad-section), calc((100% - 680px) / 2));
	}

	.hero {
		height: 420px;
	}

	.hero-titre {
		font-size: 42px;
	}

	.maison-cadre {
		height: 300px;
	}

	.emporter-photo {
		height: 220px;
	}

	.carte-photo {
		height: 150px;
	}

	.acces-carte iframe {
		height: 280px;
	}
}

/* --------------------------------------------------------------------------
   18. Ordinateur, à partir de 860 px
   -------------------------------------------------------------------------- */

@media (min-width: 860px) {

	:root {
		--pad-section: 44px;
	}

	.sur-desktop {
		display: revert;
	}

	.sur-mobile {
		display: none;
	}

	body.home {
		padding-bottom: 0;
	}

	html {
		scroll-padding-top: 20px;
	}

	.section {
		padding: 54px var(--pad-section);
	}

	.titre--section {
		font-size: 44px;
	}

	.titre--encart {
		font-size: 36px;
	}

	.texte {
		font-size: 17px;
	}

	.manuscrit--accroche {
		font-size: 32px;
	}

	.manuscrit--grand {
		max-width: 26ch;
		margin: 0 0 24px;
		font-size: 44px;
	}

	.manuscrit--or {
		font-size: 34px;
	}

	.intertitre {
		margin-bottom: 18px;
		font-size: 12.5px;
	}

	.badge {
		gap: 9px;
		padding: 7px 15px;
		border-radius: var(--rayon-bouton);
		font-size: 11.5px;
		letter-spacing: .18em;
	}

	.bouton {
		font-size: 16px;
	}

	.bouton--grand {
		padding: 16px 28px;
		font-size: 17px;
	}

	/* Ordre des sections voulu par la maquette d'ordinateur. Le HTML, lui,
	   reste dans l'ordre du téléphone. */
	.hero { order: 1; }
	.maison { order: 2; }
	.suggestions { order: 3; }
	.ardoise-section { order: 4; }
	.emporter { order: 5; }
	.reserver { order: 6; }
	.acces { order: 7; }
	.gites { order: 8; }
	.avis { order: 9; }

	.action,
	.barre-fixe {
		display: none;
	}

	/* En-tête ------------------------------------------------------------- */

	.entete-barre {
		position: static;
	}

	.guirlande {
		height: 30px;
		background-image: radial-gradient(circle at 12px 15px, var(--or-guirlande) 0 4px, rgba(var(--or-guirlande-rgb), .3) 5px, transparent 8px);
		background-size: 34px 30px;
	}

	.entete {
		gap: 34px;
		padding: 17px var(--pad-section);
		box-shadow: inset 0 -12px 22px rgba(0, 0, 0, .35);
	}

	.entete-liens {
		display: flex;
		align-items: center;
		gap: 26px;
		font-size: 15px;
		font-weight: 600;
	}

	.entete-liens a {
		color: var(--texte-2);
	}

	.entete-liens a:hover {
		color: var(--or);
	}

	.entete-tel {
		padding: 12px 22px;
		font-size: 15.5px;
	}

	.entete-tel-numero {
		display: inline;
	}

	.entete-tel-court {
		display: none;
	}

	.entete .drapeau {
		display: flex;
	}

	.logo-type {
		font-size: 10px;
		letter-spacing: .42em;
	}

	.logo-nom {
		font-size: 27px;
		letter-spacing: .3px;
	}

	.logo-lieu {
		margin-top: 5px;
		font-size: 10.5px;
		letter-spacing: .22em;
	}

	.logo-image {
		max-height: 76px;
	}

	/* Haut de page -------------------------------------------------------- */

	.hero {
		height: 600px;
	}

	.hero-voile {
		background: linear-gradient(180deg,
			rgba(var(--profond-rgb), .5) 0%,
			rgba(var(--profond-rgb), .26) 30%,
			rgba(var(--profond-rgb), .96) 100%);
	}

	.hero-contenu {
		padding: 0 56px 52px;
	}

	.hero-lieu {
		gap: 9px;
		margin-bottom: 16px;
		font-size: 12.5px;
		letter-spacing: .26em;
	}

	.hero-titre {
		max-width: 21ch;
		margin-bottom: 18px;
		font-size: 62px;
		line-height: 1.02;
		letter-spacing: -.5px;
	}

	.hero-texte {
		display: block;
		max-width: 48ch;
		margin: 0 0 30px;
		color: var(--texte-2);
		font-size: 18px;
		text-wrap: pretty;
	}

	.hero-actions {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 14px;
	}

	/* Notre maison -------------------------------------------------------- */

	.maison {
		display: grid;
		grid-template-columns: .9fr 1.1fr;
		gap: 46px;
		align-items: center;
		padding-bottom: 52px;
	}

	.maison-cadre {
		height: 310px;
		box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .4), 0 16px 38px rgba(0, 0, 0, .45);
	}

	.maison .texte {
		max-width: 52ch;
		margin: 0;
		font-size: 17.5px;
	}

	/* Suggestions --------------------------------------------------------- */

	.section-entete {
		margin-bottom: 34px;
	}

	.cartes--plats {
		grid-template-columns: repeat(4, 1fr);
		gap: 22px;
	}

	.carte-photo {
		height: 158px;
	}

	.carte-corps {
		padding: 16px 16px 18px;
	}

	.carte-titre {
		margin-bottom: 8px;
		font-size: 23px;
	}

	.carte-prix {
		font-size: 17px;
	}

	.carte--plat:hover {
		transform: translateY(-5px);
		box-shadow: 0 16px 32px rgba(0, 0, 0, .4);
	}

	/* Ardoise ------------------------------------------------------------- */

	.ardoise {
		padding: 44px 48px 48px;
		border-width: 12px;
		border-radius: var(--rayon-bouton);
		box-shadow:
			inset 0 0 60px rgba(0, 0, 0, .65),
			inset 0 0 0 2px rgba(0, 0, 0, .45),
			0 18px 44px rgba(0, 0, 0, .45);
	}

	.ardoise-entete {
		flex-wrap: wrap;
		gap: 10px;
		margin-bottom: 26px;
	}

	.ardoise-titre {
		font-size: 56px;
		white-space: normal;
	}

	.ardoise-mention {
		font-size: 13px;
		letter-spacing: .2em;
	}

	.ardoise-corps {
		display: grid;
		grid-template-columns: 1.4fr 1fr;
		gap: 44px;
	}

	.ardoise-plats {
		gap: 20px;
	}

	.ardoise-plat {
		display: block;
	}

	.ardoise-plat-libelle {
		font-size: 12.5px;
		letter-spacing: .2em;
	}

	.ardoise-plat-nom {
		margin-top: 3px;
		font-size: 28px;
	}

	/* Sur ordinateur, les prix sont regroupés à droite. */
	.ardoise-plat-prix {
		display: none;
	}

	.ardoise-prix {
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 16px;
		padding-left: 34px;
		border-left: 2px dashed rgba(var(--texte-rgb), .35);
		font-family: var(--titre);
		font-weight: 500;
	}

	.ardoise-prix-liste {
		font-size: 26px;
		line-height: 1.5;
	}

	.ardoise-prix-liste li {
		display: flex;
		gap: 10px;
	}

	.ardoise-prix strong {
		color: var(--or);
		font-weight: 700;
	}

	.ardoise-extra {
		padding-top: 16px;
		border-top: 2px dashed rgba(var(--texte-rgb), .35);
		font-size: 24px;
	}

	/* Plateau à emporter --------------------------------------------------- */

	.emporter {
		padding-top: 0;
	}

	.emporter-bloc {
		display: grid;
		grid-template-columns: 1.15fr .85fr;
		border-radius: var(--rayon-encart);
		box-shadow: 0 16px 40px rgba(0, 0, 0, .3);
	}

	/* La photo passe à droite du texte. */
	.emporter-photo {
		order: 2;
		height: auto;
		min-height: 320px;
	}

	.emporter-texte {
		order: 1;
		padding: 44px 46px 46px;
	}

	.emporter-texte .titre {
		margin: 0 0 16px;
		font-size: 42px;
	}

	.emporter-texte .texte {
		max-width: 44ch;
		margin: 0 0 26px;
	}

	.emporter-infos {
		gap: 26px;
		margin: 0 0 26px;
		align-items: center;
	}

	.emporter-prix {
		display: block;
	}

	.emporter-prix-montant {
		display: block;
		font-size: 38px;
	}

	.emporter-prix-mention {
		font-size: 13.5px;
	}

	.emporter-separateur {
		display: block;
		width: 1px;
		height: 44px;
		background: rgba(var(--texte-rgb), .16);
	}

	.emporter-jours {
		font-size: 17px;
	}

	.emporter-heures {
		font-size: 13.5px;
	}

	.emporter .bouton {
		width: auto;
	}

	/* Réserver ------------------------------------------------------------- */

	.reserver {
		display: block;
		padding: 60px var(--pad-section);
	}

	/* Horaires & accès ----------------------------------------------------- */

	.acces {
		display: grid;
		grid-template-columns: 1fr 1.15fr;
		gap: 48px;
		align-items: center;
	}

	.acces .titre--section {
		margin-bottom: 10px;
		font-size: 40px;
		line-height: 1.05;
	}

	.acces .texte {
		margin: 0 0 22px;
		font-size: 16px;
	}

	.horaires--acces {
		display: flex;
		flex-direction: column;
		gap: 13px;
		font-size: 16px;
	}

	.horaires--acces .horaires-ligne {
		gap: 16px;
		padding: 0 0 11px;
	}

	.acces-adresse {
		margin-top: 24px;
		font-size: 16px;
	}

	/* À la souris, la cible n'a plus besoin d'être agrandie. */
	.acces-adresse a,
	.pied-contact a,
	.acces-carte-credit a {
		display: inline;
		min-height: 0;
	}

	.acces-itineraire {
		margin-top: 20px;
	}

	.communes {
		margin-top: 24px;
	}

	.communes-liste li {
		padding: 7px 13px;
		font-size: 13.5px;
	}

	.communes-liste li:nth-child(n+4) {
		display: inline-block;
	}

	.acces-carte {
		margin-top: 0;
		box-shadow: 0 16px 36px rgba(0, 0, 0, .35);
	}

	.acces-carte iframe {
		height: 400px;
	}

	.acces-carte-credit {
		padding: 12px 18px;
	}

	/* Gîtes ---------------------------------------------------------------- */

	.gites {
		padding-top: 0;
	}

	.gites-encart {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: 28px;
		padding: 38px 44px;
		border-radius: var(--rayon-encart);
	}

	.gites-texte {
		max-width: 56ch;
	}

	.gites-encart .texte {
		font-size: 16.5px;
	}

	.gites-encart .bouton {
		margin-top: 0;
		white-space: nowrap;
	}

	/* Avis ----------------------------------------------------------------- */

	.avis-entete {
		align-items: baseline;
		margin-bottom: 32px;
	}

	.avis-entete .titre {
		font-size: 38px;
	}

	.cartes--avis {
		grid-template-columns: repeat(3, 1fr);
		gap: 24px;
	}

	.carte--avis {
		padding: 26px;
	}

	.avis-texte {
		margin: 14px 0 16px;
		font-size: 16px;
		line-height: 1.55;
	}

	.avis-auteur {
		font-size: 16px;
	}

	.avis-cta {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		gap: 14px;
		margin-top: 30px;
	}

	.avis-cta-texte {
		margin: 0;
		font-size: 15.5px;
	}

	.avis-cta .bouton {
		width: auto;
		padding: 14px 24px;
		font-size: 15.5px;
	}

	.avis-cta .bouton:hover {
		transform: translateY(-2px);
	}

	/* Pied de page --------------------------------------------------------- */

	.pied {
		padding: 46px var(--pad-section) 34px;
	}

	.pied-colonnes {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
		gap: 34px;
	}

	.logo--pied .logo-nom {
		font-size: 27px;
	}

	.logo--pied .drapeau {
		width: 76px;
		height: 5px;
		margin-top: 12px;
	}

	.pied-contact,
	.pied-reseaux {
		font-size: 14.5px;
	}

	.pied-reseaux {
		flex-direction: column;
		gap: 10px;
	}

	.pied-reseaux a {
		min-height: 0;
	}

	.pied-bas {
		margin-top: 28px;
		padding-top: 16px;
		font-size: 12.5px;
	}
}

/* --------------------------------------------------------------------------
   19. Confort et impression
   -------------------------------------------------------------------------- */

/* Sur écran tactile, un survol reste affiché après le doigt : on le neutralise. */
@media (hover: none) {
	.bouton:hover,
	.carte--plat:hover,
	.pave-tel:hover,
	.avis-cta .bouton:hover {
		transform: none;
		box-shadow: none;
	}

	.bouton--or:hover {
		background: var(--or);
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
	}
}

@media print {
	.entete-barre,
	.barre-fixe,
	.acces-carte,
	.avis-cta,
	.saut-contenu {
		display: none;
	}

	body {
		padding-bottom: 0;
		background: #fff;
		color: #000;
	}
}