/* ─── Police du site, hébergée avec le site ───────────────────────────────
   Instrument Sans (licence SIL Open Font License 1.1), servie depuis
   fonts/ et non plus depuis Google Fonts. Trois raisons :
     1. une requête bloquante de moins sur le chemin critique, et surtout
        une poignée de main DNS + TLS en moins vers un second domaine ;
     2. l’adresse IP des visiteurs n’est plus transmise à Google à chaque
        page — c’est l’un des transferts hors Maroc signalés au dossier CNDP ;
     3. la politique de sécurité (CSP) peut se refermer sur le seul domaine
        du site.
   Police variable : un fichier unique couvre les graisses 400 à 700.
   Les unicode-range sont ceux de Google : latin-ext n’est téléchargé que
   si la page en a besoin.
   font-display: swap — le texte s’affiche immédiatement dans la police de
   secours, puis bascule. Jamais de texte invisible à l’ouverture. */
@font-face {
    font-family: "Instrument Sans";
    font-style: normal;
    font-weight: 400 700;
    font-stretch: 100%;
    font-display: swap;
    src: url("fonts/instrument-sans-latin.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: "Instrument Sans";
    font-style: normal;
    font-weight: 400 700;
    font-stretch: 100%;
    font-display: swap;
    src: url("fonts/instrument-sans-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* ============================================================================
   PISCINE LAGON MAROC · refonte éditoriale
   Papier chaud · encre pétrole · terracotta · arches méditerranéennes
   ============================================================================ */

:root {
    --paper:       #f4efe7;
    --paper-2:     #eae2d1;
    --ink:         #16323c;
    --ink-deep:    #0d242e;
    --ink-60:      rgba(22, 50, 60, .72);   /* 5,2:1 sur paper — .64 échouait en AA */
    --water:       #157a8c;                 /* décoratif : icônes, puces, focus */
    --water-ink:   #106676;                 /* version texte, 5,8:1 sur paper */
    --water-light: #6fc3cf;
    --clay:        #c2643c;                 /* décoratif : filets, aplats */
    --clay-ink:    #a8512d;                 /* version texte, 4,7:1 sur paper */
    --line:        rgba(22, 50, 60, .16);
    --line-light:  rgba(244, 239, 231, .18);

    --sans:  "Instrument Sans", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    --ease: cubic-bezier(.32, .94, .6, 1);
    --pad-lisible: clamp(20px, 5.4vw, 84px);
    /* Le retrait horizontal absorbe l'encoche en paysage : toutes les regles
       qui utilisent --pad-x en heritent, sans correctif disperse. */
    --pad-x: max(var(--pad-lisible), var(--sa-left), var(--sa-right));

    /* Zones systeme iOS (encoche, Dynamic Island, barre d'accueil). Valent 0
       partout ailleurs : aucun effet sur les autres appareils. */
    --sa-top: env(safe-area-inset-top, 0px);
    --sa-bottom: env(safe-area-inset-bottom, 0px);
    --sa-left: env(safe-area-inset-left, 0px);
    --sa-right: env(safe-area-inset-right, 0px);
}

/* ---------------------------------------------------------------- base --- */

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

html {
    scroll-behavior: smooth;
    scroll-padding-top: 96px;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: var(--sans);
    font-size: 1.04rem;
    line-height: 1.72;
    color: var(--ink);
    /* papier légèrement granité */
    background-color: var(--paper);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
    background-size: 180px 180px;
}

/* le décor (tampon, arche fantôme) peut dépasser : on coupe à la racine */
html, body { overflow-x: hidden; }

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

h1, h2, h3, h4, blockquote { margin: 0; }

p { margin: 0; }

a { color: inherit; }

::selection { background: var(--clay); color: var(--paper); }

/* le terracotta ne fait que 2,1:1 sur la photo du hero : on passe au papier */
body.hero-photo .site-head:not(.scrolled) :focus-visible,
.hero :focus-visible { outline-color: var(--paper) !important; }

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

.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: fixed;
    top: -64px; left: 20px;
    z-index: 5000;
    padding: 12px 22px;
    background: var(--ink);
    color: var(--paper);
    font-weight: 600;
    text-decoration: none;
    border-radius: 0 0 10px 10px;
    transition: top .3s var(--ease);
}
.skip-link:focus { top: 0; }

/* ---------------------------------------------------- apparitions scroll --- */

.js [data-reveal] {
    opacity: 0;
    transition: opacity 1s var(--ease), transform 1s var(--ease), clip-path 1s var(--ease);
}
[data-reveal="up"]    { transform: translateY(32px); }
/* -12% en bas : laisse dépasser les jambages (g, p, q) une fois révélé */
[data-reveal="lines"] { transform: translateY(36px); clip-path: inset(0 0 16% 0); }
[data-reveal].in {
    opacity: 1;
    transform: none;
    clip-path: inset(0 0 -12% 0);
}

/* -------------------------------------------------------------- boutons --- */

.btn-solid {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    padding: 9px 9px 9px 28px;
    background: var(--water-ink);
    color: var(--paper);
    font-family: var(--sans);
    font-size: .98rem;
    font-weight: 600;
    letter-spacing: .01em;
    text-decoration: none;
    border: none;
    border-radius: 999px;
    cursor: pointer;
}
.btn-solid:hover { background: #0c505d; }

.btn-disc {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    flex: none;
    background: var(--paper);
    color: var(--water-ink);
    border-radius: 50%;
}
.btn-disc svg { width: 18px; height: 18px; }

/* fond assombri : le texte clair sur --clay ne passait qu'à 3,5:1 */
.btn-clay { background: var(--clay-ink); }
.btn-clay:hover { background: #8f4526; }
.btn-clay .btn-disc { background: var(--paper); color: var(--clay-ink); }


.link-under {
    position: relative;
    display: inline-flex;
    align-items: center;
    /* 44 px de haut : c'est la surface minimale confortable au doigt */
    min-height: 44px;
    color: var(--ink);
    font-weight: 700;
    font-size: .98rem;
    text-decoration: none;
    padding-bottom: 5px;
}
.link-under::after {
    content: "";
    position: absolute;
    left: 0; bottom: 8px;
    width: 100%; height: 1.5px;
    background: var(--clay);
}
.link-under:hover,
.link-under:focus-visible { color: var(--clay-ink); }

/* --------------------------------------------------------------- header --- */

.site-head {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1000;
    transition: background .4s, box-shadow .4s;
}
.site-head.scrolled {
    background: rgba(244, 239, 231, .88);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 1px 0 var(--line);
}

/* En paysage sur iPhone, l'encoche mord sur le bord gauche ou droit : le logo
   et le bouton menu passaient dessous. */
.site-head .head-inner {
    padding-top: var(--sa-top);
}

.head-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    padding: 20px var(--pad-x);
    transition: padding .35s var(--ease);
}
.site-head.scrolled .head-inner { padding-block: 13px; }

.wordmark {
    display: flex;
    align-items: center;
    flex: none;
    color: var(--ink);
    text-decoration: none;
}
.wordmark img {
    display: block;
    width: auto;
    height: 52px;
    transition: height .35s var(--ease);
}
.site-head.scrolled .wordmark img { height: 42px; }

.head-nav { display: flex; gap: clamp(18px, 2.6vw, 38px); }

.head-link {
    position: relative;
    font-size: .88rem;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--ink);
    text-decoration: none;
    padding-bottom: 4px;
}
.head-link::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: 100%; height: 1.5px;
    background: var(--ink);
    opacity: 0;
}
.head-link.is-current::after { opacity: 1; }
.head-link:hover,
.head-link:focus-visible { color: var(--clay-ink); }

.head-right { display: flex; align-items: center; gap: 16px; }

.burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 7px;
    width: 46px; height: 46px;
    padding: 12px 10px;
    background: transparent;
    border: 1.5px solid var(--ink);
    border-radius: 50%;
    cursor: pointer;
}
.burger span {
    display: block;
    height: 1.8px;
    background: var(--ink);
    transition: transform .4s var(--ease);
}
.burger[aria-expanded="true"] span:first-child { transform: translateY(4.4px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child  { transform: translateY(-4.4px) rotate(-45deg); }

/* menu mobile plein écran */
.mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 900;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow-y: auto;
    overscroll-behavior: contain;
    gap: 8vh;
    padding: calc(110px + var(--sa-top)) var(--pad-x) calc(48px + var(--sa-bottom));
    background: var(--paper);
    opacity: 0;
    visibility: hidden;
    transition: opacity .45s var(--ease), visibility 0s .45s;
}
.mobile-menu.open {
    opacity: 1;
    visibility: visible;
    transition: opacity .45s var(--ease), visibility 0s;
}
.mobile-menu > nav { margin-block: auto; }
.mobile-menu[hidden] { display: flex; }

.mm-link {
    display: block;
    font-family: var(--sans);
    font-size: clamp(2rem, 9vw, 3.2rem);
    font-weight: 700;
    letter-spacing: -.025em;
    color: var(--ink);
    text-decoration: none;
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
    transform: translateY(18px);
    opacity: 0;
    transition: transform .6s var(--ease), opacity .6s var(--ease);
}
.mobile-menu.open .mm-link { transform: none; opacity: 1; }
.mobile-menu.open .mm-link:nth-child(2) { transition-delay: .05s; }
.mobile-menu.open .mm-link:nth-child(3) { transition-delay: .10s; }
.mobile-menu.open .mm-link:nth-child(4) { transition-delay: .15s; }
.mobile-menu.open .mm-link:nth-child(5) { transition-delay: .20s; }
.mobile-menu.open .mm-link:nth-child(6) { transition-delay: .25s; }
.mobile-menu.open .mm-link:nth-child(7) { transition-delay: .30s; }

.mm-foot {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.mm-foot a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--ink-60);
    font-weight: 600;
    font-size: .95rem;
    text-decoration: none;
}

/* ----------------------------------------------------------------- hero --- */

.hero {
    padding: clamp(140px, 17vh, 190px) var(--pad-x) clamp(14px, 2.4vw, 30px);
}

.hero-grid {
    width: 100%;
    max-width: 900px;
    min-width: 0;
    margin-inline: auto;
    text-align: center;
}

.overline {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--ink-60);
    margin-bottom: clamp(22px, 3vw, 34px);
}
.hero-h1 {
    font-family: var(--sans);
    font-size: clamp(2.7rem, 6.6vw, 5.2rem);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -.02em;
    margin-bottom: clamp(24px, 3vw, 36px);
    /* répartit les lignes au lieu d'un <br> figé qui casse mal sur mobile */
    text-wrap: balance;
    padding-bottom: .06em;
}

.oasis {
    font-style: normal;
    font-weight: inherit;
    color: var(--water);
    white-space: nowrap;
}
.hero-p {
    max-width: 47ch;
    margin-inline: auto;
    font-size: clamp(1.02rem, 1.5vw, 1.13rem);
    color: var(--ink-60);
    margin-bottom: clamp(30px, 4vw, 44px);
}
.hero-p strong { color: var(--ink); font-weight: 700; }

.hero-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 30px;
}

/* entrée de page */
.hero-copy > * {
    opacity: 0;
    transform: translateY(26px);
    animation: rise .95s var(--ease) forwards;
}
.hero-copy > .overline { animation-delay: .1s; }
.hero-copy > .hero-h1  { animation-delay: .22s; }
.hero-copy > .hero-p   { animation-delay: .36s; }
.hero-copy > .hero-cta { animation-delay: .5s; }
@keyframes rise { to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------- sections --- */

.sec { padding: clamp(90px, 12vw, 150px) var(--pad-x); }

/* respirations volontairement inégales : un pas régulier d'une section à
   l'autre donne le rythme mécanique d'un gabarit */
.sec-lagons  { padding-block: clamp(56px, 7vw, 86px) clamp(100px, 13vw, 165px); }
.sec-savoir  { padding-block: clamp(110px, 15vw, 185px) clamp(80px, 10vw, 125px); }
.sec-avis    { padding-block: clamp(70px, 9vw, 110px); }
.sec-contact { padding-block: clamp(120px, 16vw, 200px) clamp(60px, 8vw, 90px); }

.sec > * { max-width: 1340px; margin-inline: auto; }

.kicker {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--ink-60);
    margin-bottom: clamp(28px, 4vw, 48px);
}
.kicker-light { color: rgba(244, 239, 231, .66); }

/* libellé posé juste au-dessus de la liste des lagons ; c'est aussi la cible
   du lien « Nos lagons », d'où la marge de dégagement sous le header fixe */
.types-kicker {
    margin-top: clamp(64px, 8vw, 104px);
    margin-bottom: 18px;
    color: var(--ink);
    scroll-margin-top: 108px;
}

.sec-title {
    font-family: var(--sans);
    font-size: clamp(2.2rem, 4.8vw, 3.8rem);
    font-weight: 700;
    line-height: 1.16;
    letter-spacing: -.02em;
    padding-bottom: .08em;
}
.sec-title-light { color: var(--paper); }
/* le devis est le moment fort de la page : il domine les autres titres */
.sec-devis .sec-title { font-size: clamp(2.8rem, 6.4vw, 5rem); line-height: 1.04; }

/* --------------------------------------------------------- les raisons --- */

/* colonnes volontairement inégales et décalées : quatre blocs strictement
   identiques, c'est la signature visuelle d'une page générée */
/* Deux rangées partagées : les filets, les titres et les paragraphes
   s'alignent d'une colonne à l'autre même quand un titre passe sur
   deux lignes. */
.reasons {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: auto auto;
    gap: clamp(20px, 2.4vw, 38px);
    margin-top: clamp(38px, 4.5vw, 58px);
}

.reason {
    display: grid;
    grid-row: span 2;
    grid-template-rows: subgrid;
    row-gap: 11px;
}

.reason h3 {
    font-size: clamp(1.25rem, 1.9vw, 1.6rem);
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.3;
    color: var(--ink);
    text-wrap: balance;
}
.reason p {
    font-size: .95rem;
    line-height: 1.6;
    color: var(--ink-60);
}

/* ---------------------------------------------------------- les lagons --- */

/* Cartes horizontales. L’ancienne version était une suite de bandes pleine
   largeur : sur 1920 px, le numéro, la vignette, le titre et la description
   se retrouvaient à 40 cm les uns des autres et la description était poussée
   contre le bord opposé. On resserre dans un conteneur étroit, et chaque
   lagon devient une carte autonome. */
.types {
    display: grid;
    gap: clamp(10px, 1vw, 14px);
    max-width: 1080px;
}

/* le libellé et ce qui suit la liste s’alignent sur les cartes, pas sur la
   largeur de section (1340 px) : sans ça, le bouton flotterait à gauche */
.types-kicker, .types-plus { max-width: 1080px; }

.type-row {
    position: relative;
    display: grid;
    grid-template-columns: auto 168px minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(18px, 1.8vw, 26px);
    padding: 16px clamp(18px, 1.6vw, 22px);
    border: 1px solid rgba(22, 50, 60, .11);
    border-radius: 16px;
    /* voile blanc léger sur le papier : la carte se détache sans introduire
       une couleur qui n’existe pas dans la palette */
    background: linear-gradient(180deg, rgba(255, 255, 255, .60), rgba(255, 255, 255, .30));
    box-shadow: 0 1px 2px rgba(13, 36, 46, .04);
    text-decoration: none;
    color: var(--ink);
    transition: background .35s var(--ease), border-color .35s var(--ease),
                box-shadow .35s var(--ease), transform .35s var(--ease);
}
.type-row:hover,
.type-row:focus-visible {
    background: linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .66));
    border-color: rgba(22, 50, 60, .2);
    box-shadow: 0 10px 26px rgba(13, 36, 46, .09);
    transform: translateY(-2px);
    /* la règle globale :focus-visible impose border-radius: 2px ; on redit le
       rayon de la carte pour que ses coins ne s’équarrissent pas au clavier */
    border-radius: 16px;
}

/* Fin, en graisse normale : il numérote, il ne doit pas concurrencer le titre. */
.type-num {
    font-family: var(--sans);
    font-size: .95rem;
    font-weight: 400;
    font-variant-numeric: tabular-nums;
    letter-spacing: .1em;
    /* --ink-60 et pas plus clair : à 15 px, un gris plus faible tombe sous
       le seuil de contraste AA. La discrétion vient de la graisse 400 et de
       la taille, pas d’un gris illisible. */
    color: var(--ink-60);
}

.type-chip {
    width: 168px;
    height: 126px;                       /* 4:3, le ratio des fichiers sources */
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 6px 16px rgba(13, 36, 46, .15);
}
.type-chip img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Titre et description collés, alignés à gauche, dans le même bloc. */
.type-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    min-width: 0;
}
.type-title {
    font-family: var(--sans);
    font-size: clamp(1.15rem, 1.45vw, 1.42rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.015em;
    overflow-wrap: anywhere;
}
.type-desc {
    max-width: 56ch;
    font-size: .96rem;
    line-height: 1.55;
    color: var(--ink-60);
    text-align: left;
}

.type-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    border: 1px solid var(--line);
    border-radius: 50%;
    color: var(--ink);
    background: transparent;
    transition: background .3s var(--ease), color .3s var(--ease),
                border-color .3s var(--ease), transform .3s var(--ease);
}
.type-arrow svg { width: 18px; height: 18px; }
.type-row:hover .type-arrow,
.type-row:focus-visible .type-arrow {
    background: var(--water-ink);
    border-color: var(--water-ink);
    color: var(--paper);
    transform: translateX(2px);
}

@media (prefers-reduced-motion: reduce) {
    .type-row, .type-arrow { transition: none; }
    .type-row:hover, .type-row:focus-visible { transform: none; }
    .type-row:hover .type-arrow, .type-row:focus-visible .type-arrow { transform: none; }
}

/* ------------------------------------------- bouton de la galerie --- */

/* Secondaire face au bouton de devis : contour plutot que fond plein. */
/* Sans JavaScript la galerie ne peut pas s’ouvrir : on n’affiche pas un
   bouton mort. Le reste de la section (vignettes, liens vers le devis)
   fonctionne normalement. */
/* Ligne de liens vers les articles, sous le bouton de galerie. Discrète :
   elle sert le maillage interne sans concurrencer l’appel au devis. */
.types-lire {
    /* Deux contraintes à tenir en même temps : garder une mesure lisible
       (~70 caractères) ET démarrer exactement au bord gauche des cartes.
       Le retrait gauche reproduit le centrage du bloc .types ; sous 1080 px
       il retombe à zéro et le paragraphe s’aligne comme le reste. */
    width: min(70ch, 100%);
    margin-top: clamp(16px, 2vw, 22px);
    margin-inline: max(0px, (100% - 1080px) / 2) auto;
    font-size: .95rem;
    line-height: 1.7;
    color: var(--ink-60);
}
.types-lire a {
    color: var(--water-ink);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.types-lire a:hover, .types-lire a:focus-visible { color: var(--clay-ink); }

/* Même ligne de liens, mais sur les pages sans cartes : elle s’aligne alors
   sur le texte de la section (1340 px) et non sur le conteneur des cartes. */
/* Section d’enchaînement : elle porte le retrait latéral du reste du contenu,
   avec une respiration verticale réduite pour ne pas couper le fil de lecture. */
.sec-suite { padding-block: 0 clamp(28px, 4vw, 44px); }
.sec-lire {
    /* La boîte occupe toute la largeur de contenu de la section, ce qui l’aligne
       exactement sur les titres. La longueur de ligne est bridée par un retrait
       à droite, et non par une largeur : sinon la boîte se recentrerait. */
    width: 100%;
    max-width: 1340px;
    margin-inline: auto;
    padding-inline-end: max(0px, calc(100% - 80ch));
    box-sizing: border-box;
}

.types-plus { display: none; }
.js .types-plus { display: block; margin: clamp(26px, 3.4vw, 40px) auto 0; }

.btn-galerie {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    min-height: 48px;
    padding: 12px 22px;
    border: 1.5px solid var(--line);
    border-radius: 999px;
    background: transparent;
    color: var(--ink);
    font: inherit;
    font-size: .98rem;
    font-weight: 600;
    letter-spacing: .01em;
    cursor: pointer;
    transition: border-color .3s var(--ease), background .3s var(--ease);
}

.btn-galerie:hover,
.btn-galerie:focus-visible { border-color: var(--water-ink); background: var(--paper-2); }

.btn-galerie-ic {
    display: inline-flex;
    width: 22px; height: 22px;
    color: var(--water-ink);
}
.btn-galerie-ic svg { width: 100%; height: 100%; }

/* --------------------------------------------------- galerie plein ecran --- */

.gal {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    flex-direction: column;
    background: rgba(8, 26, 34, .96);
    /* le voile couvre l'ecran entier ; le contenu, lui, evite l'encoche */
    padding: calc(14px + var(--sa-top)) calc(10px + var(--sa-right))
             calc(14px + var(--sa-bottom)) calc(10px + var(--sa-left));
}

.gal[hidden] { display: none; }

.gal-tete {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0 6px 10px;
}

.gal-compteur {
    margin: 0;
    font-family: var(--sans);
    font-size: .95rem;
    font-weight: 600;
    letter-spacing: .08em;
    color: rgba(244, 239, 231, .78);
    font-variant-numeric: tabular-nums;
}

.gal-btn {
    width: 48px; height: 48px;
    flex: none;
    display: grid;
    place-items: center;
    border: 1.5px solid rgba(244, 239, 231, .38);
    border-radius: 50%;
    background: rgba(244, 239, 231, .08);
    color: var(--paper);
    cursor: pointer;
    transition: background .25s var(--ease), border-color .25s var(--ease);
}

.gal-btn svg { width: 22px; height: 22px; }
.gal-btn:hover,
.gal-btn:focus-visible { background: var(--paper); border-color: var(--paper); color: var(--ink-deep); }

/* Piste a defilement magnetique : le glissement tactile est natif, les
   boutons ne font que deplacer le defilement. Aucune bibliotheque. */
.gal-piste {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    overscroll-behavior: contain;
    scrollbar-width: none;
}
.gal-piste::-webkit-scrollbar { display: none; }
.gal-piste:focus-visible { outline: 2px solid var(--paper); outline-offset: -4px; border-radius: 10px; }

.gal-vue {
    flex: 0 0 100%;
    width: 100%;
    min-width: 0;
    margin: 0;
    scroll-snap-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 0 4px;
}

/* flex: 1 1 auto donne au conteneur une hauteur definie ; sans elle, le
   max-height: 100% de l’image n’a aucune reference et la photo peut
   deborder verticalement sur un ecran bas. */
.gal-vue picture {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

/* La photo s'inscrit dans la place disponible sans jamais etre etiree :
   c'est la hauteur restante qui commande, la largeur suit. */
.gal-vue img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 10px;
    background: rgba(244, 239, 231, .06);
}

.gal-vue figcaption {
    flex: none;
    max-width: 62ch;
    text-align: center;
    font-size: .92rem;
    line-height: 1.5;
    color: rgba(244, 239, 231, .74);
}

.gal-prec, .gal-suiv {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
.gal-prec { left: calc(12px + var(--sa-left)); }
.gal-suiv { right: calc(12px + var(--sa-right)); }

@media (max-width: 700px) {
    .gal-vue figcaption { font-size: .86rem; }
    /* sur telephone les fleches passent en bas, hors du trajet du pouce
       qui fait glisser la photo */
    .gal-prec, .gal-suiv {
        top: auto;
        bottom: calc(4px + var(--sa-bottom));
        transform: none;
    }
    .gal-prec { left: calc(14px + var(--sa-left)); }
    .gal-suiv { right: calc(14px + var(--sa-right)); }
    .gal-vue { padding-bottom: 56px; }
}

/* Telephone en paysage : la hauteur est la ressource rare. On rend a la
   photo la place prise par la legende et les marges. Le texte reste
   disponible pour les lecteurs d’ecran via l’attribut alt. */
@media (orientation: landscape) and (max-height: 450px) {
    .gal { padding-top: calc(6px + var(--sa-top)); padding-bottom: calc(6px + var(--sa-bottom)); }
    .gal-tete { padding-bottom: 4px; }
    .gal-btn { width: 44px; height: 44px; }
    .gal-vue figcaption { display: none; }
    .gal-vue { padding-bottom: 0; gap: 0; }
    .gal-prec, .gal-suiv { top: 50%; bottom: auto; transform: translateY(-50%); }
}

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

/* ------------------------------------ savoir-faire, écologie, services --- */

.sec-savoir {
    background: var(--paper-2);
    border-top: 3px solid var(--water);
}

/* Trois volets en pleine largeur plutôt que trois colonnes de puces.
   Même langage que la liste des lagons : numéro, grand titre, et le détail
   posé en face plutôt qu'empilé dessous. */
.volets {
    margin-top: clamp(48px, 6vw, 80px);
    border-top: 1px solid var(--line);
}

.volet {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(30px, 5vw, 90px);
    padding: clamp(36px, 4.5vw, 62px) 0;
    border-bottom: 1px solid var(--line);
    scroll-margin-top: 108px;
}

.volet-num {
    display: block;
    margin-bottom: 14px;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--water-ink);
}
.volet-titre {
    font-size: clamp(1.9rem, 3.4vw, 2.9rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.02em;
    margin-bottom: 18px;
    color: var(--ink);
}
.volet-lead {
    max-width: 38ch;
    font-size: 1.08rem;
    line-height: 1.65;
    color: var(--ink-60);
}

/* les points sont séparés par des filets : ça se lit ligne à ligne
   au lieu de former un pavé de puces */
.volet-list {
    list-style: none;
    margin: 0;
    padding: 0;
    align-self: center;
}
.volet-list li {
    padding: 13px 0;
    font-size: 1.04rem;
    line-height: 1.5;
    color: var(--ink);
    border-top: 1px solid var(--line);
}
.volet-list li:first-child { border-top: 0; padding-top: 0; }
.volet-list li:last-child { padding-bottom: 0; }

/* -------------------------------------------------------- notre histoire --- */

/* Mise en page éditoriale : une accroche large, puis le corps en deux
   colonnes de journal. Aucune autre section du site n'est composée ainsi,
   ce qui la distingue au scroll. */


.histoire-corps p {
    font-size: 1.04rem;
    line-height: 1.72;
    color: var(--ink-60);
    break-inside: avoid;
}
.histoire-corps p:last-child {
    color: var(--ink);
    font-weight: 600;
}

/* ----------------------------------------------------------- témoignages --- */
/* La section est mise en commentaire dans index.html en attendant de vrais
   avis clients. Ces règles sont conservées volontairement : elles servent le
   jour où le bloc est réactivé. Ne pas les supprimer comme du code mort. */

.avis {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, .95fr);
    gap: clamp(26px, 3vw, 46px);
    margin-top: clamp(30px, 3.5vw, 46px);
}
.avis-card:nth-child(2) { margin-top: 28px; }

.avis-card {
    display: flex;
    flex-direction: column;
    gap: 22px;
    margin: 0;
    padding: 4px 0 4px clamp(20px, 2vw, 30px);
    border-left: 2px solid var(--clay);
}
.avis-card blockquote { margin: 0; }
.avis-card blockquote p {
    font-size: 1.08rem;
    line-height: 1.65;
    color: var(--ink);
}
.avis-card figcaption {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-top: auto;
    padding-top: 18px;
    border-top: 1px solid var(--line);
}
.avis-nom {
    font-size: .95rem;
    font-weight: 700;
    color: var(--ink);
}
.avis-lieu {
    font-size: .84rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--water-ink);
}

/* ---------------------------------------------------------------- devis --- */

.sec-devis {
    margin-inline: clamp(8px, 1.6vw, 26px);
    background: var(--ink-deep);
    color: var(--paper);
    border-radius: 26px;
}

.devis-grid {
    display: grid;
    grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
    gap: clamp(48px, 7vw, 110px);
    align-items: start;
}

.devis-lead {
    max-width: 50ch;
    color: rgba(244, 239, 231, .78);
    margin-top: clamp(24px, 3vw, 36px);
}
.devis-lead strong { color: var(--water-light); font-weight: 700; }

.quote-form {
    background: var(--paper);
    color: var(--ink);
    border-radius: 18px;
    padding: clamp(30px, 4vw, 54px);
    box-shadow: 0 34px 80px rgba(0, 0, 0, .35);
    display: flex;
    flex-direction: column;
    gap: 30px;
    position: relative;
}
/* repère terracotta cousu en haut du formulaire */
.quote-form::before {
    content: "";
    position: absolute;
    top: 0; left: clamp(30px, 4vw, 54px);
    width: 62px; height: 4px;
    border-radius: 0 0 4px 4px;
    background: var(--clay);
}

.qf-field { display: flex; flex-direction: column; gap: 7px; }

.qf-field label {
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ink-60);
}

.qf-field input,
.qf-field textarea {
    width: 100%;
    border: 0;
    border-bottom: 1.5px solid var(--line);
    background: transparent;
    padding: 11px 2px 13px;
    min-height: 44px;
    font-family: var(--sans);
    font-size: 1.02rem;
    color: var(--ink);
    border-radius: 0;
    transition: border-color .35s, box-shadow .35s;
}
.qf-field textarea { resize: vertical; min-height: 110px; }

/* .38 ne donnait que 2,1:1 : illisible pour beaucoup de gens */
.qf-field input::placeholder,
.qf-field textarea::placeholder { color: rgba(22, 50, 60, .70); }

.qf-field input:focus,
.qf-field textarea:focus {
    outline: none;
    border-color: var(--water);
    box-shadow: 0 1.5px 0 var(--water);
}
/* le outline: none ci-dessus effaçait aussi le focus clavier */
.qf-field input:focus-visible,
.qf-field textarea:focus-visible {
    outline: 2px solid var(--clay-ink);
    outline-offset: 3px;
}

.qf-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(16px, 2vw, 24px);
}

/* Marque « facultatif » dans le libellé. Sans elle, un champ non requis se
   comporte comme un champ requis dans la tête du visiteur : il le remplit
   ou il abandonne. */
.qf-opt {
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: none;
    opacity: .8;
}

.qf-aide {
    font-size: .78rem;
    line-height: 1.45;
    color: var(--ink-60);
    margin-top: -2px;
}

.qf-note {
    font-size: .82rem;
    line-height: 1.5;
    color: var(--ink-60);
}

.qf-status:empty { padding: 0; border: 0; }
.qf-status {
    padding: 14px 16px;
    border-radius: 10px;
    font-size: .92rem;
    line-height: 1.55;
}
.qf-status.is-ok {
    background: rgba(16, 102, 118, .12);
    border-left: 3px solid var(--water-ink);
    color: var(--ink);
}
.qf-status.is-error {
    background: rgba(168, 81, 45, .12);
    border-left: 3px solid var(--clay-ink);
    color: var(--ink);
}

.quote-form .btn-solid {
    align-self: flex-start;
    margin-top: 4px;
}

/* -------------------------------------------------------------- contact --- */

/* décalé du 50/50 de la section devis, qui la précède immédiatement */
.contact-grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(40px, 5vw, 78px);
    align-items: start;
}

.contact-lead {
    max-width: 50ch;
    color: var(--ink-60);
    margin-top: clamp(24px, 3vw, 36px);
}
.contact-lead strong { color: var(--ink); font-weight: 700; }

.contact-list {
    list-style: none;
    margin: clamp(20px, 6vw, 64px) 0 0;
    padding: 0;
    border-top: 1px solid var(--line);
}
.contact-list li { border-bottom: 1px solid var(--line); }

.contact-list a,
.cl-static {
    position: relative;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 25px 8px;
    font-weight: 600;
    font-size: 1.04rem;
    color: var(--ink);
    text-decoration: none;
    overflow-wrap: anywhere;
}
.contact-list a:hover,
.contact-list a:focus-visible { color: var(--clay-ink); }

.cl-ic { width: 22px; height: 22px; flex: none; color: var(--water); }

.cl-arrow {
    width: 19px; height: 19px;
    margin-left: auto;
    flex: none;
    color: var(--clay);
    opacity: .5;
}
.contact-list a:hover .cl-arrow,
.contact-list a:focus-visible .cl-arrow { opacity: 1; }

/* Sans souris, :hover ne se declenche jamais : ces fleches resteraient a
   demi transparentes en permanence. */
@media (hover: none) {
    .type-arrow, .cl-arrow { opacity: 1; }
}

/* --------------------------------------------------------------- footer --- */

.site-foot {
    padding-bottom: calc(clamp(28px, 4vw, 44px) + var(--sa-bottom));
    margin-top: clamp(20px, 4vw, 50px);
    background: var(--ink-deep);
    color: var(--paper);
    padding: clamp(44px, 6vw, 80px) var(--pad-x) 34px;
    overflow: hidden;
}

.foot-watermark {
    font-family: var(--sans);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -.02em;
    font-size: clamp(1.6rem, 7.4vw, 6rem);
    line-height: 1.1;
    white-space: nowrap;
    text-align: center;
    color: rgba(244, 239, 231, .26);   /* filigrane, pas titre */
    user-select: none;
}

.foot-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    max-width: 1340px;
    margin: clamp(26px, 4vw, 46px) auto 0;
    padding-top: 24px;
    border-top: 1px solid var(--line-light);
}
.foot-row p {
    font-size: .9rem;
    color: rgba(244, 239, 231, .68);
}
.foot-wave {
    width: 46px;
    flex: none;
    color: var(--water-light);
}

/* ------------------------------------------------------------- whatsapp --- */

.whatsapp {
    position: fixed;
    right: calc(22px + var(--sa-right));
    bottom: calc(22px + var(--sa-bottom));
    z-index: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px; height: 56px;
    background: #1da851;
    color: #fff;
    border-radius: 18px;
    box-shadow: 0 12px 28px rgba(13, 36, 46, .28);
}
.whatsapp svg { width: 27px; height: 27px; }
.whatsapp:hover { background: #179544; }

/* ----------------------------------------------------------- responsive --- */

@media (max-width: 1080px) {
    /* 7 entrées de menu : en dessous de ~1000px le header n'a plus de marge,
       on bascule sur le burger avant que ça ne se chevauche */
    .head-nav { display: none; }
    .burger { display: flex; }

    /* la carte se resserre : vignette plus petite, gouttières réduites */
    .type-row { grid-template-columns: auto 148px minmax(0, 1fr) auto; gap: 18px; }
    .type-chip { width: 148px; height: 111px; }

    .reasons { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto auto auto; }
    .volet, .avis { grid-template-columns: 1fr; }
    .volet { gap: 26px; }
    .volet-lead { max-width: 52ch; }

    .histoire-corps p { max-width: 62ch; }
    .avis-card:nth-child(2) { margin-top: 0; }
}

@media (max-width: 920px) {
    html { scroll-padding-top: 80px; }

    .wordmark img { height: 42px; }
    .site-head.scrolled .wordmark img { height: 36px; }


    .devis-grid, .contact-grid { grid-template-columns: 1fr; gap: 56px; }

}

@media (max-width: 600px) {
    body { font-size: 1rem; }

    .type-row { grid-template-columns: auto 124px minmax(0, 1fr) auto; gap: 16px; }
    .type-chip { width: 124px; height: 93px; }
    .type-arrow { width: 36px; height: 36px; }

    .reasons { grid-template-columns: 1fr; grid-template-rows: none; }
    .reason { grid-row: auto; grid-template-rows: none; }
    .qf-row { grid-template-columns: 1fr; }
    .types-kicker { margin-top: clamp(48px, 9vw, 64px); }

    .quote-form .btn-solid { align-self: stretch; justify-content: space-between; }

    .foot-row { flex-direction: column-reverse; align-items: flex-start; gap: 14px; }

    .contact-list a, .cl-static { font-size: .92rem; gap: 14px; }

    .whatsapp { right: 16px; bottom: 16px; }
}

/* --------------------------------------------------- mouvement réduit --- */

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

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

    .hero-copy > *, [data-reveal] { opacity: 1; transform: none; clip-path: none; }
}

/* --------------------------------------------------- pages intérieures --- */

/* Sur l'accueil le hero dégage lui-même le header fixe. Les autres pages
   commencent directement par une section : il faut le compenser ici. */
.page-tete { padding-top: clamp(130px, 15vh, 190px); }
.page-tete .sec-title { max-width: 18ch; }

/* rappel vers le devis en bas des pages intérieures */
.sec-rappel { padding-block: clamp(70px, 9vw, 110px); }
.rappel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: clamp(24px, 3vw, 48px);
    padding-top: clamp(34px, 4vw, 52px);
    border-top: 1px solid var(--line);
}
/* Depuis une page profonde, « Demander un devis » impose un rechargement de
   l'accueil puis un scroll. On garde ce bouton comme action principale, mais
   on offre les deux gestes qui convertissent sur place : appeler, écrire. */
.rappel-actions { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }

.rappel-direct {
    font-size: .88rem;
    color: var(--ink-60);
    /* en ligne, les deux liens ne faisaient que 36 px de haut : sous le seuil
       tactile confortable. La rangee souple les porte a 44 px sans casser la
       phrase qui les introduit. */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 4px;
}

.rappel-direct a {
    color: var(--water-ink);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 6px;
}

.rappel-direct a:hover, .rappel-direct a:focus-visible { color: var(--clay-ink); }

.rappel-direct span { margin: 0 6px; opacity: .5; }

.rappel-titre {
    font-size: clamp(1.5rem, 3vw, 2.3rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.02em;
    color: var(--ink);
    text-wrap: balance;
}

/* ------------------------------------------------------------------ blog --- */

.posts {
    margin-top: clamp(40px, 5vw, 64px);
    border-top: 1px solid var(--line);
}


/* mise en forme prête pour les futurs articles */
.post {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
    gap: clamp(20px, 4vw, 60px);
    padding: clamp(28px, 3.4vw, 44px) 0;
    border-bottom: 1px solid var(--line);
}
.post-date {
    font-size: .84rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--water-ink);
}
.post-titre {
    font-size: clamp(1.5rem, 2.6vw, 2.1rem);
    font-weight: 700;
    line-height: 1.18;
    letter-spacing: -.02em;
    margin-bottom: 12px;
}
/* le lien couvre toute la carte : cible large, et on ne clique plus à côté */
.post-titre a {
    text-decoration: none;
    display: block;
    min-height: 44px;
}
.post-titre a:hover { color: var(--clay-ink); }
.post-chapo {
    max-width: 60ch;
    font-size: 1.04rem;
    line-height: 1.65;
    color: var(--ink-60);
    margin-bottom: 14px;
}
.post-lire {
    font-size: .95rem;
    font-weight: 700;
    color: var(--clay-ink);
}

@media (max-width: 720px) {
    .post { grid-template-columns: 1fr; gap: 12px; }
    .rappel { flex-direction: column; align-items: flex-start; }
}

/* Blocage du défilement pendant que le menu mobile est ouvert.
   En classe plutôt qu'en style inline : la Content Security Policy interdit
   désormais 'unsafe-inline' sur style-src. */
html.menu-ouvert,
html.menu-ouvert body { overflow: hidden; }

/* ------------------------------------------------- page savoir-faire --- */

.sf-intro {
    max-width: 62ch;
    margin-top: clamp(30px, 4vw, 46px);
    font-size: clamp(1.14rem, 1.7vw, 1.34rem);
    line-height: 1.6;
    color: var(--ink-60);
}
.sf-intro strong { color: var(--ink); font-weight: 600; }

/* les six étapes du chantier */
.sec-etapes { background: var(--paper-2); }

.etapes {
    margin-top: clamp(46px, 6vw, 76px);
    border-top: 1px solid var(--line);
}
.etape {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 10fr);
    gap: clamp(24px, 4vw, 70px);
    padding: clamp(32px, 4vw, 54px) 0;
    border-bottom: 1px solid var(--line);
}
.etape-num {
    font-size: clamp(2.4rem, 4.6vw, 3.6rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.04em;
    color: var(--water-ink);
}
.etape-corps h3 {
    font-size: clamp(1.4rem, 2.4vw, 1.95rem);
    font-weight: 700;
    line-height: 1.18;
    letter-spacing: -.02em;
    margin-bottom: 16px;
    color: var(--ink);
}
.etape-corps p {
    max-width: 68ch;
    font-size: 1.04rem;
    line-height: 1.7;
    color: var(--ink-60);
}
.etape-corps p + p { margin-top: .9em; }
.etape-corps strong { color: var(--ink); font-weight: 600; }

/* remarque détachée : ce que le client retient en diagonale */
.etape-note {
    margin-top: 1.1em !important;
    padding-left: 16px;
    border-left: 2px solid var(--clay);
    color: var(--ink) !important;
    font-weight: 500;
}

/* repères chiffrés */
.reperes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(22px, 2.6vw, 40px);
    margin: clamp(44px, 5.5vw, 70px) 0 0;
}
.repere {
    padding-top: 20px;
    border-top: 2px solid var(--ink);
}
.repere dt {
    font-size: clamp(1.5rem, 2.6vw, 2.1rem);
    font-weight: 700;
    letter-spacing: -.03em;
    line-height: 1.1;
    color: var(--ink);
    margin-bottom: 10px;
}
.repere dd {
    margin: 0;
    font-size: .98rem;
    line-height: 1.6;
    color: var(--ink-60);
}

/* questions fréquentes */
.faq {
    margin-top: clamp(40px, 5vw, 64px);
    border-top: 1px solid var(--line);
}
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
    display: flex;
    align-items: baseline;
    gap: 20px;
    padding: clamp(20px, 2.4vw, 28px) 0;
    font-size: clamp(1.08rem, 1.7vw, 1.3rem);
    font-weight: 700;
    letter-spacing: -.015em;
    color: var(--ink);
    cursor: pointer;
    list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
/* le signe indique l'état : + fermé, − ouvert */
.faq-item summary::after {
    /* texte de remplacement vide : l'état ouvert/fermé est déjà annoncé par <details> */
    content: "+" / "";
    margin-left: auto;
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1;
    color: var(--water-ink);
}
.faq-item[open] summary::after { content: "\2212"; }
.faq-item summary:hover { color: var(--clay-ink); }

.faq-rep {
    padding-bottom: clamp(22px, 2.6vw, 30px);
    max-width: 72ch;
}
.faq-rep p {
    font-size: 1.04rem;
    line-height: 1.7;
    color: var(--ink-60);
}

@media (max-width: 900px) {
    .etape { grid-template-columns: 1fr; gap: 10px; }
    .etape-num { font-size: 2rem; }
    .reperes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
    .reperes { grid-template-columns: 1fr; }
}

/* --------------------------------------------------- page notre histoire --- */


/* les quatre règles */
.principes {
    margin-top: clamp(44px, 5.5vw, 72px);
    border-top: 1px solid var(--line);
}
.principe {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 10fr);
    gap: clamp(22px, 4vw, 64px);
    padding: clamp(28px, 3.4vw, 44px) 0;
    border-bottom: 1px solid var(--line);
}
.principe-num {
    font-size: clamp(1.9rem, 3.4vw, 2.8rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.04em;
    color: var(--water-ink);
}
.principe h3 {
    font-size: clamp(1.24rem, 2vw, 1.6rem);
    font-weight: 700;
    line-height: 1.22;
    letter-spacing: -.02em;
    margin-bottom: 12px;
    color: var(--ink);
}
.principe p {
    max-width: 66ch;
    font-size: 1.04rem;
    line-height: 1.7;
    color: var(--ink-60);
}

/* ce qu'on ne fait pas : bloc sombre, la franchise se voit */
.sec-refus { padding-block: clamp(70px, 9vw, 110px); }
.refus {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(34px, 5vw, 80px);
    padding: clamp(40px, 5vw, 72px) clamp(28px, 4vw, 64px);
    background: var(--ink-deep);
    color: var(--paper);
    border-radius: 26px;
}
.refus-lead {
    margin-top: 20px;
    font-size: 1.06rem;
    line-height: 1.6;
    color: rgba(244, 239, 231, .78);
}
.refus-list {
    list-style: none;
    margin: 0;
    padding: 0;
    align-self: center;
}
.refus-list li {
    padding: 15px 0 15px 34px;
    position: relative;
    font-size: 1.06rem;
    line-height: 1.55;
    border-top: 1px solid var(--line-light);
}
.refus-list li:first-child { border-top: 0; padding-top: 0; }
.refus-list li:last-child { padding-bottom: 0; }
/* croix plutôt qu'une puce : c'est une liste de refus */
.refus-list li::before {
    content: "";
    position: absolute;
    left: 0; top: 1.5em;
    width: 15px; height: 2px;
    background: var(--water-light);
    transform: rotate(45deg);
}
.refus-list li::after {
    content: "";
    position: absolute;
    left: 0; top: 1.5em;
    width: 15px; height: 2px;
    background: var(--water-light);
    transform: rotate(-45deg);
}
.refus-list li:first-child::before,
.refus-list li:first-child::after { top: .65em; }

@media (max-width: 900px) {
    .refus { grid-template-columns: 1fr; }
    .principe { grid-template-columns: 1fr; gap: 10px; }
    .refus-list li:first-child::before,
    .refus-list li:first-child::after { top: .65em; }
}

/* ----------------------------------------------------------- article --- */

.blog-intro {
    max-width: 56ch;
    margin-top: clamp(22px, 3vw, 32px);
    font-size: clamp(1.08rem, 1.6vw, 1.24rem);
    line-height: 1.6;
    color: var(--ink-60);
}

/* liste du blog : date à gauche, article à droite */
.post {
    grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
}
.post-corps { min-width: 0; }

/* page d'article : colonne de lecture étroite, c'est ce qui rend lisible */
.art { max-width: 780px; margin-inline: auto; }

.art-tete { margin-bottom: clamp(34px, 4vw, 50px); }
.art-retour {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin-bottom: 18px;
    font-size: .9rem;
    font-weight: 700;
    color: var(--water-ink);
    text-decoration: none;
}
.art-retour:hover { color: var(--clay-ink); }

.art-date {
    display: block;
    margin-bottom: 14px;
    font-size: .84rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-60);
}
.art-titre {
    font-size: clamp(2rem, 4.4vw, 3.1rem);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -.025em;
    color: var(--ink);
    text-wrap: balance;
}

.art-corps { font-size: 1.08rem; line-height: 1.78; color: var(--ink-60); }
.art-corps p + p { margin-top: 1.15em; }
.art-corps strong { color: var(--ink); font-weight: 600; }
.art-corps em { font-style: italic; }

/* le chapô ouvre l'article : plus gros, en encre pleine */
.art-chapo {
    font-size: clamp(1.16rem, 1.9vw, 1.36rem);
    line-height: 1.55;
    color: var(--ink);
    font-weight: 500;
    padding-bottom: clamp(24px, 3vw, 34px);
    margin-bottom: clamp(24px, 3vw, 34px);
    border-bottom: 1px solid var(--line);
}

.art-corps h2 {
    font-size: clamp(1.4rem, 2.4vw, 1.85rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.02em;
    color: var(--ink);
    margin-top: 2em;
    margin-bottom: .6em;
}
.art-corps h3 {
    font-size: clamp(1.1rem, 1.7vw, 1.28rem);
    font-weight: 700;
    line-height: 1.3;
    color: var(--ink);
    margin-top: 1.7em;
    margin-bottom: .45em;
}

.art-liste {
    list-style: none;
    margin: 1.2em 0 0;
    padding: 0;
}
.art-liste li {
    position: relative;
    padding: 11px 0 11px 24px;
    border-top: 1px solid var(--line);
}
.art-liste li:first-child { border-top: 0; }
.art-liste li::before {
    content: "";
    position: absolute;
    left: 0; top: 1.55em;
    width: 11px; height: 2px;
    background: var(--water);
}

/* formule mise en évidence */
.art-formule {
    margin-top: 1.2em !important;
    padding: 18px 22px;
    background: var(--paper-2);
    border-left: 3px solid var(--water-ink);
    border-radius: 0 10px 10px 0;
    font-weight: 600;
    color: var(--ink);
}

/* navigation entre articles */
.art-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(16px, 2vw, 26px);
    margin-top: clamp(50px, 6vw, 76px);
    padding-top: clamp(28px, 3.4vw, 40px);
    border-top: 1px solid var(--line);
}
.art-nav-lien {
    display: block;
    padding: 20px 22px;
    background: var(--paper-2);
    border-radius: 14px;
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--ink);
    text-decoration: none;
}
.art-nav-lien span {
    display: block;
    margin-bottom: 7px;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--water-ink);
}
.art-nav-lien:hover { background: #e0d6c1; }
.art-nav-suiv { text-align: right; grid-column: 2; }

@media (max-width: 620px) {
    .art-nav { grid-template-columns: 1fr; }
    .art-nav-suiv { text-align: left; grid-column: 1; }
}

/* ------------------------------------------------ récit notre histoire --- */

.hist-chapo {
    max-width: 60ch;
    margin-top: clamp(30px, 4vw, 46px);
    font-size: clamp(1.2rem, 2.1vw, 1.55rem);
    line-height: 1.5;
    font-weight: 500;
    color: var(--ink);
    text-wrap: pretty;
}

/* trois chiffres clés sous le chapô */
.hist-clefs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(20px, 3vw, 48px);
    margin-top: clamp(40px, 5vw, 64px);
    padding-top: clamp(28px, 3.4vw, 40px);
    border-top: 1px solid var(--line);
}
.hist-clef { display: grid; gap: 8px; }
.hist-clef-num {
    font-size: clamp(1.9rem, 3.4vw, 2.7rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.035em;
    color: var(--water-ink);
}
.hist-clef-lib {
    font-size: .98rem;
    line-height: 1.5;
    color: var(--ink-60);
}

/* la frise : année à gauche, filet vertical, récit à droite */
.sec-frise { background: var(--paper-2); }

.frise {
    list-style: none;
    margin: clamp(46px, 6vw, 76px) 0 0;
    padding: 0;
}
.frise-etape {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
    gap: clamp(24px, 4vw, 64px);
    padding-bottom: clamp(38px, 4.6vw, 62px);
}
.frise-etape:last-child { padding-bottom: 0; }

/* le filet relie les étapes entre elles */
.frise-date {
    position: relative;
    padding-left: 30px;
}
.frise-date::before {
    content: "";
    position: absolute;
    left: 5px; top: 14px; bottom: -100%;
    width: 2px;
    background: var(--line);
}
.frise-etape:last-child .frise-date::before { display: none; }
.frise-date::after {
    content: "";
    position: absolute;
    left: 0; top: 8px;
    width: 12px; height: 12px;
    border-radius: 50%;
    background: var(--water-ink);
}
.frise-etape-suite .frise-date::after {
    background: var(--paper-2);
    border: 2px solid var(--water-ink);
}
.frise-date span {
    display: block;
    font-size: clamp(1.5rem, 2.6vw, 2.1rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -.035em;
    color: var(--ink);
}

.frise-corps h3 {
    font-size: clamp(1.3rem, 2.2vw, 1.75rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.02em;
    margin-bottom: 14px;
    color: var(--ink);
}
.frise-corps p {
    max-width: 66ch;
    font-size: 1.04rem;
    line-height: 1.72;
    color: var(--ink-60);
}
.frise-corps p + p { margin-top: .9em; }

/* ce que vingt ans changent */
.apports {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto auto;
    gap: clamp(26px, 3.4vw, 52px);
    margin-top: clamp(44px, 5.5vw, 70px);
}
.apport {
    display: grid;
    grid-row: span 2;
    grid-template-rows: subgrid;
    row-gap: 12px;
    padding-top: 22px;
    border-top: 2px solid var(--water);
}
.apport h3 {
    font-size: clamp(1.16rem, 1.8vw, 1.4rem);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -.02em;
    color: var(--ink);
    text-wrap: balance;
}
.apport p {
    font-size: 1.02rem;
    line-height: 1.66;
    color: var(--ink-60);
}

@media (max-width: 900px) {
    .hist-clefs { grid-template-columns: 1fr; gap: 22px; }
    .frise-etape { grid-template-columns: 1fr; gap: 14px; }
    .frise-date::before { display: none; }
    .frise-date { padding-left: 26px; }
    .apports { grid-template-columns: 1fr; grid-template-rows: none; }
    .apport { grid-row: auto; grid-template-rows: none; }
}

/* ------------------------------------------------- hero avec photo --- */

.hero {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    /* la photo occupe toute la hauteur de l'écran : plus de bande claire
       visible en bas au chargement */
    /* Repli pour les navigateurs sans svh. Sur mobile, 100vh correspond au
       viewport SANS les barres du navigateur : le hero depasse alors l'ecran
       et les boutons tombent sous la ligne de flottaison. */
    min-height: 100vh;
    /* pas de overflow: hidden — la photo doit pouvoir déborder d'un pixel en bas
       pour couvrir la couture (voir .hero-fond) */
    padding-block: clamp(120px, 15vh, 180px) clamp(70px, 9vh, 120px);
}

/* svh = plus petite hauteur de viewport, barres du navigateur affichees.
   Le hero tient alors dans la zone reellement visible, y compris sur iOS
   Safari ou la barre d'adresse se retracte au defilement. */
@supports (height: 100svh) {
    .hero { min-height: 100svh; }
}
/* Le hero a une hauteur fractionnaire (535,47 px par exemple). La dernière
   rangée de pixels n'est alors couverte qu'en partie et le fond de page,
   très clair, transparaît en un fin liseré. On fait déborder la photo et le
   voile d'un pixel vers le bas pour supprimer cette couture. */
.hero-fond {
    position: absolute;
    inset: 0 0 -1px 0;
    width: 100%;
    height: calc(100% + 1px);
    object-fit: cover;
    /* le sujet est au centre-bas : on cadre dessus quand la fenêtre est haute */
    object-position: 50% 62%;
    z-index: -2;
}

/* Voile en deux couches. Une base uniforme pour garantir le contraste du
   texte, un dégradé par-dessus pour garder de la profondeur en haut et en bas
   plutôt qu'un aplat gris. */
.hero-voile {
    position: absolute;
    inset: 0 0 -1px 0;
    z-index: -1;
    background:
        linear-gradient(to bottom,
            rgba(13, 36, 46, .58) 0%,
            rgba(13, 36, 46, .30) 32%,
            rgba(13, 36, 46, .44) 62%,
            rgba(13, 36, 46, .72) 100%),
        rgba(13, 36, 46, .52);
}

/* le texte du hero passe en clair */
.hero .overline { color: var(--paper); }
.hero-h1 { color: var(--paper); }
/* turquoise éclairci : --water-light tombait à 3,01 sur la photo, sans marge */
.hero .oasis { color: #a8e4ec; }
.hero-p { color: rgba(244, 239, 231, .92); }

/* les ombres portées décollent le texte de la photo sans l'assombrir */
.hero-h1, .hero-p, .hero .overline {
    text-shadow: 0 1px 24px rgba(13, 36, 46, .55);
}

.hero .link-under { color: var(--paper); }
.hero .link-under::after { background: var(--water-light); }
.hero .link-under:hover,
.hero .link-under:focus-visible { color: var(--water-light); }

/* le bouton reste plein, mais éclairci pour ressortir sur la photo */
.hero .btn-solid { background: var(--paper); color: var(--ink-deep); }
.hero .btn-solid:hover { background: #fff; }
.hero .btn-disc { background: var(--water-ink); color: var(--paper); }

/* --- header posé sur la photo : logo et liens en clair tant qu'on est en haut --- */
.wordmark { position: relative; }
.logo-clair {
    position: absolute;
    top: 0; left: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity .35s var(--ease);
}
.logo-couleur { transition: opacity .35s var(--ease); }

/* uniquement sur l'accueil, et uniquement avant le défilement */
body.hero-photo .site-head:not(.scrolled) .logo-clair  { opacity: 1; }
body.hero-photo .site-head:not(.scrolled) .logo-couleur { opacity: 0; }
body.hero-photo .site-head:not(.scrolled) .head-link { color: var(--paper); }
body.hero-photo .site-head:not(.scrolled) .head-link::after { background: var(--paper); }
body.hero-photo .site-head:not(.scrolled) .head-link:hover,
body.hero-photo .site-head:not(.scrolled) .head-link:focus-visible { color: var(--water-light); }
body.hero-photo .site-head:not(.scrolled) .burger { border-color: var(--paper); }
body.hero-photo .site-head:not(.scrolled) .burger span { background: var(--paper); }

/* le contenu sous le hero repart sur le papier */
body.hero-photo .sec-lagons { padding-top: clamp(70px, 9vw, 110px); }

@media (max-width: 920px) {
    .hero-fond { object-position: 50% 58%; }
}

/* --------------------------------- menu mobile sur écran court --- */
/* Place avant les paliers d'orientation : ceux-ci l'affinent ensuite. */

/* Le menu à sept entrées demande environ 750 px de haut. En dessous, il
   défile désormais — mais mieux vaut qu'il tienne : on réduit la typo. */
@media (max-height: 780px) {
    .mm-link { font-size: clamp(1.35rem, 4.4vh, 2.1rem); padding: 9px 0; }
    .mobile-menu { gap: clamp(10px, 2.4vh, 30px); padding-top: clamp(84px, 12vh, 110px); }
}

/* ------------------------------------------ téléphone en paysage --- */

/* Écran large mais très bas : le hero calé sur la hauteur d'écran devient
   deux fois plus haut que l'écran lui-même, et les boutons passent sous la
   ligne de flottaison. On resserre tout ce qui prend de la hauteur. */
@media (orientation: landscape) and (max-height: 540px) {
    .hero {
        padding-block: clamp(78px, 20vh, 96px) clamp(30px, 8vh, 44px);
    }
    .hero-h1 {
        font-size: clamp(1.7rem, 4.6vw, 2.5rem);
        margin-bottom: 14px;
    }
    .hero .overline { margin-bottom: 12px; }
    .hero-p {
        font-size: .98rem;
        line-height: 1.5;
        max-width: 62ch;
        margin-bottom: 20px;
    }
    .hero-cta { gap: 20px; }

    /* le menu plein écran doit rester parcourable quand l'écran est bas */
    .mobile-menu { gap: 3vh; overflow-y: auto; padding-block: 80px 30px; }
    .mm-link { font-size: clamp(1.3rem, 5vh, 1.9rem); padding: 8px 0; }
}

/* Paysage vraiment bas (iPhone SE et anciens Android tournes, 320 px de haut).
   Le header occupe deja 66 px : sans ce palier, le bouton d'appel a l'action
   tombait juste sous la ligne de flottaison. */
@media (orientation: landscape) and (max-height: 400px) {
    .hero { padding-block: 70px 20px; }
    .hero .overline { margin-bottom: 6px; }
    .hero-h1 {
        font-size: clamp(1.45rem, 4vw, 1.9rem);
        margin-bottom: 8px;
    }
    .hero-p {
        font-size: .9rem;
        line-height: 1.45;
        max-width: 58ch;
        margin-bottom: 14px;
    }
    .hero-cta { gap: 12px; }

    /* Le menu reste defilant, mais on reduit la course : 556 px de contenu
       pour 320 px d'ecran demandaient presque deux ecrans de defilement. */
    .mobile-menu { padding-block: calc(64px + var(--sa-top)) calc(20px + var(--sa-bottom)); gap: 2vh; }
    .mm-link { font-size: clamp(1.15rem, 4.4vh, 1.55rem); padding: 5px 0; }
    .mm-foot { gap: 6px; }
}

/* le logo est une cible tactile : il ramène à l'accueil */
.wordmark { min-height: 44px; }

/* --------------------------------------- petits écrans en portrait --- */

/* Sur un 320×640, les boutons du hero tombaient sous la ligne de flottaison.
   On resserre pour que l'appel à l'action reste visible sans défiler. */
@media (orientation: portrait) and (max-height: 700px) {
    .hero { padding-block: clamp(100px, 17vh, 130px) clamp(40px, 7vh, 60px); }
    .hero-h1 { font-size: clamp(2rem, 8.5vw, 2.6rem); margin-bottom: 18px; }
    .hero-p { font-size: 1rem; line-height: 1.55; margin-bottom: 26px; }
    .hero .overline { margin-bottom: 14px; }
}

/* Sous 600 px de haut (iPhone SE, petits Android), le hero mesurait encore
   645 px : le bouton passait 37 px sous la ligne de flottaison. On resserre
   les espacements, sans toucher aux corps de texte. */
@media (orientation: portrait) and (max-height: 600px) {
    .hero { padding-block: clamp(88px, 15vh, 104px) clamp(24px, 5vh, 36px); }
    .hero-h1 { margin-bottom: 12px; }
    .hero-p { margin-bottom: 18px; }
    .hero .overline { margin-bottom: 10px; }
    .hero-cta { gap: 14px; }
}

/* ------------------------------------------ très petits écrans --- */

@media (max-width: 420px) {
    /* rien de spécifique : le palier téléphone (520 px) tient déjà à 320 px */
    .type-row { padding: 14px 16px; }

    /* le filigrane du pied de page était rogné par overflow: hidden */
    .foot-watermark { font-size: 1.3rem; }

    /* le bouton dépassait la largeur utile du formulaire */
    .btn-solid { padding-left: 18px; gap: 10px; }
    .btn-disc { width: 34px; height: 34px; }
}

/* le bouton WhatsApp flottant peut recouvrir le focus du bouton d'envoi */
@media (max-width: 600px) {
    .quote-form { scroll-margin-bottom: 88px; }
    .site-foot { padding-bottom: 96px; }

    .whatsapp {
        right: calc(8px + var(--sa-right));
        bottom: calc(8px + var(--sa-bottom));
        width: 44px;
        height: 44px;
        border-radius: 14px;
        box-shadow: 0 8px 20px rgba(13, 36, 46, .22);
    }

    .whatsapp svg { width: 22px; height: 22px; }
}

/* --------------------------------------------------- liens legaux du pied --- */

.foot-liens {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 22px;
}
.foot-liens a {
    font-size: .9rem;
    color: rgba(244, 239, 231, .72);
    text-decoration: underline;
    text-decoration-color: rgba(244, 239, 231, .34);
    text-underline-offset: 3px;
    padding-block: 10px;      /* cible tactile confortable sans casser la ligne */
    transition: color .2s var(--ease), text-decoration-color .2s var(--ease);
}
.foot-liens a:hover,
.foot-liens a:focus-visible {
    color: var(--paper);
    text-decoration-color: var(--paper);
}

/* ------------------------------------------------------- pages juridiques --- */

.legal-maj {
    font-size: .88rem;
    color: var(--ink-60);
}

/* encadre de rappel : disparaitra une fois les champs completes */
.legal-avis {
    margin: 26px 0 34px;
    padding: 18px 22px;
    background: var(--paper-2);
    border-left: 3px solid var(--clay-ink);
    border-radius: 0 4px 4px 0;
}
.legal-avis p { font-size: .95rem; margin: 0; }

/* champs que seul le client peut renseigner */
.a-completer {
    background: #ffe9a8;
    color: var(--ink);
    padding: 1px 6px;
    border-radius: 3px;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    font-style: italic;
}

.legal-liste {
    margin: 1.15em 0 0;
    padding-left: 1.35em;
    list-style: none;
}
.legal-liste li {
    position: relative;
    margin-top: .6em;
}
.legal-liste li::before {
    content: "";
    position: absolute;
    left: -1.35em;
    top: .72em;
    width: 6px;
    height: 1px;
    background: var(--water-ink);
}

/* ------------------------------------------------------------ anti-robot --- */

/* Champ piege : hors ecran plutot que display:none, car beaucoup de robots
   ignorent volontairement les champs masques de cette facon. aria-hidden et
   tabindex="-1" le retirent des lecteurs d'ecran et du parcours clavier. */
.qf-piege {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Champ signale en erreur par le script : un message global ne suffit pas,
   il faut voir OU corriger. */
.quote-form [aria-invalid="true"] {
    border-color: var(--clay-ink);
    box-shadow: 0 0 0 2px rgba(168, 81, 45, .18);
}

/* ------------------------------------------ Nos lagons · téléphone --- */

/* Sous 520 px, quatre colonnes ne tiennent plus : la vignette passe en haut
   (largeur bloquée à 168 px, la définition réelle des fichiers sources, donc
   toujours nette), le numéro se pose en face, et le texte récupère toute la
   largeur de la carte. Ordre de lecture : image, numéro, titre, texte, flèche. */
@media (max-width: 520px) {
    .type-row {
        /* colonne 1 = la vignette (168 px), colonne 2 = le reste : le numéro
           se pose contre l’image au lieu d’être rejeté au bord de la carte */
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-areas:
            "img   num"
            "body  body"
            "arrow arrow";
        gap: 12px 14px;
        align-items: center;
    }
    .type-chip  { grid-area: img;  width: 168px; height: 126px; justify-self: start; }
    /* posé contre la vignette, sur sa ligne de base : placé à l’extrême
       droite il flottait dans le vide */
    .type-num   { grid-area: num;  justify-self: start; align-self: end; }
    .type-body  { grid-area: body; }
    .type-arrow { grid-area: arrow; justify-self: end; width: 38px; height: 38px; }
    .type-title { font-size: 1.22rem; }
    .type-desc  { font-size: .95rem; }
}

/* ---- Nos lagons · trois colonnes à partir de 900 px --------------------

   À trois catégories, l’empilement de bandes horizontales laissait un grand
   vide à droite de chaque carte. En colonnes, la photo passe en haut, le
   texte se range dessous, et la section tient sur une seule hauteur d’écran.
   Ce bloc est placé en fin de feuille pour l’emporter sur les paliers
   max-width qui précèdent (900–1080 px notamment). */

@media (min-width: 900px) {
    .types {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: clamp(16px, 1.8vw, 22px);
        align-items: stretch;          /* les trois cartes à la même hauteur */
    }

    .type-row {
        grid-template-columns: minmax(0, 1fr) auto;
        /* la dernière rangée en 1fr pousse la flèche en bas : les flèches des
           trois cartes s’alignent, quelle que soit la longueur du texte */
        grid-template-rows: auto auto 1fr auto;
        grid-template-areas:
            "img   img"
            "num   num"
            "body  body"
            "arrow arrow";
        align-items: start;
        gap: 12px 14px;
        padding: 14px 14px 16px;
    }

    .type-chip {
        grid-area: img;
        width: 100%;
        height: auto;
        aspect-ratio: 4 / 3;
        border-radius: 12px;
    }
    .type-num   { grid-area: num; }
    .type-body  { grid-area: body; }
    .type-arrow { grid-area: arrow; justify-self: end; align-self: end; }

    .type-title { font-size: clamp(1.2rem, 1.5vw, 1.4rem); }
    .type-desc  { max-width: none; }

    /* le survol soulève la carte : sans ça l’image déborderait du coin arrondi */
    .type-row:hover .type-chip img,
    .type-row:focus-visible .type-chip img { transform: scale(1.03); }
    .type-chip img { transition: transform .5s var(--ease); }
}

/* Cadrage réglé photo par photo : les trois clichés n’ont pas le même format
   d’origine, et la troisième est une vue aérienne verticale. Sans ces valeurs,
   le recadrage automatique coupait le ponton. */
.types .type-row:nth-child(1) .type-chip img { object-position: center 55%; }
.types .type-row:nth-child(2) .type-chip img { object-position: center 45%; }
.types .type-row:nth-child(3) .type-chip img { object-position: center 70%; }

@media (prefers-reduced-motion: reduce) {
    .type-chip img { transition: none; }
    .type-row:hover .type-chip img,
    .type-row:focus-visible .type-chip img { transform: none; }
}

/* ---------------------------------------------------- sélecteur de langue --- */

/* Trois entrées : FR, EN, AR. Discret dans l’en-tête, il ne doit pas
   concurrencer la navigation ni le bouton de devis. La langue courante est
   marquée par aria-current, pas seulement par la graisse. */

.lang-switch {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-inline-end: 6px;
}
.lang-switch a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 8px;
    border-radius: 8px;
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-decoration: none;
    color: var(--ink-60);
    transition: color .25s var(--ease), background .25s var(--ease);
}
.lang-switch a:hover,
.lang-switch a:focus-visible { color: var(--ink); background: rgba(22, 50, 60, .07); }
.lang-switch a[aria-current="true"] { color: var(--ink); font-weight: 700; }

/* sur la photo du bandeau, l'en-tête est clair tant qu'on n'a pas défilé */
body.hero-photo .site-head:not(.scrolled) .lang-switch a { color: rgba(244, 239, 231, .72); }
body.hero-photo .site-head:not(.scrolled) .lang-switch a:hover,
body.hero-photo .site-head:not(.scrolled) .lang-switch a[aria-current="true"] { color: var(--paper); }

/* dans le menu mobile, le sélecteur se pose sous les liens */
.mm-lang { margin-top: 22px; }

/* -------------------------------- sélecteur de langue sur très petit écran --- */

/* À 320 px, le logo, les trois langues et le bouton de menu ne tiennent plus
   sur la largeur utile : le bouton sortait de l’écran. On resserre le
   sélecteur plutôt que de le masquer, pour qu’il reste atteignable partout. */
@media (max-width: 400px) {
    .lang-switch { gap: 0; margin-inline-end: 2px; }
    .lang-switch a {
        min-width: 26px;
        padding: 0 4px;
        font-size: .74rem;
    }
    [dir="rtl"] .lang-switch { margin-inline-end: 0; margin-inline-start: 2px; }
}