/* ==========================================================================
   blocs.css : les règles génériques de l'édition sur la page (lot E).
   Servi après site.css partout où la tête est servie (édition, aperçu, lien de partage), jamais enregistré.
   1. Échelle des tailles de texte : neuf paliers, de la petite mention au titre (A- et A+ passent d'un palier).
   2. Styles nommés (data-style) et leur réglage pour tout le site (.theme-site, --s-<style>).
   3. Surcharges locales (--l-taille, --l-align), toujours prioritaires : « Revenir au style du site » les retire.
   4. Boîtes ajoutées (.boite) : texte, titre, photo, photo et texte, liste de liens, encadré ; data-taille.
   5. Sections libres (.chapitre.libre) : six dispositions en grille, fonds ; sur téléphone, une colonne dans
      l'ordre du document (aucun chevauchement possible).
   6. Manipulation directe (06/10) : largeur en crans (data-largeur), bord de rangement (data-place), proportions
      gardées d'une photo agrandie (--l-ratio), rangées côte à côte (.rangee). Toujours le flux, jamais de position
      absolue : sur grand écran les rangées sont côte à côte, sous 700 px tout s'empile dans l'ordre du document.
   Les sélecteurs portent :not(#_) pour passer devant les règles de chapitre de site.css sans !important.
   ========================================================================== */

/* 1. Échelle : paliers 1 à 9, taille entre 390 px et 1440 px de large ------- */
:root{
  --e-1:clamp(15px,calc(15px + (100vw - 390px) * 0.00095),16px);
  --e-2:clamp(16px,calc(16px + (100vw - 390px) * 0.00190),18px);
  --e-3:clamp(18px,calc(18px + (100vw - 390px) * 0.00190),20px);
  --e-4:clamp(20px,calc(20px + (100vw - 390px) * 0.00286),23px);
  --e-5:clamp(23px,calc(23px + (100vw - 390px) * 0.00381),27px);
  --e-6:clamp(26px,calc(26px + (100vw - 390px) * 0.00571),32px);
  --e-7:clamp(30px,calc(30px + (100vw - 390px) * 0.00952),40px);
  --e-8:clamp(36px,calc(36px + (100vw - 390px) * 0.01524),52px);
  --e-9:clamp(42px,calc(42px + (100vw - 390px) * 0.02095),64px);
}

/* 2. Styles nommés --------------------------------------------------------- */
[data-style]:not(#_){text-wrap:pretty}
[data-style="courant"]:not(#_){font-family:var(--sans);font-style:normal;font-weight:400;line-height:1.55;letter-spacing:0}
[data-style="grand"]:not(#_){font-family:var(--sans);font-style:normal;font-weight:400;line-height:1.4;letter-spacing:0}
[data-style="avant"]:not(#_){font-family:var(--serif);font-style:italic;font-weight:500;line-height:1.2;text-align:center;letter-spacing:0}
[data-style="titre"]:not(#_){font-family:var(--serif);font-style:normal;font-weight:400;line-height:1.05;letter-spacing:-.02em;text-wrap:balance}
[data-style="citation"]:not(#_){font-family:var(--serif);font-style:italic;font-weight:500;line-height:1.22;letter-spacing:0}
[data-style="mention"]:not(#_){font-family:var(--sans);font-style:normal;font-weight:400;line-height:1.5;letter-spacing:.01em}
[data-style="courant"]:not(#_){font-size:var(--e-4)}
[data-style="grand"]:not(#_){font-size:var(--e-6)}
[data-style="avant"]:not(#_){font-size:var(--e-7)}
[data-style="titre"]:not(#_){font-size:var(--e-9)}
[data-style="citation"]:not(#_){font-size:var(--e-7)}
[data-style="mention"]:not(#_){font-size:var(--e-2)}
/* « Appliquer à tout le site » : la taille d'un style nommé, réglée une fois pour toute la page */
.theme-site{display:none}
html:has(.theme-site[style*="--s-courant:1"]) [data-style="courant"]:not(#_){font-size:var(--e-1)}
html:has(.theme-site[style*="--s-courant:2"]) [data-style="courant"]:not(#_){font-size:var(--e-2)}
html:has(.theme-site[style*="--s-courant:3"]) [data-style="courant"]:not(#_){font-size:var(--e-3)}
html:has(.theme-site[style*="--s-courant:4"]) [data-style="courant"]:not(#_){font-size:var(--e-4)}
html:has(.theme-site[style*="--s-courant:5"]) [data-style="courant"]:not(#_){font-size:var(--e-5)}
html:has(.theme-site[style*="--s-courant:6"]) [data-style="courant"]:not(#_){font-size:var(--e-6)}
html:has(.theme-site[style*="--s-courant:7"]) [data-style="courant"]:not(#_){font-size:var(--e-7)}
html:has(.theme-site[style*="--s-courant:8"]) [data-style="courant"]:not(#_){font-size:var(--e-8)}
html:has(.theme-site[style*="--s-courant:9"]) [data-style="courant"]:not(#_){font-size:var(--e-9)}
html:has(.theme-site[style*="--s-grand:1"]) [data-style="grand"]:not(#_){font-size:var(--e-1)}
html:has(.theme-site[style*="--s-grand:2"]) [data-style="grand"]:not(#_){font-size:var(--e-2)}
html:has(.theme-site[style*="--s-grand:3"]) [data-style="grand"]:not(#_){font-size:var(--e-3)}
html:has(.theme-site[style*="--s-grand:4"]) [data-style="grand"]:not(#_){font-size:var(--e-4)}
html:has(.theme-site[style*="--s-grand:5"]) [data-style="grand"]:not(#_){font-size:var(--e-5)}
html:has(.theme-site[style*="--s-grand:6"]) [data-style="grand"]:not(#_){font-size:var(--e-6)}
html:has(.theme-site[style*="--s-grand:7"]) [data-style="grand"]:not(#_){font-size:var(--e-7)}
html:has(.theme-site[style*="--s-grand:8"]) [data-style="grand"]:not(#_){font-size:var(--e-8)}
html:has(.theme-site[style*="--s-grand:9"]) [data-style="grand"]:not(#_){font-size:var(--e-9)}
html:has(.theme-site[style*="--s-avant:1"]) [data-style="avant"]:not(#_){font-size:var(--e-1)}
html:has(.theme-site[style*="--s-avant:2"]) [data-style="avant"]:not(#_){font-size:var(--e-2)}
html:has(.theme-site[style*="--s-avant:3"]) [data-style="avant"]:not(#_){font-size:var(--e-3)}
html:has(.theme-site[style*="--s-avant:4"]) [data-style="avant"]:not(#_){font-size:var(--e-4)}
html:has(.theme-site[style*="--s-avant:5"]) [data-style="avant"]:not(#_){font-size:var(--e-5)}
html:has(.theme-site[style*="--s-avant:6"]) [data-style="avant"]:not(#_){font-size:var(--e-6)}
html:has(.theme-site[style*="--s-avant:7"]) [data-style="avant"]:not(#_){font-size:var(--e-7)}
html:has(.theme-site[style*="--s-avant:8"]) [data-style="avant"]:not(#_){font-size:var(--e-8)}
html:has(.theme-site[style*="--s-avant:9"]) [data-style="avant"]:not(#_){font-size:var(--e-9)}
html:has(.theme-site[style*="--s-titre:1"]) [data-style="titre"]:not(#_){font-size:var(--e-1)}
html:has(.theme-site[style*="--s-titre:2"]) [data-style="titre"]:not(#_){font-size:var(--e-2)}
html:has(.theme-site[style*="--s-titre:3"]) [data-style="titre"]:not(#_){font-size:var(--e-3)}
html:has(.theme-site[style*="--s-titre:4"]) [data-style="titre"]:not(#_){font-size:var(--e-4)}
html:has(.theme-site[style*="--s-titre:5"]) [data-style="titre"]:not(#_){font-size:var(--e-5)}
html:has(.theme-site[style*="--s-titre:6"]) [data-style="titre"]:not(#_){font-size:var(--e-6)}
html:has(.theme-site[style*="--s-titre:7"]) [data-style="titre"]:not(#_){font-size:var(--e-7)}
html:has(.theme-site[style*="--s-titre:8"]) [data-style="titre"]:not(#_){font-size:var(--e-8)}
html:has(.theme-site[style*="--s-titre:9"]) [data-style="titre"]:not(#_){font-size:var(--e-9)}
html:has(.theme-site[style*="--s-citation:1"]) [data-style="citation"]:not(#_){font-size:var(--e-1)}
html:has(.theme-site[style*="--s-citation:2"]) [data-style="citation"]:not(#_){font-size:var(--e-2)}
html:has(.theme-site[style*="--s-citation:3"]) [data-style="citation"]:not(#_){font-size:var(--e-3)}
html:has(.theme-site[style*="--s-citation:4"]) [data-style="citation"]:not(#_){font-size:var(--e-4)}
html:has(.theme-site[style*="--s-citation:5"]) [data-style="citation"]:not(#_){font-size:var(--e-5)}
html:has(.theme-site[style*="--s-citation:6"]) [data-style="citation"]:not(#_){font-size:var(--e-6)}
html:has(.theme-site[style*="--s-citation:7"]) [data-style="citation"]:not(#_){font-size:var(--e-7)}
html:has(.theme-site[style*="--s-citation:8"]) [data-style="citation"]:not(#_){font-size:var(--e-8)}
html:has(.theme-site[style*="--s-citation:9"]) [data-style="citation"]:not(#_){font-size:var(--e-9)}
html:has(.theme-site[style*="--s-mention:1"]) [data-style="mention"]:not(#_){font-size:var(--e-1)}
html:has(.theme-site[style*="--s-mention:2"]) [data-style="mention"]:not(#_){font-size:var(--e-2)}
html:has(.theme-site[style*="--s-mention:3"]) [data-style="mention"]:not(#_){font-size:var(--e-3)}
html:has(.theme-site[style*="--s-mention:4"]) [data-style="mention"]:not(#_){font-size:var(--e-4)}
html:has(.theme-site[style*="--s-mention:5"]) [data-style="mention"]:not(#_){font-size:var(--e-5)}
html:has(.theme-site[style*="--s-mention:6"]) [data-style="mention"]:not(#_){font-size:var(--e-6)}
html:has(.theme-site[style*="--s-mention:7"]) [data-style="mention"]:not(#_){font-size:var(--e-7)}
html:has(.theme-site[style*="--s-mention:8"]) [data-style="mention"]:not(#_){font-size:var(--e-8)}
html:has(.theme-site[style*="--s-mention:9"]) [data-style="mention"]:not(#_){font-size:var(--e-9)}

/* 3. Surcharges locales : posées par A- et A+, Aligner ; marquées d'un point dans l'éditeur */
[style*="--l-taille:1"]:not(#_):not(#_){font-size:var(--e-1)}
[style*="--l-taille:2"]:not(#_):not(#_){font-size:var(--e-2)}
[style*="--l-taille:3"]:not(#_):not(#_){font-size:var(--e-3)}
[style*="--l-taille:4"]:not(#_):not(#_){font-size:var(--e-4)}
[style*="--l-taille:5"]:not(#_):not(#_){font-size:var(--e-5)}
[style*="--l-taille:6"]:not(#_):not(#_){font-size:var(--e-6)}
[style*="--l-taille:7"]:not(#_):not(#_){font-size:var(--e-7)}
[style*="--l-taille:8"]:not(#_):not(#_){font-size:var(--e-8)}
[style*="--l-taille:9"]:not(#_):not(#_){font-size:var(--e-9)}
[style*="--l-align"]:not(#_):not(#_){text-align:var(--l-align)}

/* 4. Boîtes ajoutées --------------------------------------------------------- */
.boite{position:relative;min-width:0;margin:0}
.boite+.boite,[data-bloc="texte"]>.boite{margin-top:clamp(20px,3vh,32px)}
.libre>.boite+.boite{margin-top:0}
.boite p+p{margin-top:16px}
.boite h2,.boite h3{margin:0}
.boite[data-taille="s"]{width:min(100%,22rem)}
.boite[data-taille="m"]{width:min(100%,34rem)}
.boite[data-taille="l"],.boite[data-taille="plein"]{width:100%}
/* photo */
figure.boite{overflow:hidden;border-radius:4px;aspect-ratio:4/3}
figure.boite img{width:100%;height:100%;object-fit:cover;object-position:var(--fx,50%) var(--fy,50%);transform:scale(var(--zoom,1));transform-origin:var(--fx,50%) var(--fy,50%)}
/* photo et texte : côte à côte, puis l'une sous l'autre sur téléphone, dans l'ordre du document */
.boite-photo-texte{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(20px,2.6vw,44px);align-items:center}
.boite-photo-texte>figure{margin:0;overflow:hidden;border-radius:4px;aspect-ratio:4/5}
.boite-photo-texte>figure img{width:100%;height:100%;object-fit:cover;object-position:var(--fx,50%) var(--fy,50%);transform:scale(var(--zoom,1));transform-origin:var(--fx,50%) var(--fy,50%)}
/* liste de liens (comme les liens amis) */
.boite-liens{list-style:none;padding:0;margin:0;display:grid;gap:14px}
.boite-liens a{display:grid;gap:4px;padding:18px 22px;border:1px solid color-mix(in srgb,currentColor 24%,transparent);border-radius:14px;background:color-mix(in srgb,currentColor 5%,transparent);min-height:64px}
.boite-liens .lien-nom{font-family:var(--serif);font-size:var(--e-5);line-height:1.2}
.boite-liens .lien-desc{font-size:var(--e-3);opacity:.85}
/* encadré : tarifs, accès en fauteuil ; sa couleur suit celle du texte, donc lisible sur fond clair comme sombre */
.encadre{padding:clamp(20px,2.4vw,32px) clamp(22px,2.6vw,36px);border-radius:16px;border:1px solid color-mix(in srgb,currentColor 26%,transparent);background:color-mix(in srgb,currentColor 6%,transparent)}
.encadre p+p{margin-top:10px}

/* 5. Sections libres ------------------------------------------------------------ */
.chapitre.libre{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(28px,4vh,48px) clamp(20px,2.4vw,40px);align-items:start;align-content:start;
  padding:clamp(56px,10vh,120px) var(--pad);color:var(--encre);background:var(--papier)}
.libre[data-disposition="une-colonne"]{grid-template-columns:minmax(0,48rem);padding-left:calc(var(--pad) + (100% - 2 * var(--pad)) / 12)}
.libre[data-disposition="texte-photo"]{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:center}
.libre[data-disposition="texte-photo"]>[data-bloc="media"]{order:1}
.libre[data-disposition="photo-texte"]{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:center}
.libre[data-disposition="photo-texte"]>[data-bloc="media"]{order:-1}
.libre[data-disposition="deux-colonnes"]{grid-template-columns:repeat(2,minmax(0,1fr))}
.libre[data-disposition="trois-colonnes"]{grid-template-columns:repeat(3,minmax(0,1fr))}
.libre[data-disposition="plein-cadre"]{padding-left:0;padding-right:0}
.libre[data-disposition="plein-cadre"]>:not([data-bloc="media"]){padding:0 var(--pad)}
.libre[data-disposition="plein-cadre"]>figure.boite{border-radius:0;aspect-ratio:16/7}
.libre>[data-taille="plein"]{grid-column:1 / -1}
/* fonds : la suite du dégradé du site (une nouvelle section reprend celui de la précédente) */
.libre[data-fond="papier"]{background:var(--papier);color:var(--encre)}
.libre[data-fond="rose"]{background:linear-gradient(to bottom,var(--rose) 0%,#f8e4da 100%);color:var(--encre)}
.libre[data-fond="peche"]{background:var(--g-peche);color:var(--encre)}
.libre[data-fond="lavande"]{background:linear-gradient(168deg,#f1d6d3 0%,var(--lavande) 100%);color:var(--encre)}
.libre[data-fond="corail"]{background:var(--g-1);color:var(--blanc)}
.libre[data-fond="vert"]{background:var(--g-3);color:var(--blanc)}
.libre[data-fond="sombre"]{background:var(--fascia);color:var(--creme-sur-sombre)}
.libre[data-fond="papier"] h2,.libre[data-fond="rose"] h2,.libre[data-fond="peche"] h2,.libre[data-fond="lavande"] h2{color:var(--rouge)}
@media (max-width:900px){
  .chapitre.libre,.libre[data-disposition]{grid-template-columns:minmax(0,1fr);padding-left:var(--pad);padding-right:var(--pad)}
  .libre[data-disposition="plein-cadre"]{padding-left:0;padding-right:0}
  .libre[data-disposition]>[data-bloc]{order:0}
  .boite-photo-texte{grid-template-columns:minmax(0,1fr)}
  .boite[data-taille="s"]{width:min(100%,16rem)}
  .boite[data-taille="m"]{width:min(100%,24rem)}
}

/* 6. Manipulation directe ------------------------------------------------------------------------------------ */
/* largeur : une part de la place que le bloc a dans son parent (une cellule de grille, une colonne, une rangée) */
[data-largeur="quart"]{--l-l:25%}
[data-largeur="tiers"]{--l-l:33.333%}
[data-largeur="moitie"]{--l-l:50%}
[data-largeur="deux-tiers"]{--l-l:66.667%}
[data-largeur="trois-quarts"]{--l-l:75%}
[data-largeur="plein"]{--l-l:100%}
[data-largeur]:not(#_):not(#_){width:var(--l-l);max-width:100%;min-width:0;box-sizing:border-box}
/* le bord contre lequel il se range quand il ne prend pas toute la largeur */
[data-place="debut"]:not(#_):not(#_){margin-left:0;margin-right:auto;justify-self:start;align-self:start}
[data-place="centre"]:not(#_):not(#_){margin-left:auto;margin-right:auto;justify-self:center}
[data-place="fin"]:not(#_):not(#_){margin-left:auto;margin-right:0;justify-self:end}
/* une photo agrandie ou réduite garde ses proportions : la hauteur suit la largeur */
[style*="--l-ratio"]:not(#_):not(#_){aspect-ratio:var(--l-ratio);height:auto;min-height:0;max-height:none}
[style*="--l-ratio"]:not(#_):not(#_)>img{width:100%;height:100%;object-fit:cover}
/* rangée : des blocs côte à côte, posés l'un contre l'autre en glissant */
.rangee:not(#_){display:flex;flex-wrap:nowrap;align-items:flex-start;gap:clamp(20px,3vw,48px);width:100%;min-width:0;margin-left:0;margin-right:0;
  grid-column:1 / -1}
.rangee:not(#_)>*{flex:1 1 0;min-width:0;margin-top:0;margin-bottom:0;grid-column:auto;grid-row:auto}
.rangee:not(#_)>[data-largeur]:not(#_):not(#_){flex:0 1 var(--l-l);width:auto}
.rangee>figure,.rangee>[data-bloc="media"]{position:relative}
.rangee+*,*+.rangee{margin-top:clamp(18px,2.6vh,30px)}
@media (max-width:699px){
  .rangee:not(#_){flex-direction:column;align-items:stretch}
  .rangee:not(#_)>*,.rangee:not(#_)>[data-largeur]:not(#_):not(#_){flex:none;width:100%}
  /* sur téléphone : un texte prend toute la largeur ; une petite photo en prend la moitié, une grande toute */
  [data-largeur]:not(#_):not(#_){width:100%}
  figure[data-largeur="quart"]:not(#_):not(#_),figure[data-largeur="tiers"]:not(#_):not(#_),
  [data-bloc="media"][data-largeur="quart"]:not(#_):not(#_),[data-bloc="media"][data-largeur="tiers"]:not(#_):not(#_){width:50%}
}

/* 7. Mise en forme d'une partie d'un texte (07/10) : des mots choisis dans un texte, dans l'une des deux polices du
   site, plus grands ou plus petits, ou droits dans un texte en italique. Un <span> à valeurs de liste (document.py). */
span[data-police="serif"]:not(#_){font-family:var(--serif)}
span[data-police="sans"]:not(#_){font-family:var(--sans)}
span[data-corps="plus"]:not(#_){font-size:1.25em}
span[data-corps="moins"]:not(#_){font-size:.8em}
span[data-forme="droit"]:not(#_){font-style:normal}
span[data-trait="souligne"]:not(#_){text-decoration:underline;text-decoration-thickness:.06em;text-underline-offset:.18em}