/* =====================================================================
   LA CHÂTAIGNERAIE — la feuille de style du site.

   Sortie des pages le 21/09/2026. Jusque-là, ces 22 Ko étaient recopiés
   à l'identique dans les vingt pages : le visiteur les rechargeait à
   chaque clic, et changer une couleur demandait vingt modifications —
   avec le risque qu'une page soit oubliée et devienne bigarrée.

   Ce qui reste dans une page, c'est ce qui n'appartient qu'à elle :
   l'adaptation du héros de l'accueil au téléphone, le formulaire de la
   page Contact. Rien d'autre.

   Le lien vers cette feuille est posé une seule fois, dans
   `seo_entete()` (_reglages.php) : une page nouvelle l'emporte d'office.
   ===================================================================== */

/* Maquette v2 — proposition de refonte commerciale. Mono-thème volontaire :
     c'est l'identité de l'hôtel (la même que le back office et les factures). */
:root {
    --foret:   #2F4F3E;
    --foret-p: #243D30;
    --or:      #D6A84A;
    --or-fonce:#7A5A1E;
    --or-pale: #F6ECD4;
    --creme:   #F4EFE2;
    --papier:  #FDFBF6;
    --ligne:   #E3DCCB;
    --encre:   #1A2018;
    --encre-2: #574C40;
    --encre-3: #736A5B;   /* 21/09/2026 : #99917F ne faisait que 3,0 de contraste — illisible pour beaucoup */
    --ok:      #2C6E49;
    --f-titre: 'Playfair Display', Georgia, serif;
    --f-corps: 'Lato', system-ui, sans-serif;
    --f-ui:    'Montserrat', system-ui, sans-serif;
    --ombre: 0 1px 2px rgba(26,32,24,.06), 0 14px 40px -22px rgba(26,32,24,.4);
  }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--papier); color: var(--encre); font-family: var(--f-corps); font-size: 16px; line-height: 1.6; }
img { max-width: 100%; display: block; }
a { color: var(--foret); }
:focus-visible { outline: 2px solid var(--or); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition-duration: .001ms !important; animation-duration: .001ms !important; }
  }
.demo-note {
    background: var(--foret-p); color: #EDE6D6;
    font-family: var(--f-ui); font-size: .7rem; letter-spacing: .08em;
    text-align: center; padding: .45rem 1rem;
  }
.demo-note b { color: var(--or); font-weight: 600; }
/* ── En-tête collant ── */
.haut {
    position: sticky; top: 0; z-index: 50;
    background: rgba(253,251,246,.94); backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--ligne);
  }
.haut-in {
    max-width: 1160px; margin: 0 auto; padding: .65rem 1.2rem;
    display: flex; align-items: center; gap: 1.4rem;
  }
.marque { display: flex; align-items: center; gap: .65rem; text-decoration: none; color: var(--encre); }
.marque img { width: 40px; height: 40px; object-fit: contain; }
.marque-nom { font-family: var(--f-titre); font-size: 1.18rem; line-height: 1.1; color: var(--foret); }
.marque-lieu { font-family: var(--f-ui); font-size: .58rem; letter-spacing: .28em; text-transform: uppercase; color: var(--encre-3); }
.menu { display: flex; gap: 1.4rem; margin-left: auto; }
.menu a { font-family: var(--f-ui); font-size: .78rem; font-weight: 500; letter-spacing: .04em; text-decoration: none; color: var(--encre-2); }
.menu a:hover { color: var(--foret); }
.tel { font-family: var(--f-ui); font-size: .78rem; font-weight: 600; color: var(--foret); text-decoration: none; white-space: nowrap; }
.btn {
    display: inline-block; text-decoration: none; text-align: center;
    font-family: var(--f-ui); font-size: .8rem; font-weight: 600; letter-spacing: .05em;
    border-radius: 8px; padding: .7rem 1.35rem; border: 1px solid transparent; cursor: pointer;
  }
.btn-or { background: var(--or); color: var(--foret-p); }
.btn-or:hover { background: #C89A3F; }
.btn-blanc { background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.55); backdrop-filter: blur(2px); }
.btn-blanc:hover { background: rgba(255,255,255,.24); }
.btn-vert { background: var(--foret); color: #fff; }
.btn-vert:hover { background: var(--foret-p); }
/* Le menu passe au ☰ dès 1000 px : avec « Contact », sept entrées plus le
     téléphone, FR · EN et « Réserver » ne tiennent plus en dessous. */
@media (max-width: 1060px) { .menu, .tel { display: none; } .burger { display: block; } .langs { margin-left: auto; } .haut .btn { padding: .55rem 1rem; } }
/* ── Menu mobile (hamburger) ── */
.burger {
    background: none; cursor: pointer;
    border: 1px solid var(--ligne); border-radius: 8px;
    font-size: 1.15rem; line-height: 1; padding: .45rem .65rem; color: var(--foret);
  }
.menu-mob {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 49;
    background: var(--papier); border-bottom: 1px solid var(--ligne);
    box-shadow: var(--ombre); display: grid; padding-bottom: .4rem;
  }
/* indispensable : le display:grid ci-dessus battrait l'attribut hidden */
.menu-mob[hidden] { display: none !important; }
.menu-mob a {
    padding: .9rem 1.4rem; text-decoration: none; color: var(--encre);
    font-family: var(--f-ui); font-size: .95rem; font-weight: 600;
    border-top: 1px solid var(--ligne);
  }
.menu-mob a[aria-current="page"] { color: var(--foret); background: var(--creme); }
/* Le pendant de la règle à 1000 px ci-dessus : au-dessus de cette borne, le ☰ et son
     panneau disparaissent. Les deux bornes doivent toujours se suivre — sinon il existe
     une bande de largeurs sans menu du tout, ni horizontal ni ☰. */
@media (min-width: 1061px) { .menu-mob { display: none !important; } .burger { display: none; } }
/* Téléphone (demande de JL, 15/09/2026) : plus de « Réserver » dans la barre du haut, la barre
     verte du bas le porte déjà sur toutes les pages. La place libérée va au logo et au titre. */
@media (max-width: 640px) {
    .haut-in > .btn { display: none; }
    .haut-in { gap: .5rem; }
    /* L'image du logo a des marges transparentes (dessin 128×132 dans 200×137) : recadrée sur
       le dessin, elle commence au bord de sa boîte et s'aligne sur le texte de la page */
    .marque img { width: 36px; height: 38px; object-fit: cover; }
    /* « La Châtaigneraie » sur une seule ligne ; la taille suit la largeur (16 px à 320 px, 18,9 px à 360 px, 22 px dès 384 px) */
    .marque-nom { white-space: nowrap; font-size: clamp(1rem, calc(13.25vw - 1.8rem), 1.375rem); }
  }
/* Très petits écrans (moins de 360 px) : logo et écart resserrés pour que le nom tienne sur une ligne */
@media (max-width: 359px) { .marque { gap: .5rem; } .marque img { width: 28px; height: 30px; } }
/* ── Tuiles « Explorer » (accueil) ── */
.explorer { background: var(--creme); border-bottom: 1px solid var(--ligne); }
.explorer-in { max-width: 1160px; margin: 0 auto; padding: 1.1rem 1.2rem; display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem; }
@media (max-width: 900px) { .explorer-in { grid-template-columns: 1fr 1fr; } }
.explorer a {
    font-family: var(--f-ui); font-weight: 600; font-size: .85rem;
    text-decoration: none; color: var(--foret); background: #fff;
    border: 1px solid var(--ligne); border-radius: 10px; padding: .95rem 1.05rem;
    display: flex; justify-content: space-between; gap: .6rem; align-items: center;
  }
.explorer a::after { content: '→'; color: var(--or); font-weight: 700; }
.explorer a:hover { border-color: var(--foret); }
/* ── Héros ── */
.heros { position: relative; height: clamp(500px, 86vh, 700px); overflow: hidden; }
.heros img, .heros video { width: 100%; height: 100%; object-fit: cover; }
.heros::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(26,32,24,.18) 0%, rgba(26,32,24,.12) 45%, rgba(26,32,24,.66) 100%);
  }
.heros-texte {
    position: absolute; inset: auto 0 0 0; z-index: 2;
    max-width: 1160px; margin: 0 auto; padding: 0 1.2rem 3.2rem; color: #fff;
  }
.sur-titre { font-family: var(--f-ui); font-size: .72rem; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: var(--or); margin-bottom: .8rem; }
.heros h1 {
    font-family: var(--f-titre); font-weight: 600;
    font-size: clamp(2rem, 5.4vw, 3.6rem); line-height: 1.12;
    margin: 0 0 .7rem; max-width: 17ch; text-wrap: balance;
    text-shadow: 0 2px 24px rgba(26,32,24,.45);
  }
.heros p { max-width: 52ch; margin: 0 0 1.5rem; font-size: 1.06rem; color: rgba(255,255,255,.92); }
.heros-actions { display: flex; gap: .8rem; flex-wrap: wrap; align-items: center; }
.chips { display: flex; gap: .55rem; flex-wrap: wrap; margin-top: 1.3rem; }
.chip {
    font-family: var(--f-ui); font-size: .68rem; font-weight: 600; letter-spacing: .04em;
    color: #fff; background: rgba(36,61,48,.55); border: 1px solid rgba(255,255,255,.32);
    border-radius: 999px; padding: .35rem .8rem; backdrop-filter: blur(3px);
  }
/* ── Bandeau réservation directe ── */
.direct { background: var(--foret); color: #EDE6D6; }
.direct-in { max-width: 1160px; margin: 0 auto; padding: 1.6rem 1.2rem; display: grid; grid-template-columns: auto 1fr; gap: 1rem 2.5rem; align-items: center; }
.direct h2 { font-family: var(--f-titre); font-size: 1.35rem; font-weight: 600; margin: 0; color: #fff; }
.direct h2 b { color: var(--or); font-weight: 700; }
.direct ul { list-style: none; display: flex; gap: .55rem 2rem; flex-wrap: wrap; margin: 0; padding: 0; }
.direct li { font-size: .9rem; line-height: 1.42; display: flex; gap: .5rem; align-items: baseline; }
.direct li::before { content: '✓'; color: var(--or); font-weight: 700; }
/* Sur téléphone, chaque argument se replie sur deux ou trois lignes : si
   l’espace ENTRE deux arguments vaut celui entre deux lignes du même, on ne
   sait plus où l’un finit. On écarte donc un peu plus qu’au-dessus de 860 px,
   où chaque argument tient sur une ligne (21/09/2026). */
@media (max-width: 860px) { .direct-in { grid-template-columns: 1fr; gap: .7rem; } .direct ul { gap: .8rem 1.4rem; } }
/* ── Sections ── */
.section { max-width: 1160px; margin: 0 auto; padding: 4.2rem 1.2rem 1rem; }
.sec-tete { max-width: 60ch; margin-bottom: 2.2rem; }
.sec-tete .sur-titre { color: var(--or-fonce); }
.sec-tete h1, .sec-tete h2 { font-family: var(--f-titre); font-weight: 600; font-size: clamp(1.6rem, 3.4vw, 2.3rem); line-height: 1.15; margin: 0 0 .6rem; text-wrap: balance; }
.sec-tete p { color: var(--encre-2); margin: 0; }
/* Chambres */
.cartes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
@media (max-width: 900px) { .cartes { grid-template-columns: 1fr; } }
.carte { background: #fff; border: 1px solid var(--ligne); border-radius: 14px; overflow: hidden; box-shadow: var(--ombre); display: flex; flex-direction: column; }
.carte img { height: 230px; object-fit: cover; width: 100%; }
.carte-corps { padding: 1.15rem 1.25rem 1.3rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.carte h3 { font-family: var(--f-titre); font-size: 1.22rem; font-weight: 600; margin: 0; }
.carte .desc { font-size: .9rem; color: var(--encre-2); margin: 0; }
.carte-pied { display: flex; align-items: center; gap: .8rem; margin-top: auto; padding-top: .7rem; }
.prix { font-family: var(--f-ui); }
.prix b { font-size: 1.25rem; color: var(--foret); }
.prix small { display: block; font-size: .68rem; color: var(--encre-3); letter-spacing: .04em; }
.carte-pied .btn { margin-left: auto; padding: .55rem 1rem; font-size: .72rem; }
/* Blocs éditoriaux (cibles) */
.duo { display: grid; grid-template-columns: 1.05fr 1fr; gap: 2.6rem; align-items: center; margin-bottom: 3rem; }
.duo.inv { grid-template-columns: 1fr 1.05fr; }
.duo.inv .duo-img { order: 2; }
@media (max-width: 900px) { .duo, .duo.inv { grid-template-columns: 1fr; gap: 1.4rem; } .duo.inv .duo-img { order: 0; } }
.duo-img img { border-radius: 14px; box-shadow: var(--ombre); height: clamp(260px, 38vw, 420px); width: 100%; object-fit: cover; }
.duo h3 { font-family: var(--f-titre); font-size: clamp(1.4rem, 2.6vw, 1.9rem); font-weight: 600; margin: .2rem 0 .7rem; text-wrap: balance; }
.duo p { color: var(--encre-2); margin: 0 0 1.1rem; max-width: 56ch; }
.points { list-style: none; margin: 0 0 1.2rem; padding: 0; display: grid; gap: .45rem; }
.points li { display: flex; gap: .6rem; font-size: .92rem; align-items: baseline; }
.points li::before { content: '—'; color: var(--or); font-weight: 700; }
/* Mosaïque restaurant */
.mosaique { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 2rem; }
@media (max-width: 900px) { .mosaique { grid-template-columns: 1fr 1fr; } }
.mosaique figure { margin: 0; }
.mosaique img { height: 190px; width: 100%; object-fit: cover; border-radius: 12px; box-shadow: var(--ombre); }
.mosaique figcaption { font-family: var(--f-ui); font-size: .68rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--encre-3); margin-top: .5rem; }
/* Galerie complète (restaurant, région) — toutes les photos du site */
.galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .9rem; margin-top: 1.4rem; }
.galerie figure { margin: 0; }
.galerie img, .galerie video { height: 175px; width: 100%; object-fit: cover; border-radius: 10px; box-shadow: var(--ombre); display: block; }
.galerie figcaption { font-family: var(--f-ui); font-size: .66rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--encre-3); margin-top: .45rem; }
.bandeau-img { border-radius: 14px; overflow: hidden; box-shadow: var(--ombre); margin-bottom: 2.2rem; }
.bandeau-img img { width: 100%; height: clamp(220px, 34vw, 380px); object-fit: cover; display: block; }
.bandeau-video { border-radius: 14px; overflow: hidden; box-shadow: var(--ombre); margin-bottom: 2.2rem; }
.bandeau-video video { width: 100%; height: clamp(240px, 40vw, 440px); object-fit: cover; display: block; background: #0d140f; }
/* Avis */
.avis-fond { background: var(--creme); border-block: 1px solid var(--ligne); margin-top: 3.4rem; }
.avis-note { display: flex; align-items: baseline; gap: .7rem; margin-bottom: 1.6rem; }
.avis-note b { font-family: var(--f-titre); font-size: 2.2rem; color: var(--foret); }
.avis-note .etoiles { color: var(--or); letter-spacing: .12em; font-size: 1.05rem; }
.avis-note span { font-size: .82rem; color: var(--encre-3); }
.avis-grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; padding-bottom: 3.4rem; }
@media (max-width: 900px) { .avis-grille { grid-template-columns: 1fr; } }
.avis { background: #fff; border: 1px solid var(--ligne); border-radius: 12px; padding: 1.15rem 1.25rem; box-shadow: var(--ombre); }
.avis q { font-family: var(--f-titre); font-style: italic; font-size: 1.02rem; line-height: 1.5; quotes: '« ' ' »'; }
.avis footer { margin-top: .7rem; font-family: var(--f-ui); font-size: .72rem; color: var(--encre-3); }
/* Tarifs */
.tarifs-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; background: #fff; border: 1px solid var(--ligne); border-radius: 12px; overflow: hidden; box-shadow: var(--ombre); }
.tarifs-scroll { overflow-x: auto; border-radius: 12px; }
.tarifs-table th, .tarifs-table td { padding: .85rem 1.1rem; text-align: left; border-bottom: 1px solid var(--ligne); }
.tarifs-table thead th { font-family: var(--f-ui); font-size: .68rem; letter-spacing: .07em; text-transform: uppercase; color: var(--encre-2); background: var(--creme); white-space: nowrap; }
.tarifs-table thead small { display: block; text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--encre-3); }
.tarifs-table tbody tr:last-child td { border-bottom: 0; }
.tarifs-table td.e { font-weight: 700; color: var(--foret); }
.tarifs-note { font-size: .84rem; color: var(--encre-2); margin-top: .9rem; max-width: 72ch; }
.tarifs-note b { color: var(--encre); }
/* Réservation */
.resa-fond { background: var(--foret-p); color: #EDE6D6; margin-top: 4.2rem; }
.resa-in { max-width: 1160px; margin: 0 auto; padding: 3.6rem 1.2rem 3.8rem; display: grid; grid-template-columns: 1fr 1.15fr; gap: 2.8rem; align-items: start; }
@media (max-width: 900px) { .resa-in { grid-template-columns: 1fr; } }
.resa-in .sur-titre { color: var(--or); }
.resa-in h2 { font-family: var(--f-titre); font-size: clamp(1.6rem, 3.2vw, 2.2rem); font-weight: 600; color: #fff; margin: 0 0 .7rem; text-wrap: balance; }
.resa-in .argu { color: rgba(237,230,214,.85); max-width: 50ch; }
.resa-etapes { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; gap: .8rem; }
.resa-etapes li { display: flex; gap: .8rem; font-size: .92rem; align-items: baseline; }
.resa-etapes .num { font-family: var(--f-ui); font-weight: 700; font-size: .72rem; color: var(--foret-p); background: var(--or); border-radius: 999px; padding: .12rem .55rem; flex: none; }
.form { background: var(--papier); color: var(--encre); border-radius: 14px; padding: 1.5rem 1.5rem 1.6rem; box-shadow: var(--ombre); }
.form h3 { font-family: var(--f-titre); font-size: 1.25rem; margin: 0 0 1rem; font-weight: 600; }
.champs { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
.champ label { display: block; font-family: var(--f-ui); font-size: .66rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--encre-2); margin-bottom: .3rem; }
.champ input, .champ select {
    width: 100%; font: inherit; font-size: .92rem; color: var(--encre);
    background: #fff; border: 1px solid var(--ligne); border-radius: 8px; padding: .6rem .7rem;
  }
.champ-large { grid-column: 1 / -1; }
.form .btn { width: 100%; margin-top: 1.1rem; padding: .85rem 1rem; font-size: .85rem; }
.form-note { font-size: .76rem; color: var(--encre-3); margin: .7rem 0 0; text-align: center; }
.confirm { display: none; background: #E1EFE5; border: 1px solid #BFDCC8; color: #1E4D33; border-radius: 10px; padding: .9rem 1rem; font-size: .92rem; margin-top: 1rem; }
.confirm.on { display: block; }
.champ textarea { width: 100%; font: inherit; font-size: .92rem; color: var(--encre); background: #fff; border: 1px solid var(--ligne); border-radius: 8px; padding: .6rem .7rem; min-height: 88px; resize: vertical; }
.champ.consent { display: flex; flex-direction: row; align-items: flex-start; gap: .55rem; }
.champ.consent input { width: 16px; height: 16px; flex: 0 0 auto; margin-top: .2rem; accent-color: var(--foret); }
.champ.consent span { font-size: .8rem; color: var(--encre-2); line-height: 1.5; }
.champ.consent a { color: var(--foret); text-decoration: underline; }
@media (max-width: 560px) { .champs { grid-template-columns: 1fr; } }
/* FAQ — accordéon natif, sans JS */
.faq { max-width: 760px; margin: 2.2rem auto 0; display: grid; gap: .7rem; }
.faq details { background: var(--papier); border: 1px solid var(--ligne); border-radius: 10px; overflow: hidden; }
.faq summary { cursor: pointer; list-style: none; padding: 1rem 1.2rem; font-family: var(--f-titre); font-size: 1.05rem; color: var(--foret); font-weight: 600; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-family: var(--f-ui); font-size: 1.35rem; line-height: 1; color: var(--or-fonce); flex: 0 0 auto; transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > p { margin: 0; padding: 0 1.2rem 1.1rem; color: var(--encre-2); font-size: .95rem; line-height: 1.6; }
/* Encadré propriétaire */
.coulisses { max-width: 1160px; margin: 3.6rem auto 0; padding: 0 1.2rem; }
.coulisses-in { background: var(--or-pale); border: 1px dashed var(--or); border-radius: 14px; padding: 1.5rem 1.6rem; }
.coulisses h2 { font-family: var(--f-ui); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--or-fonce); margin: 0 0 .7rem; }
.coulisses p { font-size: .92rem; color: var(--encre-2); margin: .3rem 0; max-width: 90ch; }
.coulisses b { color: var(--encre); }
/* Langues */
.langs { font-family: var(--f-ui); font-size: .74rem; color: var(--encre-3); letter-spacing: .06em; cursor: default; }
.langs b { color: var(--foret); }
.langs .en-soon { opacity: .6; font-weight: 400; }
/* Écran tactile : FR · EN reste dans la barre, chaque langue assez grande pour le doigt */
@media (max-width: 1000px) { .langs { white-space: nowrap; } .langs a, .langs b { display: inline-block; padding: .45rem .25rem; } }
/* Accès & contact */
.acces-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 1.6rem; align-items: stretch; }
@media (max-width: 900px) { .acces-grid { grid-template-columns: 1fr; } }
.acces-infos { background: #fff; border: 1px solid var(--ligne); border-radius: 14px; box-shadow: var(--ombre); padding: 1.4rem 1.5rem; }
.acces-infos dl { display: grid; grid-template-columns: auto 1fr; gap: .45rem 1.1rem; margin: 0; font-size: .93rem; }
.acces-infos dt { font-family: var(--f-ui); font-size: .66rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--encre-3); padding-top: .2rem; }
.acces-infos dd { margin: 0; }
.carte-box iframe { width: 100%; height: 380px; border: 0; border-radius: 10px; display: block; }
.carte-lien { margin: .7rem 0 0; font-size: .82rem; color: var(--encre-3); }
.carte-box {
    border: 1.5px dashed var(--ligne); border-radius: 14px; background: var(--creme);
    display: grid; place-items: center; text-align: center; padding: 2rem 1.5rem; gap: .8rem; min-height: 240px;
  }
.carte-box p { margin: 0; color: var(--encre-2); font-size: .9rem; max-width: 46ch; }
/* Pied */
.pied { border-top: 1px solid var(--ligne); margin-top: 3rem; background: var(--creme); }
.pied-in { max-width: 1160px; margin: 0 auto; padding: 2.2rem 1.2rem 5.5rem; display: flex; gap: 1.5rem 3rem; flex-wrap: wrap; font-size: .88rem; color: var(--encre-2); }
.pied-in b { font-family: var(--f-titre); color: var(--foret); font-size: 1.05rem; display: block; margin-bottom: .3rem; }
.pied-in .fin { margin-left: auto; font-size: .76rem; color: var(--encre-3); max-width: 34ch; }
/* Barre mobile */
.barre-mob { display: none; }
@media (max-width: 640px) {
    .barre-mob {
      display: flex; gap: .7rem; position: fixed; z-index: 60; inset: auto 0 0 0;
      background: rgba(36,61,48,.97); padding: .6rem .9rem;
      padding-bottom: calc(.6rem + env(safe-area-inset-bottom));
    }
    .barre-mob .btn { flex: 1; padding: .7rem .5rem; font-size: .78rem; }
    .barre-mob .tel2 { display: grid; place-items: center; color: #fff; text-decoration: none; font-size: 1.2rem; width: 46px; border: 1px solid rgba(255,255,255,.4); border-radius: 8px; }
  }
/* Apparition douce au défilement */
.rev { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.rev.vu { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rev { opacity: 1; transform: none; } }
/* Pages légales (contenu repris du site actuel, habillage v2) */
.legal { max-width: 74ch; font-size: .96rem; color: var(--encre-2); }
.legal h2 { font-family: var(--f-titre); font-weight: 600; font-size: 1.25rem; color: var(--foret); margin: 1.8rem 0 .5rem; }
.legal h3 { font-size: 1rem; font-weight: 700; color: var(--encre); margin: 1.2rem 0 .35rem; }
.legal p { margin: 0 0 1rem; }
.legal a { color: var(--foret); }
.legal ul, .legal ol { margin: 0 0 1rem 1.2rem; padding: 0; }
.legal li { margin: .2rem 0; }
.legal .fill-in { background: var(--or-pale, #F6ECD4); color: var(--or-fonce, #7A5A1E); font-weight: 600; padding: 0 .3rem; border-radius: 3px; }