/* =========================================================================
   Les Toits de Santa Giulia · résidence de tourisme 4 étoiles, Porto-Vecchio
   Playfair Display (titres) + Josefin Sans (texte et interface)

   La charte est celle de la maison, à l'identique : le vert sauge du logo
   (#84b093), le rose poudré des boutons secondaires (#a3888a), le sable des
   bandeaux (#cdc3b4). La cliente y tient, et c'est son identité.

   Ces trois teintes sont claires : en texte blanc dessus, elles ne passent pas
   le AA (2,4:1 pour le sauge, 3,3:1 pour le rose, 1,7:1 pour le sable). C'est
   déjà le cas sur le site en place, et c'est assumé. Les jetons `-ink` et `-btn`
   restent en place comme points d'entrée : si l'on veut un jour remonter le
   contraste sans toucher à la charte, c'est ici et nulle part ailleurs.

   Le corps de texte, lui, reste sur les gris de la charte (#4a4a4b / #5c5c5d),
   qui passent largement : la lisibilité de la lecture longue n'est pas en jeu.
   ========================================================================= */

:root{
  /* couleurs de marque, pour les surfaces et les décors */
  --sauge:#84b093;
  --sauge-clair:#eef3ef;
  --sauge-pale:#f7faf8;
  --rose:#a3888a;
  --sable:#cdc3b4;
  --sable-clair:#f2ece3;

  /* les mêmes teintes, là où elles portent du texte (cf. l'en-tête) */
  --sauge-ink:#84b093;      /* liens, libellés */
  --sauge-btn:#84b093;      /* boutons, puces, en-têtes d'accordéon */
  --rose-ink:#a3888a;
  --rose-btn:#a3888a;       /* boutons secondaires */
  --sable-fonce:#cdc3b4;    /* bandeaux d'appel à l'action */
  --pied-fond:#997f80;      /* pied de page : mauve, relevé au pixel sur le site en place */
  --pied-filet:#dad1c1;     /* le liseré sable qui le sépare de la page */

  --encre:#4a4a4b;
  --texte:#5c5c5d;          /* 6,68:1 sur blanc */
  --doux:#6f6f70;           /* 5,02:1 sur blanc, plancher du texte secondaire */
  --papier:#ffffff;
  --creme:#fdfcfa;
  --trait:#e7e3dc;

  /* Palette lue par les modules du moteur (blog, guide) : sans elle, leurs couleurs
     tombaient au hasard (15/10/2026). Encre pour les fonds sous texte blanc (la sauge
     y passerait sous l'AA), sauge pour les filets et survols. */
  --c-primary:var(--encre);
  --c-accent:var(--sauge);
  --c-text:var(--texte);
  --c-muted:var(--doux);

  --serif:'Playfair Display', Georgia, 'Times New Roman', serif;
  --sans:'Josefin Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --wrap:1240px;
  --pad:clamp(1.15rem, 5vw, 3rem);
  --sec-y:clamp(3.75rem, 9vh, 7rem);
  --r:10px;          /* rayon des boutons et des cartes d'action */
  --ease:cubic-bezier(.22,.61,.36,1);
  --entete:104px;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--entete) + 1rem);
  /* Place de la barre de défilement réservée : l'ouverture du tiroir (overflow:hidden) ne décale plus la page. */
  scrollbar-gutter:stable;}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto;}}

body{
  margin:0;
  font-family:var(--sans);
  font-size:clamp(1rem,.97rem + .18vw,1.08rem);
  font-weight:400;
  line-height:1.8;
  color:var(--texte);
  background:var(--papier);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block;}
a{color:var(--sauge-ink);text-decoration-thickness:1px;text-underline-offset:.2em;}
a:hover{color:#6f9a7f;}
:focus-visible{outline:2px solid #5c8a6c;outline-offset:3px;border-radius:2px;}

h1,h2,h3,h4{font-family:var(--serif);font-weight:500;line-height:1.2;color:var(--encre);margin:0 0 .6em;}
h1{font-size:clamp(2.1rem,1.5rem + 2.6vw,3.4rem);}
h2{font-size:clamp(1.7rem,1.3rem + 1.7vw,2.6rem);}
h3{font-size:clamp(1.2rem,1.08rem + .5vw,1.5rem);}
p{margin:0 0 1.15em;}
ul,ol{margin:0 0 1.15em;padding-left:1.15em;}
li{margin-bottom:.35em;}
strong{font-weight:600;color:var(--encre);}
sup{font-size:.62em;}

.container{width:min(var(--wrap),100% - var(--pad)*2);margin-inline:auto;}
.section{padding-block:var(--sec-y);}
/* Deux sections de MÊME fond qui se suivent (blanc sur blanc, sauge sur sauge)
   n'ont pas de frontière visible : leurs deux marges s'additionnent en un vide.
   On retire la marge haute de la seconde, en gardant une respiration. */
.section:not(.section--pale):not(.section--creme) + .section:not(.section--pale):not(.section--creme),
.section--pale + .section--pale,
.section--creme + .section--creme{padding-top:calc(var(--sec-y) * .35);}
.section--pale{background:var(--sauge-pale);}
.section--creme{background:var(--creme);}
.mesure{max-width:64ch;}
.centre{text-align:center;}
.centre .mesure{margin-inline:auto;}

.skip-link{position:absolute;left:-9999px;top:0;background:var(--sauge-btn);color:#fff;padding:.75rem 1.25rem;z-index:1000;}
.skip-link:focus{left:0;}

/* Visible des seuls lecteurs d'écran : sert à compléter un libellé trop court
   (« Découvrir » répété quatre fois n'indique pas QUOI découvrir). */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* --- surtitre : petites capitales espacées, la respiration de la charte --- */
.surtitre{
  font-size:.74rem;letter-spacing:.24em;text-transform:uppercase;
  font-weight:500;color:var(--sauge-ink);margin:0 0 .9rem;line-height:1.6;
}
.surtitre--clair{color:#f2f8f4;}

/* Le vert dans un titre : le site d'origine colore un mot sur deux, c'est sa
   signature typographique. On la garde, en version lisible. */
.vert{color:var(--sauge-ink);}
h1 .vert,h2 .vert,h3 .vert{color:var(--sauge-ink);}

.trait{width:54px;height:3px;border-radius:999px;background:var(--sauge);border:0;margin:1.4rem 0 1.8rem;}
.centre .trait{margin-inline:auto;}

/* ============================ boutons ============================ */
/* CENTRAGE OPTIQUE DES BOUTONS, et pourquoi il ne va pas de soi.
   `align-items:center` centre la BOÎTE DE LIGNE, pas les lettres. Or Josefin
   Sans réserve 250/1000 em sous la ligne de base pour ses jambages, que des
   capitales n'utilisent pas : le centre de la boîte tombe à 250 au-dessus de la
   ligne de base, celui des capitales à 351 (capHeight 702 / 2). Un libellé tout
   en capitales s'affiche donc 0,101 em TROP HAUT, soit un peu plus d'un pixel
   ici — invisible à la lecture du code, très visible sur le bouton.
   On compense par un écart de padding de 2 × 0,101 em, en `em` pour que la
   correction suive la taille du texte. L'icône, elle, était bien centrée : on la
   remonte d'autant (cf. `.btn svg`). */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  padding:1.03em 1.6rem .83em;border:0;border-radius:var(--r);
  font-family:var(--sans);font-size:.88rem;font-weight:500;line-height:1;
  letter-spacing:.1em;text-transform:uppercase;text-decoration:none;
  cursor:pointer;transition:background .25s var(--ease),transform .25s var(--ease);
}
.btn:hover{transform:translateY(-1px);}
.btn--vert{background:var(--sauge-btn);color:#fff;}
.btn--vert:hover{background:#6f9a7f;color:#fff;}
.btn--rose{background:var(--rose-btn);color:#fff;}
.btn--rose:hover{background:#8f7478;color:#fff;}
.btn--fantome{background:transparent;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.75);}
.btn--fantome:hover{background:rgba(255,255,255,.14);color:#fff;}
.btn--ligne{background:transparent;color:var(--sauge-ink);box-shadow:inset 0 0 0 1px var(--sauge);}
.btn--ligne:hover{background:var(--sauge-clair);color:#6f9a7f;}
.btn svg{width:16px;height:16px;flex:none;transform:translateY(-.101em);}

.lien-plus{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--doux);text-decoration:none;font-weight:500;
}
.lien-plus::before{content:"";width:18px;height:2px;border-radius:999px;background:var(--sauge);transition:width .25s var(--ease);}
.lien-plus:hover{color:var(--sauge-ink);}
.lien-plus:hover::before{width:30px;}

/* ============================ en-tête ============================ */
/* Un seul en-tête, une seule barre : le logo, les deux actions, et le menu.
   Pas de barre de navigation déployée : six rubriques, deux boutons et un logo
   ne tiennent pas sur une ligne, et les faire tenir demandait de rapetisser le
   logo au point qu'on ne lisait plus les quatre étoiles. */
.entete{
  position:sticky;top:0;z-index:100;
  background:rgba(255,255,255,.97);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--trait);
}
.entete__inner{
  display:flex;align-items:center;gap:1rem;
  min-height:var(--entete);
  width:min(var(--wrap),100% - var(--pad)*2);margin-inline:auto;
  transition:min-height .3s ease;
}
.marque{flex:none;display:block;}
.marque img{height:84px;width:auto;transition:height .3s ease;}
/* Au défilement, la barre se resserre (classe posée par site.js) : le logo
   reste lisible, la page regagne de la hauteur. --entete n'est pas touchée :
   le décalage des ancres garde sa marge, ce qui ne coûte rien. */
.entete{transition:background-color .3s ease,box-shadow .3s ease;}
.entete.est-compacte{
  background:rgba(255,255,255,.78);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);
  box-shadow:0 6px 24px rgba(0,0,0,.08);
}
.entete.est-compacte .entete__inner{min-height:68px;}
.entete.est-compacte .marque img{height:54px;}
@media (prefers-reduced-motion: reduce){.entete__inner,.marque img{transition:none;}}
.entete__actions{display:flex;align-items:center;gap:.6rem;margin-left:auto;}
.entete__actions .btn{padding:.88em 1.2rem .68em;font-size:.76rem;white-space:nowrap;}
@media (max-width:720px){
  /* Sur mobile, la barre mesurait 104 px pour un logo de 64 et un bouton de 48 :
     40 px de vide, en haut d'un écran où la hauteur est la ressource rare (et
     d'où viennent 82 % des visites de ce site). On resserre la BARRE, pas ce
     qu'elle contient : le logo garde ses 64 px et le bouton ses 48, qui sont le
     minimum pour une cible tactile. La variable est redéclarée sur :root et pas
     sur .entete, parce que c'est elle qui règle aussi le décalage des ancres. */
  :root{--entete:78px;}
  .entete__actions{display:none;}
  .marque img{height:64px;}
  .entete.est-compacte .entete__inner{min-height:60px;}
  .entete.est-compacte .marque img{height:48px;}
}

/* LES TROIS BARRES, ET POURQUOI IL N'Y EN AVAIT QUE DEUX.
   Elles faisaient 1,5 px de haut, empilées par des marges qui se chevauchent.
   Sur un écran non-retina, une hauteur fractionnaire tombe entre deux rangées
   de pixels : le navigateur en arrondit certaines à 2 px et en efface d'autres.
   Deux barres survivaient, la troisième disparaissait — et seulement sur
   certains écrans, ce qui est la pire façon de casser.
   Réécrit en entier : hauteurs ENTIÈRES, et un `gap` de flex au lieu de marges,
   donc plus rien qui se chevauche ni qui s'arrondisse. 3 × 2 px + 2 × 5 px de
   gap = 16 px, centrés dans les 48 px du bouton. */
.burger{
  flex:none;width:48px;height:48px;border:0;background:transparent;cursor:pointer;
  padding:0;margin-left:.5rem;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
}
/* Les barres passent de 2 à 3 px. Le rayon était déjà maximal — sur 2 px de
   haut, un demi-cercle fait 1 px de rayon et ne se voit tout simplement pas :
   l'œil lit encore un rectangle. C'est l'ÉPAISSEUR qui manquait, pas l'arrondi.
   3 px reste un entier, donc aucun retour du défaut d'arrondi sous-pixel.
   `999px` plutôt qu'une valeur calculée : le navigateur la ramène de lui-même à
   la moitié de la hauteur, et l'arrondi reste maximal si l'épaisseur rebouge. */
.burger span{
  display:block;width:24px;height:3px;border-radius:999px;
  background:var(--encre);
  transition:transform .3s var(--ease),opacity .2s var(--ease);
}
/* Ouvert, les trois barres deviennent une croix : celle du milieu s'efface, les
   deux autres se rejoignent au centre (5 px de gap + 3 px de barre = 8). */
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg);}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0;}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg);}
@media (prefers-reduced-motion: reduce){.burger span{transition:none;}}
@media (max-width:720px){.burger{margin-left:auto;}}

/* ============================ menu latéral ============================ */
.tiroir-voile{
  position:fixed;inset:0;z-index:120;
  background:rgba(44,42,38,.45);
  opacity:0;transition:opacity .3s var(--ease);
}
.tiroir-voile.est-ouvert{opacity:1;}
.tiroir{
  position:fixed;top:0;right:0;bottom:0;z-index:130;
  width:min(380px,88vw);
  background:var(--papier);
  box-shadow:-18px 0 50px rgba(60,52,40,.16);
  padding:clamp(1.5rem,3vw,2.25rem);
  overflow-y:auto;overscroll-behavior:contain;
  display:flex;flex-direction:column;align-items:center;text-align:center;
  transform:translateX(100%);transition:transform .32s var(--ease);
}
.tiroir.est-ouvert{transform:none;}
@media (prefers-reduced-motion: reduce){
  .tiroir,.tiroir-voile{transition:none;}
}
.tiroir__fermer{
  position:absolute;top:1rem;right:1rem;
  width:44px;height:44px;border:0;background:transparent;cursor:pointer;
  color:var(--encre);display:grid;place-items:center;border-radius:50%;
  transition:background .2s;
}
.tiroir__fermer:hover{background:var(--sauge-clair);}
.tiroir__fermer svg{width:22px;height:22px;}
.tiroir__logo{width:190px;height:auto;margin:1.5rem 0 1.75rem;}

.langues{display:flex;gap:.7rem;align-items:center;font-size:.95rem;letter-spacing:.1em;margin:0 0 2rem;}
.langues a{color:var(--doux);text-decoration:none;}
.langues a:hover{color:var(--sauge-ink);}
.langues [aria-current]{color:var(--sauge-ink);font-weight:600;}
.langues span{color:var(--trait);}
.langues .langues__inactive{color:var(--trait);cursor:default;}

.tiroir__liste{list-style:none;margin:0 0 2rem;padding:0;width:100%;}
.tiroir__liste li{margin:0;}
.tiroir__liste a{
  display:block;padding:.55rem 0;
  font-size:1.12rem;color:var(--encre);text-decoration:none;
  transition:color .2s;
}
.tiroir__liste a:hover,.tiroir__liste a[aria-current="page"]{color:var(--sauge-ink);}
/* Villas et appartements : l'entrée se déplie au clic sur la liste des logements. */
.tiroir__deplier{
  display:inline-flex;align-items:center;gap:.45rem;padding:.55rem 0;background:none;border:0;cursor:pointer;
  font:inherit;font-size:1.12rem;color:var(--encre);transition:color .2s;
}
.tiroir__deplier:hover,.tiroir__deplier[aria-expanded="true"]{color:var(--sauge-ink);}
.tiroir__deplier svg{width:16px;height:16px;transition:transform .25s var(--ease);}
.tiroir__deplier[aria-expanded="true"] svg{transform:rotate(180deg);}
.tiroir__sous{
  list-style:none;margin:0;padding:0;overflow:hidden;
  max-height:0;opacity:0;visibility:hidden;
  transition:max-height .38s var(--ease),opacity .25s ease,margin .38s var(--ease),visibility 0s linear .38s;
}
.tiroir__deplier[aria-expanded="true"] + .tiroir__sous{
  max-height:22rem;opacity:1;visibility:visible;margin-bottom:.6rem;
  transition:max-height .45s var(--ease),opacity .3s ease .05s,margin .45s var(--ease),visibility 0s;
}
/* Les liens arrivent l'un après l'autre, et repartent ensemble. */
.tiroir__sous li{transform:translateY(-6px);opacity:0;transition:transform .3s var(--ease),opacity .25s ease;}
.tiroir__deplier[aria-expanded="true"] + .tiroir__sous li{transform:none;opacity:1;}
.tiroir__deplier[aria-expanded="true"] + .tiroir__sous li:nth-child(2){transition-delay:.04s;}
.tiroir__deplier[aria-expanded="true"] + .tiroir__sous li:nth-child(3){transition-delay:.08s;}
.tiroir__deplier[aria-expanded="true"] + .tiroir__sous li:nth-child(4){transition-delay:.12s;}
.tiroir__deplier[aria-expanded="true"] + .tiroir__sous li:nth-child(n+5){transition-delay:.16s;}
@media (prefers-reduced-motion:reduce){
  .tiroir__sous,.tiroir__sous li,.tiroir__deplier svg{transition:none !important;}
}
.tiroir__sous a{font-size:.98rem;padding:.3rem 0;color:var(--texte);}
.tiroir__sous li:first-child a{font-style:italic;}

.tiroir__secondaire{list-style:none;margin:0 0 2.25rem;padding:0;width:100%;}
.tiroir__secondaire li{display:flex;align-items:center;gap:.6rem;margin-bottom:.55rem;justify-content:center;}
.tiroir__secondaire svg{width:17px;height:17px;flex:none;color:var(--sauge);}
.tiroir__secondaire a{font-size:.95rem;color:var(--texte);text-decoration:none;}
.tiroir__secondaire a:hover{color:var(--sauge-ink);}

.tiroir__actions{display:flex;flex-direction:column;align-items:center;gap:.8rem;width:100%;margin-top:auto;}
.tiroir__actions .btn{width:100%;justify-content:center;}
.tiroir__garantie{font-size:.86rem;color:var(--doux);margin:-.2rem 0 .6rem;}

/* ====================== accueil · en-tête vidéo ====================== */
/* Le poster (première image du clip) est posé d'emblée ; la vidéo arrive
   par-dessus, transparente, et ne se montre qu'une fois qu'elle JOUE : pas
   d'image noire ni de saccade pendant qu'elle se charge. */
.hero{position:relative;isolation:isolate;overflow:hidden;}
.hero__scene{position:relative;height:clamp(440px,74vh,760px);background:var(--sauge-clair);}
.hero__slide{position:absolute;inset:0;margin:0;}
.hero__slide picture,.hero__slide img{display:block;width:100%;height:100%;object-fit:cover;}
.hero__video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .9s var(--ease);pointer-events:none;
}
.hero__video.est-lue{opacity:1;}
@media (prefers-reduced-motion: reduce){.hero__video{display:none;}}

.hero__voile{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,rgba(44,42,38,.84) 0%,rgba(44,42,38,.46) 36%,rgba(44,42,38,0) 66%);
}
.hero__texte{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding-block:clamp(1.75rem,4vw,3.25rem);color:#fff;
}
.hero__texte h1{
  color:#fff;margin:0 0 .5rem;
  text-shadow:0 2px 24px rgba(30,28,25,.42);
  font-size:clamp(1.9rem,1.25rem + 2.4vw,3.15rem);
}
.hero__sous{
  color:#f3f1ed;max-width:54ch;margin:0;
  font-size:clamp(.98rem,.94rem + .2vw,1.1rem);
  text-shadow:0 1px 14px rgba(30,28,25,.45);
}
.hero__actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.6rem;}

/* --- pause ---
   Une animation de plus de cinq secondes doit pouvoir s'arrêter (RGAA 13.8).
   Discret, en bas à droite de la SCÈNE : sur mobile le texte descend sous
   l'image, le bouton reste sur elle. */
.hero__lecture{
  position:absolute;right:clamp(.75rem,2vw,1.75rem);top:clamp(.75rem,2vw,1.5rem);z-index:3;
  width:44px;height:44px;border:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.16);color:#fff;backdrop-filter:blur(4px);
  display:grid;place-items:center;transition:background .2s var(--ease);
}
.hero__lecture:hover{background:rgba(255,255,255,.32);}
.hero__lecture[hidden]{display:none;}
.hero__lecture svg{width:18px;height:18px;}
.hero__icone-lecture,
.hero__lecture.est-en-pause .hero__icone-pause{display:none;}
.hero__lecture.est-en-pause .hero__icone-lecture{display:block;}

@media (max-width:860px){
  /* L'image prend un format fixe (3/2) au lieu d'une hauteur imposée : sur un
     téléphone de 400 px, une scène de 380 px de haut donnait un cadre presque
     carré, qui rognait un tiers de la largeur. La vidéo mobile est encodée à
     ce format exact (preparer-video.mjs). Le plafond en `vh` garde la main
     sur un téléphone tenu à l'horizontale. */
  .hero__scene{height:auto;aspect-ratio:3/2;max-height:52vh;}
  /* Le texte quitte la photo : sur un écran étroit, un titre de trois lignes
     sur une image mange la photo ET se lit mal. Le voile ne sert donc plus qu'à
     adoucir le bas de l'image, et il s'arrête avec elle. */
  .hero__voile{background:linear-gradient(to top,rgba(44,42,38,.42) 0%,rgba(44,42,38,0) 32%);}
  .hero__texte{position:static;background:var(--sable-fonce);}
  .hero__texte h1,.hero__sous{text-shadow:none;}
}

/* ====================== cartes hébergement ====================== */
.grille-logements{display:grid;gap:1.4rem;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));}
.logement-carte{
  position:relative;display:block;overflow:hidden;
  aspect-ratio:3/4;background:var(--sauge-clair);text-decoration:none;
}
.logement-carte img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease);}
.logement-carte:hover img{transform:scale(1.045);}
.logement-carte__capacite{
  position:absolute;top:0;right:0;z-index:2;
  background:var(--sauge-btn);color:#fff;
  font-size:.74rem;letter-spacing:.1em;padding:.4rem .85rem;
}
.logement-carte__pied{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:1.6rem 1.25rem 1.1rem;
  background:linear-gradient(to top,rgba(52,48,42,.88),rgba(52,48,42,.5) 55%,transparent);
  color:#fff;
}
.logement-carte__pied h3{color:#fff;margin:0 0 .2rem;font-size:1.28rem;}
.logement-carte__pied span{font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:#eceae6;}

/* ====================== bandeau d'appel ======================
   Photo de la résidence en fond, voile par-dessus. Le voile n'est pas un effet :
   le bandeau était du blanc sur sable (#cdc3b4), soit 1,9:1, sous le plancher
   AA. Sur la photo assombrie, le même texte passe largement. */
.bandeau{
  position:relative;isolation:isolate;overflow:hidden;
  background:var(--sable-fonce);color:#fff;text-align:center;
  padding-block:clamp(3.4rem,6.5vw,5.2rem);
}
.bandeau__fond{position:absolute;inset:0;z-index:-2;display:block;}
/* La photo cadre sur le bas : le ciel et les frondaisons du haut n'apportent
   rien, la terrasse et le jardin si. */
.bandeau__fond img{width:100%;height:100%;object-fit:cover;object-position:center 62%;}
.bandeau::after{
  content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(38,50,42,.66),rgba(38,50,42,.54) 45%,rgba(38,50,42,.70));
}
.bandeau p{
  font-family:var(--serif);font-size:clamp(1.5rem,1.1rem + 1.9vw,2.5rem);
  line-height:1.3;margin:0 0 .3em;color:#fff;
  text-shadow:0 1px 16px rgba(0,0,0,.4);
}
.bandeau p + p{font-family:var(--sans);font-weight:300;color:#eef3ef;letter-spacing:.02em;}
.bandeau__actions{display:flex;flex-wrap:wrap;gap:.9rem;justify-content:center;margin-top:2rem;}

/* Un label (Écolabel européen) est une preuve, pas un décor : il se pose petit,
   sous le texte qu'il certifie, centré. */
.label-preuve{margin:2.25rem 0 0;}
.label-preuve img{width:min(132px,40vw);height:auto;display:inline-block;}

/* ====================== guide ====================== */

/* ====================== articles ====================== */
.grille-articles{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));}
.article-carte{display:flex;flex-direction:column;text-decoration:none;color:inherit;}
.article-carte__photo{position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--sauge-clair);}
.article-carte__photo img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease);}
.article-carte:hover .article-carte__photo img{transform:scale(1.05);}
.article-carte__theme{
  position:absolute;top:0;right:0;background:var(--sauge-btn);color:#fff;
  font-size:.72rem;letter-spacing:.1em;padding:.35rem .8rem;
}
.article-carte__date{
  display:inline-block;background:var(--rose-btn);color:#fff;
  font-size:.72rem;letter-spacing:.1em;padding:.3rem .8rem;
  position:absolute;left:0;bottom:0;
}
.article-carte h3{
  font-size:1.15rem;margin:1.1rem 0 .5rem;padding-bottom:1rem;
  border-bottom:1px solid var(--trait);transition:border-color .25s;
}
.article-carte:hover h3{border-bottom-color:var(--sauge);color:var(--sauge-ink);}
.article-carte p{font-size:.93rem;color:var(--doux);margin:0;}

/* ====================== fiche hébergement ====================== */
.fil{
  font-size:.8rem;letter-spacing:.06em;color:var(--doux);
  padding-block:1.1rem;border-bottom:1px solid var(--trait);
}
.fil ol{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem;margin:0;padding:0;}
.fil li{display:flex;align-items:center;gap:.5rem;margin:0;}
.fil li + li::before{content:"›";color:var(--sable);}
.fil a{color:var(--doux);text-decoration:none;}
.fil a:hover{color:var(--sauge-ink);}
.fil [aria-current]{color:var(--sauge-ink);}

.fiche-entete{text-align:center;padding-block:clamp(2.5rem,5vw,4rem) clamp(1.5rem,3vw,2.5rem);}
.fiche-entete h1{margin-bottom:.45em;}
.fiche-entete .sous-titre{
  font-family:var(--serif);font-size:clamp(1.05rem,.95rem + .5vw,1.4rem);
  color:var(--encre);padding-block:1.1rem;
  border-top:1px solid var(--trait);border-bottom:1px solid var(--trait);
  max-width:60ch;margin:0 auto;
}
.fiche-entete .note{font-size:.93rem;color:var(--doux);max-width:62ch;margin:1.6rem auto 0;}

.pictos{display:flex;flex-wrap:wrap;gap:.9rem;justify-content:center;align-items:center;margin:1.6rem 0 0;}
/* Les pictogrammes du site d'origine DESSINENT déjà leur cercle. Un anneau CSS
   par-dessus en ajoutait un second et rétrécissait le dessin au point qu'il
   disparaissait : à 28 px dans un cercle de 52, il ne restait qu'un rond vide. */
.picto{width:52px;height:52px;display:grid;place-items:center;}
.picto img{width:100%;height:100%;}
.puce{
  display:inline-block;padding:.5rem 1.1rem;border-radius:999px;
  box-shadow:inset 0 0 0 1px var(--sauge);
  color:var(--sauge-ink);font-size:.82rem;letter-spacing:.08em;
}

/* --- galerie : une grande, deux petites, le reste dans la visionneuse --- */
.galerie{display:grid;gap:8px;grid-template-columns:2fr 1fr;}
.galerie__vignette{position:relative;overflow:hidden;border-radius:var(--r);background:var(--sauge-clair);border:0;padding:0;cursor:zoom-in;display:block;width:100%;height:100%;}
.galerie__vignette img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease);}
.galerie__vignette:hover img{transform:scale(1.04);}
.galerie__vignette:first-child{grid-row:1 / span 2;aspect-ratio:4/3;}
/* Les deux vignettes de droite occupent toute la colonne, à la hauteur exacte de la grande
   photo (deux rangées égales) : plus de blanc à droite ni entre elles. */
.galerie__cote{display:grid;gap:8px;grid-row:1 / span 2;grid-template-rows:1fr 1fr;min-height:0;}
.galerie__cote .galerie__vignette{aspect-ratio:auto;min-height:0;}
.galerie__reste{
  position:absolute;inset:0;display:grid;place-items:center;
  background:rgba(132,176,147,.78);color:#fff;
  font-size:.95rem;letter-spacing:.08em;text-align:center;line-height:1.35;
}
@media (max-width:700px){
  .galerie{grid-template-columns:1fr;}
  .galerie__vignette:first-child{grid-row:auto;}
  .galerie__cote{grid-row:auto;grid-template-columns:1fr 1fr;grid-template-rows:auto;}
  .galerie__cote .galerie__vignette{aspect-ratio:3/2;}
}

/* --- visionneuse --- */
.visionneuse{
  position:fixed;inset:0;z-index:200;display:none;
  background:rgba(32,30,27,.94);
  align-items:center;justify-content:center;padding:clamp(1rem,4vw,3rem);
}
.visionneuse[open],.visionneuse.est-ouverte{display:flex;}
.visionneuse img{max-width:100%;max-height:82vh;object-fit:contain;}
.visionneuse__fermer,.visionneuse__prec,.visionneuse__suiv{
  position:absolute;border:0;background:rgba(255,255,255,.12);color:#fff;
  width:52px;height:52px;border-radius:50%;cursor:pointer;font-size:1.4rem;line-height:1;
  display:grid;place-items:center;transition:background .2s;
}
.visionneuse__fermer:hover,.visionneuse__prec:hover,.visionneuse__suiv:hover{background:rgba(255,255,255,.26);}
.visionneuse__fermer{top:clamp(1rem,3vw,2rem);right:clamp(1rem,3vw,2rem);}
.visionneuse__prec{left:clamp(.5rem,2vw,2rem);top:50%;transform:translateY(-50%);}
.visionneuse__suiv{right:clamp(.5rem,2vw,2rem);top:50%;transform:translateY(-50%);}
.visionneuse__compteur{position:absolute;bottom:clamp(1rem,3vw,2rem);left:50%;transform:translateX(-50%);color:#f0ede8;font-size:.85rem;letter-spacing:.1em;}

/* --- descriptif + plan --- */
.descriptif{display:grid;gap:clamp(2rem,4vw,3.5rem);grid-template-columns:1.55fr 1fr;align-items:start;}
@media (max-width:860px){.descriptif{grid-template-columns:1fr;}}
.descriptif ul{list-style:none;padding:0;}
.descriptif li{position:relative;padding-left:1.9rem;margin-bottom:.85rem;}
.descriptif li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:11px;height:11px;border-radius:0 60% 0 60%;
  background:var(--sauge);transform:rotate(-12deg);
}
.descriptif strong{display:block;margin:1.4rem 0 .7rem;font-family:var(--serif);font-size:1.12rem;font-weight:500;}
.descriptif strong:first-child{margin-top:0;}
.plan figcaption{font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;color:var(--doux);text-align:center;margin-top:.8rem;}
.plan img{box-shadow:inset 0 0 0 1px var(--trait);cursor:zoom-in;}

/* --- disponibilités (widget Thais) --- */
.thais_calendar_widget{min-height:320px;}
.reservation__repli{
  border:1px dashed var(--sable);background:var(--sable-clair);
  padding:1.5rem;text-align:center;font-size:.93rem;color:var(--doux);
}

/* --- équipements : accordéon --- */
.accordeon{border-top:1px solid var(--trait);}
.accordeon__tete{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.15rem 1.25rem;border:0;border-bottom:1px solid var(--trait);
  background:var(--sauge-pale);color:var(--encre);cursor:pointer;
  font-family:var(--sans);font-size:.92rem;letter-spacing:.12em;text-transform:uppercase;text-align:left;
  transition:background .25s;
}
.accordeon__tete:hover{background:var(--sauge-clair);}
.accordeon__tete[aria-expanded="true"]{background:var(--sauge-btn);color:#fff;}
.accordeon__tete svg{width:14px;height:14px;flex:none;transition:transform .3s var(--ease);}
.accordeon__tete[aria-expanded="true"] svg{transform:rotate(180deg);}
.accordeon__corps{border-bottom:1px solid var(--trait);padding:1.6rem 1.25rem;}
.accordeon__corps[hidden]{display:none;}
.grille-equip{display:grid;gap:1.1rem 1.6rem;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));}
.equip{display:flex;align-items:center;gap:.9rem;font-size:.94rem;}
.equip__icones{display:flex;gap:.2rem;flex:none;}
.equip__icones img{width:34px;height:34px;opacity:.75;}

/* --- les petits plus --- */
.grille-plus{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));}
.plus-carte{background:var(--papier);box-shadow:0 1px 0 var(--trait),0 8px 26px rgba(80,70,55,.06);padding:1.6rem 1.25rem;text-align:center;}
.plus-carte h3{font-size:1.02rem;padding-bottom:.7rem;border-bottom:1px solid var(--trait);display:inline-block;margin-bottom:1.3rem;}
.plus-carte ul{display:flex;flex-wrap:wrap;gap:1rem 1.1rem;justify-content:center;list-style:none;padding:0;margin:0;}
.plus-carte li{margin:0;width:68px;display:flex;flex-direction:column;align-items:center;gap:.4rem;align-self:start;}
.plus-carte img{width:38px;height:38px;opacity:.7;}
.plus-carte span{font-size:.7rem;line-height:1.3;color:var(--doux);text-align:center;min-height:2.6em;}

/* ====================== partenaires ====================== */
.grille-partenaires{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));}
.partenaire{
  background:var(--papier);padding:1.5rem;
  box-shadow:inset 0 0 0 1px var(--trait);
  display:flex;flex-direction:column;gap:.45rem;
}
.partenaire h3{font-size:1.15rem;margin:0;}
.partenaire__activite{font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;color:var(--sauge-ink);}
.partenaire__ligne{display:flex;align-items:flex-start;gap:.6rem;font-size:.9rem;color:var(--doux);line-height:1.55;}
.partenaire__ligne svg{width:15px;height:15px;flex:none;margin-top:.32em;color:var(--sable);}
.partenaire__liens{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:.7rem;padding-top:.9rem;border-top:1px solid var(--trait);}
.partenaire__liens a{font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;}

/* ====================== article ====================== */
.article-entete{text-align:center;padding-block:clamp(2.5rem,5vw,3.75rem) clamp(1.25rem,3vw,2rem);}
.article-meta{display:flex;flex-wrap:wrap;gap:.6rem 1.2rem;justify-content:center;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--doux);margin-bottom:1.25rem;}
.article-meta a{color:var(--sauge-ink);text-decoration:none;}
/* « Mis à jour le » : la correction se dit, elle ne se crie pas. Elle passe
   après la date de parution et en retrait, pour informer sans laisser croire
   que l'article a été refait. */
.article-meta__maj{font-style:italic;text-transform:none;letter-spacing:.02em;color:var(--doux);opacity:.85;}
.article-couverture{aspect-ratio:16/9;overflow:hidden;background:var(--sauge-clair);}
.article-couverture img{width:100%;height:100%;object-fit:cover;}
.article-corps{max-width:72ch;margin-inline:auto;padding-block:clamp(2.25rem,4vw,3.25rem);}
.article-corps > h2{margin-top:2.2em;}
.article-corps > h3{margin-top:1.8em;}
.article-corps figure{margin:2.25rem 0;}
.article-corps figcaption{font-size:.84rem;color:var(--doux);text-align:center;margin-top:.7rem;font-style:italic;}
.article-corps blockquote{
  margin:2.25rem 0;padding:.4rem 0 .4rem 1.6rem;
  border-left:2px solid var(--sauge);
  font-family:var(--serif);font-size:1.22rem;line-height:1.5;color:var(--encre);
}
.article-chapo{font-size:1.1rem;color:var(--doux);max-width:70ch;margin:0 auto;}

/* ====================== apparition au défilement ====================== */
[data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease);}
[data-reveal].est-visible{opacity:1;transform:none;}
@media (prefers-reduced-motion: reduce){
  [data-reveal]{opacity:1;transform:none;transition:none;}
  .logement-carte img,.guide-rubrique__photo img,.article-carte__photo img,.galerie__vignette img{transition:none;}
}

/* ====================== retour en haut ====================== */
/* Sous le bandeau cookies (z-index 300) et le tiroir (130) : il ne passe
   jamais par-dessus ce qui demande une action. */
.retour-haut{
  position:fixed;right:1.25rem;bottom:1.25rem;z-index:90;
  display:grid;place-items:center;width:48px;height:48px;border-radius:50%;
  background:var(--sauge-btn);color:#fff;
  box-shadow:0 6px 20px rgba(60,52,40,.22);
  opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity .3s ease,transform .3s ease,visibility .3s,background-color .2s ease;
}
.retour-haut svg{width:22px;height:22px;}
.retour-haut:hover{background:#6f9a7f;color:#fff;}
.retour-haut.est-visible{opacity:1;visibility:visible;transform:none;}
@media (max-width:720px){.retour-haut{right:1rem;bottom:1rem;}}
@media (prefers-reduced-motion: reduce){.retour-haut{transition:none;}}

/* ====================== bandeau cookies ====================== */
#cookie-banner{
  position:fixed;left:50%;bottom:1rem;transform:translateX(-50%);z-index:300;
  width:min(680px,calc(100% - 2rem));background:var(--papier);
  box-shadow:0 12px 40px rgba(60,52,40,.22);padding:1.4rem 1.5rem;
  font-size:.9rem;line-height:1.6;
}
#cookie-banner.hidden{display:none;}
.cookie-actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1rem;}
.cookie-accept,.cookie-refuse,.cookie-manage{
  padding:.9em 1.25rem .7em;border:0;border-radius:var(--r);cursor:pointer;line-height:1;
  font-family:var(--sans);font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;
}
.cookie-accept{background:var(--sauge-btn);color:#fff;}
.cookie-refuse{background:transparent;color:var(--texte);box-shadow:inset 0 0 0 1px var(--trait);}
.cookie-manage{background:transparent;color:var(--doux);text-decoration:underline;}

/* ====================== labels et distinctions ====================== */
/* La bande blanche au-dessus du pied de page : Écolabel, Tripadvisor,
   Booking. Trois preuves, données par des tiers, et c'est pour ça qu'elles
   pèsent : on les laisse dans leurs couleurs d'origine plutôt que de les
   redessiner à la charte, où elles perdraient leur valeur de preuve. */
.labels{background:var(--papier);padding-block:clamp(2rem,4vw,3rem);}
.labels__rangee{
  display:flex;flex-wrap:wrap;gap:1.5rem 2.25rem;
  align-items:center;justify-content:center;
}
.labels__ecolabel{width:min(260px,72vw);height:auto;}
.labels__booking{width:min(140px,40vw);height:auto;}
.labels__avis{
  display:flex;flex-direction:column;align-items:center;gap:.5rem;
  padding:.9rem 1.15rem;border-radius:var(--r);
  box-shadow:inset 0 0 0 1px var(--trait);
  font-size:.86rem;line-height:1.45;text-align:center;color:var(--doux);
  max-width:230px;
}
.labels__avis img{width:130px;height:auto;}

/* ====================== pied de page ====================== */
.pied{
  position:relative;overflow:hidden;
  background:var(--pied-fond);color:#ffffff;
  border-top:8px solid var(--pied-filet);
  padding-block:clamp(2.5rem,5vw,3.5rem) 0;
}
.pied a{color:#ffffff;}
/* Les branchages du pied d'origine. Purement décoratifs, donc masqués aux
   lecteurs d'écran et retirés sous 900px, où ils passeraient sous le texte. */
.pied__decor{position:absolute;opacity:.4;pointer-events:none;}
.pied__decor--gauche{left:2.5rem;bottom:2.5rem;width:92px;}
.pied__decor--centre{left:28%;top:2.5rem;width:120px;}
.pied__decor--droite{right:3rem;bottom:0;width:85px;}
@media (max-width:900px){.pied__decor{display:none;}}

.pied__grille{
  position:relative;z-index:1;
  display:grid;gap:2.25rem;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  align-items:center;
}
.pied__marque .nom{
  font-family:var(--sans);font-size:.92rem;letter-spacing:.2em;text-transform:uppercase;
  margin:0 0 .5rem;color:#fff;
}
.pied__marque p{font-size:.9rem;line-height:1.65;color:#fbfaf8;margin:0;}
.pied__contact{display:flex;flex-direction:column;align-items:center;gap:.9rem;text-align:center;}
.pied__contact p{margin:0;font-size:.9rem;}
.pied__tel{
  display:inline-flex;align-items:center;gap:.7rem;
  padding:.85rem 1.6rem;border-radius:999px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.55);
  text-decoration:none;font-size:1rem;letter-spacing:.06em;color:#fff;
  white-space:nowrap;transition:background .25s var(--ease);
}
.pied__tel svg{width:20px;height:20px;flex:none;}
.pied__tel:hover{background:rgba(255,255,255,.16);color:#fff;}
.pied__social{display:flex;gap:.7rem;margin-top:1.1rem;}
.pied__social a{
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.5);transition:background .25s var(--ease);
}
.pied__social a:hover{background:rgba(255,255,255,.16);}
/* Tailles réglées à l'œil (09/11/2026) : le « G » remplit son cadre, le contour Instagram non. */
.pied__social svg{width:20px;height:20px;}
.pied__social a[aria-label="Instagram"] svg{width:24px;height:24px;}
.pied__social a[aria-label="Google"] svg{width:18px;height:18px;}

.pied__reassurance{display:flex;flex-direction:column;align-items:flex-end;gap:1rem;}
.pied__plateformes{display:flex;align-items:center;gap:1.5rem;}
.pied__plateformes img{width:auto;height:auto;filter:brightness(0) invert(1);opacity:.9;}
/* Aucun des deux n'est agrandi : 62/98 pour Tripadvisor, 99/110 pour Booking. */
.plateforme--ta{width:62px;}
.plateforme--booking{width:99px;}
.pied__paiement{width:220px;height:auto;}
@media (max-width:760px){
  .pied__contact,.pied__reassurance{align-items:center;text-align:center;}
  .pied__plateformes{justify-content:center;}
}

.pied__bas{
  position:relative;z-index:1;
  margin-top:2.5rem;padding-block:1.15rem;
  border-top:1px solid rgba(255,255,255,.28);
  font-size:.78rem;letter-spacing:.06em;color:#fbfaf8;
  display:flex;flex-wrap:wrap;gap:.5rem 1rem;justify-content:space-between;
}
.pied__bas a{text-decoration:none;}
.pied__bas a:hover{text-decoration:underline;}

/* ====================== pages de contenu ====================== */
/* Texte et image côte à côte. Le sens vient de la donnée (`duo--image-texte`
   ou `duo--texte-image`) : c'est le rythme voulu par le client, une alternance
   qui empêche la page de ressembler à un formulaire. */
.duo{display:grid;gap:clamp(1.75rem,4vw,3.25rem);grid-template-columns:1fr 1fr;align-items:center;}
.duo__photo img{width:100%;height:100%;object-fit:cover;border-radius:var(--r);}
.duo__texte h2{margin-bottom:.35em;}
.duo__texte h3{font-size:clamp(1.1rem,1rem + .4vw,1.32rem);margin-top:0;}
.duo--texte-image .duo__texte{order:-1;}
@media (max-width:820px){
  .duo{grid-template-columns:1fr;}
  .duo--texte-image .duo__texte{order:0;}
}

/* Mur de photos. Deux densités : « large » jusqu'à quatre images, « dense »
   au-delà, sans quoi dix photos de jardin sortiraient en timbres-poste. */
.mur{display:grid;gap:10px;margin-top:2.25rem;}
.mur--large{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));}
.mur--dense{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));}
.mur__item{overflow:hidden;border-radius:var(--r);background:var(--sauge-clair);aspect-ratio:4/3;}
.mur__item img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease);}
.mur__item:hover img{transform:scale(1.04);}
/* La première image d'un mur dense tient deux colonnes : sans elle, dix photos
   de même taille donnent une planche-contact, pas une page. */
@media (min-width:760px){
  .mur--dense .mur__item:first-child{grid-column:span 2;grid-row:span 2;aspect-ratio:auto;}
}
.mur__item[role="button"]{cursor:zoom-in;}
.mur__item[role="button"]:focus-visible{outline:2px solid var(--sauge-ink);outline-offset:2px;}
/* Équilibre sur 4 colonnes : la grande photo (2×2) + N−1 petites laisse des trous
   si N ≡ 2 (mod 4), à partir de 10 (10 photos : deux cases vides). La DERNIÈRE passe alors en
   2×2, en bas à droite, en miroir de la première : quatre rangées pleines. Elle
   est placée juste après les cinq premières (order) pour prendre les colonnes 3-4
   des deux dernières rangées ; les autres remplissent la gauche (dense). */
@media (min-width:980px){
  .mur--dense{grid-template-columns:repeat(4,1fr);grid-auto-flow:dense;}
  .mur--dense:has(> .mur__item:first-child:nth-last-child(4n+10)) > .mur__item{order:2;}
  .mur--dense:has(> .mur__item:first-child:nth-last-child(4n+10)) > .mur__item:nth-child(-n+5),
  .mur--dense:has(> .mur__item:first-child:nth-last-child(4n+10)) > .mur__item:last-child{order:1;}
  .mur--dense:has(> .mur__item:first-child:nth-last-child(4n+10)) > .mur__item:last-child{grid-column:3 / span 2;grid-row:span 2;aspect-ratio:auto;}
}

.bande-video{background:var(--sable-fonce);color:#fff;text-align:center;}
/* photo de fond : la piscine dans la verdure, voilée pour que le texte blanc reste lisible */
.bande-video{
  background:linear-gradient(rgba(38,44,40,.55),rgba(38,44,40,.55)),
    url('../images/medias/1g2a7912-copie-web.jpg') center/cover no-repeat var(--sable-fonce);
  background:linear-gradient(rgba(38,44,40,.55),rgba(38,44,40,.55)),
    image-set(url('../images/medias/1g2a7912-copie-web.webp') type('image/webp'),url('../images/medias/1g2a7912-copie-web.jpg') type('image/jpeg')) center/cover no-repeat var(--sable-fonce);
  padding-block:clamp(5rem,12vw,9rem);
}
@media (max-width:860px){
  .bande-video{
    background:linear-gradient(rgba(38,44,40,.55),rgba(38,44,40,.55)),
      image-set(url('../images/medias/1g2a7912-copie-web-m.webp') type('image/webp'),url('../images/medias/1g2a7912-copie-web-m.jpg') type('image/jpeg')) center/cover no-repeat var(--sable-fonce);
  }
}
.bande-video h2{color:#fff;}
.bande-video p:last-child{margin-bottom:0;}

/* ====================== contact ====================== */
.contact-grille{display:grid;gap:clamp(2.25rem,5vw,4rem);grid-template-columns:1fr 1fr;align-items:start;}
@media (max-width:860px){.contact-grille{grid-template-columns:1fr;}}
.contact-bloc{font-size:1rem;line-height:1.8;}
.contact-liste{list-style:none;margin:1.5rem 0 0;padding:0;}
.contact-liste li{display:flex;align-items:flex-start;gap:.85rem;margin-bottom:.9rem;}
.contact-liste svg{width:19px;height:19px;flex:none;margin-top:.25em;color:var(--sauge);}
.contact-liste a{text-decoration:none;}
.contact-liste a:hover{text-decoration:underline;}
.contact-pratique h3{
  display:flex;align-items:center;gap:.7rem;
  font-family:var(--sans);font-size:.88rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--sauge-ink);margin:1.6rem 0 .5rem;
}
.contact-pratique h3 svg{width:20px;height:20px;flex:none;}
.contact-pratique p{font-size:.95rem;}

/* ====================== formulaire ====================== */
.formulaire{display:flex;flex-direction:column;gap:1.15rem;}
.formulaire label{
  display:flex;flex-direction:column;gap:.45rem;
  font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--doux);
}
.formulaire input,.formulaire textarea{
  font-family:var(--sans);font-size:1rem;color:var(--texte);
  padding:.8rem 1rem;border:0;border-radius:var(--r);
  background:var(--sauge-pale);box-shadow:inset 0 0 0 1px var(--trait);
  transition:box-shadow .2s;
}
.formulaire input:focus,.formulaire textarea:focus{
  outline:none;box-shadow:inset 0 0 0 2px var(--sauge);
}
.formulaire textarea{resize:vertical;min-height:150px;line-height:1.7;}
.formulaire button{align-self:flex-start;}
.formulaire button[disabled]{opacity:.6;cursor:progress;}
.formulaire__note{font-size:.82rem;color:var(--doux);margin:0;}
/* Le champ piège : hors écran, et hors du parcours clavier. `display:none`
   ne conviendrait pas, une partie des robots l'ignore. */
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.form-status{font-size:.92rem;line-height:1.6;white-space:pre-line;}
.form-status--ok{color:var(--sauge-ink);}
.form-status--error{color:#a4423f;}

/* ====================== modale vidéo ====================== */
.modale-video{
  position:fixed;inset:0;z-index:200;
  display:flex;align-items:center;justify-content:center;
  padding:clamp(1rem,4vw,3rem);
  background:rgba(32,30,27,.94);
  opacity:0;transition:opacity .28s var(--ease);
}
.modale-video.est-ouverte{opacity:1;}
.modale-video[hidden]{display:none;}
@media (prefers-reduced-motion: reduce){.modale-video{transition:none;}}
/* Le cadre occupe l'écran tout en gardant le format 16/9 : une vidéo étirée
   est pire qu'une vidéo plus petite. */
.modale-video__cadre{
  width:min(100%,calc((100vh - 6rem) * 16 / 9));
  aspect-ratio:16/9;
  background:#000;border-radius:var(--r);overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.5);
}
.modale-video__cadre iframe{width:100%;height:100%;border:0;display:block;}
.modale-video__fermer{
  position:absolute;top:clamp(1rem,3vw,2rem);right:clamp(1rem,3vw,2rem);
  width:52px;height:52px;border:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.14);color:#fff;
  display:grid;place-items:center;transition:background .2s;
}
.modale-video__fermer:hover{background:rgba(255,255,255,.28);}
.modale-video__fermer svg{width:22px;height:22px;}
/* Le triangle de lecture, dans les boutons qui ouvrent la vidéo. */
.btn[data-video] svg{width:13px;height:13px;}

/* ====================== pages légales ====================== */
/* Le starter fournit leur structure et leur contenu ; elles n'étaient tout
   simplement pas habillées ici. On les style en CSS SEULEMENT, sans copier leur
   HTML dans template/ : une copie cesserait de recevoir les corrections du
   starter, et personne ne s'en apercevrait avant qu'un défaut corrigé partout
   ailleurs ne réapparaisse sur ce site-là.

   Trois pages, une seule mise en page : c'est la convention Rhiino, et elle a
   une raison — un visiteur qui passe des mentions légales aux cookies doit
   sentir qu'il est au même endroit, pas sur trois sites. */
.legal-page{
  width:min(780px,100% - var(--pad)*2);
  margin-inline:auto;
  padding-block:clamp(2rem,5vw,3.5rem) clamp(3rem,7vw,5rem);
}
.legal-page h1{
  font-size:clamp(1.8rem,1.4rem + 1.5vw,2.6rem);
  padding-bottom:.6em;margin-bottom:1.4rem;
  border-bottom:1px solid var(--trait);
}
/* Titres de section compacts : ces pages sont une suite de rubriques courtes,
   pas un récit. Des titres de page à chaque section les ferait paraître
   trois fois plus longues qu'elles ne sont. */
.legal-page h2{
  font-family:var(--sans);
  font-size:1rem;font-weight:600;letter-spacing:.06em;
  color:var(--sauge-ink);
  margin:2.4rem 0 .6rem;
}
.legal-page h2:first-of-type{margin-top:1.6rem;}
.legal-page h3{font-size:1.05rem;margin:1.6rem 0 .4rem;}
.legal-page p,.legal-page li{font-size:.96rem;line-height:1.8;}
.legal-page ul{padding-left:1.1rem;}
.legal-page li{margin-bottom:.25rem;}
/* Pages légales longues (CGV) : paragraphes resserrés, sous-titres de section,
   puces à la couleur de la maison, adresse groupée. */
.legal-page p{margin-bottom:.65em;}
.legal-page ul{margin:.2em 0 .9em;}
.legal-page li::marker{color:var(--sauge);}
.legal-page h4{font-family:var(--serif);font-weight:500;font-size:1rem;color:var(--encre);margin:1.2rem 0 .35rem;}
.legal-page h3 + h4{margin-top:.6rem;}
.cgv-adresse{padding:.7rem 1rem;background:var(--sauge-pale);border-left:3px solid var(--sauge);border-radius:var(--r);line-height:1.6 !important;}
.legal-page a{color:var(--sauge-ink);}
.legal-page strong{color:var(--encre);}
/* Les tableaux de cookies du starter : lisibles, et qui ne débordent pas sur
   un téléphone. */
.legal-page table{width:100%;border-collapse:collapse;margin:1.2rem 0;font-size:.92rem;}
.legal-page th,.legal-page td{
  text-align:left;padding:.7rem .8rem;
  border-bottom:1px solid var(--trait);vertical-align:top;
}
.legal-page th{background:var(--sauge-pale);font-weight:600;color:var(--encre);}
.legal-page .table-scroll,.legal-page .tableau{overflow-x:auto;}

.legal-back{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--doux);text-decoration:none;font-weight:500;
  margin-bottom:1.75rem;
  transition:color .2s var(--ease);
}
.legal-back:hover{color:var(--sauge-ink);}
.legal-back svg{width:15px;height:15px;flex:none;}

/* Le bouton « Gérer mes préférences » de la page cookies. */
.legal-page button{
  font-family:var(--sans);font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;
  padding:.85em 1.4rem .7em;border:0;border-radius:var(--r);cursor:pointer;line-height:1;
  background:var(--sauge-btn);color:#fff;
  transition:background .25s var(--ease);
}
.legal-page button:hover{background:#6f9a7f;}

/* ====================== décors ======================
   Le site d'origine pose trois familles de décor, et chacune a un rôle :

   · des BOTANIQUES au trait (feuillages, fleur, silhouette de la Corse), dans
     les marges, qui rappellent le jardin sans occuper la place du contenu ;
   · des RECTANGLES de couleur à 15 % d'opacité, décalés derrière les photos :
     ils leur donnent une épaisseur et évitent qu'une image posée sur du blanc
     ait l'air découpée ;
   · une BANDE de sable derrière les cartes d'hébergement, qui les tient
     ensemble comme une étagère.

   Règles communes, et elles ne sont pas négociables : tout décor est en
   `position:absolute`, en `z-index` négatif, `pointer-events:none` et masqué
   aux lecteurs d'écran. Un décor qui capte un clic ou qui se fait lire à voix
   haute n'est plus un décor, c'est un obstacle. Et tout disparaît sous 900 px :
   sur un téléphone, la marge où ils vivent n'existe plus. */
.deco{
  position:absolute;z-index:-1;pointer-events:none;
  background-repeat:no-repeat;background-size:contain;
}
@media (max-width:900px){.deco{display:none;}}

/* --- botaniques ---
   Même leçon que pour l'île : ces fichiers sont DÉJÀ pâles (remplissage
   #efebe4 / #e6e0d9, proche du fond, et une opacité interne de 0,5 à 0,65).
   Leur ajouter une opacité CSS les effaçait. Aucune opacité de plus. */
.deco--feuilles{background-image:url('../images/decor/feuilles.svg');width:300px;height:230px;}
.deco--feuilles2{background-image:url('../images/decor/feuilles2.svg');width:195px;height:200px;}
.deco--fleur{background-image:url('../images/decor/illustration-fleur.svg');width:85px;height:186px;}
.deco--rameau{background-image:url('../images/decor/home_appart.svg');width:70px;height:311px;}
/* LA SILHOUETTE DE L'ÎLE.
   Le fichier est un TRACÉ (fill:none, stroke #dad1c1, opacité 0,495) : il porte
   déjà sa discrétion. Lui ajouter une opacité CSS le rendait invisible, et le
   masquer sous 1400 px l'effaçait partout ailleurs — il ne se voyait donc jamais.
   Ici, aucune opacité de plus, sa taille naturelle, et un débordement voulu : sur
   le site d'origine elle est COUPÉE par le bord de la page, ce qui lui donne son
   échelle. C'est la section qui la rogne (`.section--ile`), pas le navigateur :
   un débordement laissé libre ferait apparaître une barre horizontale. */
.deco--corse{background-image:url('../images/decor/corse.svg');width:669px;height:1213px;}
.deco--corse2{background-image:url('../images/decor/corse2.svg');width:840px;height:1176px;}
.section--ile{overflow:hidden;}

/* --- rectangles de couleur --- */
/* Le sauge à 15 %, comme sur le site d'origine : au-delà, le rectangle passe
   devant la photo au lieu de la porter. */
.cadre{position:relative;}
.cadre::before{
  content:'';position:absolute;z-index:-1;pointer-events:none;
  background:var(--sauge);opacity:.15;
}
.cadre--bg::before{left:-16px;bottom:-16px;width:212px;height:98px;}
.cadre--hg::before{left:-16px;top:-16px;width:163px;height:181px;}
.cadre--bd::before{right:-16px;bottom:-16px;width:163px;height:181px;}
@media (max-width:900px){.cadre::before{display:none;}}

/* --- bande de sable derrière les cartes d'hébergement --- */
.etagere{position:relative;}
.etagere::before{
  content:'';position:absolute;z-index:-1;pointer-events:none;
  left:calc(50% - 50vw);width:100vw;
  top:50%;transform:translateY(-50%);height:190px;
  background:var(--pied-filet);opacity:.5;
}
@media (max-width:900px){.etagere::before{display:none;}}

/* --- la puce en feuille des descriptifs, reprise du thème d'origine --- */
.descriptif li::before{
  content:'';position:absolute;left:0;top:.35em;
  width:16px;height:30px;border-radius:0;transform:none;
  background:url('../images/decor/puce.svg') no-repeat center / contain;
}

/* --- placement des décors, section par section ---
   Écrit ici et non en style en ligne : ces positions se règlent à l'œil, et on
   veut pouvoir toutes les retrouver au même endroit le jour où l'on en bouge
   une. Les sections qui les accueillent doivent être `position:relative`, ce
   que `.section` n'est pas par défaut. */
/* `isolation:isolate` : sans lui, un décor en z-index négatif passe SOUS le fond
   de sa section (sauge pâle, crème) et n'apparaît jamais. Avec, il se peint
   au-dessus du fond et sous le contenu, ce qui est sa place. */
.section{position:relative;isolation:isolate;}

/* Un décor par section, et jamais deux fois le même motif à la même place :
   deux feuillages identiques dans le même coin de deux sections qui se
   suivent, c'est un papier peint. On alterne côté, hauteur, taille et motif. */
#presentation .deco--feuilles{left:calc(50% - 640px);top:-40px;}
#atouts .deco--feuilles2{right:calc(50% - 660px);top:0;}
#villas .deco--feuilles{right:calc(50% - 720px);top:auto;bottom:90px;width:390px;height:299px;transform:scaleX(-1);}
#appartements .deco--rameau{left:calc(50% - 600px);bottom:60px;transform:scaleX(-1);}
/* L'île déborde très largement, et c'est le sujet : on n'en voit qu'un LISERÉ,
   la ligne de côte qui traverse la page de haut en bas. C'est ce qui lui donne
   son échelle — entière et posée dans un coin, elle ne serait qu'un pictogramme.
   Les valeurs viennent du thème d'origine : 669 × 1213 px, décalée de 540. */
#guide .deco--corse{right:-540px;top:-280px;}
#actualites .deco--corse2{left:-660px;bottom:-300px;}
/* Sous 1400 px, la marge se referme : les BOTANIQUES sortiraient de l'écran.
   L'île, elle, reste — elle est faite pour être coupée, et la section la rogne. */
/* Sous 1400 px la marge se referme : plutôt que de les cacher (un portable de
   1366 px ne les voyait jamais), les botaniques viennent se coller au bord de
   l'écran, derrière le contenu. Ils disparaissent sous 900 px, comme avant. */
@media (max-width:1400px){
  #presentation .deco--feuilles,#appartements .deco--rameau{left:0;}
  #atouts .deco--feuilles2,#villas .deco--feuilles{right:0;}
}
@media (max-width:900px){
  /* Sur un téléphone, un pan d'île de 477 px sur 400 px de large n'est plus une
     silhouette, c'est une rayure. On la retire, comme les autres décors. */
  #guide .deco--corse,#actualites .deco--corse2{display:none;}
}

/* Décors des pages intérieures. Mêmes marges que sur l'accueil, mais accrochées
   à l'en-tête de fiche et aux murs de photos, qui sont les deux respirations de
   ces pages-là. */
.fiche-entete{position:relative;}
.fiche-entete .deco--fleur{right:calc(50% - 620px);top:20px;}
.section .deco--feuilles2{right:calc(50% - 660px);top:60px;}
.section .deco--fleur{left:calc(50% - 610px);top:80px;}
@media (max-width:1400px){
  .fiche-entete .deco--fleur,.section .deco--feuilles2{right:0;}
  .section .deco--fleur{left:0;}
}

/* Positions nommées pour les pages intérieures : chaque section choisit un
   coin, un motif, éventuellement un miroir et une taille. La règle est la
   même que sur l'accueil : deux blocs qui se suivent ne montrent jamais le
   même motif au même endroit. Déclarées après les règles génériques pour
   l'emporter à spécificité égale. */
.deco.deco--hd{right:calc(50% - 660px);left:auto;top:40px;bottom:auto;}
.deco.deco--hg{left:calc(50% - 640px);right:auto;top:20px;bottom:auto;}
.deco.deco--bd{right:calc(50% - 700px);left:auto;top:auto;bottom:60px;}
.deco.deco--bg{left:calc(50% - 620px);right:auto;top:auto;bottom:60px;}
.deco.deco--miroir{transform:scaleX(-1);}
.deco.deco--grand{scale:1.3;}
.deco.deco--petit{scale:.75;}
@media (max-width:1400px){
  .deco.deco--hd,.deco.deco--bd{right:0;}
  .deco.deco--hg,.deco.deco--bg{left:0;}
}

/* --- les six atouts de l'accueil --- */
/* Deux lignes de trois (demande client du 22/09/2026) : l'auto-fit donnait
   quatre colonnes sur grand écran, donc une seconde ligne orpheline à deux. */
.grille-atouts{display:grid;gap:1.6rem 2.2rem;grid-template-columns:repeat(3,1fr);}
@media (max-width:860px){.grille-atouts{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.grille-atouts{grid-template-columns:1fr;}}
.atout h3{
  font-family:var(--sans);font-size:.92rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--sauge-ink);
  padding-bottom:.7rem;margin:0 0 .7rem;border-bottom:1px solid var(--trait);
}
.atout p{font-size:.95rem;color:var(--doux);margin:0;}

/* ====================== plan de situation (page contact) ======================
   Hauteur explicite obligatoire : sans elle, Leaflet calcule ses tuiles sur un
   conteneur de 0 px et n'affiche rien. Pas de data-reveal non plus sur le
   conteneur, son transform fausse le même calcul. */
.section--carte{padding-top:0;}
.carte{
  height:clamp(330px,50vh,500px);
  border-radius:var(--r);overflow:hidden;z-index:0;
  background:var(--sauge-clair);
  box-shadow:0 10px 34px rgba(74,74,75,.1);
}
.carte__note{
  margin:1rem auto 0;max-width:62ch;text-align:center;
  font-size:.92rem;color:var(--doux);
}
.carte__note a{color:var(--sauge-ink);}
/* Leaflet dessine ses libellés dans sa propre police ; on lui rend celle du site. */
.carte .leaflet-container{font-family:var(--sans);}
.carte .leaflet-popup-content{font-family:var(--sans);color:var(--texte);}

/* ========================= INTRO LOGO (accueil) =========================
   Le logo en plein écran à chaque chargement de l'accueil : il apparaît,
   tient un instant, puis le voile s'efface sur le site. Tout est en CSS : si
   le script de retrait ne tourne pas, l'animation rend quand même la main. */
.intro{display:none;}
.avec-intro .intro{
  display:flex;align-items:center;justify-content:center;
  position:fixed;inset:0;z-index:9999;background:var(--papier);
  animation:intro-sortie .7s ease 2.1s forwards;cursor:pointer;
}
.intro__logo{width:min(62vw,340px);height:auto;opacity:0;
  animation:intro-logo 1.1s cubic-bezier(.2,.7,.2,1) .15s forwards;}
.intro--passee{animation-delay:0s !important;animation-duration:.4s !important;}
@keyframes intro-logo{from{opacity:0;transform:scale(.94);}to{opacity:1;transform:none;}}
@keyframes intro-sortie{to{opacity:0;visibility:hidden;}}
@media (prefers-reduced-motion: reduce){
  .intro__logo{animation:intro-logo-fixe .6s ease forwards;}
  @keyframes intro-logo-fixe{to{opacity:1;}}
}

/* logo au-dessus du texte de présentation */
.presentation__logo{display:block;width:min(52vw,200px);height:auto;margin:0 auto 1.75rem;}


/* ==========================================================================
   Socle des modules Blog et Réalisations.
   --------------------------------------------------------------------------
   CE FICHIER N'EST PAS COPIÉ TEL QUEL : gen-site.js l'AJOUTE à la feuille finale,
   APRÈS l'éventuelle feuille propre au client.

   Pourquoi : un site à charte sur mesure remplace css/style.css par la sienne.
   Tant que ce socle vivait dedans, il disparaissait avec — les pages des modules
   se retrouvaient sans mise en page, et seules subsistaient les retouches du
   client, qui ajustaient des règles absentes. Le sortir d'ici garantit que le
   fonctionnement visuel des modules survit à n'importe quelle charte.

   Ordre d'assemblage : style.css du client · CE SOCLE · template/css/modules.css
   ========================================================================== */

/* ============================ BLOG ============================ */
.blog-list h1, .blog-article h1 { margin-bottom: .5rem; }
.blog-list__intro { color: var(--c-muted); margin-bottom: 2rem; }
.blog-fil { font-size: .85rem; color: var(--c-muted); margin-bottom: 1.2rem; }

.blog-themes { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2.5rem; }
.blog-theme {
  padding: .38rem .9rem; border-radius: 999px; font-size: .88rem; font-weight: 600;
  border: 1px solid rgba(0,0,0,.12); color: var(--c-muted); text-decoration: none; transition: .18s ease;
}
.blog-theme:hover { border-color: var(--c-accent); color: var(--c-text); }
.blog-theme.is-active { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }

.blog-grid { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.blog-card { flex: 0 0 calc((100% - 3rem) / 3); min-width: 260px; }
.blog-card__link {
  display: flex; flex-direction: column; height: 100%; overflow: hidden;
  background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: 12px;
  color: inherit; text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.blog-card__link:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(0,0,0,.09); border-color: var(--c-accent); }
.blog-card__cover { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: rgba(0,0,0,.04); }
/* <picture> est en ligne par défaut : sans ce display:block, il ne remplit pas le
   cadre, l'image garde ses proportions naturelles et laisse une bande grise. */
.blog-card__cover picture { display: block; width: 100%; height: 100%; }
.blog-card__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blog-card__body { display: flex; flex-direction: column; gap: .55rem; padding: 1.4rem; flex: 1; }
.blog-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; font-size: .82rem; color: var(--c-muted); }
.blog-card__cat {
  padding: .18rem .6rem; border-radius: 999px; font-weight: 600; font-size: .74rem;
  letter-spacing: .02em; text-transform: uppercase; text-decoration: none;
  background: var(--c-accent-soft, rgba(0,0,0,.05)); color: var(--c-accent-ink, inherit);
}
.blog-card__title { font-family: var(--f-head, inherit); font-weight: 600; font-size: 1.15rem; line-height: 1.3; }
.blog-card__chapo { color: var(--c-muted); font-size: .95rem; flex: 1; }
.blog-card__more { font-weight: 600; font-size: .9rem; color: var(--c-accent-ink, var(--c-primary)); }

/* Article */
.blog-article .container { max-width: 46rem; }
.blog-article__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; font-size: .85rem; color: var(--c-muted); margin-bottom: .7rem; }
/* « Mis à jour le » : la correction se dit, elle ne se crie pas. Elle passe
   après la date de parution et en retrait, pour informer sans laisser croire
   que l'article a été refait. */
.blog-article__maj { font-style: italic; opacity: .8; }
.blog-article__chapo { font-size: 1.12rem; line-height: 1.6; color: var(--c-muted); margin-bottom: 2rem; }
.blog-article__cover { display: block; margin: 0 0 2.2rem; }
.blog-article__cover img { width: 100%; height: auto; border-radius: 12px; }
.blog-article__cover-credit { margin: -1.8rem 0 2.2rem; }

.blog-sommaire { margin: 0 0 1.6rem; padding: 1.1rem 1.4rem; background: rgba(0,0,0,.03); border-radius: 10px; }
.blog-sommaire p { font-weight: 600; font-size: .85rem; text-transform: uppercase; letter-spacing: .03em; color: var(--c-muted); margin-bottom: .5rem; }
.blog-sommaire ul { list-style: none; padding: 0; margin: 0; }
.blog-sommaire li + li { margin-top: .3rem; }
/* Titres du sommaire : une puce devant, jamais soulignés (un site restyle la puce dans sa feuille). */
.blog-sommaire li { position: relative; padding-left: 1.1rem; }
.blog-sommaire li::before { content: ""; position: absolute; left: 0; top: .62em; width: .42rem; height: .42rem; border-radius: 50%; background: var(--c-accent); }
.blog-sommaire a { text-decoration: none; color: inherit; }
.blog-sommaire a:hover, .blog-sommaire a:focus-visible { color: var(--c-primary); }

.blog-article__corps > * + * { margin-top: 1.15rem; }
.blog-article__corps h2 { font-size: 1.4rem; margin-top: 2.4rem; scroll-margin-top: 5rem; }
.blog-article__corps h3 { font-size: 1.12rem; margin-top: 1.8rem; }
.blog-article__corps h4 { font-family: var(--font-head, inherit); font-size: 1rem; line-height: 1.3; margin-top: 1.5rem; }
.blog-article__corps ul { padding-left: 1.2rem; }
.blog-article__corps li + li { margin-top: .4rem; }
.blog-article__corps blockquote {
  margin: 2rem 0; padding: 1.1rem 1.4rem; border-left: 3px solid var(--c-accent);
  background: rgba(0,0,0,.03); border-radius: 0 8px 8px 0;
}
.blog-article__corps blockquote p { margin: 0; font-style: italic; }
.blog-article__corps blockquote cite { display: block; margin-top: .6rem; font-size: .88rem; font-style: normal; color: var(--c-muted); }
.blog-figure { margin: 2rem 0; }
.blog-figure img { width: 100%; height: auto; border-radius: 10px; display: block; }
.blog-figure figcaption { margin-top: .5rem; font-size: .86rem; color: var(--c-muted); }
.blog-cta { margin: 2.4rem 0; padding: 1.6rem; background: var(--c-primary); color: #fff; border-radius: 12px; text-align: center; }
.blog-cta p { margin-bottom: 1rem; font-size: 1.05rem; }

.blog-faq { margin-top: 3rem; }
.blog-faq h2 { scroll-margin-top: 5rem; }
.blog-faq__item { border-bottom: 1px solid rgba(0,0,0,.08); padding: 1rem 0; }
.blog-faq__item summary { cursor: pointer; font-weight: 600; list-style: none; }
.blog-faq__item summary::-webkit-details-marker { display: none; }
.blog-faq__item summary::after { content: "+"; float: right; color: var(--c-muted); }
.blog-faq__item[open] summary::after { content: "–"; }
.blog-faq__item > div { margin-top: .7rem; color: var(--c-muted); }

.blog-article__retour { display: inline-block; margin-top: 3rem; font-weight: 600; }

@media (max-width: 980px) { .blog-card { flex: 0 0 calc((100% - 1.5rem) / 2); } }
@media (max-width: 620px) { .blog-card { flex: 0 0 100%; } }
.blog-home__tous { margin-top: 2.2rem; text-align: center; }

/* Article : colonne de lecture + colonne latérale (sommaire puis partage) */
.blog-article .container { max-width: 68rem; }
.blog-article__grille { display: block; }
.blog-article__lecture { max-width: 46rem; margin: 0 auto; }
/* L'en-tête vit DANS la colonne de lecture : hors d'elle, il resterait centré
   sur la page pendant que le texte est décalé par le sommaire, et les deux ne
   s'aligneraient pas. */

.blog-partage { padding: 1.1rem 1.4rem; background: rgba(0,0,0,.03); border-radius: 10px; }
.blog-partage__titre { display: block; font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--c-muted); margin-bottom: .7rem; }
.blog-partage__liens { display: flex; flex-wrap: wrap; gap: .5rem; }
.blog-partage__liens > * {
  width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid rgba(0,0,0,.1); border-radius: 8px; cursor: pointer;
  color: var(--c-muted); transition: .18s ease; padding: 0;
}
.blog-partage__liens > *:hover { border-color: var(--c-accent); color: var(--c-primary); transform: translateY(-2px); }
.blog-partage__liens svg { width: 17px; height: 17px; fill: currentColor; }
.blog-partage__copie.copie { border-color: var(--c-accent); color: var(--c-primary); }
.blog-partage__copie.copie::after {
  content: "Lien copié"; position: absolute; margin-top: -3.2rem; padding: .3rem .6rem;
  font-size: .78rem; white-space: nowrap; background: var(--c-primary); color: #fff; border-radius: 6px;
}

/* Mobile et tablette : le sommaire est sous la photo à la une (déplacé par le script de l'article),
   le partage est une barre fixée en bas de l'écran ; le bas de page lui laisse la place. */
@media (max-width: 1079px) {
  .blog-article__lecture > .blog-sommaire { margin: 0 0 2rem; }
  .blog-partage--article { position: fixed; left: 0; right: 0; bottom: 0; z-index: 300; margin: 0;
    display: flex; align-items: center; justify-content: center; gap: .9rem;
    padding: .55rem 1rem calc(.55rem + env(safe-area-inset-bottom, 0px));
    background: var(--c-bg, #fff); border-radius: 0; border-top: 1px solid rgba(0,0,0,.1); box-shadow: 0 -6px 18px rgba(0,0,0,.08); }
  .blog-partage--article .blog-partage__titre { margin: 0; }
  .blog-partage--article .blog-partage__liens { flex-wrap: nowrap; }
  .a-partage-fixe body { padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px)); }
}

@media (min-width: 1080px) {
  .blog-article__grille { display: grid; grid-template-columns: 15rem minmax(0, 46rem); gap: 3rem; justify-content: center; align-items: start; }
  .blog-article__lecture { margin: 0; max-width: none; }
  .blog-cote { position: sticky; top: 6rem; display: flex; flex-direction: column; gap: 1rem; }
  .blog-cote .blog-sommaire { margin: 0; background: transparent; border-left: 2px solid rgba(0,0,0,.12); border-radius: 0; padding: .2rem 0 .2rem 1.1rem; }
  .blog-cote .blog-partage { background: transparent; padding: .2rem 0 .2rem 1.1rem; border-left: 2px solid rgba(0,0,0,.12); }
  /* Sans sommaire, la colonne n'a qu'un bloc : on la garde alignée en haut. */
  .blog-cote[data-sans-sommaire] { padding-top: .2rem; }
}

/* ============================ PORTFOLIO ============================ */
/* Grille et non flex : avec des bases en calc((100% - 2 × écart) / 3), changer
   l'écart depuis la feuille d'un client faisait retomber la grille à deux
   colonnes sans que rien ne le signale. */
.projets-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.8rem; }
.projets-grille--home { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Texte SEO des pages d'accueil blog / portfolio / guide (réglé dans le manager). */
/* Texte de présentation sous la liste (blog, rubrique) : séparé des cartes par un filet, en deux colonnes
   sur grand écran pour occuper la largeur au lieu d'un bloc étroit collé à gauche, plus discret que le
   contenu (c'est un texte d'appoint, écrit pour Google autant que pour le lecteur). 28/10/2026. */
.hub-texte-seo { margin: clamp(3rem, 6vw, 5rem) 0 0; padding-top: clamp(1.75rem, 3vw, 2.5rem); border-top: 1px solid rgba(0,0,0,.1);
  columns: 2 22rem; column-gap: clamp(2rem, 5vw, 4rem); font-size: .95rem; line-height: 1.75; color: var(--c-muted); }
.hub-texte-seo p { margin: 0 0 1rem; break-inside: avoid; }
.hub-texte-seo > p:first-child { color: var(--c-text); font-size: 1.05rem; }
.hub-texte-seo h2, .hub-texte-seo h3 { column-span: all; margin: 0 0 1rem; color: var(--c-text); }
.hub-texte-seo ul, .hub-texte-seo ol { margin: 0 0 1rem 1.2rem; break-inside: avoid; }
.hub-texte-seo a { color: var(--c-accent-ink, var(--c-accent)); }
/* Page d'une catégorie : accroche sous le titre, texte SEO sous la grille (réglés dans le manager). */
.projets-categorie__accroche { max-width: 70ch; margin: -.4rem 0 1.8rem; color: var(--c-muted); font-size: 1.05rem; line-height: 1.6; }
.projets-categorie__texte { max-width: 70ch; margin: 3rem 0 0; line-height: 1.7; }
.projets-categorie__texte p { margin: 0 0 1rem; }
.projets-categorie__texte ul, .projets-categorie__texte ol { margin: 0 0 1rem 1.2rem; }
.projet-carte { min-width: 0; }
.projet-carte__lien {
  display: flex; flex-direction: column; height: 100%; overflow: hidden;
  border-radius: 12px; color: inherit; text-decoration: none; transition: .2s ease;
}
.projet-carte__lien:hover { transform: translateY(-3px); }
.projet-carte__image { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: rgba(0,0,0,.05); border-radius: 12px; }
.projet-carte__image picture { display: block; width: 100%; height: 100%; }
.projet-carte__image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.projet-carte__lien:hover .projet-carte__image img { transform: scale(1.04); }
.projet-carte__corps { display: flex; flex-direction: column; gap: .35rem; padding: 1rem .2rem 0; }
.projet-carte__cat {
  align-self: flex-start; padding: .18rem .6rem; border-radius: 999px; text-decoration: none;
  font-size: .72rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase;
  background: var(--c-accent-soft, rgba(0,0,0,.05)); color: var(--c-accent-ink, inherit);
}
.projet-carte__titre { font-family: var(--f-head, inherit); font-weight: 600; font-size: 1.15rem; line-height: 1.3; }
.projet-carte__chapo { color: var(--c-muted); font-size: .95rem; }

/* Fiche projet */
.projet .container { max-width: 68rem; }
.projet__hero { display: block; margin-bottom: 2.4rem; }
.projet__hero img { width: 100%; height: auto; border-radius: 12px; }
.projet__grille { display: block; }
.projet__chapo { font-size: 1.12rem; line-height: 1.6; color: var(--c-muted); margin-bottom: 1.6rem; }
.projet__descriptif > * + * { margin-top: 1.15rem; }
.projet__descriptif h2 { font-size: 1.35rem; margin-top: 2rem; }
.projet__descriptif ul, .projet__descriptif ol { padding-left: 1.2rem; }

.projet-fiche { margin: 0 0 1.6rem; }
.projet-fiche__ligne { display: flex; flex-wrap: wrap; gap: .3rem 1rem; padding: .7rem 0; border-top: 1px solid rgba(0,0,0,.08); }
.projet-fiche__ligne:first-child { border-top: none; }
.projet-fiche dt { flex: 0 0 100%; font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--c-muted); }
.projet-fiche dd { font-size: .98rem; }

.projet-galerie { display: flex; flex-wrap: wrap; gap: 1rem; margin: 3rem 0 0; }
.projet-galerie__item { flex: 0 0 calc((100% - 2rem) / 3); min-width: 240px; margin: 0; }
/* Toutes les vignettes au même format : une grille de photos aux hauteurs
   différentes se lit comme un désordre, alors que le travail montré ne l'est pas.
   La photo entière, non recadrée, est servie à l'agrandissement. */
.projet-galerie__voir {
  display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in;
  border-radius: 10px; overflow: hidden;
}
.projet-galerie__voir picture { display: block; width: 100%; }
.projet-galerie__item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; transition: transform .4s ease; }
.projet-galerie__voir:hover img { transform: scale(1.04); }
.projet-galerie__item figcaption { margin-top: .4rem; font-size: .84rem; color: var(--c-muted); }

@media (min-width: 1080px) {
  .projet__grille { display: grid; grid-template-columns: minmax(0, 1fr) 17rem; gap: 3rem; align-items: start; }
  .projet__cote { position: sticky; top: 6rem; display: flex; flex-direction: column; gap: 1.2rem; }
}
@media (max-width: 980px) {
  .projets-grille, .projets-grille--home { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .projet-galerie__item { flex: 0 0 calc((100% - 1rem) / 2); }
}
@media (max-width: 620px) {
  .projets-grille, .projets-grille--home { grid-template-columns: 1fr; }
  .projet-galerie__item { flex: 0 0 100%; }
}

/* Agrandissement d'une photo de galerie */
.lightbox {
  position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center;
  gap: 1rem; padding: 1.5rem; background: rgba(15,15,15,.94);
}
.lightbox[hidden] { display: none; }
.lightbox__cadre { margin: 0; max-width: min(92vw, 1400px); max-height: 88vh; display: flex; flex-direction: column; gap: .8rem; }
.lightbox__cadre img { max-width: 100%; max-height: 78vh; width: auto; height: auto; object-fit: contain; border-radius: 6px; display: block; margin: 0 auto; }
.lightbox__cadre figcaption { color: rgba(255,255,255,.8); font-size: .9rem; text-align: center; }
.lightbox__cadre figcaption[hidden] { display: none; }
.lightbox__cadre .lightbox__credit { margin: -.4rem 0 0; text-align: center; color: rgba(255,255,255,.6); }
.lightbox__cadre .lightbox__credit[hidden] { display: none; }
.lightbox__nav, .lightbox__fermer {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.1); color: #fff; border: 0; cursor: pointer; transition: background .18s ease;
}
.lightbox__nav { width: 48px; height: 48px; border-radius: 50%; font-size: 2rem; line-height: 1; }
.lightbox__nav:hover, .lightbox__fermer:hover { background: rgba(255,255,255,.22); }
.lightbox__fermer { position: absolute; top: 1rem; right: 1rem; width: 42px; height: 42px; border-radius: 50%; font-size: 1.7rem; line-height: 1; }
.lightbox__compteur { position: absolute; bottom: 1.2rem; left: 0; right: 0; text-align: center; color: rgba(255,255,255,.65); font-size: .85rem; }
@media (max-width: 720px) {
  .lightbox { padding: .8rem; gap: .4rem; }
  .lightbox__nav { width: 40px; height: 40px; font-size: 1.6rem; }
  .lightbox__cadre img { max-height: 70vh; }
}

/* Lien de carte projet : présent dans le flux, pas seulement au survol. */
.projet-carte__more { font-weight: 600; font-size: .9rem; color: var(--c-accent-ink, var(--c-primary)); }

/* Message affiché quand un filtre ne laisse rien. */
.filtre-vide { margin-top: 2rem; text-align: center; color: var(--c-muted); }

/* ===================== MODULE GUIDE (partenaires par rubrique) ===================== */
/* Socle neutre : structure et rythme. La charte du site (couleurs, polices)
   s'applique par les variables et par template/css/modules.css du client. */
.guide-hub__intro{max-width:70ch;margin:0 auto 2.5rem;text-align:center;}
.guide-hub__surtitre{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;opacity:.7;margin:0 0 .5rem;}
.guide-hub__texte{opacity:.85;margin:.75rem 0 0;}
.guide-section__titre{text-align:center;margin:0 0 1.75rem;}
.guide-rubriques{display:grid;gap:2rem 2.4rem;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));}
.guide-rubrique{display:flex;flex-direction:column;gap:.9rem;}
.guide-rubrique__photo{display:block;aspect-ratio:4/3;overflow:hidden;border-radius:var(--r,8px);background:rgba(0,0,0,.05);}
.guide-rubrique__photo img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease;}
.guide-rubrique:hover .guide-rubrique__photo img{transform:scale(1.05);}
.guide-rubrique__titre{margin:0;font-size:1.3rem;}
.guide-rubrique__titre a{text-decoration:none;color:inherit;}
.guide-rubrique__texte{margin:0;opacity:.85;}
.guide-rubrique__plus{margin-top:auto;font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;}
.guide-rubrique-page__intro{max-width:70ch;margin:0 auto;}
.grille-partenaires{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));}
/* Page unique du guide (content.guide_page_unique) : pastilles de filtre par rubrique */
.guide-filtres{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;margin:0 0 2rem;}
.guide-filtres[hidden],.guide-liste__item[hidden]{display:none;}
.guide-filtre{font:inherit;font-size:.92rem;padding:.55rem 1.1rem;border:1px solid rgba(0,0,0,.18);border-radius:999px;background:transparent;color:inherit;cursor:pointer;transition:background .2s,border-color .2s,color .2s;}
.guide-filtre:hover{border-color:var(--c-accent);}
.guide-filtre[aria-pressed="true"]{background:var(--c-primary);border-color:var(--c-primary);color:var(--c-on-primary,#fff);}
.guide-liste__item{display:flex;}
.guide-liste__item>.partenaire{flex:1;}
.partenaire{display:flex;flex-direction:column;gap:.45rem;padding:1.5rem;border-radius:var(--r,8px);box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);background:#fff;}
.partenaire__photo{display:block;aspect-ratio:3/2;overflow:hidden;border-radius:calc(var(--r,8px) - 2px);margin:-.5rem -.5rem .5rem;}
.partenaire__photo img{width:100%;height:100%;object-fit:cover;}
.partenaire__nom{font-size:1.15rem;margin:0;}
.partenaire__activite{font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;opacity:.75;margin:0;}
.partenaire__texte{font-size:.92rem;margin:.2rem 0 0;}
.partenaire__ligne{display:flex;align-items:flex-start;gap:.6rem;font-size:.9rem;line-height:1.55;opacity:.85;margin:0;}
.partenaire__ligne svg{width:15px;height:15px;flex:none;margin-top:.32em;}
.partenaire__liens{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:.7rem;padding-top:.9rem;border-top:1px solid rgba(0,0,0,.08);}
.partenaire__liens a{font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;}
.guide-carte{height:clamp(330px,50vh,500px);border-radius:var(--r,8px);overflow:hidden;z-index:0;margin:0 0 2rem;background:rgba(0,0,0,.05);}
.guide-carte .leaflet-container{font-family:inherit;}
.guide-carte__activite{font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;opacity:.75;}
@media (max-width:720px){.guide-carte{height:300px;}}
/* Crédit d'une photo de contenu (credit-photo.js) : sous la photo, discret ; le lien s'ouvre dans un nouvel onglet. */
.credit-photo { display: block; margin-top: .25rem; font-size: .78rem; letter-spacing: .02em; color: var(--c-muted); }
.credit-photo a { color: inherit; text-decoration: none; }
.credit-photo a:hover { text-decoration: underline; text-underline-offset: 3px; }
.blog-figure figcaption .credit-photo:first-child { margin-top: 0; }


/* ==========================================================================
   Bloc Avis clients (tools/avis.js) : onglets par plateforme, note globale,
   slider d'avis (Google, Booking, Tripadvisor, Airbnb).
   AJOUTÉ à la feuille finale par gen-site.js, seulement si le site a des avis à montrer.
   Couleurs : les jetons du site (--c-*), avec repli neutre pour un gabarit sur mesure.
   Retouches du client : template/css/modules.css, comme les autres modules.
   ========================================================================== */
.avis-g { --par: 4; --ecart: 1rem; --note: 5; --avis-fond: var(--c-surface, #fff); --avis-trait: rgba(0, 0, 0, .1);
  --avis-doux: var(--c-muted, #6b6b6b); --avis-or: #f2b01e; display: flex; flex-direction: column; gap: 1.1rem; color: var(--c-text, #1c1c1c); }
@media (max-width: 1180px) { .avis-g { --par: 3; } }
@media (max-width: 900px) { .avis-g { --par: 2; } }
@media (max-width: 600px) { .avis-g { --par: 1; } }

/* En-tête : panneau blanc, onglets puis note globale et bouton */
.avis-g__tete { background: var(--avis-fond); border-radius: 4px; padding: 0 1.3rem; }
.avis-g__onglets { display: flex; gap: .25rem 1.6rem; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--avis-trait); }
.avis-g__onglets::-webkit-scrollbar { display: none; }
.avis-g__onglets button { display: inline-flex; align-items: center; gap: .45rem; flex: 0 0 auto; padding: 1rem 0 .85rem; border: 0;
  border-bottom: 2px solid transparent; margin-bottom: -1px; background: none; font: inherit; font-size: .95rem; color: inherit; cursor: pointer; }
.avis-g__onglets button[aria-selected="true"] { border-bottom-color: currentColor; font-weight: 500; }
.avis-g__onglets button:hover { border-bottom-color: var(--avis-trait); }
.avis-g__onglets button[aria-selected="true"]:hover { border-bottom-color: currentColor; }
.avis-g__ligne { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem; padding: 1rem 0; }
.avis-g__resume { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; margin: 0; }
.avis-g__resume[hidden] { display: none; }
.avis-g__resume strong { font-weight: 700; }
.avis-g__resume .avis-g__etoiles { font-size: 1.3rem; }
.avis-g__moyenne { font-weight: 600; }
.avis-g__sep { color: var(--avis-doux); }
.avis-g__total { font-weight: 600; }
.avis-g__ecrire { display: inline-block; padding: .5rem 1.1rem; border: 1px solid currentColor; border-radius: 4px; color: inherit;
  font-size: .9rem; text-decoration: none; white-space: nowrap; }
.avis-g__ecrire:hover { background: rgba(0, 0, 0, .04); }
/* Étoiles pleines au prorata de la note (4,7 → 94 %), sans image. Booking : bleu. */
.avis-g__etoiles { --pct: calc(var(--note) / 5 * 100%); display: inline-block; font-size: 1.1rem; letter-spacing: .06em; line-height: 1;
  background: linear-gradient(90deg, var(--avis-or) var(--pct), #d3d3d3 var(--pct)); -webkit-background-clip: text; background-clip: text;
  color: transparent; }
.avis-g__carte[data-source="booking"] .avis-g__etoiles { --avis-or: #003580; }

/* Slider : la fenêtre masque, la piste glisse d'une page de --par cartes. Sans
   JavaScript (pas de .is-slider), la fenêtre défile au doigt, barre masquée. */
.avis-g__slider { position: relative; }
.avis-g__fenetre { overflow-x: auto; scrollbar-width: none; }
.avis-g__fenetre::-webkit-scrollbar { display: none; }
.avis-g.is-slider .avis-g__fenetre { overflow: hidden; touch-action: pan-y; }
.avis-g__piste { list-style: none; margin: 0; padding: 0; display: flex; align-items: stretch; gap: var(--ecart); transition: transform .45s ease; }
.avis-g__carte { flex: 0 0 calc((100% - (var(--par) - 1) * var(--ecart)) / var(--par)); min-width: 0; display: flex; flex-direction: column;
  gap: .55rem; padding: 1.3rem 1.3rem 1.2rem; background: var(--avis-fond); border-radius: 8px; text-align: left; user-select: none; }
.avis-g__carte[hidden] { display: none; }
.avis-g__carte p { margin: 0; }
.avis-g__auteur { display: flex; align-items: center; gap: .75rem; }
.avis-g__auteur > span:nth-child(2) { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.3; }
.avis-g__auteur strong { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avis-g__auteur time { font-size: .8rem; color: var(--avis-doux); }
.avis-g__initiale { flex: 0 0 auto; width: 2.5rem; height: 2.5rem; border-radius: 50%; display: grid; place-items: center;
  font-size: 1.15rem; color: #fff; }
.avis-g__logo { flex: 0 0 auto; display: inline-flex; align-self: flex-start; }
.avis-g__note { display: flex; align-items: center; gap: .35rem; }
.avis-g__note > span[title] { display: inline-flex; }
.avis-g__titre { font-weight: 600; }
.avis-g__texte { font-size: .93rem; line-height: 1.55; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; }
.avis-g__texte p + p { margin-top: .6em; }
.avis-g__carte.is-ouvert .avis-g__texte { -webkit-line-clamp: unset; display: block; }
.avis-g__texte[hidden] { display: none !important; }
.avis-g__humeur { vertical-align: -2px; margin-right: .35em; }
.avis-g__humeur--plus { color: #2e9e5b; }
.avis-g__humeur--moins { color: var(--avis-doux); }
.avis-g__actions { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem 1rem; margin-top: auto; padding-top: .2rem; font-size: .82rem; }
.avis-g__traduit { color: var(--avis-doux); }
.avis-g__suite, .avis-g__bascule { padding: 0; border: 0; background: none; font: inherit; color: var(--avis-doux); cursor: pointer; }
.avis-g__suite:hover, .avis-g__bascule:hover { text-decoration: underline; }
.avis-g__bascule { text-decoration: underline; text-underline-offset: 2px; }
.avis-g__reponse { display: none; padding: .7rem .85rem; border-left: 3px solid var(--c-accent, var(--avis-trait));
  background: rgba(0, 0, 0, .03); font-size: .86rem; line-height: 1.5; }
.avis-g__carte.is-ouvert .avis-g__reponse { display: block; }
.avis-g__reponse strong { display: block; margin-bottom: .25rem; font-size: .8rem; }
.avis-g__reponse p + p { margin-top: .4em; }

/* Flèches de part et d'autre, points sous le slider */
.avis-g__nav { position: absolute; top: calc(50% - 1.25rem); z-index: 1; width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 0;
  background: var(--avis-fond); color: var(--c-accent-ink, var(--c-text, #1c1c1c)); font-size: 1.6rem; line-height: 1; cursor: pointer;
  box-shadow: 0 1px 6px rgba(0, 0, 0, .12); transition: opacity .2s; }
.avis-g__nav:disabled { opacity: 0; pointer-events: none; }
.avis-g__nav--prec { left: -1.25rem; }
.avis-g__nav--suiv { right: -1.25rem; }
.avis-g__points[hidden] { display: none; }
/* Moins d'avis qu'une page : centrés */
.avis-g.is-peu .avis-g__piste { justify-content: center; }
.avis-g__points { display: flex; justify-content: center; flex-wrap: wrap; gap: .5rem; }
.avis-g__point { width: .55rem; height: .55rem; padding: 0; border: 0; border-radius: 50%; background: var(--avis-trait); cursor: pointer;
  transition: background .2s, transform .2s; }
.avis-g__compteur { font-size: .85rem; color: var(--avis-doux); font-variant-numeric: tabular-nums; }
.avis-g__point[aria-current="true"] { background: var(--c-text, #333); transform: scale(1.25); }
.avis-g__nav:focus-visible, .avis-g__suite:focus-visible, .avis-g__bascule:focus-visible, .avis-g__point:focus-visible,
.avis-g__onglets button:focus-visible, .avis-g__ecrire:focus-visible { outline: 2px solid var(--c-accent-ink, currentColor); outline-offset: 2px; }
@media (max-width: 600px) {
  .avis-g__tete { padding: 0 1rem; }
  /* Mobile : flèches posées sur les bords de la carte, en plus du glisser */
  .avis-g__nav { width: 2.1rem; height: 2.1rem; font-size: 1.3rem; }
  .avis-g__nav--prec { left: -1rem; }
  .avis-g__nav--suiv { right: -1rem; }
}
@media (prefers-reduced-motion: reduce) { .avis-g__piste { transition: none; } }


/* ==========================================================================
   Bloc Flux Instagram (tools/instagram.js) : en-tête du compte, puis slider ou
   galerie de posts. Images servies par le site (images/instagram/).
   AJOUTÉ à la feuille finale par gen-site.js, seulement si le site a des posts à montrer.
   Réglages de l'onglet Instagram du manager, posés en variables sur .ig-flux :
   --ig-col (vignettes par ligne sur grand écran), --ig-ratio (format des vignettes).
   Couleurs : les jetons du site (--c-*), avec repli neutre pour un gabarit sur mesure.
   Retouches du client : template/css/modules.css, comme les autres modules.
   ========================================================================== */
.ig-flux { --ig-col: 3; --ig-max: 99; --ig-ratio: 4 / 5; --ecart: .65rem; --par: min(var(--ig-col), var(--ig-max));
  display: flex; flex-direction: column; gap: 1.6rem; color: var(--c-text, #1c1c1c); }
@media (max-width: 1180px) { .ig-flux { --ig-max: 4; } }
@media (max-width: 900px) { .ig-flux { --ig-max: 3; } .ig-flux--slider { --ig-max: 2; } }
@media (max-width: 600px) { .ig-flux { --ig-max: 2; --ecart: .4rem; } .ig-flux--slider { --ig-max: 1; } }
.ig-flux .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* En-tête : profil, chiffres, bouton Suivre, centrés sur une ligne */
.ig-flux__tete { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .9rem 2rem; }
.ig-flux__profil { display: inline-flex; align-items: center; gap: .8rem; color: inherit; text-decoration: none; }
.ig-flux__avatar { flex: 0 0 auto; width: 3.5rem; height: 3.5rem; border-radius: 50%; object-fit: cover; padding: 2px; border: 2px solid transparent;
  background: linear-gradient(var(--c-bg, #fff), var(--c-bg, #fff)) padding-box, linear-gradient(45deg, #f9ce34, #ee2a7b 55%, #6228d7) border-box; }
.ig-flux__avatar--vide { display: inline-grid; place-items: center; }
.ig-flux__nom { display: flex; flex-direction: column; line-height: 1.35; text-align: left; }
.ig-flux__nom strong { font-weight: 600; }
.ig-flux__nom span { font-size: .85rem; color: var(--c-muted, #6b6b6b); }
.ig-flux__chiffres { display: inline-flex; gap: 1.4rem; }
.ig-flux__chiffres:empty { display: none; }
.ig-flux__chiffre { display: flex; flex-direction: column; align-items: center; font-size: .85rem; line-height: 1.35; color: var(--c-muted, #6b6b6b); }
.ig-flux__chiffre strong { font-weight: 600; color: var(--c-text, #1c1c1c); font-size: .95rem; }
.ig-flux__suivre { display: inline-flex; align-items: center; gap: .5rem; padding: .55rem 1.1rem; border-radius: 6px;
  background: var(--c-accent, #1c1c1c); color: var(--c-on-accent, #fff); font-size: .9rem; text-decoration: none; transition: filter .2s; }
.ig-flux__suivre:hover { filter: brightness(.92); }

/* Vignette : format imposé (object-fit), légende au survol, picto vidéo / carrousel */
.ig-flux__post { position: relative; min-width: 0; margin: 0; }
.ig-flux__post a { position: relative; display: block; aspect-ratio: var(--ig-ratio); overflow: hidden; background: rgba(0, 0, 0, .06); color: #fff; }
.ig-flux__post img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; -webkit-user-drag: none; user-select: none; }
.ig-flux__type { position: absolute; top: .55rem; right: .55rem; display: inline-flex; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .45)); }
.ig-flux__legende { position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 1rem; font-size: .85rem; line-height: 1.45;
  background: linear-gradient(transparent 35%, rgba(0, 0, 0, .7)); opacity: 0; transition: opacity .3s; }
.ig-flux__post a:hover img, .ig-flux__post a:focus-visible img { transform: scale(1.04); }
.ig-flux__post a:hover .ig-flux__legende, .ig-flux__post a:focus-visible .ig-flux__legende { opacity: 1; }
@media (hover: none) { .ig-flux__legende { display: none; } }

/* Galerie : une grille de --par colonnes */
.ig-flux__grille { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--par), minmax(0, 1fr)); gap: var(--ecart); }

/* Slider : la fenêtre masque, la piste glisse d'une page de --par vignettes. Sans
   JavaScript (pas de .is-slider), la fenêtre défile au doigt, barre masquée. */
.ig-flux__slider { position: relative; }
.ig-flux__fenetre { overflow-x: auto; scrollbar-width: none; }
.ig-flux__fenetre::-webkit-scrollbar { display: none; }
.ig-flux.is-slider .ig-flux__fenetre { overflow: hidden; touch-action: pan-y; }
.ig-flux__piste { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--ecart); transition: transform .45s ease; }
.ig-flux__piste .ig-flux__post { flex: 0 0 calc((100% - (var(--par) - 1) * var(--ecart)) / var(--par)); }
.ig-flux__nav { position: absolute; top: calc(50% - 1.25rem); z-index: 1; width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 0;
  background: var(--c-surface, #fff); color: var(--c-text, #1c1c1c); font-size: 1.6rem; line-height: 1; cursor: pointer;
  box-shadow: 0 1px 6px rgba(0, 0, 0, .18); transition: opacity .2s; }
.ig-flux__nav:disabled { opacity: 0; pointer-events: none; }
.ig-flux__nav--prec { left: -1.25rem; }
.ig-flux__nav--suiv { right: -1.25rem; }
.ig-flux__points { display: flex; justify-content: center; flex-wrap: wrap; gap: .5rem; margin-top: -.6rem; }
.ig-flux__points[hidden] { display: none; }
.ig-flux__point { width: .55rem; height: .55rem; padding: 0; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .15); cursor: pointer;
  transition: background .2s, transform .2s; }
.ig-flux__compteur { font-size: .85rem; color: var(--c-muted, #6b6b6b); font-variant-numeric: tabular-nums; }
.ig-flux__point[aria-current="true"] { background: var(--c-text, #333); transform: scale(1.25); }
.ig-flux__nav:focus-visible, .ig-flux__point:focus-visible, .ig-flux__suivre:focus-visible, .ig-flux__profil:focus-visible,
.ig-flux__post a:focus-visible { outline: 2px solid var(--c-accent-ink, currentColor); outline-offset: 2px; }
@media (max-width: 600px) {
  .ig-flux__tete { gap: .8rem 1.2rem; }
  .ig-flux__nav { width: 2.1rem; height: 2.1rem; font-size: 1.3rem; }
  .ig-flux__nav--prec { left: -.6rem; }
  .ig-flux__nav--suiv { right: -.6rem; }
}
@media (prefers-reduced-motion: reduce) { .ig-flux__piste, .ig-flux__post img { transition: none; } }


/* ---- Retouches propres au client (template/css/modules.css) ---- */
/* Retouches Santa Giulia sur le module Guide : la charte de la maison sur les
   cartes partenaires, les rubriques et la carte, comme les avait le site
   d'origine. Le socle du module est neutre ; ceci passe après lui. */
.guide-hub__intro{max-width:none;margin-bottom:2.5rem;}
.guide-hub__surtitre{color:var(--sauge-ink);letter-spacing:.2em;font-size:.72rem;}
.guide-hub__intro h1{font-family:var(--serif);font-weight:400;font-size:clamp(2rem,4vw,3rem);margin:0;}
.guide-hub__texte{color:var(--doux);font-size:1.05rem;}
.guide-section__titre{font-family:var(--serif);font-weight:400;font-size:clamp(1.6rem,3vw,2.2rem);}
.guide-rubriques{gap:2rem 2.4rem;}
.guide-rubrique__photo{border-radius:0;background:var(--sauge-clair);}
.guide-rubrique__titre{font-family:var(--serif);font-weight:400;font-size:1.35rem;}
.guide-rubrique__texte{font-size:.96rem;color:var(--doux);}
.guide-rubrique__plus{color:var(--sauge-ink);}
.partenaire{background:var(--papier);border-radius:0;box-shadow:inset 0 0 0 1px var(--trait);}
.partenaire__activite{color:var(--sauge-ink);}
.partenaire__ligne{color:var(--doux);}
.partenaire__ligne svg{color:var(--sable);}
.partenaire__liens{border-top-color:var(--trait);}
.partenaire__liens a{color:var(--sauge-ink);}
.guide-carte{border-radius:var(--r);background:var(--sauge-clair);box-shadow:0 10px 34px rgba(74,74,75,.1);}
.guide-carte .leaflet-container{font-family:var(--sans);}
.guide-partenaires,.guide-autres{background:var(--sauge-pale);}
.guide-articles{background:var(--creme);}
.guide-rubrique-page .blog-fil a{color:var(--sauge-ink);}
/* Page Actualités : pastilles de filtre centrées. */
.blog-themes--centre{justify-content:center;}
/* Pastille active : le module l'habille en --c-primary, que ce site ne définit pas
   (fond transparent, texte blanc invisible). Vert de la maison, assez foncé pour
   un texte blanc lisible (#557f64 : 4,6:1 ; le sauge #84b093 ne donnait que 2,4:1). */
.blog-theme.is-active{background:#557f64;border-color:#557f64;color:#fff;}
.blog-theme:hover{border-color:var(--sauge);}
/* Sous-titre des pages de hub et texte SEO : la largeur du contenu des articles
   (72ch, cf. .article-corps), centrés. */
.guide-hub__texte{max-width:72ch;margin-inline:auto;}
.hub-texte-seo{max-width:72ch;margin:3rem auto 0;}
/* Page Actualités : l'en-tête et la liste se suivent sans grand blanc. */
.actualites-tete{padding-bottom:clamp(1.25rem,2.5vw,2rem);}
.actualites-tete .guide-hub__intro{margin-bottom:0;}
.actualites-liste{padding-top:clamp(2rem,4vw,3rem);}

/* Flux Instagram dans le pied de page, sur toutes les pages (09/11/2026) */
.instagram-pied { padding: 4.5rem 0 1.5rem; }

/* ---------- Sélecteur de langue (09/11/2026, version anglaise en ligne) ---------- */
.nav-lang{position:relative;flex:none;margin-left:.6rem;}
.nav-lang__btn{display:flex;align-items:center;gap:.55rem;height:48px;padding:0 .4rem;border:0;background:transparent;cursor:pointer;
  font:inherit;font-size:.82rem;letter-spacing:.16em;font-weight:600;color:var(--encre);}
.nav-lang__btn i{width:6px;height:6px;border-right:1.5px solid;border-bottom:1.5px solid;transform:translateY(-2px) rotate(45deg);transition:transform .3s ease;}
.nav-lang__btn[aria-expanded="true"] i{transform:translateY(1px) rotate(-135deg);}
.nav-lang__code{display:none;}
html[lang="fr"] .nav-lang__code[lang="fr"],html[lang="en"] .nav-lang__code[lang="en"]{display:inline;}
.nav-lang__liste{list-style:none;margin:0;padding:.5rem 0;position:absolute;right:0;top:calc(100% + 8px);min-width:170px;z-index:120;
  background:#fff;border:1px solid var(--trait);border-radius:10px;box-shadow:0 12px 32px rgba(0,0,0,.12);
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .25s ease,transform .25s ease,visibility .25s;}
.nav-lang.is-open .nav-lang__liste{opacity:1;visibility:visible;transform:none;}
.nav-lang__item{display:flex;align-items:baseline;gap:.8rem;padding:.6rem 1.1rem;font-size:.9rem;color:var(--texte);text-decoration:none;white-space:nowrap;}
.nav-lang__item b{font-weight:600;font-size:.75rem;letter-spacing:.16em;width:1.6rem;color:var(--sauge-ink);}
.nav-lang__item:hover,html[lang="fr"] .nav-lang__item[lang="fr"],html[lang="en"] .nav-lang__item[lang="en"]{color:var(--sauge-ink);}
@media (max-width:720px){.entete__inner .nav-lang{margin-left:auto;}.entete__inner .nav-lang + .burger{margin-left:.25rem;}}
html[lang="fr"] .langues a[lang="fr"],html[lang="en"] .langues a[lang="en"]{color:var(--sauge-ink);font-weight:600;}