/* Polices auto-hébergées (sous-ensemble latin, woff2, font-display:swap) — DA §3. */
@font-face{ font-family:'Noto Serif Display'; font-style:normal; font-weight:100 900; font-stretch:62.5% 100%; font-display:swap;
	src:url(../fonts/noto-serif-display.woff2) format('woff2');
	unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face{ font-family:'Noto Serif Display'; font-style:italic; font-weight:100 900; font-stretch:62.5% 100%; font-display:swap;
	src:url(../fonts/noto-serif-display-italique.woff2) format('woff2');
	unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face{ font-family:'Tajawal'; font-style:normal; font-weight:400; font-display:swap; src:url(../fonts/tajawal-400.woff2) format('woff2'); }
@font-face{ font-family:'Tajawal'; font-style:normal; font-weight:500; font-display:swap; src:url(../fonts/tajawal-500.woff2) format('woff2'); }
@font-face{ font-family:'Tajawal'; font-style:normal; font-weight:700; font-display:swap; src:url(../fonts/tajawal-700.woff2) format('woff2'); }
@font-face{ font-family:'Tajawal'; font-style:normal; font-weight:800 900; font-display:swap; src:url(../fonts/tajawal-800.woff2) format('woff2'); }
/* Sable Bleu — base : variables, reset, typographie, boutons.
   Palette et polices : DIRECTION-ARTISTIQUE.md §2-3. Préfixe des classes propres : fn-. */

:root{
	/* Palette (mode clair uniquement — règle réseau) */
	--sb-fond:#FBF8F2; --sb-surf:#F3E7D0; --sb-encre:#1C2420; --sb-doux:#5B625A;
	--sb-accent:#0A6CB5; --sb-accent-sable:#085E9E; --sb-accent-clair:#E4EEF7;
	--sb-fonce:#17201B; --sb-sur-fonce:#F3E7D0; --sb-filet:#E3D6BC;
	--sb-fond-carte:#FFFFFF; --sb-cta:#C62A1F; --sb-cta-survol:#A52217;
	--sb-lagune:#1FA6A0; --sb-dune:#C79A5B;

	/* Jetons partagés avec les blocs figés (namespace --sb-*) */
	--sb-conteneur:1240px; --sb-lecture:720px; --sb-rail:340px; --sb-gouttiere:24px;
	--sb-rayon:18px; --sb-rayon-grand:22px;
	--sb-ombre:0 10px 30px rgba(28,36,32,.10); --sb-ombre-forte:0 24px 60px rgba(28,36,32,.22);
	--sb-titre:'Noto Serif Display', Georgia, serif;
	--sb-texte:'Tajawal', system-ui, sans-serif;

	color-scheme: light;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; color-scheme: light; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto; } }
body{
	margin: 0; background: var(--sb-fond); color: var(--sb-encre);
	font-family: var(--sb-texte); font-size: 17px; line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}
img{ max-width: 100%; display: block; }
a{ color: inherit; }
h1,h2,h3,h4{ font-family: var(--sb-titre); color: var(--sb-encre); line-height: 1.1; margin: 0 0 .5em; }
button{ font-family: inherit; }

.fn-conteneur{ max-width: var(--sb-conteneur); margin-inline: auto; padding-inline: 24px; }
@media (max-width: 480px){ .fn-conteneur{ padding-inline: 20px; } }

.fn-kicker{
	font-family: var(--sb-texte); font-weight: 700; font-size: 13px; letter-spacing: .08em;
	text-transform: uppercase; color: var(--sb-cta); display: flex; align-items: center; gap: 8px;
}
.fn-kicker::before{ content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--sb-cta); display: inline-block; }
.fn-kicker--chapitre{ color: var(--sb-cta); font-size: 13px; }

.fn-titre-section{
	font-family: var(--sb-titre); font-stretch: 62.5%; font-weight: 600; letter-spacing: .02em;
	text-transform: uppercase; font-size: clamp(26px, 2.4vw, 40px); margin: 6px 0 24px;
}

.fn-btn{
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	padding: 15px 28px; border-radius: 999px; font-weight: 700; font-size: 1rem;
	background: var(--sb-cta); color: #fff; text-decoration: none; border: 0; cursor: pointer;
	font-family: var(--sb-texte); transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
	min-height: 48px;
}
.fn-btn:hover{ background: var(--sb-cta-survol); transform: translateY(-2px); box-shadow: var(--sb-ombre); }
.fn-btn--blanc{ background: #fff; color: var(--sb-encre); }
.fn-btn--blanc:hover{ background: var(--sb-sur-fonce); }
.fn-btn--fantome{ background: transparent; border: 1.5px solid currentColor; color: inherit; }
.fn-btn--pleine{ width: 100%; }

.fn-jasmin{ display: inline-block; width: .9em; height: .9em; vertical-align: -.1em; }

/* Apparition discrète au défilement — coupée sous prefers-reduced-motion */
.fn-apparait{ opacity: 0; transform: translateY(16px); transition: opacity .4s ease, transform .4s ease; }
.fn-apparait.fn-visible{ opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce){ .fn-apparait{ opacity: 1; transform: none; transition: none; } }

/* Frise tresse (mosaïque romaine) — procédé signature §8.2 */
.fn-frise{
	height: 14px; background-image:
		repeating-linear-gradient(135deg, var(--sb-dune) 0 4px, transparent 4px 10px),
		repeating-linear-gradient(45deg, var(--sb-accent) 0 4px, transparent 4px 10px);
	opacity: .55;
}

/* Header */
.fn-header{
	position: sticky; top: 0; z-index: 50; height: 72px; display: flex; align-items: center;
	background: rgba(251,248,242,.86); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.fn-header-inner{ display: flex; align-items: center; justify-content: space-between; gap: 24px; width: 100%; }
.fn-logo{ display: flex; align-items: center; gap: 8px; text-decoration: none; }
.fn-logo svg{ height: 36px; width: auto; }
.fn-nav{ display: flex; align-items: center; gap: 28px; list-style: none; margin: 0; padding: 0; flex: 1; justify-content: center; }
.fn-nav a{ text-decoration: none; font-weight: 500; font-size: 15px; color: var(--sb-encre); }
.fn-nav a:hover{ color: var(--sb-accent); }
.fn-nav > li{ position: relative; }
.fn-sousmenu{ list-style: none; margin: 0; padding: 10px; position: absolute; top: 28px; left: 0;
	background: var(--sb-fond-carte); border-radius: 14px; box-shadow: var(--sb-ombre-forte);
	min-width: 200px; display: none; }
.fn-nav > li:hover .fn-sousmenu, .fn-nav > li:focus-within .fn-sousmenu{ display: block; }
.fn-sousmenu li a{ display: block; padding: 8px 10px; border-radius: 8px; font-size: 14px; }
.fn-sousmenu li a:hover{ background: var(--sb-surf); }
.fn-burger{ display: none; background: none; border: 0; cursor: pointer; padding: 8px; }
.fn-header-cta{ flex-shrink: 0; }

@media (max-width: 960px){
	.fn-nav{ position: fixed; inset: 72px 0 0 0; background: var(--sb-fond); flex-direction: column;
		align-items: flex-start; padding: 24px; gap: 18px; overflow-y: auto; display: none; justify-content: flex-start; }
	.fn-nav.fn-ouvert{ display: flex; }
	.fn-sousmenu{ position: static; display: none; box-shadow: none; padding-left: 12px; }
	.fn-nav > li.fn-ouvert .fn-sousmenu{ display: block; }
	.fn-burger{ display: block; }
	.fn-header-cta .fn-btn{ padding: 10px 16px; font-size: .875rem; }
}

/* Fil d'ariane à jasmin */
.fn-fil-ariane{ font-size: .8125rem; color: var(--sb-doux); display: flex; gap: 8px; flex-wrap: wrap; padding-block: 16px; align-items: center; }
.fn-fil-ariane a{ color: var(--sb-doux); text-decoration: none; }
.fn-fil-ariane a:hover{ color: var(--sb-encre); }

/* Crête de dune (bord bas courbé des bandes sable) */
.fn-crete-dune{ position: relative; }
.fn-crete-dune::after{
	content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 48px;
	background: var(--sb-fond);
	clip-path: polygon(0 100%, 0 40%, 15% 55%, 35% 20%, 55% 60%, 78% 10%, 100% 45%, 100% 100%);
}

/* Pastille de région en verre */
/* DA §2 : le bleu Sidi Bou (--sb-accent) tombe à 4,48:1 sur fond sable — on bascule
   vers le bleu profond pour tout texte/lien sur fond sable (règle de contraste). */
.fn-fond-sable{ --sb-accent: var(--sb-accent-sable); }

.fn-pastille-verre{
	display: inline-flex; align-items: center; gap: 6px; background: rgba(251,248,242,.82);
	backdrop-filter: blur(6px); border-radius: 999px; padding: 8px 14px; font-size: .8125rem;
	font-weight: 600; color: var(--sb-encre);
}

/* Sections et fonds (partagés : accueil, rubriques, pages annexes) */
.fn-section{ padding-block: 64px; }
@media (max-width: 760px){ .fn-section{ padding-block: 44px; } }
.fn-fond-chaux{ background: var(--sb-fond); }
.fn-fond-sable{ background: var(--sb-surf); }
.fn-fond-nuit{ background: var(--sb-fonce); color: var(--sb-sur-fonce); }
.fn-fond-bleu{ background: var(--sb-accent); color: #fff; }
.fn-fond-nuit .fn-titre-section, .fn-fond-bleu .fn-titre-section,
.fn-fond-nuit h2, .fn-fond-nuit h3, .fn-fond-bleu h2, .fn-fond-bleu h3{ color: inherit; }
/* Numéro de chapitre des titres de section (procédé §8.6) */
.fn-num-chapitre{ font-family: var(--sb-texte); font-stretch: normal; font-weight: 800; font-size: .5em; color: var(--sb-cta);
	vertical-align: .55em; margin-right: .35em; letter-spacing: 0; font-variant-numeric: lining-nums tabular-nums; }
.fn-fond-nuit .fn-num-chapitre{ color: #F08A80; }
/* Silhouette de la Tunisie */
.fn-silhouette-contour{ fill: rgba(199,154,91,.14); stroke: var(--sb-dune); stroke-width: 1.4; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.fn-silhouette-point{ fill: var(--sb-doux); stroke: var(--sb-fond); stroke-width: 1.5; transition: r .3s ease, fill .3s ease; }
.fn-silhouette-point.est-actif{ fill: var(--sb-cta); }
.fn-fond-nuit .fn-silhouette-point{ fill: var(--sb-sur-fonce); stroke: var(--sb-fonce); }
.fn-fond-nuit .fn-silhouette-point.est-actif{ fill: var(--sb-cta); }
.fn-nav a.est-actif{ color: var(--sb-accent); box-shadow: inset 0 -2px 0 var(--sb-cta); padding-bottom: 4px; }
.fn-nav a{ padding-block: 6px; }
@media (max-width: 960px){ .fn-nav a{ font-size: 18px; } }
.fn-cta-court{ display: none; }
@media (max-width: 560px){
	.fn-header{ height: 64px; }
	.fn-header-inner{ gap: 10px; }
	.fn-cta-long{ display: none; } .fn-cta-court{ display: inline; }
	.fn-header-cta .fn-btn{ padding: 9px 14px; min-height: 44px; font-size: .875rem; }
	.fn-logo svg{ height: 30px; }
	.fn-burger{ order: 3; margin-right: -8px; }
	.fn-nav{ inset: 64px 0 0 0; }
}
/* Sable Bleu — composants : formulaire 4 étapes, tuiles, pilules, macaron, silhouette. */

/* Carte-formulaire flottante */
.fn-carte-formulaire{
	background: #fff; border-radius: var(--sb-rayon-grand); box-shadow: var(--sb-ombre-forte);
	padding: 28px; width: 100%; max-width: 460px;
}
.fn-carte-formulaire--rail{ max-width: none; padding: 20px; box-shadow: none; border: 1px solid var(--sb-filet); }
.fn-formulaire-titre{ font-family: var(--sb-titre); font-size: 24px; margin: 0 0 4px; }
.fn-formulaire-titre--petit{ font-size: 17px; }
.fn-formulaire-soustitre{ color: var(--sb-doux); font-size: 14px; margin: 0 0 16px; }
.fn-progression{ display: flex; gap: 6px; margin: 14px 0 6px; }
.fn-progression-segment{ height: 4px; flex: 1; border-radius: 4px; background: var(--sb-surf); }
.fn-progression-segment.est-actif, .fn-progression-segment.est-fait{ background: var(--sb-accent); }
.fn-etape-compteur{ font-size: 12px; color: var(--sb-doux); margin: 0 0 18px; }

.fn-question{ font-family: var(--sb-titre); font-size: 19px; margin: 0 0 14px; }
.fn-tuiles{ display: grid; gap: 10px; margin-bottom: 18px; }
.fn-tuiles--2col{ grid-template-columns: 1fr 1fr; }
.fn-tuiles--3col{ grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 480px){ .fn-tuiles--3col{ grid-template-columns: 1fr 1fr; } }
.fn-tuile{
	min-height: 64px; border-radius: 14px; border: 1.5px solid var(--sb-filet); background: var(--sb-accent-clair);
	font-family: var(--sb-texte); font-weight: 600; font-size: 14px; color: var(--sb-encre); cursor: pointer;
	padding: 10px; text-align: center; transition: border-color .2s ease, background .2s ease;
}
.fn-tuile--petite{ font-size: 13px; min-height: 52px; }
.fn-tuile:hover{ border-color: var(--sb-accent); }
.fn-tuile.est-choisie{ background: var(--sb-accent); color: #fff; border-color: var(--sb-accent); }

.fn-label{ display: block; font-size: 13px; font-weight: 600; color: var(--sb-doux); margin: 16px 0 8px; }
.fn-pilules{ display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.fn-pilule{
	border-radius: 999px; border: 1.5px solid var(--sb-filet); background: #fff; padding: 9px 16px;
	font-size: 13px; font-weight: 600; cursor: pointer; font-variant-numeric: tabular-nums;
}
.fn-pilule.est-choisie{ background: var(--sb-accent); color: #fff; border-color: var(--sb-accent); }

.fn-compteurs{ display: flex; gap: 20px; margin: 14px 0; }
.fn-compteur{ display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--sb-doux); }
.fn-compteur > div{ display: flex; align-items: center; gap: 10px; }
.fn-compteur button{
	width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--sb-filet); background: #fff; cursor: pointer; font-size: 16px;
}
.fn-compteur output{ font-family: var(--sb-texte); font-weight: 800; font-variant-numeric: tabular-nums; min-width: 20px; text-align: center; }

.fn-ligne-champs{ display: flex; gap: 10px; margin-bottom: 10px; }
.fn-ligne-champs input, .fn-formulaire textarea{
	width: 100%; border: 1.5px solid var(--sb-filet); border-radius: 12px; padding: 13px 14px; font-size: 15px; font-family: var(--sb-texte);
}
.fn-formulaire textarea{ margin-bottom: 12px; resize: vertical; min-height: 44px; }
.fn-case-rgpd{ display: flex; gap: 10px; align-items: start; font-size: 12.5px; color: var(--sb-doux); margin-bottom: 16px; }
.fn-case-rgpd a{ color: var(--sb-accent); }
.fn-piege{ position: absolute; left: -9999px; }
.fn-etape-actions{ display: flex; flex-direction: column; gap: 10px; }
.fn-lien-retour{ background: none; border: 0; color: var(--sb-doux); font-size: 13px; cursor: pointer; text-align: left; padding: 0; }
.fn-confirmation{ text-align: center; padding: 20px 0; }
.fn-jasmin-coche{ width: 56px; height: 56px; margin-bottom: 12px; }
.fn-confirmation-titre{ font-family: var(--sb-titre); font-size: 19px; }

/* Réassurances (hero) */
.fn-reassurances{ list-style: none; display: flex; flex-wrap: wrap; gap: 18px; margin: 20px 0; padding: 0; font-size: 14px; font-weight: 600; }
.fn-reassurances li{ display: flex; align-items: center; gap: 6px; }
.fn-jasmin{ width: 16px; height: 16px; }

/* Silhouette verticale */
.fn-silhouette{ width: 100%; height: auto; max-width: 150px; display: block; }
.fn-silhouette-point{ transition: r .3s ease; }

/* Macaron rond à texte circulaire (procédé §8.4) */
.fn-macaron{
	position: relative; width: 112px; height: 112px; border-radius: 50%; background: var(--sb-cta); color: #fff;
	display: flex; align-items: center; justify-content: center; box-shadow: var(--sb-ombre-forte);
}
.fn-macaron svg{ width: 100%; height: 100%; animation: fn-tourne 16s linear infinite; }
@media (prefers-reduced-motion: reduce){ .fn-macaron svg{ animation: none; } }
@keyframes fn-tourne{ to{ transform: rotate(360deg); } }
.fn-macaron-centre{ position: absolute; font-family: var(--sb-titre); font-weight: 700; font-size: 11px; text-align: center; line-height: 1.1; }

/* Tuiles d'envie (sélecteur) */
.fn-tuile-envie{
	position: relative; border-radius: 18px; overflow: hidden; min-width: 200px; aspect-ratio: 220/300;
	box-shadow: var(--sb-ombre); transition: transform .25s ease, box-shadow .25s ease; cursor: pointer; border: 0; padding: 0;
}
.fn-tuile-envie img{ width: 100%; height: 100%; object-fit: cover; }
.fn-tuile-envie::after{ content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(23,32,27,.75), transparent 55%); }
.fn-tuile-envie span{ position: absolute; left: 16px; bottom: 14px; color: #fff; font-weight: 700; font-size: 15px; z-index: 1; font-family: var(--sb-titre); }
.fn-tuile-envie:hover{ transform: translateY(-6px); box-shadow: var(--sb-ombre-forte); }

/* Rail horizontal (destinations, envies mobile) */
.fn-rail-horizontal{ display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; }
.fn-rail-horizontal > *{ scroll-snap-align: start; flex-shrink: 0; }
.fn-rail-horizontal::-webkit-scrollbar{ height: 6px; }
.fn-rail-horizontal::-webkit-scrollbar-thumb{ background: var(--sb-filet); border-radius: 6px; }

/* Cartes génériques (grilles d'accueil/rubrique) */
.fn-carte{
	background: var(--sb-fond-carte); border-radius: var(--sb-rayon); overflow: hidden; box-shadow: var(--sb-ombre);
	transition: transform .2s ease, box-shadow .2s ease; display: block; text-decoration: none; color: inherit;
}
.fn-carte:hover{ transform: translateY(-4px); box-shadow: var(--sb-ombre-forte); }
.fn-carte-photo{ position: relative; aspect-ratio: 16/10; overflow: hidden; }
.fn-carte-photo img{ width: 100%; height: 100%; object-fit: cover; }
.fn-carte-pastille{ position: absolute; top: 12px; left: 12px; background: var(--sb-cta); color: #fff; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 5px 10px; border-radius: 999px; }
.fn-carte-corps{ padding: 16px 18px; }
.fn-carte-corps h3{ font-size: 17px; margin: 0 0 6px; }
.fn-carte-corps p{ color: var(--sb-doux); font-size: 14px; margin: 0; }

/* Compteur animé */
.fn-compteur-anime{ font-family: var(--sb-texte); font-weight: 800; font-variant-numeric: tabular-nums; }

/* Grilles génériques */
.fn-grille-3{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.fn-grille-2{ display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 860px){ .fn-grille-3{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px){ .fn-grille-3, .fn-grille-2{ grid-template-columns: 1fr; } }

/* Reprise 03/10 — formulaire : erreurs lisibles, focus visible, étapes 3-4 compactes */
.fn-tuile:focus-visible, .fn-pilule:focus-visible, .fn-btn:focus-visible, .fn-lien-retour:focus-visible,
.fn-compteur button:focus-visible, .fn-ligne-champs input:focus-visible, .fn-formulaire textarea:focus-visible{ outline: 3px solid var(--sb-accent); outline-offset: 2px; }
.fn-question:focus{ outline: none; }
.fn-ligne-champs input:focus, .fn-formulaire textarea:focus{ border-color: var(--sb-accent); }
.fn-ligne-champs input.est-en-erreur, .fn-case-rgpd input.est-en-erreur{ border-color: var(--sb-cta); outline-color: var(--sb-cta); }
.fn-case-rgpd input.est-en-erreur + span{ color: var(--sb-cta); }
.fn-formulaire-erreur{ margin: -4px 0 12px; font-size: 13.5px; font-weight: 700; color: var(--sb-cta); }
.fn-etape[data-fn-etape="3"] .fn-label{ margin: 10px 0 6px; }
.fn-etape[data-fn-etape="3"] .fn-pilules{ gap: 6px; margin-bottom: 4px; }
.fn-etape[data-fn-etape="3"] .fn-pilule{ padding: 7px 11px; font-size: 13px; min-height: 36px; }
.fn-etape[data-fn-etape="3"] .fn-compteurs{ margin: 10px 0 2px; }
.fn-compteur button{ width: 36px; height: 36px; }
.fn-etape .fn-etape-actions{ flex-direction: row-reverse; align-items: center; gap: 14px; margin-top: 14px; }
.fn-etape .fn-etape-actions .fn-btn{ flex: 1; }
.fn-lien-retour{ white-space: nowrap; min-height: 44px; }
.fn-lien-retour:hover{ color: var(--sb-encre); }
.fn-etape[data-fn-etape="4"] .fn-ligne-champs input{ padding: 12px 13px; }
.fn-case-rgpd{ margin-bottom: 10px; }
.fn-case-rgpd input{ width: 18px; height: 18px; margin-top: 1px; flex-shrink: 0; accent-color: var(--sb-accent); }
@media (max-width: 480px){ .fn-ligne-champs{ gap: 8px; } .fn-ligne-champs input{ font-size: 16px; } .fn-etape .fn-etape-actions .fn-btn{ padding-inline: 16px; } }
/* Photo de carte : la photo remplit le cadre sans jamais l'agrandir (hauteur pilotée par le cadre) */
.fn-carte-photo > img, .fn-recit-photo > img{ position: absolute; inset: 0; }
.fn-recit-photo{ position: relative; }
.fn-carte-photo{ background: var(--sb-surf); }
@media (max-width: 480px){
	.fn-etape[data-fn-etape="3"] .fn-pilule{ padding: 6px 9px; font-size: 12.5px; min-height: 34px; }
	.fn-etape[data-fn-etape="3"] .fn-label{ margin: 8px 0 5px; }
	.fn-etape[data-fn-etape="3"] .fn-compteurs{ margin: 8px 0 0; gap: 24px; }
	.fn-carte-formulaire .fn-progression{ margin: 8px 0 4px; }
	.fn-carte-formulaire .fn-etape-compteur{ margin-bottom: 10px; }
	.fn-carte-formulaire .fn-question{ margin-bottom: 10px; font-size: 18px; }
	.fn-tuile--petite{ min-height: 46px; font-size: 12.5px; padding: 6px; }
}

/* Juge visuel passe 2 (04/10) — étape 4 à 390 : bouton d'envoi pleine largeur sur une ligne, retour en dessous */
@media (max-width: 480px){
	.fn-etape .fn-etape-actions{ flex-direction: column; align-items: stretch; gap: 8px; }
	.fn-etape .fn-etape-actions .fn-btn{ width: 100%; white-space: nowrap; }
	.fn-etape .fn-etape-actions .fn-lien-retour{ align-self: center; }
}
/* BLOC FIGÉ — SOMMAIRE (thématique) — copié sans modification. */
.sbt-sommaire{
	background: var(--sb-fond-carte, #ffffff); border: 1px solid var(--sb-filet, #e2e5ef);
	border-left: 4px solid var(--sb-accent, #2563eb); border-radius: var(--sb-rayon, 14px);
	padding: 16px 20px;
}
.sbt-sommaire-titre{
	font-family: var(--sb-titre, 'Manrope', system-ui, sans-serif); font-weight: 700;
	font-size: .9375rem; cursor: pointer; list-style: none;
}
.sbt-sommaire-titre::-webkit-details-marker{ display: none; }
.sbt-sommaire ol{ list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.sbt-sommaire li a{
	display: flex; align-items: baseline; gap: 10px; font-size: .9375rem;
	color: var(--sb-encre, #0f172a); text-decoration: none;
}
.sbt-sommaire li a:hover{ color: var(--sb-accent, #2563eb); text-decoration: underline; }
.sbt-sommaire-num{
	font-family: var(--sb-titre, 'Manrope', system-ui, sans-serif); font-weight: 700; font-size: .75rem;
	color: var(--sb-encre, #0f172a); background: var(--sb-surf, #f4f5fa); border-radius: 50%;
	width: 20px; height: 20px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
}
/* BLOC FIGÉ — BARRE LATÉRALE D'ARTICLE (thématique) — copié sans modification. */
.sbt-rail{
	position: sticky; top: 96px; align-self: start;
	display: flex; flex-direction: column; gap: 20px;
	border-left: 1px solid var(--sb-filet, #e2e5ef); padding-left: 20px;
}
/* GARDE-FOU (retour Mathias x3) : jamais de overflow-y ni de max-height ici. */
.sbt-rail-carte{
	background: var(--sb-fond-carte, #ffffff); border: 1px solid var(--sb-filet, #e2e5ef);
	border-radius: var(--sb-rayon, 14px); padding: 18px;
}
.sbt-rail-carte .sbt-t4, .sbt-rail-carte h4{
	font-family: var(--sb-titre, 'Manrope', system-ui, sans-serif); font-size: .875rem;
	text-transform: uppercase; letter-spacing: .04em; color: var(--sb-doux, #55607a); margin: 0 0 10px;
}
@media (max-width: 1080px){
	.sbt-rail{ position: static; border-left: 0; padding-left: 0; border-top: 1px solid var(--sb-filet, #e2e5ef); padding-top: 20px; }
}
/* BLOC FIGÉ — ENCADRÉS — copié sans modification (couleurs en var(--sb-*)). */
.sbt-encadre{ margin-block: 2em; border-radius: var(--sb-rayon-grand, 22px); }
.sbt-encadre-titre{
	margin: 0 0 12px; font-family: var(--sb-titre, 'Manrope', system-ui, sans-serif);
	font-weight: 700; font-size: .8125rem; text-transform: uppercase; letter-spacing: .08em;
}
.sbt-encadre--retenir{ background: var(--sb-fonce, #141733); color: var(--sb-sur-fonce, #ffffff); padding: 28px 30px; }
.sbt-encadre--retenir .sbt-encadre-titre{ color: var(--sb-accent-clair, #93c5fd); }
.sbt-retenir-liste{ list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.sbt-retenir-liste li{ position: relative; padding-left: 32px; font-size: 1rem; line-height: 1.55; }
.sbt-retenir-liste li::before{
	content: ""; position: absolute; left: 0; top: .15em; width: 20px; height: 20px; border-radius: 50%;
	background: var(--sb-accent, #2563eb)
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E")
		center / 12px no-repeat;
}
.sbt-encadre--saviez{
	display: grid; grid-template-columns: 48px 1fr; gap: 16px; align-items: start;
	padding: 22px 24px; background: var(--sb-surf, #f4f5fa);
}
.sbt-encadre--saviez::before{
	content: "?"; grid-row: 1 / span 2; width: 48px; height: 48px; border-radius: 14px;
	background: var(--sb-accent, #2563eb); color: #fff; display: flex; align-items: center; justify-content: center;
	font-family: var(--sb-titre, 'Manrope', system-ui, sans-serif); font-weight: 700; font-size: 1.375rem;
}
.sbt-encadre--saviez .sbt-encadre-titre{ grid-column: 2; margin: 0; color: var(--sb-encre, #0f172a); }
.sbt-encadre--saviez p:not(.sbt-encadre-titre){ grid-column: 2; margin: 0; font-size: 1rem; line-height: 1.6; color: var(--sb-encre, #0f172a); }
@media (max-width: 620px){
	.sbt-encadre--saviez{ grid-template-columns: 1fr; }
	.sbt-encadre--saviez::before{ grid-row: 1; }
	.sbt-encadre--saviez .sbt-encadre-titre, .sbt-encadre--saviez p:not(.sbt-encadre-titre){ grid-column: 1; }
}
/* BLOC FIGÉ — FAQ EN ACCORDÉON — copié sans modification. */
.sbt-faq{ margin: 56px 0; padding: 30px; border-radius: var(--sb-rayon-grand, 22px); background: var(--sb-surf, #f4f5fa); border: 1px solid var(--sb-filet, #e2e5ef); }
.sbt-faq-liste{ display: grid; gap: 10px; }
.sbt-faq-liste details{
	background: var(--sb-fond-carte, #ffffff); border: 1px solid var(--sb-filet, #e2e5ef) !important;
	border-radius: 14px; padding: 0 !important; transition: box-shadow .25s ease, border-color .25s ease;
}
.sbt-faq-liste details[open]{ box-shadow: var(--sb-ombre, 0 8px 24px rgba(15,23,42,.08)); border-color: var(--sb-accent, #2563eb) !important; }
.sbt-faq-liste summary{
	list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center;
	gap: 18px; padding: 18px 20px; font-size: 1.03rem; font-weight: 600; line-height: 1.45; color: var(--sb-encre, #0f172a);
}
.sbt-faq-liste summary::-webkit-details-marker{ display: none; }
.sbt-faq-liste summary::after{
	content: ""; width: 30px; height: 30px; flex: none; border-radius: 50%;
	background: var(--sb-surf, #f4f5fa) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center / 15px no-repeat;
	transition: transform .3s ease;
}
.sbt-faq-liste details[open] summary::after{ transform: rotate(135deg); }
.sbt-faq-liste summary:hover{ color: var(--sb-accent, #2563eb); }
.sbt-faq-reponse{ padding: 0 20px 18px; font-size: .96875rem; line-height: 1.75; color: var(--sb-doux, #55607a); }
.sbt-faq-reponse p{ margin: 0 0 14px; }
.sbt-faq-reponse p:last-child{ margin-bottom: 0; }
@media (max-width: 760px){ .sbt-faq{ padding: 20px; } }
/* BLOC FIGÉ — SIGNATURE / BOÎTE AUTEUR — copié sans modification. */
.sbt-auteur{
	display: grid; grid-template-columns: 120px 1fr; gap: 26px; margin: 54px 0 10px;
	padding: 30px; border-radius: var(--sb-rayon-grand, 22px);
	background: var(--sb-surf, #f4f5fa); border: 1px solid var(--sb-filet, #e2e5ef);
}
.sbt-auteur-photo img{
	width: 120px; height: 120px; border-radius: 50%; object-fit: cover;
	box-shadow: 0 0 0 5px var(--sb-fond-carte, #ffffff), var(--sb-ombre, 0 8px 24px rgba(15,23,42,.08));
}
.sbt-auteur-sur{ margin: 0 0 2px; font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--sb-doux, #55607a); }
.sbt-auteur-nom{ font-size: 1.5rem; margin: 0 0 4px; font-family: var(--sb-titre, 'Manrope', system-ui, sans-serif); }
.sbt-auteur-nom a{ color: var(--sb-encre, #0f172a); text-decoration: none; }
.sbt-auteur-nom a:hover{ text-decoration: underline; }
.sbt-auteur-role{ margin: 0 0 12px; font-size: .8125rem; font-weight: 600; color: var(--sb-accent, #2563eb); text-transform: uppercase; letter-spacing: .05em; }
.sbt-auteur-bio{ font-size: .96875rem; line-height: 1.7; color: var(--sb-encre, #0f172a); margin: 0 0 16px; }
.sbt-auteur-chiffres{ display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.sbt-auteur-chiffres span{ background: var(--sb-fond-carte, #ffffff); border-radius: 12px; padding: 8px 12px; font-size: .78125rem; color: var(--sb-doux, #55607a); }
.sbt-auteur-chiffres b{ color: var(--sb-encre, #0f172a); margin-right: 4px; }
.sbt-auteur-der{ margin-bottom: 18px; }
.sbt-auteur-der p{ margin: 0 0 6px; font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--sb-doux, #55607a); }
.sbt-auteur-der a{ display: block; font-size: .9375rem; font-weight: 500; padding: 6px 0; color: var(--sb-encre, #0f172a); text-decoration: none; border-bottom: 1px dashed var(--sb-filet, #e2e5ef); }
.sbt-auteur-der a:hover{ color: var(--sb-accent, #2563eb); }
.sbt-auteur-actions{ display: flex; flex-wrap: wrap; gap: 10px; }
.sbt-auteur-actions .sbt-btn{
	display: inline-block; padding: 10px 18px; border-radius: 999px; font-size: .875rem; font-weight: 600;
	text-decoration: none; background: var(--sb-accent, #2563eb); color: #fff;
}
.sbt-auteur-actions .sbt-btn--fantome{ background: transparent; border: 1.5px solid var(--sb-filet, #e2e5ef); color: var(--sb-encre, #0f172a); }
@media (max-width: 700px){
	.sbt-auteur{ grid-template-columns: 1fr; padding: 22px; }
	.sbt-auteur-photo img{ width: 88px; height: 88px; }
}
/* BLOC FIGÉ — PIED DE PAGE — copié sans modification. Couleurs du réseau remplacées
   par les variables Sable Bleu (--sb-*) au lieu des couleurs bleutées en dur. */
.sbt-btn{
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	padding: 13px 24px; border-radius: 999px; font-weight: 700; font-size: 1rem;
	background: var(--sb-cta, #C62A1F); color: #fff; text-decoration: none; border: 0; cursor: pointer;
	font-family: var(--sb-texte); transition: transform .2s ease, box-shadow .2s ease;
}
.sbt-btn:hover{ transform: translateY(-2px); box-shadow: var(--sb-ombre, 0 8px 24px rgba(15,23,42,.08)); }
.sbt-btn--petit{ padding: 10px 18px; font-size: .875rem; }
.sbt-btn--fantome{ background: transparent; border: 1.5px solid rgba(255,255,255,.5); color: inherit; }

.sbt-footer{ background: var(--sb-fonce, #17201B); color: var(--sb-sur-fonce, #F3E7D0); padding-block: clamp(40px,6vw,64px) 24px; }
.sbt-footer a{ color: #C9CFC6; text-decoration: none; }
.sbt-footer a:hover{ color: var(--sb-sur-fonce, #fff); }
.sbt-footer-logo svg{ height: 28px; width: auto; display: block; margin-bottom: 14px; }

.sbt-footer-cta{
	display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
	padding-bottom: 32px; margin-bottom: 32px; border-bottom: 1px solid rgba(255,255,255,.12);
}
.sbt-footer-cta .sbt-t3{ color: var(--sb-sur-fonce, #fff); margin: 0 0 4px; font-size: 1.25rem; font-family: var(--sb-titre); }
.sbt-footer-cta p{ color: #C9CFC6; margin: 0; max-width: 46ch; }

.sbt-footer-grille{ display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 32px; padding-bottom: 32px; border-bottom: 1px solid rgba(255,255,255,.12); }
@media (max-width: 980px){ .sbt-footer-grille{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .sbt-footer-grille{ grid-template-columns: 1fr; } }
.sbt-footer-colonne .sbt-t4{ font-family: var(--sb-titre); font-size: .8125rem; text-transform: uppercase; letter-spacing: .06em; color: #8FA093; margin: 0 0 14px; }
.sbt-footer-colonne ul{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.sbt-footer-colonne ul a{ font-size: .875rem; }
.sbt-footer-desc{ color: #C9CFC6; font-size: .9375rem; margin: 0; max-width: 32ch; }

.sbt-footer-bas{ padding-top: 20px; font-size: .8125rem; color: #8FA093; }

.sbt-cookies{
	position: fixed; left: 8px; right: 8px; bottom: 8px; z-index: 80;
	background: var(--sb-fonce, #17201B); color: #fff; border-radius: 12px;
	padding: 10px 14px; display: none; align-items: center; gap: 12px;
	box-shadow: var(--sb-ombre-forte, 0 16px 40px rgba(15,23,42,.16)); max-height: 64px; overflow: hidden;
}
.sbt-cookies.est-visible{ display: flex; }
.sbt-cookies p{ margin: 0; flex: 1; min-width: 0; font-size: .75rem; line-height: 1.3; }
.sbt-cookies-actions{ display: flex; gap: 8px; flex-shrink: 0; }
.sbt-cookies .sbt-btn{ flex-shrink: 0; padding: 8px 14px; min-height: 32px; font-size: .8125rem; }
/*
 * BLOC FIGÉ — ARTICLE (thématique) — CSS
 * Origine : curieux-du-web.com, theme/style.css, règles `.cdw-article*` /
 * `.cdw-fil-ariane` / `.cdw-a-lire` / `.cdw-carte*` (renommées `.sbt-*` ici).
 * Couleurs/polices/espacements uniquement en `var(--sb-*, repli)` : un site neuf peut
 * utiliser ce fichier tel quel sans avoir encore défini ses propres variables.
 *
 * INTERDIT DE MODIFIER : voir single-article.php (un seul <article>, « à lire aussi »
 * en <div>). LIBRE DE MODIFIER : toutes les valeurs des var() ci-dessous.
 */

.sbt-conteneur{ max-width: var(--sb-conteneur, 1240px); margin-inline: auto; padding-inline: var(--sb-gouttiere, 24px); }

.sbt-fil-ariane{ font-size: .8125rem; color: var(--sb-doux, #55607a); display: flex; gap: 6px; flex-wrap: wrap; padding-block: 16px; }
.sbt-fil-ariane a{ color: var(--sb-doux, #55607a); text-decoration: none; }
.sbt-fil-ariane a:hover{ color: var(--sb-encre, #0f172a); }

.sbt-article-entete{ max-width: var(--sb-lecture, 720px); margin-inline: auto; padding-block: 8px 24px; }
.sbt-article-pastille{
	display: inline-block; background: var(--sb-surf, #f4f5fa); color: var(--sb-encre, #0f172a);
	font-family: var(--sb-titre, 'Manrope', system-ui, sans-serif); font-weight: 700; font-size: .75rem;
	text-transform: uppercase; letter-spacing: .04em; padding: 6px 12px; border-radius: 999px; margin-bottom: 16px;
	text-decoration: none;
}
.sbt-article-entete h1{ font-family: var(--sb-titre, 'Manrope', system-ui, sans-serif); line-height: 1.15; margin: 0; }
.sbt-article-chapo{ font-family: var(--sb-texte, 'Inter', system-ui, sans-serif); font-style: italic; font-size: clamp(1.0625rem,1rem + .3vw,1.3125rem); color: var(--sb-doux, #55607a); margin-top: 16px; }
.sbt-article-meta{ display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 20px; font-size: .875rem; color: var(--sb-doux, #55607a); }
.sbt-article-meta img{ width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.sbt-article-meta-auteur{ color: inherit; font-weight: 600; text-decoration: none; }

.sbt-article-une{ max-width: var(--sb-conteneur, 1240px); margin: 28px auto 32px; padding-inline: var(--sb-gouttiere, 24px); }
.sbt-article-une-cadre{ aspect-ratio: 2.4 / 1; max-height: min(520px, 46vh); overflow: hidden; /* 01/10 : à 1440×900 le texte passait sous la ligne de flottaison (B-ART-09) */ border-radius: var(--sb-rayon, 14px); box-shadow: var(--sb-ombre, 0 8px 24px rgba(15,23,42,.08)); }
.sbt-article-une-cadre img{ width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 640px){ .sbt-article-une-cadre{ aspect-ratio: auto; height: 220px; max-height: 220px; } }

/* Grille corps + rail — align-items:start obligatoire pour que le rail sticky
   (cf. partial-sidebar.css) tienne sur toute la hauteur du contenu. */
.sbt-article-mise-en-page{
	display: grid; grid-template-columns: minmax(0, var(--sb-lecture, 720px)) var(--sb-rail, 340px);
	column-gap: var(--sb-gouttiere, 24px); row-gap: var(--sb-gouttiere, 24px);
	max-width: var(--sb-conteneur, 1240px); margin-inline: auto;
	padding: 32px var(--sb-gouttiere, 24px) 64px; align-items: start; justify-content: center;
}
@media (max-width: 1080px){ .sbt-article-mise-en-page{ grid-template-columns: minmax(0,1fr); } .sbt-article-principal, .sbt-rail{ min-width: 0; } }
.sbt-article-mise-en-page--suite{ padding-top: 0; }

.sbt-article-corps{ font-size: 1.0625rem; line-height: 1.7; color: var(--sb-encre, #0f172a); font-family: var(--sb-texte, 'Inter', system-ui, sans-serif); }
.sbt-article-corps h2{ margin-top: 2.2em; font-family: var(--sb-titre, 'Manrope', system-ui, sans-serif); }
.sbt-article-corps h3{ margin-top: 1.8em; font-family: var(--sb-titre, 'Manrope', system-ui, sans-serif); }
.sbt-article-corps p{ margin-bottom: 1.3em; }
.sbt-article-corps img{ border-radius: var(--sb-rayon, 14px); margin-block: 1.6em; width: 100%; height: auto; }
.sbt-article-corps blockquote{
	margin: 1.8em 0; padding: 18px 24px; border-left: 4px solid var(--sb-accent, #2563eb);
	background: var(--sb-surf, #f4f5fa); border-radius: 8px; font-style: italic;
}

/* Sommaire replié en accordéon sur mobile uniquement (en desktop, il vit dans le rail —
   cf. partial-sidebar.php / partial-sommaire.php). */
.sbt-sommaire-mobile{ display: none; }
@media (max-width: 1080px){ .sbt-sommaire-mobile{ display: block; margin-bottom: 24px; } }
/* 01/10/2026 (baliturismo, juge visuel) : sous 1080px le rail passe SOUS l'article ; sa carte sommaire
   faisait doublon avec le sommaire mobile de tête (erreur n°6 « sommaire en double »). */
@media (max-width: 1080px){ .sbt-rail-carte--sommaire{ display: none; } }

/* « À lire aussi » (toujours un <div>, jamais un <article> — cf. single-article.php) */
.sbt-a-lire{ margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--sb-filet, #e2e5ef); }
.sbt-kicker{ font-family: var(--sb-titre, 'Manrope', system-ui, sans-serif); font-size: .9375rem; font-weight: 700; margin-bottom: 12px; }
.sbt-grille{ display: grid; gap: var(--sb-gouttiere, 24px); }
.sbt-grille--3{ grid-template-columns: repeat(3, minmax(0,1fr)); }
@media (max-width: 760px){ .sbt-grille--3{ grid-template-columns: 1fr; } }
.sbt-carte{
	background: var(--sb-fond-carte, #ffffff); border: 1px solid var(--sb-filet, #e2e5ef);
	border-radius: var(--sb-rayon, 14px); overflow: hidden; box-shadow: var(--sb-ombre, 0 8px 24px rgba(15,23,42,.08));
	transition: transform .2s ease, box-shadow .2s ease;
}
.sbt-carte:hover{ transform: translateY(-4px); box-shadow: var(--sb-ombre-forte, 0 16px 40px rgba(15,23,42,.16)); }
.sbt-carte a{ display: block; color: inherit; text-decoration: none; }
.sbt-carte img{ width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.sbt-carte-corps{ padding: 18px; }
.sbt-carte-corps h3{ margin: 0; font-size: 1.0625rem; font-family: var(--sb-titre, 'Manrope', system-ui, sans-serif); }

.sbt-article-commentaires{ margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--sb-filet, #e2e5ef); }

/* 01/10 (accessoiriste.net) : un seul sommaire visible par largeur — la carte du rail se masque quand l'accordéon mobile s'affiche. */
@media (max-width: 1080px){ .sbt-rail-carte--sommaire{ display: none; } }
/* Sable Bleu — en-têtes de page : article (dune), rubrique, destination, annexes. */

/* --- En-tête d'article « dune » (DA §10, pièce propre au site) --- */
.fn-article-entete{ background: var(--sb-surf); padding-top: 24px; padding-bottom: 72px; position: relative; }
.fn-article-entete-grille{ display: grid; grid-template-columns: minmax(0,720px) 1fr; gap: 32px; align-items: start; max-width: var(--sb-conteneur); margin-inline: auto; }
.fn-article-h1{ font-size: clamp(32px, 4vw, 52px); font-weight: 600; line-height: 1.08; margin: 10px 0 0; }
.fn-filet-dune{ height: 1px; background: var(--sb-filet); margin: 18px 0; max-width: 260px; }
.fn-chapo{ font-style: italic; font-size: 20px; color: var(--sb-doux); }
.fn-pastille{ background: var(--sb-cta); color: #fff; }
.fn-article-entete-photo{ position: relative; margin-bottom: -96px; }
.fn-article-photo-cadre{ position: relative; border-radius: 24px; overflow: hidden; box-shadow: var(--sb-ombre-forte); aspect-ratio: 4/3; }
.fn-article-photo-cadre img{ width: 100%; height: 100%; object-fit: cover; }
.fn-pastille-region{ position: absolute; left: 16px; bottom: 16px; }
@media (max-width: 1080px){
	.fn-article-entete-grille{ grid-template-columns: 1fr; }
	.fn-article-entete-photo{ margin-bottom: -48px; order: -1; }
	.fn-article-entete{ padding-bottom: 48px; }
}

/* « Où est-ce ? » (pages destination type lieu) */
.fn-ou-est-ce{ padding: 40px 24px; display: grid; gap: 24px; }
.fn-ou-est-ce-carte{ display: flex; gap: 24px; align-items: center; background: var(--sb-fond-carte); border-radius: var(--sb-rayon-grand); padding: 24px; box-shadow: var(--sb-ombre); }
.fn-ou-est-ce-silhouette{ flex-shrink: 0; width: 90px; }
@media (max-width: 640px){ .fn-ou-est-ce-carte{ flex-direction: column; text-align: center; } }

/* --- En-tête de rubrique (procédé §11) --- */
.fn-rubrique-bandeau{ position: relative; height: 440px; display: flex; align-items: center; color: var(--sb-sur-fonce); }
.fn-rubrique-bandeau-photo{ position: absolute; inset: 0; z-index: -1; }
.fn-rubrique-bandeau-photo img{ width: 100%; height: 100%; object-fit: cover; }
.fn-rubrique-bandeau-photo::after{ content: ""; position: absolute; inset: 0; background: rgba(23,32,27,.45); }
.fn-rubrique-bandeau-inner{ display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center; width: 100%; }
.fn-rubrique-titre{ font-size: clamp(36px,6vw,80px); text-transform: uppercase; font-stretch: 62.5%; margin: 8px 0; color: #fff; }
.fn-rubrique-desc{ max-width: 56ch; opacity: .92; }
.fn-rubrique-compteur{ font-size: 14px; opacity: .85; margin-top: 10px; }
.fn-rubrique-silhouette{ height: 240px; }
.fn-rubrique-silhouette svg{ height: 100%; max-width: 70px; filter: brightness(0) invert(1); }
@media (max-width: 760px){ .fn-rubrique-bandeau{ height: 320px; } .fn-rubrique-bandeau-inner{ grid-template-columns: 1fr; } .fn-rubrique-silhouette{ display: none; } }

.fn-rubrique-une{ padding: 48px 24px; }
.fn-rubrique-une-grille{ display: grid; grid-template-columns: 1.5fr 1fr; gap: 24px; }
.fn-rubrique-une-grande{ min-height: clamp(420px, calc(100vh - 220px), 560px); }
.fn-rubrique-une-grande .fn-carte-photo{ height: 100%; }
@media (max-width: 860px){ .fn-rubrique-une-grille{ grid-template-columns: 1fr; } .fn-rubrique-une-grande{ min-height: 320px; } }

.fn-rubrique-grille{ padding: 0 24px 56px; display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; max-width: var(--sb-conteneur); margin-inline: auto; }
@media (max-width: 860px){ .fn-rubrique-grille{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px){ .fn-rubrique-grille{ grid-template-columns: 1fr; } }
.fn-voir-plus{ display: flex; justify-content: center; padding-bottom: 56px; }
.fn-filtres-pilules{ display: flex; gap: 10px; padding: 0 24px 24px; max-width: var(--sb-conteneur); margin-inline: auto; flex-wrap: wrap; }

/* --- Destination (hub) --- */
.fn-destination-hero{ position: relative; height: 708px; display: flex; align-items: center; color: var(--sb-sur-fonce); }
.fn-destination-hero-photo{ position: absolute; inset: 0; z-index: -1; }
.fn-destination-hero-photo img{ width: 100%; height: 100%; object-fit: cover; }
.fn-destination-hero-photo::after{ content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(23,32,27,.68), rgba(23,32,27,.15) 60%); }
.fn-destination-hero-inner{ display: grid; grid-template-columns: 1fr 460px; gap: 32px; align-items: center; width: 100%; }
.fn-destination-h1{ font-size: clamp(44px,8vw,96px); text-transform: uppercase; font-stretch: 62.5%; color: #fff; margin: 10px 0; }
.fn-destination-soustitre{ font-style: italic; font-size: 19px; opacity: .92; }
.fn-destination-medaillon{ position: absolute; left: 24px; bottom: -40px; width: 120px; height: 120px; border-radius: 50%; background: var(--sb-fond); display: flex; align-items: center; justify-content: center; box-shadow: var(--sb-ombre-forte); z-index: 2; }
.fn-destination-medaillon svg{ max-width: 70px; }
@media (max-width: 960px){ .fn-destination-hero{ height: auto; padding: 48px 0 72px; } .fn-destination-hero-inner{ grid-template-columns: 1fr; } }

.fn-reperes{ display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; padding: 56px 24px; max-width: var(--sb-conteneur); margin-inline: auto; }
.fn-repere{ background: var(--sb-fond-carte); border-radius: var(--sb-rayon); padding: 18px; text-align: center; box-shadow: var(--sb-ombre); }
.fn-repere p:first-child{ font-size: 12px; text-transform: uppercase; color: var(--sb-doux); margin: 0 0 6px; }
.fn-repere p:last-child{ font-weight: 700; font-family: var(--sb-titre); margin: 0; }
@media (max-width: 760px){ .fn-reperes{ grid-template-columns: 1fr 1fr; } }

.fn-destination-corps{ display: grid; grid-template-columns: minmax(0,720px) 340px; gap: 24px; max-width: var(--sb-conteneur); margin-inline: auto; padding: 0 24px 56px; align-items: start; }
.fn-destination-corps details{ background: var(--sb-fond-carte); border: 1px solid var(--sb-filet); border-radius: var(--sb-rayon); margin-bottom: 12px; }
.fn-destination-corps summary{ padding: 16px 20px; font-family: var(--sb-titre); font-weight: 600; cursor: pointer; font-size: 18px; }
.fn-destination-corps details > *:not(summary){ padding: 0 20px 18px; }
@media (max-width: 1080px){ .fn-destination-corps{ grid-template-columns: 1fr; } }

/* --- Pages annexes --- */
.fn-page-entete{ background: var(--sb-surf); padding: 48px 24px 64px; }
.fn-page-h1{ font-size: clamp(30px,4vw,48px); max-width: 720px; margin-inline: auto; }
.fn-page-lecture{ max-width: 720px; margin: 40px auto; padding: 0 24px; line-height: 1.75; }
.fn-page-lecture h2{ margin-top: 2em; }

.fn-page-split{ display: grid; grid-template-columns: 1fr 1fr; gap: 0; align-items: stretch; }
.fn-page-split-photo{ min-height: 460px; }
.fn-page-split-photo img{ width: 100%; height: 100%; object-fit: cover; }
.fn-page-split-contenu{ padding: 56px 40px; }
@media (max-width: 860px){ .fn-page-split{ grid-template-columns: 1fr; } .fn-page-split-photo{ min-height: 280px; order: -1; border-radius: 20px; } }

.fn-tuiles-numerotees{ display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; }
.fn-tuile-numerotee{ background: rgba(255,255,255,.12); border-radius: var(--sb-rayon); padding: 22px; }
.fn-tuile-numerotee .fn-num{ font-family: var(--sb-texte); font-weight: 800; font-size: 44px; font-variant-numeric: tabular-nums; }
@media (max-width: 860px){ .fn-tuiles-numerotees{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px){ .fn-tuiles-numerotees{ grid-template-columns: 1fr; } }

/* Reprise 03/10 — article : sommaire en carte en tête du corps, barre latérale = formulaire seul */
.sbt-rail .sbt-rail-carte--sommaire{ display: none !important; }
.sbt-sommaire-mobile{ display: block !important; margin-bottom: 28px; }
.sbt-rail .fn-carte-formulaire--rail{ background: #fff; box-shadow: var(--sb-ombre); border: 0; border-top: 4px solid var(--sb-cta); }
/* Médaillon « où est-ce » posé sur la photo d'en-tête (procédé §8.3) */
.fn-article-entete-photo .fn-medaillon-carte{ position: absolute; right: -18px; bottom: -34px; width: 116px; height: 116px; border-radius: 50%;
	background: var(--sb-fond); box-shadow: var(--sb-ombre-forte); display: flex; align-items: center; justify-content: center; z-index: 2; }
.fn-medaillon-carte .fn-silhouette{ height: 92px; width: auto; }
.fn-medaillon-carte .fn-silhouette-contour{ fill: var(--sb-surf); }
@media (max-width: 1080px){ .fn-article-entete-photo .fn-medaillon-carte{ right: 12px; bottom: -30px; width: 88px; height: 88px; } .fn-medaillon-carte .fn-silhouette{ height: 70px; } }
.fn-article-entete img.avatar{ border-radius: 50%; object-fit: cover; background: var(--sb-surf); }

/* Reprise 03/10 — rubrique (DA §11) */
.fn-kicker--clair{ color: #F3D9A8; }
.fn-kicker--clair::before{ background: var(--sb-cta); }
.fn-rubrique-bandeau{ isolation: isolate; }
.fn-rubrique-bandeau-photo::after{ background: linear-gradient(90deg, rgba(23,32,27,.72) 0%, rgba(23,32,27,.38) 55%, rgba(23,32,27,.18) 100%); }
.fn-rubrique-titre{ font-weight: 700; letter-spacing: .01em; line-height: .95; }
.fn-rubrique-desc{ font-size: 18px; color: #fff; }
.fn-rubrique-compteur{ color: #F3E7D0; font-size: 15px; }
.fn-rubrique-compteur strong{ font-weight: 800; font-size: 20px; color: #fff; }
.fn-rubrique-silhouette{ height: 260px; padding: 18px; border-radius: 28px; background: rgba(251,248,242,.14); backdrop-filter: blur(6px); }
.fn-rubrique-silhouette svg{ height: 100%; width: auto; max-width: none; filter: none; }
.fn-rubrique-silhouette .fn-silhouette-contour{ fill: rgba(243,231,208,.22); stroke: #F3E7D0; }
.fn-rubrique-silhouette .fn-silhouette-point{ fill: #F3E7D0; stroke: none; }
.fn-rubrique-silhouette .fn-silhouette-point.est-actif{ fill: var(--sb-cta); stroke: #fff; stroke-width: 1.5; }
.fn-rubrique-une{ padding-block: 48px 40px; }
.fn-rubrique-une-grille{ display: grid; grid-template-columns: 1.55fr 1fr; gap: 24px; align-items: stretch; }
.fn-rubrique-une-grille--seule{ grid-template-columns: minmax(0, 860px); justify-content: center; }
.fn-rubrique-une-grande{ display: flex; flex-direction: column; min-height: 0; }
.fn-rubrique-une-grande .fn-carte-photo{ height: clamp(300px, calc(100vh - 380px), 420px); aspect-ratio: auto; }
.fn-rubrique-une-grande .fn-carte-corps h2{ font-size: 28px; margin: 0 0 8px; }
.fn-rubrique-une-grande .fn-carte-corps p{ font-size: 15.5px; }
.fn-rubrique-une-cote{ display: grid; grid-template-rows: 1fr 1fr; gap: 24px; }
.fn-rubrique-une-cote .fn-carte{ display: flex; flex-direction: column; }
.fn-rubrique-une-cote .fn-carte-photo{ flex: 1 1 auto; aspect-ratio: auto; min-height: 150px; }
.fn-rubrique-vide{ padding-block: 48px; color: var(--sb-doux); }
.fn-rubrique-relance-grille{ display: grid; grid-template-columns: 1fr 440px; gap: 56px; align-items: center; }
.fn-rubrique-relance-texte{ font-size: 18px; opacity: .95; max-width: 46ch; }
.fn-fond-bleu .fn-reassurances li{ color: #fff; }
.fn-fond-bleu .fn-jasmin path{ fill: #fff; }
@media (max-width: 860px){
	.fn-rubrique-une-grille{ grid-template-columns: 1fr; }
	.fn-rubrique-une-cote{ grid-template-columns: 1fr 1fr; grid-template-rows: none; gap: 12px; }
	.fn-rubrique-une-cote .fn-carte-photo{ min-height: 0; aspect-ratio: 16/10; }
	.fn-rubrique-une-cote .fn-carte-corps p{ display: none; }
	.fn-rubrique-une-cote .fn-carte-corps h3{ font-size: 15px; }
	.fn-rubrique-une-grande .fn-carte-photo{ height: auto; aspect-ratio: 16/10; }
	.fn-rubrique-une-grande .fn-carte-corps h2{ font-size: 22px; }
	.fn-rubrique-relance-grille{ grid-template-columns: 1fr; gap: 24px; }
	.fn-rubrique-silhouette{ display: none; }
}

/* Composer mon voyage : formulaire en grand dès le premier écran */
.fn-composer-hero{ background: var(--sb-surf); padding: 8px 0 72px; }
.fn-composer-grille{ display: grid; grid-template-columns: minmax(0, 1fr) 480px; gap: 56px; align-items: start; }
.fn-composer-h1{ margin: 6px 0 14px; max-width: none; font-size: clamp(32px, 3.6vw, 52px); font-weight: 700; }
.fn-composer-h1 em{ display: block; color: var(--sb-accent-sable); font-weight: 500; }
.fn-composer-chapo{ font-size: 18px; color: var(--sb-doux); max-width: 44ch; margin: 0; }
.fn-composer-photo{ position: relative; margin-top: 8px; border-radius: 24px; overflow: hidden; box-shadow: var(--sb-ombre-forte); max-width: 520px; }
.fn-composer-photo img{ width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.fn-composer-carte{ position: relative; z-index: 2; padding-top: 24px; }
.fn-composer-carte .fn-carte-formulaire{ max-width: none; }
.fn-composer-faq details{ border-bottom: 1px solid var(--sb-filet); padding: 6px 0; }
.fn-composer-faq summary{ cursor: pointer; font-family: var(--sb-titre); font-weight: 600; font-size: 19px; padding: 10px 0; }
@media (max-width: 960px){
	.fn-composer-grille{ grid-template-columns: 1fr; gap: 20px; }
	.fn-composer-photo{ display: none; }
	.fn-composer-hero{ padding-bottom: 48px; }
	.fn-composer-carte{ padding-top: 0; }
}
/* Pages annexes : en-tête et colonne de lecture alignés à gauche du même axe */
.fn-page-entete .fn-conteneur{ max-width: 720px; padding-inline: 0; }
@media (max-width: 760px){ .fn-page-entete .fn-conteneur{ padding-inline: 0; } .fn-page-entete{ padding-inline: 20px; } }
/* Le formulaire garde son encre même posé sur une bande bleue ou nuit */
.fn-carte-formulaire{ color: var(--sb-encre); text-align: left; }
.fn-composer-photo img{ aspect-ratio: 5/2; }
.fn-composer-photo{ max-width: none; }
/* Contact : tout au-dessus du pli (I-CTC-01) */
.fn-contact{ grid-template-columns: .9fr 1.1fr; min-height: calc(100vh - 72px); max-height: 900px; }
.fn-contact .fn-page-split-photo{ min-height: 0; }
.fn-contact .fn-page-split-contenu{ padding: 28px 48px 32px; align-self: center; max-width: 620px; }
.fn-contact .fn-page-h1{ margin: 4px 0 8px; }
.fn-contact textarea{ width: 100%; border: 1.5px solid var(--sb-filet); border-radius: 12px; padding: 13px 14px; font: inherit; font-size: 15px; margin-bottom: 12px; }
.fn-contact-encart{ display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 20px; padding: 14px 16px; border-radius: 16px; background: var(--sb-surf); }
.fn-contact-encart p{ margin: 0; font-weight: 700; }
.fn-contact-encart p span{ display: block; font-weight: 400; color: var(--sb-doux); font-size: 14px; }
@media (max-width: 860px){ .fn-contact{ min-height: 0; max-height: none; } .fn-contact .fn-page-split-photo{ min-height: 200px; max-height: 240px; border-radius: 0; } .fn-contact .fn-page-split-contenu{ padding: 20px; } }
.fn-equipe .fn-grille-3{ grid-template-columns: repeat(auto-fill, minmax(260px, 340px)); }
/* Photo des pages scindées : elle remplit sa colonne sans jamais l'allonger (la hauteur vient du texte) */
.fn-page-split-photo{ position: relative; overflow: hidden; }
.fn-page-split-photo img{ position: absolute; inset: 0; }
.fn-contact{ min-height: 0; }
@media (max-width: 860px){ .fn-page-split-photo{ min-height: 240px; } }
@media (max-width: 860px){ .fn-contact{ grid-template-columns: 1fr; } .fn-contact .fn-page-split-photo{ order: -1; min-height: 200px; } }

/* Sortie 04/10 — contrastes réels */
a.sbt-btn, .sbt-footer a.sbt-btn, footer a.sbt-btn{ color: #fff !important; }
a.sbt-btn--fantome{ color: inherit !important; }
.sbt-auteur .sbt-auteur-role{ color: var(--sb-accent-sable); }
.fn-tuile-envie, .fn-destination-carte, .fn-carte-photo{ background-color: var(--sb-fonce); }
.fn-carte-photo{ background-color: #2B3530; }
/* Signature éditoriale (hubs, étiquettes, Composer) */
.fn-signature{ font-size: 14px; margin: 10px 0 0; }
.fn-signature a{ font-weight: 700; color: inherit; }
.fn-rubrique-bandeau .fn-signature{ color: #F3E7D0; }
.fn-composer-faq .fn-signature{ color: var(--sb-doux); margin-top: 20px; }
/* Mentions légales : carte d'identité du site */
.fn-identite-site{ display: flex; gap: 16px; align-items: center; background: var(--sb-fond-carte); border: 1px solid var(--sb-filet); border-radius: 18px; padding: 16px 20px; margin-bottom: 28px; }
.fn-identite-site img{ width: 56px; height: 56px; flex-shrink: 0; }
.fn-identite-site p{ margin: 0; line-height: 1.45; }
.fn-identite-site span{ display: block; color: var(--sb-doux); font-size: 14.5px; }
/* Aucune section ne peut élargir la page (rails horizontaux compris) */
.fn-section, .fn-hero, .fn-rubrique-bandeau, .fn-composer-hero{ overflow-x: clip; }
/* Contact mobile : le bouton d'envoi tient au premier écran (390×700) */
@media (max-width: 860px){
	.fn-contact .fn-page-split-photo{ display: block; order: 2; min-height: 150px; max-height: 170px; }
	.fn-contact .fn-page-split-contenu{ order: 1; }
	.fn-contact .fn-page-split-contenu{ padding: 12px 20px 28px; background: linear-gradient(180deg, var(--sb-surf), var(--sb-fond) 220px); }
	.fn-contact .fn-fil-ariane{ padding-block: 8px; }
	.fn-contact .fn-page-h1{ font-size: 30px; margin: 0 0 4px; }
	.fn-contact .fn-page-h1 + p{ margin-bottom: 14px !important; font-size: 15px; }
	.fn-contact .fn-ligne-champs{ margin-bottom: 8px; }
	.fn-contact textarea{ min-height: 92px; margin-bottom: 10px; }
}
.fn-faq-q{ display: inline; font: inherit; margin: 0; }

/* Bouton fantôme du bloc auteur : texte encre sur fond sable (contraste AA, sortie 04/10) */
.sbt-auteur-actions a.sbt-btn--fantome, .sbt-auteur a.sbt-btn.sbt-btn--fantome{ color: var(--sb-encre, #1C2420) !important; background: transparent; border-color: var(--sb-encre, #1C2420); }

/* ===== Juge visuel 04/10 ===== */
/* R5/R15 — monogramme de la rédaction mis en valeur : médaillon sable cerclé, jamais une icône perdue */
.fn-meta img.avatar, .sbt-article-meta img.avatar{ width: 44px; height: 44px; padding: 6px; background: var(--sb-surf); border: 2px solid var(--sb-accent); border-radius: 50%; box-sizing: border-box; }
.fn-article-entete .fn-meta img.avatar{ background: var(--sb-fond); }
.sbt-auteur-photo img{ padding: 14px; background: var(--sb-fond); border: 3px solid var(--sb-accent); box-shadow: 0 0 0 6px var(--sb-surf), var(--sb-ombre); box-sizing: border-box; }
.fn-equipe-medaillon{ width: 168px; height: 168px; flex-shrink: 0; border-radius: 50%; background: var(--sb-fond); border: 3px solid var(--sb-accent);
	box-shadow: 0 0 0 10px var(--sb-surf), var(--sb-ombre-forte); display: flex; align-items: center; justify-content: center; }
.fn-equipe-medaillon img{ width: 62%; height: 62%; border-radius: 0; background: none; }
.fn-equipe-bloc{ display: flex; gap: 48px; align-items: center; background: var(--sb-fond-carte); border-radius: 24px; padding: 36px 40px; box-shadow: var(--sb-ombre); }
.fn-equipe-texte h3{ font-size: 30px; margin: 0 0 4px; }
.fn-equipe-role{ font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--sb-accent); margin: 0 0 12px; }
.fn-equipe-texte p{ max-width: 64ch; }
.fn-equipe-chiffres{ display: flex; gap: 10px; flex-wrap: wrap; margin: 14px 0 18px; }
.fn-equipe-chiffres span{ background: var(--sb-surf); border-radius: 999px; padding: 8px 16px; font-size: 14px; color: var(--sb-encre); }
.fn-equipe-chiffres strong{ font-weight: 800; font-size: 18px; margin-right: 4px; color: var(--sb-accent-sable); }
.fn-equipe-liens{ display: flex; gap: 12px; flex-wrap: wrap; margin: 0; }
.fn-equipe-liens .fn-btn--fantome{ color: var(--sb-encre); }
@media (max-width: 760px){ .fn-equipe-bloc{ flex-direction: column; text-align: center; padding: 28px 20px; gap: 24px; } .fn-equipe-chiffres, .fn-equipe-liens{ justify-content: center; } .fn-equipe-medaillon{ width: 132px; height: 132px; } .fn-equipe-texte h3{ font-size: 24px; } }
/* R15 — fiche auteur */
.fn-auteur-entete{ background: var(--sb-surf); padding: 24px 0 88px; }
.fn-auteur-grille{ display: flex; gap: 48px; align-items: center; }
.fn-auteur-nom{ margin: 4px 0 6px; max-width: none; }
.fn-auteur-bio{ max-width: 62ch; color: var(--sb-doux); font-size: 17px; margin: 0; }
.fn-auteur-guides{ padding-top: 40px; }
@media (max-width: 760px){ .fn-auteur-grille{ flex-direction: column; align-items: flex-start; gap: 20px; } .fn-auteur-entete .fn-equipe-medaillon{ width: 112px; height: 112px; } }
/* R6 — article mobile : le texte d'abord, la photo ensuite à cheval sur la dune (la pastille n'est plus jamais dessous) */
@media (max-width: 1080px){
	.fn-article-entete-photo{ order: 2; margin-top: 8px; margin-bottom: -56px; }
	.fn-article-entete{ padding-bottom: 20px; }
	.fn-article-entete + *{ margin-top: 72px; }
	.fn-article-entete .sbt-pastille, .fn-article-entete .fn-pastille{ position: relative; z-index: 3; }
}
/* R7 — chiffres-clés : même structure dans chaque tuile (chiffre / unité / libellé), alignées */
.sbt-article-corps sbs-jauges.sbs_jauges{ align-items: stretch; }
.sbs_jauges sbs-jauge.sbs_jauge{ display: grid; grid-template-rows: auto 1.6em 1fr; align-content: start; }
.sbs_jauge_valeur{ grid-row: 1; }
.sbs_jauge_unite{ grid-row: 2; margin: 2px 0 0; }
.sbs_jauge_libelle{ grid-row: 3; align-self: start; margin-top: 6px; }
/* R8 — « À lire aussi » pleine largeur, 3 cartes paysage */
.sbt-article-mise-en-page--suite{ display: block; }
.sbt-article-mise-en-page--suite .sbt-article-principal{ max-width: none; width: 100%; }
.sbt-a-lire .sbt-grille--3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sbt-a-lire .sbt-carte img{ aspect-ratio: 3/2; height: auto; max-height: 260px; }
.sbt-a-lire .sbt-kicker{ font-family: var(--sb-titre); font-stretch: 62.5%; text-transform: uppercase; font-weight: 600; font-size: 30px; letter-spacing: .02em; color: var(--sb-encre); }
@media (max-width: 760px){ .sbt-a-lire .sbt-grille--3{ grid-template-columns: 1fr; } }
/* R9 — FAQ de Composer : l'accordéon des articles */
.fn-composer-faq .sbt-faq{ margin-top: 12px; }
.fn-composer-faq details{ border-bottom: 0; padding: 0; }
.fn-composer-faq summary{ font-size: inherit; padding: 0; }
.fn-composer-faq summary::-webkit-details-marker{ display: none; }
/* R12 — Composer : mini-frise des 4 étapes sous la carte */
.fn-composer-etapes{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 18px; }
.fn-composer-etape{ background: rgba(255,255,255,.7); border-radius: 14px; padding: 12px 10px; font-size: 13.5px; font-weight: 700; line-height: 1.25; text-align: center; }
.fn-composer-etape span{ display: block; font-weight: 800; font-size: 26px; color: var(--sb-accent-sable); line-height: 1; margin-bottom: 4px; }
/* R13 — Composer mobile : titre court, formulaire tout de suite, le reste après */
@media (max-width: 960px){
	.fn-composer-texte{ display: contents; }
	.fn-composer-grille{ display: flex; flex-direction: column; gap: 0; }
	.fn-composer-grille .fn-fil-ariane{ order: 0; }
	.fn-composer-h1{ order: 1; font-size: 28px; margin-bottom: 14px; }
	.fn-composer-h1 em{ display: inline; }
	.fn-composer-carte{ order: 2; }
	.fn-composer-chapo{ order: 3; margin-top: 20px; font-size: 16px; }
	.fn-composer-grille .fn-reassurances{ order: 4; gap: 10px 16px; margin-top: 12px; font-size: 13px; }
	.fn-composer-etapes{ grid-template-columns: repeat(2, 1fr); }
	.fn-composer-carte .fn-carte-formulaire{ padding: 16px; }
	.fn-composer-carte .fn-formulaire-soustitre{ display: none; }
	.fn-composer-carte .fn-tuile{ min-height: 48px; }
}
/* R14 — Qui sommes-nous : 3 photos arrondies entières, alignées sur la grille ; cartes illustrées */
.fn-qui-lames{ height: 320px; margin-top: 24px; padding: 0 24px !important; align-items: stretch !important; }
.fn-qui-lames .fn-lame{ height: auto !important; border-radius: 24px !important; align-self: stretch !important; margin: 0 !important; }
@media (max-width: 760px){ .fn-qui-lames{ height: 180px; padding: 0 20px !important; gap: 8px; } }
.fn-qui-carte{ padding: 26px 24px 24px; }
.fn-qui-carte h3{ font-size: 21px; margin: 14px 0 8px; }
.fn-qui-carte p{ color: var(--sb-doux); margin: 0; }
.fn-qui-icone{ display: inline-flex; width: 52px; height: 52px; border-radius: 50%; background: var(--sb-accent-clair); align-items: center; justify-content: center; }
.fn-qui-icone svg{ width: 28px; height: 28px; fill: none; stroke: var(--sb-accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fn-composer-photo img{ height: auto; aspect-ratio: 2/1; }

/* Juge visuel passe 2 (04/10) — photo de corps toujours visible en entier dans la fenêtre */
.fn-figure-corps img{ width: 100%; height: auto; max-height: min(560px, 70vh); object-fit: cover; border-radius: 18px; }
/* FAQ de la page Composer : même accordéon que les articles, avec un vrai rembourrage */
.fn-composer-faq .sbt-faq details{ padding: 0; }
.fn-composer-faq .sbt-faq summary{ padding: 18px 22px; min-height: 56px; font-weight: 600; line-height: 1.35; }
.fn-composer-faq .sbt-faq .sbt-faq-reponse{ padding: 0 22px 18px; }
/* Sable Bleu — habillage des composants du socle (sbs-lieu, sbs-frise, sbs-jauges, sbs-tarifs).
   Le socle n'émet que du balisage neutre : tout l'aspect est décidé ici. */
sbs-lieu, sbs-frise, sbs-jauges, sbs-tarifs, sbs-etape, sbs-jauge, sbs-tarif{ display: block; }
.sbs_source{ display: block; font-size: 12.5px; color: var(--sb-doux); margin-top: 10px; }
.sbs_source a{ color: inherit; }

/* Fiches-lieux : cartes en grille, épingle bleue */
.sbt-article-corps sbs-lieu.sbs_lieu{
	position: relative; display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; align-items: start;
	background: var(--sb-fond-carte); border: 1px solid var(--sb-filet); border-left: 4px solid var(--sb-accent);
	border-radius: 16px; padding: 16px 18px 14px; margin: 0 0 12px; box-shadow: 0 6px 18px rgba(28,36,32,.06);
}
.sbs_lieu_nom{ grid-column: 1; font-family: var(--sb-titre); font-size: 19px; font-weight: 600; color: var(--sb-encre); line-height: 1.2; }
.sbs_lieu_adresse{ grid-column: 1; font-style: normal; font-size: 14px; color: var(--sb-doux); }
.sbs_lieu_acces{ grid-column: 1 / -1; display: block; font-size: 15px; color: var(--sb-encre); margin-top: 8px; line-height: 1.5; }
.sbs_lieu_carte{ grid-column: 2; grid-row: 1 / span 2; align-self: center; display: inline-flex; align-items: center; gap: 6px;
	padding: 8px 14px; border-radius: 999px; background: var(--sb-accent-clair); color: var(--sb-accent) !important;
	font-size: 13.5px; font-weight: 700; text-decoration: none !important; white-space: nowrap; }
.sbs_lieu_carte:hover{ background: var(--sb-accent); color: #fff !important; }
.sbs_icone_repere{ width: 16px; height: 16px; fill: currentColor; }
.sbs_lieu .sbs_source{ grid-column: 1 / -1; margin-top: 6px; }
@media (max-width: 560px){ .sbt-article-corps sbs-lieu.sbs_lieu{ grid-template-columns: 1fr; } .sbs_lieu_carte{ grid-column: 1; grid-row: auto; justify-self: start; margin-top: 8px; } }

/* Frise d'étapes : rail vertical à jasmin */
.sbt-article-corps sbs-frise.sbs_frise{ background: var(--sb-surf); border-radius: 20px; padding: 22px 24px 18px; margin: 28px 0; }
.sbs_frise_titre, .sbs_jauges_titre, .sbs_tarifs_titre{ display: block; font-family: var(--sb-titre); font-size: 21px; font-weight: 600; color: var(--sb-encre); margin-bottom: 16px; }
.sbs_frise sbs-etape.sbs_etape{ position: relative; padding: 0 0 18px 40px; border-left: 2px solid var(--sb-dune); margin-left: 12px; }
.sbs_frise sbs-etape.sbs_etape:last-of-type{ border-left-color: transparent; padding-bottom: 4px; }
.sbs_frise sbs-etape.sbs_etape::before{ content: ""; position: absolute; left: -13px; top: -2px; width: 24px; height: 24px; border-radius: 50%;
	background: var(--sb-accent); box-shadow: 0 0 0 4px var(--sb-surf); }
.sbs_etape_date{ display: block; font-size: 12.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--sb-cta); }
.sbs_etape_titre{ display: block; font-size: 17px; color: var(--sb-encre); margin: 2px 0; }
.sbs_etape_desc{ display: block; font-size: 15px; color: var(--sb-doux); line-height: 1.5; }

/* Jauges / chiffres-clés : tuiles */
.sbt-article-corps sbs-jauges.sbs_jauges{ display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin: 28px 0; }
.sbs_jauges .sbs_jauges_titre, .sbs_jauges .sbs_source{ grid-column: 1 / -1; margin-bottom: 0; }
.sbs_jauges sbs-jauge.sbs_jauge{ display: flex; flex-direction: column; background: var(--sb-fond-carte); border: 1px solid var(--sb-filet); border-radius: 16px; padding: 16px; }
.sbs_jauge_valeur{ order: -1; font-family: var(--sb-texte); font-weight: 800; font-size: 40px; line-height: 1; color: var(--sb-accent); font-variant-numeric: lining-nums tabular-nums; }
.sbs_jauge_unite{ order: -1; font-size: 14px; font-weight: 700; color: var(--sb-accent); margin: 2px 0 8px; }
.sbs_jauge_libelle{ font-size: 14px; color: var(--sb-doux); line-height: 1.4; }

/* Grille tarifaire : barres */
.sbt-article-corps sbs-tarifs.sbs_tarifs{ background: var(--sb-fond-carte); border: 1px solid var(--sb-filet); border-radius: 20px; padding: 22px 24px; margin: 28px 0; }
.sbs_tarifs sbs-tarif.sbs_tarif{ display: grid; grid-template-columns: minmax(0, 1fr) 46%; gap: 12px; align-items: center; padding: 8px 0; border-top: 1px solid var(--sb-filet); }
.sbs_tarif_libelle{ font-size: 15px; color: var(--sb-encre); }
.sbs_tarif_barre{ width: 100%; height: 14px; }
.sbs_tarif_barre::-webkit-meter-bar{ background: var(--sb-surf); border: 0; border-radius: 99px; }
.sbs_tarif_barre::-webkit-meter-optimum-value{ background: var(--sb-accent); border-radius: 99px; }
.sbs_tarifs_notes{ display: block; font-size: 13px; color: var(--sb-doux); margin-top: 10px; }
/* Sable Bleu — accueil (DA §6). Reprise 03/10 : chaque section ≤ 700 px à 1440×780. */

/* ---------- 1. Hero trois lames ---------- */
.fn-hero{
	--fn-col: 44%; --fn-carte-l: 440px;
	position: relative; display: grid; grid-template-columns: var(--fn-col) 1fr;
	min-height: clamp(640px, calc(100vh - 72px), 900px); background: var(--sb-fond);
}
.fn-hero-texte{ align-self: center; padding: 32px 96px 40px max(40px, calc((100vw - 1320px) / 2)); }
.fn-hero-h1{ font-size: clamp(40px, 4.4vw, 82px); font-weight: 700; line-height: 1.03; letter-spacing: -.01em; margin: 12px 0 20px; }
.fn-hero-h1 em{ display: block; color: var(--sb-accent); font-style: italic; font-weight: 500; }
.fn-hero-chapo{ color: var(--sb-doux); font-size: 19px; line-height: 1.5; max-width: 40ch; margin: 0; }
.fn-hero-compteur{ font-size: 15px; color: var(--sb-doux); margin: 0; }
.fn-hero-compteur .fn-compteur-anime{ color: var(--sb-encre); font-size: 22px; margin-right: 4px; }
.fn-hero-lames{ display: flex; align-items: flex-end; gap: 12px; padding: 20px 0 20px; min-height: 0; }
.fn-lame{ position: relative; border-radius: 28px 0 0 28px; overflow: hidden; box-shadow: var(--sb-ombre-forte); flex: 1 1 30%; transition: flex-grow .5s ease; }
.fn-lame-1, .fn-lame-2{ border-radius: 28px; }
.fn-lame img{ width: 100%; height: 100%; object-fit: cover; }
.fn-lame-1{ height: 90%; flex-basis: 30%; }
.fn-lame-2{ height: 97%; flex-basis: 38%; align-self: flex-start; margin-top: 0; }
.fn-lame-3{ height: 84%; flex-basis: 32%; }
@media (hover: hover) and (prefers-reduced-motion: no-preference){ .fn-lame:hover{ flex-grow: 1.5; } }
.fn-lame-pastille{ position: absolute; top: 16px; left: 16px; }
.fn-hero-carte-formulaire{ position: absolute; z-index: 3; left: calc(var(--fn-col) - 64px); bottom: 32px; width: var(--fn-carte-l); }
.fn-hero-macaron{ position: absolute; z-index: 4; top: -52px; right: -52px; pointer-events: none; }
@media (min-width: 1700px){ .fn-hero{ --fn-carte-l: 470px; } }

/* Carte du hero : plus serrée pour tenir entière au-dessus du pli */
.fn-carte-formulaire--hero{ padding: 24px 26px; max-width: none; }
.fn-carte-formulaire--hero .fn-tuile{ min-height: 56px; }

@media (max-width: 1080px){
	.fn-hero{ grid-template-columns: 1fr; min-height: 0; padding-bottom: 28px; }
	.fn-hero-texte{ display: contents; }
	.fn-hero-lames{ order: 0; height: 128px; padding: 12px 20px 0; gap: 8px; align-items: stretch; }
	.fn-lame, .fn-lame-1, .fn-lame-2, .fn-lame-3{ height: auto; border-radius: 18px; align-self: stretch; }
	.fn-lame-pastille{ top: 8px; left: 8px; padding: 5px 10px; font-size: 11.5px; }
	.fn-hero .fn-kicker{ display: none; }
	.fn-hero-h1{ order: 1; margin: 14px 20px 12px; font-size: clamp(32px, 8.6vw, 54px); }
	.fn-hero-carte-formulaire{ order: 2; position: static; width: auto; margin: 0 20px; }
	.fn-hero-chapo{ order: 3; margin: 22px 20px 0; font-size: 17px; }
	.fn-hero .fn-reassurances{ order: 4; margin: 14px 20px 0; }
	.fn-hero-compteur{ order: 5; margin: 10px 20px 0; }
	.fn-hero-macaron{ top: 84px; right: 12px; }
	.fn-hero-macaron .fn-macaron{ width: 70px; height: 70px; }
	.fn-hero-macaron .fn-macaron-centre{ font-size: 9px; }
	.fn-carte-formulaire--hero{ padding: 16px 16px 18px; }
	.fn-carte-formulaire--hero .fn-formulaire-soustitre{ display: none; }
	.fn-carte-formulaire--hero .fn-tuile{ min-height: 48px; font-size: 13.5px; padding: 6px 8px; }
	.fn-carte-formulaire--hero .fn-tuiles{ gap: 8px; margin-bottom: 12px; }
}
/* Dans la colonne mobile, le macaron ne doit jamais toucher la carte ni le titre */
@media (max-width: 1080px) and (min-width: 600px){ .fn-hero-lames{ height: 220px; } .fn-hero-macaron{ top: 160px; } }

/* ---------- 2. Devise entre frises ---------- */
.fn-devise{ text-align: center; padding-block: 18px; }
.fn-devise p{ font-family: var(--sb-titre); font-style: italic; font-size: 22px; margin: 12px 16px; }

/* ---------- 3. À la une + Préparer son voyage ---------- */
.fn-une-carnet{ display: grid; grid-template-columns: 1.55fr 1fr 1fr; gap: 24px; align-items: stretch; }
.fn-une-carnet--seule{ grid-template-columns: 1.6fr 1fr; }
.fn-une-grande{ display: flex; flex-direction: column; }
.fn-une-grande .fn-carte-photo{ flex: 1 1 auto; aspect-ratio: auto; min-height: 260px; }
.fn-une-grande .fn-carte-corps h3{ font-size: 26px; line-height: 1.15; }
.fn-une-grande .fn-carte-corps p{ font-size: 15.5px; }
.fn-une-pile{ display: grid; grid-template-rows: 1fr 1fr; gap: 20px; }
.fn-une-pile .fn-carte{ display: flex; flex-direction: column; }
.fn-une-pile .fn-carte-photo{ flex: 1 1 auto; aspect-ratio: auto; min-height: 150px; }
.fn-carnet{ display: flex; flex-direction: column; background: var(--sb-fond-carte); border-radius: var(--sb-rayon); box-shadow: var(--sb-ombre); padding: 20px 20px 18px; }
.fn-carnet-titre{ font-family: var(--sb-titre); font-stretch: 62.5%; text-transform: uppercase; font-weight: 600; font-size: 22px; letter-spacing: .03em; margin: 0 0 6px; }
.fn-carnet .fn-btn{ margin-top: auto; }
.fn-carnet-item{ display: flex; gap: 14px; align-items: center; padding: 11px 0; border-top: 1px solid var(--sb-filet); text-decoration: none; color: inherit; }
.fn-carnet-titre + .fn-carnet-item, .fn-titre-section + .fn-carnet-item{ border-top: 0; }
.fn-carnet-item img{ width: 68px; height: 68px; border-radius: 14px; object-fit: cover; flex-shrink: 0; }
.fn-carnet-meta{ font-size: 12.5px; color: var(--sb-doux); display: block; margin-bottom: 2px; }
.fn-carnet-nom{ display: block; font-size: 15px; font-weight: 700; line-height: 1.3; }
.fn-carnet-item:hover .fn-carnet-nom{ color: var(--sb-accent); }
.fn-carnet .fn-carnet-item:last-of-type{ margin-bottom: 14px; }
@media (max-width: 1080px){ .fn-une-carnet{ grid-template-columns: 1fr 1fr; } .fn-une-grande{ grid-column: 1 / -1; } .fn-une-grande .fn-carte-photo{ min-height: 0; aspect-ratio: 16/10; } }
@media (max-width: 640px){ .fn-une-carnet{ grid-template-columns: 1fr; } .fn-une-pile{ grid-template-rows: none; } .fn-une-pile .fn-carte-photo{ aspect-ratio: 16/10; min-height: 0; } .fn-une-grande .fn-carte-corps h3{ font-size: 22px; } }

/* ---------- 4. Sélecteur d'envie ---------- */
.fn-selecteur-tuiles{ display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
.fn-tuile-envie{ position: relative; display: block; border-radius: 18px; overflow: hidden; aspect-ratio: 3/4; box-shadow: var(--sb-ombre); transition: transform .25s ease, box-shadow .25s ease; text-decoration: none; }
.fn-tuile-envie img{ width: 100%; height: 100%; object-fit: cover; }
.fn-tuile-envie::after{ content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(23,32,27,.82), rgba(23,32,27,0) 58%); }
.fn-tuile-envie-texte{ position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 1; color: #fff; }
.fn-tuile-envie-texte strong{ display: block; font-family: var(--sb-titre); font-size: 20px; line-height: 1.15; font-weight: 600; }
.fn-tuile-envie-texte span{ font-size: 13.5px; opacity: .9; }
.fn-tuile-envie:hover{ transform: translateY(-6px); box-shadow: var(--sb-ombre-forte); }
@media (max-width: 960px){
	.fn-selecteur-tuiles{ display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px; margin-inline: -20px; padding: 4px 20px 12px; scroll-padding-inline: 20px; }
	.fn-tuile-envie{ flex: 0 0 min(46vw, 210px); scroll-snap-align: start; }
}

/* ---------- 5. Du nord au sud ---------- */
.fn-nord-sud{ display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 40px; align-items: center; }
.fn-nord-sud-silhouette .fn-silhouette{ display: block; height: 400px; width: auto; max-width: 100%; margin-top: 8px; }
.fn-destination-rail{ display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px; scrollbar-color: rgba(243,231,208,.35) transparent; }
.fn-destination-carte{ position: relative; flex: 0 0 260px; aspect-ratio: 4/5; scroll-snap-align: start; border-radius: 18px; overflow: hidden; text-decoration: none; color: #fff; }
.fn-destination-carte img{ width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.fn-destination-carte:hover img{ transform: scale(1.04); }
.fn-destination-carte::after{ content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(23,32,27,.88), rgba(23,32,27,0) 60%); }
.fn-destination-carte-texte{ position: absolute; left: 18px; right: 18px; bottom: 16px; z-index: 1; }
.fn-destination-carte-texte strong{ font-family: var(--sb-titre); font-size: 22px; font-weight: 600; display: block; margin-bottom: 4px; }
.fn-destination-carte-texte span{ font-size: 13.5px; line-height: 1.35; opacity: .92; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 860px){
	.fn-nord-sud{ grid-template-columns: minmax(0, 1fr); gap: 16px; }
	.fn-nord-sud-silhouette .fn-silhouette{ display: none; }
	.fn-destination-rail{ margin-inline: -20px; padding-inline: 20px; scroll-padding-inline: 20px; }
	.fn-destination-carte{ flex-basis: min(62vw, 240px); }
}

/* ---------- 6. Bande bleue 4 étapes ---------- */
.fn-quatre-etapes{ display: grid; grid-template-columns: 1.15fr 1fr; gap: 48px; align-items: center; }
.fn-quatre-etapes .fn-tuiles-numerotees{ grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 26px; }
.fn-quatre-etapes .fn-tuile-numerotee{ display: flex; gap: 14px; align-items: flex-start; padding: 18px; background: rgba(255,255,255,.13); }
.fn-quatre-etapes .fn-tuile-numerotee .fn-num{ font-size: 44px; line-height: .9; }
.fn-quatre-etapes .fn-tuile-numerotee p{ margin: 0; font-size: 14.5px; line-height: 1.4; opacity: .95; }
.fn-quatre-etapes .fn-tuile-numerotee strong{ display: block; font-size: 16.5px; margin-bottom: 2px; }
.fn-quatre-etapes-photo{ border-radius: 24px; overflow: hidden; position: relative; box-shadow: 0 24px 60px rgba(0,0,0,.25); }
.fn-quatre-etapes-photo img{ width: 100%; aspect-ratio: 4/3; object-fit: cover; max-height: 440px; }
.fn-quatre-etapes-etiquette{ position: absolute; left: 16px; bottom: 16px; background: #fff; color: var(--sb-encre); border-radius: 999px; padding: 9px 16px; font-size: 13px; font-weight: 700; }
@media (max-width: 860px){ .fn-quatre-etapes{ grid-template-columns: 1fr; gap: 28px; } }
@media (max-width: 480px){ .fn-quatre-etapes .fn-tuiles-numerotees{ grid-template-columns: 1fr; } .fn-quatre-etapes .fn-tuile-numerotee{ padding: 14px; } }

/* ---------- 7. Plage & thalasso + Médinas & histoire ---------- */
.fn-mer-medinas{ display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 40px; align-items: start; }
.fn-mer-grille{ display: grid; grid-template-columns: 1.25fr 1fr 1fr; grid-auto-rows: auto; gap: 18px; }
.fn-mer-grille .fn-carte{ display: flex; flex-direction: column; }
.fn-mer-grille .fn-carte-photo{ aspect-ratio: 16/10; }
.fn-mer-grande{ grid-row: span 2; }
.fn-mer-grande .fn-carte-photo{ flex: 1 1 auto; aspect-ratio: auto; min-height: 220px; }
.fn-mer-grande .fn-carte-corps h3{ font-size: 21px; }
.fn-liste-vignettes .fn-carnet-item:first-of-type{ border-top: 0; }
@media (max-width: 1080px){ .fn-mer-medinas{ grid-template-columns: 1fr; } }
@media (max-width: 640px){ .fn-mer-grille{ grid-template-columns: 1fr 1fr; } .fn-mer-grande{ grid-column: 1 / -1; grid-row: auto; } .fn-mer-grande .fn-carte-photo{ aspect-ratio: 16/10; min-height: 0; } .fn-mer-grille .fn-carte-corps h3{ font-size: 15px; } }

/* ---------- 8. Désert & oasis ---------- */
.fn-section-tete{ display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 24px; }
.fn-section-tete .fn-titre-section{ margin-bottom: 0; }
.fn-recits{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.fn-recit{ display: flex; flex-direction: column; background: var(--sb-fond-carte); border-radius: var(--sb-rayon); overflow: hidden; box-shadow: var(--sb-ombre); text-decoration: none; color: inherit; transition: transform .2s ease, box-shadow .2s ease; }
.fn-recit:hover{ transform: translateY(-4px); box-shadow: var(--sb-ombre-forte); }
.fn-recit-photo{ aspect-ratio: 16/10; overflow: hidden; }
.fn-recit-photo img{ width: 100%; height: 100%; object-fit: cover; }
.fn-recit-corps{ padding: 18px 20px 20px; }
.fn-recit-corps h3{ font-size: 20px; margin-bottom: 8px; }
.fn-recit-corps p{ color: var(--sb-doux); font-size: 15px; margin: 0 0 10px; }
.fn-recit-duree{ font-size: 13px; font-weight: 700; color: var(--sb-accent); }
@media (max-width: 860px){ .fn-recits{ grid-template-columns: 1fr; } .fn-recit{ flex-direction: row; } .fn-recit-photo{ flex: 0 0 38%; aspect-ratio: auto; } .fn-recit-corps{ padding: 14px 16px; } .fn-recit-corps p{ display: none; } .fn-recit-corps h3{ font-size: 17px; } }

/* ---------- 9. Toutes les destinations ---------- */
.fn-toutes-destinations{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.fn-toutes-destinations-colonne{ border-top: 3px solid var(--sb-dune); padding-top: 16px; }
.fn-toutes-destinations-colonne h3{ font-family: var(--sb-texte); font-size: 14px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; margin: 0 0 8px; }
.fn-toutes-destinations-colonne h3 a{ color: var(--sb-cta); text-decoration: none; }
.fn-toutes-destinations-colonne ul{ list-style: none; margin: 0; padding: 0; }
.fn-toutes-destinations-colonne li a{ display: flex; align-items: center; gap: 12px; padding: 7px 0; text-decoration: none; font-size: 15.5px; font-weight: 500; }
.fn-toutes-destinations-colonne li a:hover span{ color: var(--sb-accent); }
.fn-toutes-destinations-colonne li img{ width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
@media (max-width: 860px){ .fn-toutes-destinations{ grid-template-columns: 1fr; gap: 20px; } }

/* Correctifs lot 2 */
.fn-lame{ min-width: 0; }
.fn-lame img{ position: absolute; inset: 0; }
.fn-tuile-envie-texte span{ position: static; font-family: var(--sb-texte); font-weight: 500; display: block; margin-top: 4px; }
.fn-une-carnet{ max-height: none; }
.fn-une-grande .fn-carte-photo{ min-height: 240px; }
.fn-une-pile .fn-carte-photo{ min-height: 130px; }
.fn-carnet-item{ padding: 9px 0; }
.fn-carnet-item img{ width: 60px; height: 60px; }
/* Du nord au sud : silhouette plus présente, rail plus grand (plus de vide sous les cartes) */
.fn-nord-sud{ grid-template-columns: 300px minmax(0, 1fr); }
.fn-nord-sud-silhouette .fn-titre-section{ white-space: nowrap; font-size: 34px; }
.fn-nord-sud-silhouette .fn-silhouette{ height: 420px; }
.fn-destination-carte{ flex-basis: 300px; }
@media (max-width: 860px){ .fn-nord-sud-silhouette .fn-titre-section{ white-space: normal; font-size: 28px; } }
.fn-mer-grille .fn-carte-corps h3{ font-size: 16px; }
/* Mobile : macaron au-dessus du titre, titre plus présent, sections plus courtes */
@media (max-width: 599px){
	.fn-hero-macaron{ top: 62px; right: 10px; }
	.fn-hero-h1{ font-size: clamp(34px, 9.6vw, 44px); }
	.fn-une-pile{ grid-template-columns: 1fr 1fr; gap: 12px; }
	.fn-une-pile .fn-carte-corps{ padding: 10px 12px; }
	.fn-une-pile .fn-carte-corps h3{ font-size: 14.5px; }
	.fn-une-pile .fn-carte-pastille{ display: none; }
	.fn-une-grande .fn-carte-corps p{ display: none; }
	.fn-quatre-etapes .fn-tuiles-numerotees{ grid-template-columns: 1fr 1fr; gap: 10px; }
	.fn-quatre-etapes .fn-tuile-numerotee{ flex-direction: column; gap: 6px; padding: 12px; }
	.fn-quatre-etapes .fn-tuile-numerotee .fn-num{ font-size: 32px; }
	.fn-quatre-etapes .fn-tuile-numerotee p{ font-size: 13px; }
	.fn-quatre-etapes .fn-tuile-numerotee strong{ font-size: 15px; }
	.fn-quatre-etapes-photo img{ aspect-ratio: 16/10; }
	.fn-mer-grille .fn-carte:nth-child(n+4){ display: none; }
	.fn-liste-vignettes .fn-carnet-item:nth-of-type(n+4){ display: none; }
	.fn-toutes-destinations-colonne li:nth-child(n+4){ display: none; }
}
@media (max-width: 860px){ .fn-nord-sud{ grid-template-columns: minmax(0, 1fr); } .fn-destination-carte{ flex-basis: min(66vw, 250px); } }

/* ===== Juge visuel 04/10 (accueil) ===== */
/* R11 — la lame Djerba finit derrière la carte : plus de liseré vert sous le formulaire */
@media (min-width: 1081px){ .fn-lame-1{ align-self: flex-start; height: 74%; } }
/* R2 — Plage & thalasso : 1 grande + 2 */
.fn-mer-grille{ grid-template-columns: 1.3fr 1fr; }
/* R10 — rail : fondu à droite + flèches ; noms des villes sur la carte */
.fn-rail-cadre{ position: relative; min-width: 0; }
.fn-destination-rail{ -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent 100%); mask-image: linear-gradient(90deg, #000 82%, transparent 100%); scrollbar-width: none; }
.fn-destination-rail.est-au-bout{ -webkit-mask-image: none; mask-image: none; }
.fn-rail-fleches{ display: flex; justify-content: flex-end; gap: 10px; margin-bottom: 14px; }
.fn-rail-fleche{ width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid rgba(243,231,208,.5); background: transparent; color: var(--sb-sur-fonce); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background .2s ease; }
.fn-rail-fleche:hover:not(:disabled){ background: var(--sb-sur-fonce); color: var(--sb-fonce); }
.fn-rail-fleche:disabled{ opacity: .35; cursor: default; }
.fn-rail-fleche svg{ width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.fn-silhouette-nom{ font-family: var(--sb-texte); font-size: 8.5px; font-weight: 700; fill: rgba(243,231,208,.78); }
.fn-silhouette-nom.est-actif{ fill: #fff; }
.fn-nord-sud-silhouette .fn-silhouette{ height: 440px; }
.fn-fond-nuit .fn-silhouette-point{ cursor: pointer; }
@media (max-width: 860px){ .fn-rail-fleches{ display: none; } .fn-destination-rail{ -webkit-mask-image: none; mask-image: none; } }
.fn-mer-grille .fn-carte:not(.fn-mer-grande) .fn-carte-photo{ aspect-ratio: 2/1; }
.fn-mer-medinas .fn-titre-section{ margin-bottom: 16px; } .fn-liste-vignettes .fn-carnet-item{ padding: 8px 0; }