/* ==========================================================================
   Mare e Macchia — « Séjourner à Propriano » : le sommaire et les 19 pages de référencement (07/11/2026).
   Pages d'atterrissage, fabriquées par reservation/fabriquer-pages-seo.mjs.
   Rien de nouveau dans le vocabulaire : le hero des pages de séjour (Pool Lounge), le chapitre et les
   durées en petites capitales de La Corse, les lignes éditoriales entre filets, le mediatext, la FAQ
   du site (.faq), la bande « direct », l'avis en contexte, les cartes et crédits du blog (blog.css).
   ========================================================================== */

/* ---------- Haut de page : le hero des pages de séjour, photo posée (sans zoom ni parallaxe) ---------- */
.hero--sejour{min-height:82vh;min-height:82svh}
.hero--sejour .hero__img{inset:0}
.hero--sejour .hero__img,.hero--sejour .hero__img img{transform:none!important}
.hero--sejour .hero__scrim{background:linear-gradient(to top,rgba(30,32,20,.8) 0%,rgba(30,32,20,.44) 48%,rgba(30,32,20,.4) 100%)}
.hero--sejour .hero__inner{padding-bottom:clamp(2.8rem,7vh,4.6rem)}
.hero--sejour .h1-nom{font-size:clamp(2.35rem,4.9vw,4.15rem);line-height:1.08;max-width:19ch;margin:.6rem 0 .9rem;text-wrap:balance}
/* le « : » du titre reste dans le texte (Google, lecteurs d'écran) mais la promesse passe à la ligne */
.h1-sep{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.hero--sejour .h1-sous{display:block;max-width:34ch;font-family:var(--font-display);font-weight:300;font-size:clamp(1.15rem,1.85vw,1.55rem);
  line-height:1.38;letter-spacing:.005em;color:rgba(253,252,249,.92);text-wrap:balance}
.h1-sous::first-letter{text-transform:uppercase}
.hero--sejour .hero__cta{margin-top:2.1rem;max-width:none}
/* le retour au sommaire, dans le sur-titre (comme « Le blog » sur les articles) */
.hero__retour{color:inherit;padding-bottom:.25em;border-bottom:1px solid rgba(253,252,249,.45);transition:border-color .4s var(--ease)}
.hero__retour:hover{border-bottom-color:var(--dore)}
@media (hover:none) and (pointer:coarse){ .hero__retour:active{border-bottom-color:var(--dore)} }

/* crédit de la photo du haut : calé à droite, juste sous l'image */
.scredit{background:var(--blanc);width:min(1240px,92vw);margin-inline:auto}
.scredit .credit--haut{text-align:right;margin:0;padding:.6rem 0 0}

/* ---------- Le chapô ---------- */
.sintro{background:var(--blanc);padding:clamp(5rem,12vh,8.5rem) 0 clamp(3.6rem,8vh,5.5rem);text-align:center}
.sintro__chapo{width:min(44rem,88vw);margin-inline:auto;font-family:var(--font-display);font-weight:300;
  font-size:clamp(1.28rem,2vw,1.66rem);line-height:1.52;color:var(--olive);text-wrap:pretty}
.sintro__chapo a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:rgba(156,148,124,.6);text-underline-offset:.2em}
.sintro__filet{display:block;width:44px;height:1px;background:var(--dore);margin:clamp(2.6rem,5.5vh,3.4rem) auto 0}

/* ---------- Le temps de route (famille A) : un chapitre de La Corse, la durée en italique ---------- */
.sroute{background:var(--blanc);padding:clamp(1.6rem,4vh,2.6rem) 5vw clamp(5rem,11vh,8rem);text-align:center}
.sroute--suite{padding-bottom:clamp(2.6rem,6vh,4rem)}
.sroute__titre{font-size:clamp(2.15rem,4.5vw,3.5rem);line-height:1.1;color:var(--olive);margin:.7rem auto 0;max-width:20ch;text-wrap:balance}
.sroute__titre em{font-style:italic}
.sroute__filet{display:block;width:44px;height:1px;background:var(--dore);margin:1.9rem auto 2rem}
.sroute__txt{width:min(38rem,90vw);margin-inline:auto}
.sroute__txt p{font-size:1.0625rem;line-height:1.8;color:var(--olive-soft);font-weight:300;margin:0 0 1.1em;text-wrap:pretty}
.sroute__txt p:last-child{margin-bottom:0}

/* ---------- Les sections ---------- */
.sbloc{background:var(--blanc);padding:clamp(4.5rem,10vh,7.5rem) 0;position:relative}
.sbloc--greige{background:rgba(156,148,124,.06)}
.sbloc:not(.sbloc--greige) + .sbloc:not(.sbloc--greige){padding-top:0}
.sroute--suite + .sbloc{padding-top:0}
.sbloc__in{width:min(1240px,92vw);margin-inline:auto}
.sbloc h2{font-size:clamp(1.85rem,3.3vw,2.6rem);line-height:1.15;color:var(--olive);text-wrap:balance}
.sbloc h3{font-size:clamp(1.18rem,1.7vw,1.42rem);line-height:1.25;color:var(--olive)}
.sbloc p,.sbloc li{font-size:1.0625rem;line-height:1.8;color:var(--olive-soft);font-weight:300}
.sbloc p{margin:0 0 1.15em}
.sbloc strong{font-weight:400;color:var(--olive)}
.sbloc p a,.sbloc li a,.sroute__txt a,.sfaq .faq__a a,.sfinal .direct p a{color:var(--olive);text-decoration:underline;text-decoration-thickness:1px;
  text-decoration-color:rgba(156,148,124,.6);text-underline-offset:.22em;transition:text-decoration-color .3s var(--ease)}
.sbloc p a:hover,.sbloc li a:hover,.sroute__txt a:hover,.sfaq .faq__a a:hover,.sfinal .direct p a:hover{text-decoration-color:var(--dore)}
@media (hover:none) and (pointer:coarse){
  .sbloc p a:active,.sbloc li a:active,.sroute__txt a:active,.sfaq .faq__a a:active,.sfinal .direct p a:active{text-decoration-color:var(--dore)}
}
.sbloc .avis-ctx{margin:2rem 0 0;max-width:40ch}
.sbloc .avis-ctx:not(:last-child){margin-bottom:2rem}
.sbloc .avis-ctx q{font-size:clamp(1.05rem,1.45vw,1.2rem)}

/* listes : un trait doré fin devant chaque ligne (comme le blog) */
.sliste{list-style:none;margin:0 0 1.4em;padding:0}
.sliste li{position:relative;padding-left:1.4rem;margin-bottom:.55em}
.sliste li::before{content:"";position:absolute;left:0;top:.9em;width:7px;height:1px;background:var(--dore)}

/* photos */
.sbloc__media{min-width:0}
.sbloc__cadre{overflow:hidden;background:var(--creme)}
.sbloc__cadre img{width:100%;height:100%;object-fit:cover}
.sbloc__media .credit{margin-top:.6rem}
.sbloc__plus{margin-top:clamp(3rem,7vh,4.5rem);width:min(860px,100%);grid-column:1 / -1}

/* Une seule grille à deux colonnes pour toute la page : la photo, le titre ou le numéro à gauche,
   le texte à droite, et le bord gauche du texte tombe au même endroit d'une section à l'autre. */
.sbloc{--entre:clamp(2.5rem,6vw,6rem)}

/* Photo + texte (mediatext des pages de séjour) */
.sbloc--media .sbloc__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:var(--entre);align-items:center}
.sbloc--media.sbloc--inverse .sbloc__media{order:2}
.sbloc--media .sbloc__txt{max-width:34rem}
.sbloc--media h2{margin:0 0 1.4rem}
.sbloc--media .sbloc__txt > :last-child{margin-bottom:0}
/* texte long : la photo reste à l'écran pendant la lecture */
.sbloc--long .sbloc__in{align-items:start}
.sbloc--long .sbloc__media{position:sticky;top:clamp(5.5rem,13vh,7.5rem)}

/* Texte seul : le titre à gauche, le texte à droite */
.sbloc--texte .sbloc__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:var(--entre);align-items:start}
.sbloc--texte .sbloc__titre h2{max-width:15ch}
.sbloc--texte .sbloc__txt{max-width:34rem}
.sbloc--texte .sbloc__txt > :last-child{margin-bottom:0}

/* Lignes éditoriales (les « ### ») : numéro romain et titre à gauche, texte à droite, entre filets (La Corse) */
.sbloc--lignes .sbloc__tete{max-width:44rem;margin-bottom:clamp(2.6rem,5.5vh,3.6rem)}
.sbloc--lignes .sbloc__tete h2{margin:0}
.sbloc--lignes .sbloc__tete h2 + p{margin-top:1.3rem}
.sbloc--lignes .sbloc__tete > :last-child{margin-bottom:0}
.slignes{border-top:1px solid rgba(156,148,124,.28)}
.sligne{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:var(--entre);align-items:start;
  padding:clamp(1.8rem,3.8vh,2.5rem) 0;border-bottom:1px solid rgba(156,148,124,.28);position:relative}
.sligne__tete{display:grid;grid-template-columns:2.6rem minmax(0,1fr);align-items:baseline}
.sligne__num{font-family:var(--font-display);font-weight:300;font-style:italic;font-size:1.05rem;line-height:1.5;color:var(--kaki)}
.sligne h3{margin:0}
.sligne__txt{max-width:34rem}
.sligne__txt p:last-child,.sligne__txt .sliste:last-child{margin-bottom:0}
.sligne::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:100%;background:var(--dore);transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease)}
@media (hover:hover) and (pointer:fine){ .sligne:hover::after{transform:scaleX(1)} }
@media (hover:none) and (pointer:coarse){ .sligne:active::after{transform:scaleX(1)} }
/* … avec une photo : la photo collée dans la colonne de gauche, les lignes dans celle de droite */
.sbloc--photo .sbloc__corps{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:var(--entre);align-items:start}
.sbloc--photo.sbloc--inverse .sbloc__media{order:2}
.sbloc--photo .sbloc__media{position:sticky;top:clamp(5.5rem,13vh,7.5rem)}
.sbloc--photo .sligne{grid-template-columns:minmax(0,1fr);row-gap:.75rem}
.sbloc--photo .sligne__txt{padding-left:2.6rem}

/* Définitions « **Libellé.** texte » (conditions de location) : libellé à gauche, texte à droite */
.sdefs{border-top:1px solid rgba(156,148,124,.28);margin:0 0 1.6em}
.sdef{display:grid;grid-template-columns:minmax(0,.42fr) minmax(0,1fr);gap:1.4rem;padding:1.15rem .2rem;border-bottom:1px solid rgba(156,148,124,.28)}
.sbloc .sdef p{margin:0}
.sbloc .sdef__t{font-family:var(--font-display);font-size:1.2rem;line-height:1.45;color:var(--olive)}

/* Les avis côte à côte */
.sbloc--avis .sbloc__tete{margin-bottom:clamp(2.4rem,5vh,3.2rem)}
.savis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(2rem,4vw,3.6rem);align-items:start}
.sbloc .savis .avis-ctx{margin:0;max-width:none}

/* ---------- La FAQ : le composant .faq du site, sur la colonne de la bande finale ---------- */
.sfaq{background:var(--blanc);padding:clamp(4.5rem,10vh,7rem) 0 0}
.sfaq__in{width:min(1240px,92vw);max-width:940px;margin-inline:auto}
.sfaq h2{font-size:clamp(1.8rem,3.3vw,2.55rem);color:var(--olive);margin-bottom:clamp(2rem,4.5vh,2.9rem)}
.sfaq .faq{max-width:none;border-top:1px solid rgba(156,148,124,.4)}
.sfaq .faq__q{font-weight:300;line-height:1.3;padding-top:1.35rem;padding-bottom:1.35rem}
.sfaq .faq__a p{max-width:62ch;font-size:1rem;line-height:1.75;color:var(--olive-soft);font-weight:300}

/* ---------- La bande « Réserver en direct » (entre deux filets, sans boîte) ---------- */
.sfinal{background:var(--blanc);padding:clamp(5rem,11vh,7.5rem) 0 clamp(6rem,13vh,9rem)}
.sfinal__in{width:min(1240px,92vw);max-width:940px;margin-inline:auto}
.sfinal .direct{margin:0;padding-left:0;max-width:none}
.sfinal .direct p{max-width:52ch}

/* ---------- Le sommaire : les cartes ---------- */
.sbloc--cartes .sbloc__tete{margin-bottom:clamp(3rem,6vh,4.2rem)}
.sbloc--cartes .sbloc__tete h2{font-size:clamp(2rem,4vw,3.1rem);margin-top:.5rem}
.sbloc--cartes .sbloc__tete h2 em{font-style:italic}
.scartes{--g:clamp(1.4rem,2.3vw,2.4rem);container-type:inline-size;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(3.2rem,6.5vh,4.4rem) var(--g)}
.scarte .bcarte__titre{font-size:clamp(1.22rem,1.55vw,1.42rem);margin:1.25rem 0 .55rem;text-wrap:pretty}
.scarte--large{grid-column:span 2}
/* la grande carte garde la hauteur de photo des autres (4:3 d'une colonne) */
.scarte--large .bcarte__img{aspect-ratio:auto;height:calc((100cqw - 3 * var(--g)) / 4 * .75)}
.scarte__duree{display:flex;align-items:center;gap:.75rem;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--kaki-maquis);line-height:1.5}
.scarte__duree::before{content:"";flex:0 0 22px;height:1px;background:var(--dore);transform-origin:left;transition:transform .6s var(--ease)}
.scarte__promesse{font-size:.92rem}
.scarte__promesse::first-letter{text-transform:uppercase}
@media (hover:hover) and (pointer:fine){ .bcarte__lien:hover .scarte__duree::before{transform:scaleX(1.8)} }
@media (hover:none) and (pointer:coarse){ .bcarte__lien:active .scarte__duree::before{transform:scaleX(1.8)} }

/* ---------- Tablette ---------- */
@media(max-width:1000px){
  .scartes{grid-template-columns:repeat(2,minmax(0,1fr))}
  .scarte--large .bcarte__img{height:calc((100cqw - var(--g)) / 2 * .75)}
  .sligne{grid-template-columns:minmax(0,1fr);row-gap:.75rem}
  .sligne__txt{padding-left:2.6rem;max-width:40rem}
  .savis{grid-template-columns:minmax(0,1fr);max-width:40rem}
}
@media(max-width:900px){
  .sbloc--media .sbloc__in,.sbloc--texte .sbloc__in,.sbloc--photo .sbloc__corps{grid-template-columns:minmax(0,1fr);gap:clamp(2rem,5vw,2.8rem)}
  .sbloc--media.sbloc--inverse .sbloc__media,.sbloc--photo.sbloc--inverse .sbloc__media{order:0}
  .sbloc--long .sbloc__media,.sbloc--photo .sbloc__media{position:static}
  .sbloc--media .sbloc__txt,.sbloc--texte .sbloc__txt{max-width:40rem}
  .sbloc--texte .sbloc__titre h2{max-width:none}
}

/* ---------- Téléphone ---------- */
@media(max-width:640px){
  .scartes{grid-template-columns:minmax(0,1fr);gap:3.2rem}
  .scarte--large{grid-column:auto}
  .scarte--large .bcarte__img{aspect-ratio:4/3;height:auto}
  .sbloc p,.sbloc li,.sroute__txt p{font-size:1rem}
  .sdef{grid-template-columns:minmax(0,1fr);gap:.3rem}
  .hero--sejour .hero__inner{padding-top:7rem}
  /* sur téléphone, le chapô et le temps de route se lisent alignés à gauche (un paragraphe centré fatigue) */
  .sintro,.sroute{text-align:left}
  .sintro__filet{margin-left:6vw}
  .sroute{padding-left:6vw;padding-right:6vw}
  .sroute__titre{margin-left:0;max-width:none}
  .sroute__filet{margin-left:0}
  .sroute__txt{width:auto;margin-inline:0}
}