/* ==========================================================================
   assets/css/base.css
   --------------------------------------------------------------------------
   Fondations, communes à toutes les pages. Aucune couleur, police ou rayon
   en dur : tout passe par var(--idh-*), injecté par includes/tokens.php
   dans le <style id="idh-tokens"> qui précède cette feuille dans <head>.
   ========================================================================== */

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: hidden; }

body {
	margin: 0;
	background: var(--idh-bg);
	color: var(--idh-ink);
	font-family: var(--idh-font-body);
	font-size: 17px;
	line-height: 1.6;
	font-weight: 400;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }

/* --- Titres : élément graphique, pas un support neutre ------------------ */
h1, h2, h3 {
	font-family: var(--idh-font-display);
	color: var(--idh-title);
	font-weight: 600;
	font-variation-settings: "wdth" 92;
	line-height: .96;
	letter-spacing: -0.035em;
	margin: 0;
	text-wrap: balance;
}
h1 { font-size: clamp(3rem, 9vw, 7rem); letter-spacing: -0.045em; }
h2 { font-size: clamp(2.3rem, 5.4vw, 4.3rem); }
h3 { font-size: clamp(1.35rem, 2.3vw, 1.8rem); font-weight: 500; font-variation-settings: "wdth" 100; letter-spacing: -0.02em; line-height: 1.12; }

p { margin: 0 0 1.1em; max-width: var(--mesure); color: var(--idh-ink); }

a { color: inherit; }
.lien:not(.bouton) { color: var(--idh-link); }

:focus-visible { outline: 2px solid var(--idh-accent); outline-offset: 3px; }

/* --- Utilitaires de mise en page ----------------------------------------- */
.rail   { padding-inline: var(--rail); position: relative; z-index: 1; }
.mesure { max-width: var(--mesure); }
.sr     { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.jalon  { width: 1em; height: 1em; flex-shrink: 0; transform: rotate(var(--idh-jalon-rot, 0deg)); }
.picto  { width: 15px; height: 15px; opacity: .55; flex-shrink: 0; align-self: center; }

/* --- En-têtes de section : identiques sur toute section (règle §4) ------- */
.section-kicker {
	display: flex; align-items: center; gap: 10px;
	margin: 0 0 14px;
	color: var(--idh-accent);
	font-size: .82rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
}
.section-kicker svg { width: 17px; height: 17px; }

.section-sub {
	font-family: var(--idh-font-body);
	font-style: italic;
	font-size: clamp(1.02rem, 1.5vw, 1.28rem);
	line-height: 1.45;
	color: var(--idh-ink-soft);
	margin: 10px 0 0;
	max-width: 52ch;
}

/* base.css */
.idh-conteneur {
  max-width: 1400px;
  margin-inline: auto;
  padding-inline: 24px;
}

/* variante pour contenu éditorial (texte long) qui reste confortable à lire */
.idh-conteneur--etroit {
  max-width: 720px;
}

/* --- Liens & boutons ------------------------------------------------------ */
.lien {
	text-decoration: none;
	background-image: linear-gradient(currentColor, currentColor);
	background-size: 100% 1px;
	background-repeat: no-repeat;
	background-position: 0 100%;
	padding-bottom: 3px;
	transition: background-size .45s cubic-bezier(.2,.7,.2,1), background-position .45s cubic-bezier(.2,.7,.2,1);
}
.lien:hover { background-size: 0 1px; background-position: 100% 100%; }

.bouton {
	display: inline-block;
	font: inherit;
	font-size: .93rem;
	font-weight: 500;
	letter-spacing: .01em;
	padding: 15px 30px;
	border: 1px solid var(--idh-primary);
	border-radius: var(--idh-radius-btn);
	background: var(--idh-primary);
	color: var(--idh-on-primary);
	cursor: pointer;
	text-decoration: none;
	transition: background-color .3s, color .3s;
}
.bouton:hover { background: var(--idh-primary-dark); border-color: var(--idh-primary-dark); }

.bouton--clair {
	background: transparent;
	color: var(--idh-ink);
	border-color: currentColor;
}
.bouton--clair:hover { background: var(--idh-ink); color: var(--idh-bg); border-color: var(--idh-ink); }

.bouton--accent {
	background: var(--idh-accent);
	color: var(--idh-on-accent);
	border-color: var(--idh-accent);
}
.bouton--accent:hover { background: var(--idh-accent-dark); border-color: var(--idh-accent-dark); }

/* Bouton d'appel à l'action posé sous le contenu d'une section d'accueil
   (idh_accueil_bouton() — includes/context.php). Aligné à gauche, comme le
   reste du contenu de la section (titres, texte) — jamais centré plein cadre. */
.idh-section-cta { margin: clamp(30px, 4.5vw, 52px) 0 0; text-align: left; }
.volet__corps .idh-section-cta,
.sejour__contenu .idh-section-cta { margin-top: clamp(20px, 3vw, 32px); }

/* Couleur du bouton CTA : suit le fond de la section (champs charte IDH · 1).
   Défaut = fond principal (idh_charte_fond_titre / idh_charte_fond) — utilisé
   par [idh_blog] (.journal) et [idh_destination] (.mosaique). */
.idh-section-cta > .bouton--clair {
	color: var(--idh-title);
	border-color: currentColor;
}
.idh-section-cta > .bouton--clair:hover {
	background: var(--idh-title);
	color: var(--idh-bg);
	border-color: var(--idh-title);
}
/* Fond secondaire — [idh_avis] (.avis sur --idh-bg-alt) :
   idh_charte_fond_alt_titre / idh_charte_fond_alt. */
.avis .idh-section-cta > .bouton--clair { color: var(--idh-alt-title); }
.avis .idh-section-cta > .bouton--clair:hover {
	background: var(--idh-alt-title);
	color: var(--idh-bg-alt);
	border-color: var(--idh-alt-title);
}
/* Aplat --idh-primary — [idh_sejour] : texte = idh_charte_sur_primaire. */
.sejour .idh-section-cta > .bouton--clair { color: var(--idh-on-primary); }
.sejour .idh-section-cta > .bouton--clair:hover {
	background: var(--idh-on-primary);
	color: var(--idh-primary);
	border-color: var(--idh-on-primary);
}
/* Photo sombre — [idh_volets] : blanc plein, quelle que soit la charte. */
.volet__corps .idh-section-cta > .bouton--clair { color: #fff; }
.volet__corps .idh-section-cta > .bouton--clair:hover {
	background: #fff;
	color: var(--idh-ink);
	border-color: #fff;
}

/* --- Apparition au scroll -------------------------------------------------
   État par défaut = visible. assets/js/reveal.js ajoute .idh-reveal-actif
   sur <html> seulement si l'IntersectionObserver est disponible, PUIS
   anime .venue → .vu. Sans JS (ou JS cassé), rien ne reste invisible :
   c'est le filet de sécurité contre l'écran blanc en cas d'échec du script.
   ========================================================================== */
.venue { opacity: 1; transform: none; }
html.idh-reveal-actif .venue {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1);
}
html.idh-reveal-actif .venue.vu { opacity: 1; transform: none; }

/* --- Trame de fond du kit --------------------------------------------------
   --idh-motif est défini par .kit-<kit> (assets/css/kits.css) ; --idh-bg
   reste la valeur par défaut hors kit pour ne jamais casser le rendu.
   ========================================================================== */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-image: var(--idh-motif, none);
	opacity: var(--idh-motif-opacity, 0);
}

/* --- Rayon des médias, piloté par le kit --------------------------------- */
.puce { border-radius: var(--idh-puce-radius, 50%) !important; clip-path: var(--idh-puce-clip, none); }

@media (max-width: 820px) {
	h1 { letter-spacing: -0.03em; }
}

/* ==========================================================================
   Séparateurs de section — .forme  (includes/forme.php)
   --------------------------------------------------------------------------
   Vague / courbe / triangle… pilotée par idh_charte_forme_type (IDH · 1 →
   Formes) ; hauteur = idh_charte_forme_hauteur (--idh-forme-haut), largeur =
   idh_charte_forme_largeur (--idh-forme-larg). Le tracé est plein dans le bas
   du viewBox : le SVG prend la couleur du mot-clé (.forme--couleur-*, = celle
   du fond de la section coiffée), la crête ondulée déborde dans la section
   voisine.

   La forme reste DANS LE FLUX (sœur de la section, pas en absolu). Sa partie
   pleine (~60 % de sa hauteur) est de la même couleur que la section : on la
   fait recouvrir par la section via une marge négative, si bien que seule la
   crête ondulée reste visible et que l'espace autour du contenu reste
   équilibré quelle que soit la valeur de idh_charte_forme_hauteur.
   ========================================================================== */
.forme {
	display: block;
	width: var(--idh-forme-larg, 100%);
	max-width: 100%;
	height: var(--idh-forme-haut, 90px);
	margin-inline: auto;
	line-height: 0;
	pointer-events: none;
	position: relative;
	z-index: 1;
}
.forme svg { display: block; width: 100%; height: 100%; }
.forme--bas svg { transform: scaleY(-1); }

.forme--couleur-bg      { color: var(--idh-bg); }
.forme--couleur-bg-alt  { color: var(--idh-bg-alt); }
.forme--couleur-primary { color: var(--idh-primary); }
.forme--couleur-accent  { color: var(--idh-accent); }

/* Coiffe d'une section (idh_forme_coiffe) : la section remonte sous la forme
   haute / descend sous la forme basse de 0.6 × hauteur — les tracés ont leur
   ligne de creux à y=40, donc le bord de la section tombe pile dessus :
   raccord invisible, ondulation entière visible. La section passe au-dessus
   (z-index). Une forme posée seule ([idh_forme]) garde sa hauteur pleine. */
.forme-hote { position: relative; }
.forme-hote > :not(.forme) { position: relative; z-index: 2; }
.forme-hote > .forme--haut { margin-bottom: calc(var(--idh-forme-haut, 90px) * -0.6); }
.forme-hote > .forme--bas  { margin-top:    calc(var(--idh-forme-haut, 90px) * -0.6); }

/* Padding vertical de la section coiffée : proportionnel à la hauteur de la
   forme (≈ 0.42 ×), plancher 48px — reste équilibré quand on agrandit la
   forme, sans jamais coller au contenu. Appliqué du ou des côtés coiffés. */
.forme-hote > .forme--haut + :not(.forme) {
	padding-top: max(48px, calc(var(--idh-forme-haut, 90px) * 0.42)) !important;
}
.forme-hote--bas > :not(.forme) {
	padding-bottom: max(48px, calc(var(--idh-forme-haut, 90px) * 0.42)) !important;
}
