/* ══════════════════════════════════════════════════════════════════════════
   Identité du Domaine de Saint Maurice

   Les deux campings du groupe ne se vendent pas de la même façon, et leurs
   logos le disent déjà : Montpellier Plage est fuchsia et corail, familial et
   vif ; Saint Maurice est bleu profond et or, plus tenu. Cette feuille
   redéfinit les jetons du gabarit commun pour Saint Maurice seul, sans
   toucher une ligne du site voisin.

   Couleurs relevées dans le logo : bleu #006ca2 (61 % des pixels), or #a2906c
   (15 %), turquoise #5ab4b4, rose flamant #d8127e. Les valeurs ci-dessous en
   sont dérivées, assombries quand il faut tenir 4,5:1 sur fond clair.

   Typographie : Cormorant Garamond, romaine à fins empattements, pour les
   titres ; Jost, géométrique et sobre, pour le texte. Le duo est plus retenu
   que le DM Serif Display et le Plus Jakarta Sans de Montpellier Plage.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
    /* ── surfaces : un ivoire plus froid, et des bandes bleutées ── */
    --color-bg: #fcfbf9;
    --color-bg-alt: #eef2f4;
    --v2-creme: #f6f4ef;
    --v2-pale: #e8eef2;

    /* ── encres : le bleu du logo, assombri pour porter le texte ── */
    --color-dark: #0d3f60;
    --color-darker: #082b42;
    --v2-encre: #082b42;
    --vagues-voile: 8, 43, 66;
    --color-text: #35424a;
    --color-text-muted: #626e77;

    /* ── accents ── */
    --color-accent: #2a86b8;          /* le bleu du logo, éclairci pour les aplats */
    --color-accent-ink: #0a5c85;      /* bleu texte : 5,9:1 sur ivoire */
    --color-or: #a2906c;              /* l'or des étoiles du logo */
    --color-or-ink: #7a663f;          /* or texte : 4,8:1 sur ivoire */

    /* ── action : le bleu profond, blanc dessus ── */
    --color-cta: #0a5c85;
    --color-cta-hover: #084a6b;
    --color-cta-solid: #0a5c85;       /* blanc dessus : 6,5:1 */
    --color-cta-ink: #0a5c85;

    /* Le bandeau des promotions, decline dans le bleu de la maison. */
    --promo-fond-1: #073c58;
    --promo-fond-2: #0a5c85;

    --color-hairline: rgba(8, 43, 66, 0.08);
    --v2-trait: rgba(8, 43, 66, .13);

    /* ── typographie ── */
    --font-heading: 'Cormorant Garamond', 'DM Serif Display', Georgia, serif;
    --font-body: 'Jost', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;

    /* Cormorant Garamond porte une petite hauteur d'x et des traits fins : à
       taille égale il paraît deux crans plus petit qu'un DM Serif Display. Les
       titres sont donc agrandis, et les graisses relevées d'un cran. */
    --titre-echelle: 1.16;
}

/* ── Titres : plus grands, plus contrastés, moins gras ─────────────────── */
h1, h2, h3, .v2-titre-dit, .v2-titre-mot, .section-title {
    letter-spacing: -0.015em;
}
h1 { font-size: clamp(2.5rem, 5.4vw, 4.4rem); font-weight: 600; line-height: 1.06; }
.v2-titre-dit { font-weight: 600; }
.v2-titre-mot { font-weight: 600; }

/* Jost est géométrique : ses minuscules gagnent un souffle de plus que
   Plus Jakarta Sans, et son gris de texte est plus léger à graisse égale. */
body { font-weight: 400; letter-spacing: .004em; }
.v2-chapo, .lead { font-weight: 300; }
strong, b { font-weight: 600; }

/* Les libellés en capitales : Jost y est très à l'aise, on ouvre la chasse. */
.v2-hero-sur, .page-hero-tag, .section-tag, .gallery-label, .v2-etiquette figcaption,
.demo-nav-cta, .v2-topbar, .btn { letter-spacing: .1em; }

/* ── L'or : le filet de la maison ──────────────────────────────────────── */
.v2-goutte { color: var(--color-or); }
.v2-titre-mot { color: var(--color-accent-ink); }
.section-tag { color: var(--color-or-ink); }
/* La pastille des héros est posée sur un aplat bleu : l'or foncé y tombait
   à 1,3:1 (audit du 26/09/2026). Blanc dessus : 7,3:1. */
.page-hero-tag { color: #fff; }

/* Un filet doré sous les titres de section, signature discrète du site.
   .v2-titre est une boîte flex : le filet doit occuper toute la ligne pour
   passer dessous, sinon il se range à droite du mot. */
.v2-titre::after {
    content: '';
    /* flex-basis occupe la ligne entiere pour passer sous le mot, mais le trait
       lui-meme ne fait que 54 px : il est peint par un degrade, pas par la
       boite, sinon il barrerait toute la page. */
    flex-basis: 100%;
    height: 1px;
    margin: 14px 0 2px;
    background: linear-gradient(90deg,
        transparent calc(50% - 27px), var(--color-or) calc(50% - 27px),
        var(--color-or) calc(50% + 27px), transparent calc(50% + 27px));
    opacity: .85;
}
.v2-titre-gauche::after {
    background: linear-gradient(90deg, var(--color-or) 0 54px, transparent 54px);
}

/* Le sous-titre suivait le filet de trop près et pesait lourd sous le
   Cormorant : il s'allège et respire. */
.v2-titre-dit { font-weight: 500; margin-top: 12px; }

/* Sur le bandeau bleu, une pastille bleu nuit disparaîtrait : elle passe en
   ivoire, encre bleue dessus (6,5:1). */
.promo-tag { background: var(--color-bg); color: var(--color-cta-ink); }

/* ── Boutons : le bleu profond, l'or en second rôle ────────────────────── */
.btn-outline {
    border-color: var(--color-or);
    color: var(--color-or-ink);
}
.btn-outline:hover { background: var(--color-or); border-color: var(--color-or); color: #fff; }
/* Sur le dégradé bleu du bandeau final, l'encre or disparaissait (1,1:1 sur
   52 pages) : le bouton y reprend le blanc du gabarit commun (6,0:1). */
.cta-final .btn-outline { color: #fff; border-color: var(--color-or); }
.cta-final .btn-outline:hover { background: #fff; color: var(--color-darker); border-color: #fff; }

/* ══════════════════════════════════════════════════════════════════════════
   La composition de l'accueil

   Montpellier Plage empile des bandes alternées, chacune avec son titre, sa
   composition d'images asymétrique et son étiquette : un rythme soutenu, de
   magazine. Saint-Maurice fait l'inverse, parce que c'est ce qu'il vend :
   de l'espace, de l'ombre et du temps. Moins de sections, des images bord à
   bord, du texte dans une colonne étroite, et un moment de silence que
   l'autre site n'a pas.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Le héros : le titre s'aligne à gauche au lieu d'être centré ────────── */
.sm-hero-inner { text-align: left; align-items: flex-start; max-width: 940px; }
.sm-hero-inner .v2-hero-sur::before { margin-right: 14px; }
.sm-hero .v2-hero-promesse { margin-left: 0; }

/* ── Le manifeste : une phrase, seule, et beaucoup d'air ────────────────── */
.sm-manifeste {
    max-width: 1100px;
    margin: 0 auto;
    padding: clamp(90px, 13vw, 170px) 24px clamp(70px, 9vw, 120px);
    display: grid;
    grid-template-columns: minmax(min(420px, 100%), auto) minmax(min(320px, 100%), 1fr);
    gap: clamp(30px, 6vw, 80px);
    align-items: end;
}
.sm-manifeste-dit {
    font-family: var(--font-heading);
    font-size: clamp(2.6rem, 6.6vw, 5rem);
    font-weight: 500;
    line-height: 1.02;
    letter-spacing: -0.02em;
    color: var(--v2-encre);
    margin: 0;
}
.sm-manifeste-sous {
    font-size: 1.02rem;
    line-height: 1.75;
    color: var(--color-text-muted);
    max-width: 44ch;
    margin: 0;
    padding-bottom: .4em;
    border-top: 1px solid var(--color-or);
    padding-top: 22px;
}

/* ── Les chiffres, en typographie : pas de carte, pas de pictogramme ───── */
.sm-chiffres {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 24px clamp(70px, 9vw, 120px);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
    gap: 34px 24px;
}
.sm-chiffres div { display: flex; flex-direction: column; gap: 6px; }
.sm-chiffres strong {
    font-family: var(--font-heading);
    font-size: clamp(2.2rem, 4vw, 3.1rem);
    font-weight: 500;
    line-height: 1;
    color: var(--color-accent-ink);
    font-variant-numeric: lining-nums;
}
.sm-chiffres span {
    font-size: .84rem;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    line-height: 1.5;
    max-width: 22ch;
}

/* ── Les chapitres : l'image bord à bord, le texte dans une colonne ────── */
.sm-chapitre {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    align-items: stretch;
    background: var(--v2-creme);
}
.sm-chapitre-clair { background: var(--v2-pale); }
.sm-chapitre:nth-of-type(even) > .sm-chapitre-image { order: 2; }

.sm-chapitre-image { margin: 0; position: relative; overflow: hidden; min-height: clamp(320px, 42vw, 620px); }
.sm-chapitre-image .v2-photo-lien { height: 100%; }
.sm-chapitre-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sm-chapitre-image figcaption {
    position: absolute;
    left: 0; right: 0; top: 0;
    padding: 20px 26px 44px;
    color: #fff;
    font-size: .8rem;
    font-weight: 500;
    letter-spacing: .13em;
    text-transform: uppercase;
    background: linear-gradient(to bottom, rgba(8, 43, 66, .72), transparent);
}

.sm-chapitre-mot {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(44px, 6vw, 92px) clamp(26px, 5vw, 76px);
}
.sm-chapitre-mot .v2-titre { justify-content: flex-start; margin-bottom: 0; }
.sm-chapitre-mot h2 {
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 2.4vw, 2.05rem);
    font-weight: 500;
    line-height: 1.24;
    color: var(--v2-encre);
    margin: 14px 0 16px;
    max-width: 22ch;
}
.sm-chapitre-mot p { max-width: 46ch; line-height: 1.75; color: var(--color-text); }
.sm-chapitre-liens { display: flex; flex-wrap: wrap; gap: 10px 14px; margin-top: 26px; }

/* ── La mosaïque : la vie du camping en un coup d'oeil ─────────────────── */
.sm-mosaique {
    max-width: 1240px;
    margin: 0 auto;
    padding: clamp(70px, 9vw, 120px) 24px;
}
.sm-mosaique-dit {
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 2.4vw, 2.05rem);
    font-weight: 500;
    line-height: 1.24;
    color: var(--v2-encre);
    margin: 14px 0 34px;
    max-width: 30ch;
}
.sm-mosaique-grille {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: clamp(150px, 19vw, 250px);
    gap: 14px;
}
.sm-mosaique-grille figure { margin: 0; position: relative; overflow: hidden; border-radius: 3px; }
.sm-mosaique-grille img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s var(--ease-out); }
.sm-mosaique-grille figure:hover img { transform: scale(1.04); }
.sm-mosaique-large { grid-row: span 2; grid-column: span 2; }

@media (max-width: 900px) {
    .sm-chapitre { grid-template-columns: 1fr; }
    .sm-chapitre:nth-of-type(even) > .sm-chapitre-image { order: 0; }
    .sm-chapitre-image { min-height: clamp(240px, 56vw, 380px); }
    .sm-manifeste { grid-template-columns: 1fr; align-items: start; }
    .sm-mosaique-grille { grid-template-columns: repeat(2, 1fr); grid-auto-rows: clamp(130px, 33vw, 200px); }
    .sm-mosaique-large { grid-row: span 1; grid-column: span 2; }
}
@media (prefers-reduced-motion: reduce) {
    .sm-mosaique-grille figure:hover img { transform: none; }
}

/* ── Retouches issues du jury croisé du 29/08 ─────────────────────────────
   Densifier sans rajouter de sections : une accroche par chapitre, une
   ligne factuelle sous chaque étiquette de la mosaïque, et des avis qui ne
   reprennent plus la forme du site frère. */

/* L'accroche du chapitre : un relais entre le titre serif et le paragraphe. */
.sm-chapitre-accroche {
    font-family: var(--font-body);
    font-size: .92rem;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--color-accent-ink);
    margin: 2px 0 14px;
    max-width: 40ch;
}

/* L'étiquette de mosaïque porte deux lignes : le sujet, puis le fait. */
.sm-mosaique-grille figcaption { line-height: 1.35; }
.sm-mos-l1 { display: block; }
.sm-mos-l2 {
    display: block;
    margin-top: 3px;
    font-size: .78rem;
    font-weight: 400;
    letter-spacing: .02em;
    text-transform: none;
    opacity: .92;
}
/* Sur une tuile mobile de 130 px, la note recouvrait toute la photo : elle
   ne s'affiche qu'à partir de 700 px, le sujet seul suffit au doigt. */
@media (max-width: 700px) {
    .sm-mos-l2 { display: none; }
}

/* la flèche d'affordance reste collée au sujet, pas à la note */
.sm-mosaique-grille .v2-photo-lien figcaption::after { display: none; }
.sm-mosaique-grille .sm-mos-l1::after {
    content: '';
    display: inline-block;
    width: .58em; height: .58em;
    margin-left: .5em;
    border-right: 2px solid currentColor;
    border-top: 2px solid currentColor;
    transform: rotate(45deg) translate(-.06em, .06em);
    transition: transform .3s var(--ease-out);
}
.sm-mosaique-grille figure:hover .sm-mos-l1::after { transform: rotate(45deg) translate(.12em, -.12em); }

/* Les avis : plus de carte photo + liste comme chez le frère, mais des
   citations empilées, centrées, séparées d'un filet doré. */
.v2-avis {
    display: block;
    max-width: 780px;
    margin: 0 auto;
    padding: clamp(64px, 8vw, 110px) 24px;
}
.v2-avis-photo { display: none; }
.v2-avis-texte { text-align: center; }
.v2-avis-texte .v2-titre { justify-content: center; }
.v2-avis-texte .v2-titre-gauche::after { margin-left: auto; margin-right: auto;
    background: linear-gradient(90deg, transparent calc(50% - 27px), var(--color-or) calc(50% - 27px),
        var(--color-or) calc(50% + 27px), transparent calc(50% + 27px)); }
.v2-avis-liste { display: block; margin-top: 10px; }
.v2-avis-liste blockquote {
    margin: 0;
    padding: 26px 8px;
    border: 0;
    background: none;
    font-family: var(--font-heading);
    font-size: 1.18rem;
    line-height: 1.55;
    font-style: italic;
    color: var(--color-text);
}
.v2-avis-liste blockquote + blockquote { border-top: 1px solid var(--v2-trait); }
.v2-avis-liste cite {
    display: block;
    margin-top: 12px;
    font-family: var(--font-body);
    font-style: normal;
    font-size: .85rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--color-or-ink);
}

/* Le lien d'appel : le trait qui se dessine au survol est or, comme le filet
   des titres. Le repos reste dans la couleur du texte. */
.v2-lien::before { background: var(--color-or); }

/* Cartes des modèles (page des hébergements) : en Cormorant, fin, un titre sur
   deux lignes remontait dans la partie claire du dégradé commun et devenait
   illisible sur un ciel ou un bardage blanc (constaté le 06/10). Le voile
   monte plus haut et plus dense : le titre reste au-dessus de 4,5:1. */
/* Le 09/10, ce voile noyait les photos des cartes dans le bleu (luminance 120 à
   84) : il ne fonce plus que sous le titre, que tient une ombre douce. */
.hub-card-label {
    background: linear-gradient(rgba(8, 43, 66, 0) 26%, rgba(8, 43, 66, .62) 55%, rgba(8, 43, 66, .94) 100%);
}
.hub-card-label h3 { text-shadow: 0 1px 10px rgba(8, 43, 66, .65); }
.hub-card-label span::after { color: inherit; }

/* Cartes d'article de la page Tourisme : le voile des cartes de modèles, qui
   monte dès le haut, noyait les photos dans le bleu (constaté le 09/10). Ici le
   haut reste dégagé et le voile ne fonce que sous le titre, plus long (deux à
   quatre lignes) ; une ombre douce tient le texte blanc sur les photos claires. */
/* titres de trois ou quatre lignes : le voile commence plus haut */
.hub-card-article .hub-card-label {
    background: linear-gradient(rgba(8, 43, 66, .12) 0%, rgba(8, 43, 66, .6) 36%, rgba(8, 43, 66, .94) 100%);
}
.hub-card-article .hub-card-label h3 { text-shadow: 0 1px 10px rgba(8, 43, 66, .65); }

/* Liens dans le texte courant : bleu profond sur bleu nuit, ils ne se
   distinguaient que par la teinte (1,4:1 avec le texte). Soulignés, ils se
   repèrent sans dépendre de la couleur. */
.article-body p a, .article-body li a, .v2-seo p a, .v2-seo li a, .v2-bande p a:not([class]) {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}


/* ── Audit visuel du 09/10/2026 ────────────────────────────────────────── */
/* Mosaïque de l'accueil : quatre tuiles dont une grande, la dernière restait
   seule sur sa ligne ; elle passe en bandeau. */
.sm-mosaique-grille > figure:last-child:nth-child(4) { grid-column: 1 / -1; }
/* Sur le héros, l'onglet courant était bleu profond sur la photo (1,6:1) :
   blanc, trait doré. Le tiroir mobile garde ses propres règles. */
@media (min-width: 941px) {
    .demo-nav:not(.scrolled) .demo-nav-links > a.active:not(.btn),
    .demo-nav:not(.scrolled) .nav-drop.active-parent .nav-drop-btn { color: #fff; }
    .demo-nav:not(.scrolled) .demo-nav-links > a:not(.btn)::after,
    .demo-nav:not(.scrolled) .nav-drop-btn::after { background: var(--color-or); }
}
/* Le corail de Montpellier Plage restait sur deux fonds */
.semainier-cta { background: rgba(10, 92, 133, .05); }
.cmp-table tr.cmp-diff td { background: rgba(10, 92, 133, .07); }