/* site.css — mise en page uniquement. Aucun texte, aucune couleur en dur :
   tout vient des variables produites par lib/theme.js. */

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--papier);color:var(--encre);
  font-family:var(--police-corps);font-size:var(--taille-base);line-height:var(--corps-interligne,1.7);
  font-weight:var(--corps-graisse,400);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{color:var(--titres-couleur,inherit);font-family:var(--police-titres);font-weight:var(--titres-graisse,700);line-height:var(--titres-interligne,1.25);
  font-style:var(--titres-style,normal);letter-spacing:var(--titres-espacement,0);
  text-transform:var(--titres-casse,none);font-variant:var(--titres-variante,normal)}
h1{font-size:calc(clamp(30px,4vw,46px) * var(--echelle-h1,1) * var(--echelle-bloc,1));font-weight:calc(var(--titres-graisse,700) + 100)}
h2{font-size:calc(clamp(23px,2.6vw,32px) * var(--echelle-h2,1) * var(--echelle-bloc,1))}
h3{font-size:calc(clamp(17px,1.7vw,20px) * var(--echelle-h3,1) * var(--echelle-bloc,1))}
h4{font-size:calc(16px * var(--echelle-bloc,1))}
a{color:var(--lien,var(--marque))}
img{max-width:100%;display:block}

.cadre{max-width:1180px;margin:0 auto;padding:0 24px}
.section{padding:72px 0;font-size:calc(var(--taille-base) * var(--echelle-bloc,1))}
/* Taille de police par bloc : une échelle, héritée par tout le texte de la section. */
.taille-petite{--echelle-bloc:.88}
.taille-grande{--echelle-bloc:1.15}
.section-alt{background:var(--papier-2)}
.tete{max-width:760px;margin-bottom:34px}
.tete-centree{margin-left:auto;margin-right:auto;text-align:center}

.surtitre{
  display:inline-flex;align-items:center;gap:8px;
  font-size:calc(13.5px * var(--echelle-bloc,1));font-weight:700;color:var(--marque);margin-bottom:10px;
}
.surtitre::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--marque)}
.chapo{font-size:calc(clamp(16px,1.6vw,18.5px) * var(--echelle-chapo,1));color:var(--encre-douce);max-width:64ch;margin-top:12px}

.btn{
  display:inline-block;font-weight:600;font-size:calc(15px * var(--echelle-bloc,1));text-decoration:none;
  padding:13px 22px;border-radius:10px;border:1px solid transparent;transition:.15s;
}
.btn-plein{background:var(--bouton,var(--marque));color:var(--texte-sur-bouton,var(--texte-sur-marque,#fff));border-color:var(--bouton,var(--marque))}
.btn-plein:hover{background:var(--bouton-2,var(--marque-2));border-color:var(--bouton-2,var(--marque-2))}
.btn-clair{background:transparent;color:var(--encre);border-color:var(--trait-2)}
.btn-clair:hover{border-color:var(--encre-douce)}
.btn-petit{padding:9px 16px;font-size:calc(14px * var(--echelle-bloc,1))}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:3px solid var(--marque);outline-offset:2px;border-radius:6px;
}

/* barre de navigation */
.barre{position:sticky;top:0;z-index:20;background:var(--voile);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--trait)}
.barre-grille{display:flex;align-items:center;gap:18px;padding-top:14px;padding-bottom:14px}
.logo{display:flex;align-items:center;gap:9px;font-weight:700;font-size:calc(17px * var(--echelle-bloc,1));white-space:nowrap;
  color:var(--encre);text-decoration:none;font-family:var(--police-titres);flex-shrink:0}
.logo b{color:var(--marque);font-weight:700}
.pastille{width:9px;height:9px;border-radius:50%;background:var(--marque)}
.barre ul{list-style:none;display:flex;gap:18px;margin-left:auto;flex-wrap:nowrap}
.barre ul li{white-space:nowrap}
.barre ul a{color:var(--encre-douce);text-decoration:none;font-size:calc(14.5px * var(--echelle-bloc,1))}
.barre ul a:hover{color:var(--marque)}
.bascule-theme{background:none;border:1px solid transparent;border-radius:9px;padding:7px;
  cursor:pointer;color:var(--encre-douce);line-height:0;flex-shrink:0}
.bascule-theme:hover{border-color:var(--trait-2);color:var(--marque)}
.bascule-theme svg{width:19px;height:19px}

/* hero */
.hero{font-size:calc(var(--taille-base) * var(--echelle-bloc,1));padding:56px 0 64px;background:linear-gradient(180deg,var(--marque-claire),var(--papier))}
.hero-grille{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:40px;align-items:start}
.hero h1{margin:10px 0 16px}
.boutons{display:flex;flex-wrap:wrap;gap:11px;margin-top:24px}
.rassurance{margin-top:18px;font-size:calc(14px * var(--echelle-bloc,1));color:var(--encre-douce)}
.coche{color:var(--marque);font-weight:700}

/* simulateur */
.simu{background:var(--carte);border:1px solid var(--trait);border-radius:16px;
  box-shadow:var(--ombre);overflow:hidden}
.simu-tete{display:flex;justify-content:space-between;align-items:center;
  padding:13px 17px;border-bottom:1px solid var(--trait);font-size:calc(14px * var(--echelle-bloc,1));font-weight:600}
.simu-direct{font-size:calc(11.5px * var(--echelle-bloc,1));font-weight:700;color:var(--marque);text-transform:uppercase;letter-spacing:.07em}
.simu-corps{padding:17px}
.simu-curseur{display:flex;justify-content:space-between;font-size:calc(13.5px * var(--echelle-bloc,1));
  color:var(--encre-douce);margin-bottom:8px}
.simu-curseur output{font-weight:700;color:var(--encre)}
.simu-corps input[type=range]{width:100%;accent-color:var(--marque);margin-bottom:18px}
.simu-cols{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.simu-col{border:1px solid var(--trait);border-radius:12px;padding:13px}
.simu-apres{background:var(--marque-claire);border-color:transparent}
.simu-k{font-size:calc(10.5px * var(--echelle-bloc,1));font-weight:800;text-transform:uppercase;letter-spacing:.07em;
  color:var(--encre-douce);margin-bottom:10px}
.simu-col ul{list-style:none;font-size:calc(12.5px * var(--echelle-bloc,1))}
.simu-col li{display:flex;justify-content:space-between;gap:9px;padding:4px 0;color:var(--encre-douce)}
.simu-col li b{color:var(--encre);white-space:nowrap}
.simu-plus li{display:list-item;list-style:disc;margin-left:16px;padding:3px 0}
.simu-total{display:flex;justify-content:space-between;align-items:center;
  margin-top:10px;padding-top:9px;border-top:1px solid var(--trait);font-size:calc(13px * var(--echelle-bloc,1))}
.simu-total b{font-size:calc(15px * var(--echelle-bloc,1))}
.simu-prix b{font-size:calc(38px * var(--echelle-bloc,1));font-weight:800;color:var(--marque);display:block;line-height:1.1}
.simu-prix span{font-size:calc(12px * var(--echelle-bloc,1));color:var(--encre-douce)}
.simu-note{margin-top:13px;padding:11px 13px;background:var(--marque-claire);
  border-radius:10px;font-size:calc(13px * var(--echelle-bloc,1));color:var(--encre)}

/* comparaison */
.etats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:26px}
.etat{background:var(--carte);border:1px solid var(--trait);border-radius:14px;padding:20px;
  border-top:3px solid var(--trait-2)}
.etat-avant{border-top-color:#D97A0B}
.etat-apres{border-top-color:var(--marque)}
.etat-surtout{border-top-color:#7A3EA8}
.etat-avant .jeton{background:#FDF1E1;color:#8A4D06}
.etat-surtout .jeton{background:#F1E9F8;color:#5F2E85}
.etat h3{margin:11px 0 9px}
.etat p{font-size:calc(14.5px * var(--echelle-bloc,1));color:var(--encre-douce)}
.jeton{display:inline-block;font-size:calc(11.5px * var(--echelle-bloc,1));font-weight:800;text-transform:uppercase;
  letter-spacing:.07em;padding:4px 10px;border-radius:999px;
  background:var(--marque-claire);color:var(--marque-2)}
.jalon{margin-top:15px;padding:10px 13px;background:var(--papier-2);border-radius:9px;
  font-size:calc(13px * var(--echelle-bloc,1));color:var(--encre-douce)}
.atouts{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.atout{padding:18px;background:var(--carte);border:1px solid var(--trait);border-radius:14px}
.atout-ic{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;
  background:var(--marque-claire);color:var(--marque);margin-bottom:11px}
.atout-ic svg{width:18px;height:18px}
.atout p{font-size:calc(14px * var(--echelle-bloc,1));color:var(--encre-douce);margin-top:6px}

/* vidéo */
.video-cadre{max-width:820px;margin:0 auto;aspect-ratio:16/9;border-radius:14px;
  overflow:hidden;border:1px solid var(--trait);background:var(--papier-2)}
.video-cadre iframe{width:100%;height:100%;border:0}
.video-vide{display:grid;place-items:center;color:var(--encre-douce);font-size:calc(14.5px * var(--echelle-bloc,1))}

/* briques */
.briques{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px}
.brique{background:var(--carte);border:1px solid var(--trait);border-radius:14px;padding:19px}
.brique-tete{display:flex;align-items:center;gap:11px;margin-bottom:13px}
.brique-ic{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;
  background:var(--marque-claire);color:var(--marque);flex-shrink:0}
.brique-ic svg{width:18px;height:18px}
.brique h3{font-size:calc(13px * var(--echelle-bloc,1));font-weight:800;text-transform:uppercase;letter-spacing:.06em}
.brique ul{list-style:none;font-size:calc(14px * var(--echelle-bloc,1))}
.brique li{padding:7px 0;border-bottom:1px solid var(--trait);color:var(--encre-douce)}
.brique li:last-child{border-bottom:0}
.brique li.cle{color:var(--encre);font-weight:600;padding-left:17px;position:relative}
.brique li.cle::before{content:"";position:absolute;left:0;top:14px;width:7px;height:7px;
  border-radius:50%;background:var(--marque)}
.brique li:not(.cle){padding-left:17px;position:relative}
.brique li:not(.cle)::before{content:"";position:absolute;left:3px;top:16px;width:4px;height:4px;
  border-radius:50%;background:var(--trait-2)}
.brique .detail{display:block;font-weight:400;font-size:calc(13px * var(--echelle-bloc,1));color:var(--encre-douce);margin-top:3px}

/* tarifs */
.grille-tarifs{width:100%;border-collapse:collapse;margin-bottom:26px}
.grille-tarifs th{text-align:left;font-size:calc(11.5px * var(--echelle-bloc,1));text-transform:uppercase;letter-spacing:.07em;
  color:var(--encre-douce);padding:0 12px 11px;border-bottom:1px solid var(--trait-2)}
.grille-tarifs td{padding:13px 12px;border-bottom:1px solid var(--trait);font-size:calc(15px * var(--echelle-bloc,1))}
.grille-tarifs .tp b{color:var(--marque);font-size:calc(19px * var(--echelle-bloc,1))}
.grille-tarifs .unite{font-size:calc(12.5px * var(--echelle-bloc,1));color:var(--encre-douce)}
.inclus{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.inclus-col h3,.inclus-col h2{font-size:calc(16px * var(--echelle-bloc,1))}
.inclus-col{background:var(--carte);border:1px solid var(--trait);border-radius:14px;padding:18px}
.inclus-col ul{list-style:none;margin-top:10px;font-size:calc(14px * var(--echelle-bloc,1));color:var(--encre-douce)}
.inclus-col li{padding:5px 0 5px 18px;position:relative}
.inclus-col li::before{content:"";position:absolute;left:0;top:13px;width:6px;height:6px;
  border-radius:50%;background:var(--marque)}
.mention{margin-top:22px;padding:15px 18px;background:var(--marque-claire);border-radius:12px;
  font-size:calc(13px * var(--echelle-bloc,1));color:var(--encre-douce);line-height:1.65}

/* contact */
.contact-grille{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:40px;align-items:start}
.ct-titre{margin:24px 0 12px}
.coordonnees{display:grid;gap:11px}
.coord{display:flex;align-items:flex-start;gap:12px;padding:13px 15px;background:var(--carte);
  border:1px solid var(--trait);border-radius:11px}
.coord-ic{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;
  background:var(--marque-claire);color:var(--marque);flex-shrink:0}
.coord-ic svg{width:16px;height:16px}
.coord-lib{font-size:calc(11.5px * var(--echelle-bloc,1));font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:var(--encre-douce)}
.formulaire{background:var(--carte);border:1px solid var(--trait);border-radius:14px;padding:22px}
.champ{margin-bottom:15px}
.champ label{display:block;font-size:calc(13.5px * var(--echelle-bloc,1));font-weight:600;margin-bottom:6px}
.champ input,.champ textarea{width:100%;font:inherit;font-size:calc(15px * var(--echelle-bloc,1));padding:11px 13px;
  border:1px solid var(--trait-2);border-radius:9px;background:var(--papier);color:var(--encre)}
.rgpd{margin-top:14px;font-size:calc(12px * var(--echelle-bloc,1));color:var(--encre-douce);line-height:1.6}

/* galerie */
.galerie{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.galerie figure{border:1px solid var(--trait);border-radius:12px;overflow:hidden;background:var(--carte)}
.galerie figcaption{padding:9px 12px;font-size:calc(12.5px * var(--echelle-bloc,1));color:var(--encre-douce)}

/* pied de page */
.pied{background:var(--papier-2);border-top:1px solid var(--trait);padding:44px 0 30px;
  font-size:calc(14px * var(--echelle-bloc,1));color:var(--encre-douce)}
.pied-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:24px;margin:22px 0}
.pied-cols h2{color:var(--encre);margin-bottom:9px;font-size:calc(16px * var(--echelle-bloc,1))}
/* Les titres du pied de page sont des h2 pour ne pas sauter de niveau
   depuis le h1 d'une page intérieure. Leur taille reste celle d'un h4. */
.pied-cols ul{list-style:none}
.pied-cols li{padding:3px 0}
.pied-cols a{color:var(--encre-douce);text-decoration:none}
.pied-cols a:hover{color:var(--marque)}
.pied-bas{padding-top:18px;border-top:1px solid var(--trait);font-size:calc(12.5px * var(--echelle-bloc,1))}

/* bandeau d'aperçu */
body[data-apercu]::before{
  content:"Aperçu du brouillon — ce contenu n’est pas encore en ligne";
  display:block;background:#D97A0B;color:#fff;text-align:center;
  padding:9px;font-size:calc(13.5px * var(--echelle-bloc,1));font-weight:600;
}

@media(max-width:900px){
  .hero-grille,.contact-grille{grid-template-columns:1fr}
  .etats,.atouts,.inclus,.simu-cols{grid-template-columns:1fr}
  .barre ul{display:none}
  .section{padding:52px 0}
}
@media(prefers-reduced-motion:reduce){*{transition:none !important;scroll-behavior:auto}}

/* galerie */
.gal-bascule{display:inline-flex;gap:6px;margin-top:18px;padding:5px;background:var(--papier-2);
  border:1px solid var(--trait);border-radius:11px}
.gal-bascule button{font:inherit;font-size:calc(14px * var(--echelle-bloc,1));font-weight:600;padding:9px 16px;border:0;
  border-radius:8px;background:transparent;color:var(--encre-douce);cursor:pointer}
.gal-bascule button.on{background:var(--marque);color:#fff}
.gal-bascule button:focus-visible{outline:3px solid var(--marque);outline-offset:2px}
.gal-compte{margin-top:11px;font-size:calc(13px * var(--echelle-bloc,1));color:var(--encre-faible)}
.gal-vignette{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in}
.galerie figure[hidden]{display:none}
/* Disposition de la galerie (livraison 57). Mosaïque : colonnes, les photos s'emboîtent sans vide,
   chacune à ses proportions. Uniforme : même format pour toutes, recadrées. */
.galerie.gal-mosaique{display:block;columns:3 240px;column-gap:14px}
.galerie.gal-mosaique figure{break-inside:avoid;display:block;width:100%;margin:0 0 14px}
.galerie.gal-mosaique figure[hidden]{display:none}
.galerie.gal-uniforme .gal-vignette{display:block;width:100%;aspect-ratio:4/3}
.galerie.gal-uniforme .gal-vignette img{width:100%;height:100%;object-fit:cover}
.galerie.gal-uniforme-portrait .gal-vignette{display:block;width:100%;aspect-ratio:3/4}
.galerie.gal-uniforme-portrait .gal-vignette img{width:100%;height:100%;object-fit:cover}
/* Rangée incomplète centrée : la grille devient une ligne souple, mêmes largeurs. */
.galerie.gal-centre:not(.gal-mosaique){display:flex;flex-wrap:wrap;justify-content:center}
.galerie.gal-centre:not(.gal-mosaique) figure{flex:0 1 calc((100% - 28px) / 3);min-width:220px}
@media (max-width:760px){.galerie.gal-centre:not(.gal-mosaique) figure{flex-basis:calc(50% - 7px);min-width:0}}
@media (max-width:760px){.galerie.gal-mosaique{columns:2 150px}}

.visionneuse{border:0;padding:0;background:transparent;max-width:min(1100px,94vw);max-height:94vh}
.visionneuse::backdrop{background:rgba(8,12,20,.86)}
.visionneuse img{max-width:100%;max-height:78vh;border-radius:12px;margin:0 auto}
.vis-legende{text-align:center;color:#E8EDF4;font-size:calc(13.5px * var(--echelle-bloc,1));margin-top:12px}
.visionneuse button{position:absolute;background:rgba(255,255,255,.12);color:#fff;border:0;
  border-radius:50%;width:44px;height:44px;font-size:calc(24px * var(--echelle-bloc,1));line-height:1;cursor:pointer}
.vis-fermer{top:6px;right:6px}
.vis-prec{left:6px;top:50%;transform:translateY(-50%)}
.vis-suiv{right:6px;top:50%;transform:translateY(-50%)}
.visionneuse button:hover{background:rgba(255,255,255,.24)}

/* apparition progressive — n'agit que si le JavaScript tourne */
html.js-reveal .reveal{opacity:0;transform:translateY(14px)}
html.js-reveal .reveal.vu{opacity:1;transform:none;transition:opacity .5s ease,transform .5s ease}
@media(prefers-reduced-motion:reduce){
  html.js-reveal .reveal{opacity:1 !important;transform:none !important}
}

/* formulaire de contact */
.piege{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.retour-form{margin-top:12px;padding:11px 13px;border-radius:9px;font-size:calc(13.5px * var(--echelle-bloc,1));
  background:var(--papier-2);color:var(--encre-douce)}
.retour-form.ok{background:rgba(15,123,84,.12);color:#0F7B54}
.retour-form.ko{background:rgba(179,64,47,.12);color:#B3402F}

/* ---- Fonds de section ----
   Le voile et l'image sont des variables posées par le rendu : la feuille de
   style ne connaît ni la photo ni la luminance, seulement comment les afficher. */
.a-fond{position:relative;isolation:isolate}
.fond-photo{background-image:var(--fond-image);background-size:var(--fond-taille,cover);
  background-position:var(--fond-position,center);background-repeat:no-repeat}
.fond-photo::before{content:"";position:absolute;inset:0;z-index:-1;
  background:rgba(0,0,0,var(--fond-voile,0));backdrop-filter:blur(var(--fond-flou,0))}
.fond-sombre{color:#fff}
.fond-sombre .surtitre,.fond-sombre .chapo,.fond-sombre .aide{color:rgba(255,255,255,.82)}
.fond-sombre a{color:#fff}
@media (prefers-reduced-motion:reduce){.fond-photo::before{backdrop-filter:none}}

/* ---- Page de texte ---- */
.cadre-etroit{max-width:760px}
.section-texte .texte-section{margin-top:32px}
.section-texte .texte-section h2,.section-texte .texte-section h3{margin-bottom:10px}
.section-texte p+p{margin-top:12px}

/* ---- Horaires et réseaux, pied de page ---- */
.pied-horaires table{border-collapse:collapse;font-size:calc(14px * var(--echelle-bloc,1))}
.pied-horaires th{text-align:left;font-weight:600;padding:2px 14px 2px 0}
.pied-horaires td{padding:2px 0}
.pied-note{font-size:calc(13px * var(--echelle-bloc,1));margin-top:6px;opacity:.8}
.pied-reseaux ul{list-style:none;padding:0;margin:0}

/* =====================================================================
   Modèles de mise en page.
   Duo ne pose aucune de ces classes : ce qui suit ne s'applique qu'aux
   neuf autres modèles. Aucune règle ici ne touche au contenu ni à l'ordre
   des blocs : colonnes, alignements, densité, largeur, ornements.
   ===================================================================== */

/* ---- densité, largeur, titres ---- */
.densite-compacte .section{padding:44px 0}
.densite-aeree .section{padding:104px 0}
.largeur-etroite .cadre{max-width:880px}
.largeur-large .cadre{max-width:1360px}
.titres-grands h1{font-size:clamp(36px,5vw,58px)}
.titres-grands h2{font-size:clamp(26px,3vw,38px)}
.titres-immenses h1{font-size:clamp(44px,7vw,84px);letter-spacing:-.02em;line-height:1.05}
.titres-immenses h2{font-size:clamp(28px,3.6vw,46px);letter-spacing:-.01em}
.titres-immenses .chapo{font-size:clamp(18px,1.9vw,22px)}

/* ---- sections ---- */
.section-filet+.section-filet{border-top:1px solid var(--trait)}

/* ---- hero ---- */
.hero-centre .hero-grille{grid-template-columns:1fr;justify-items:center}
.hero-centre .hero-grille>div:first-child{max-width:820px}
.hero-centre-texte .hero-grille>div:first-child{text-align:center}
.hero-centre-texte .boutons{justify-content:center}
.hero-centre-texte .surtitre{justify-content:center}
.hero-centre-texte .rassurance{justify-content:center}
.panneau-dessous .hero-grille{grid-template-columns:1fr}
.panneau-gauche .hero-grille>div:first-child{order:2}
.hero-asymetrique .hero-grille{grid-template-columns:minmax(0,1.3fr) minmax(0,.9fr);align-items:center}
.hero-asymetrique .hero-grille>div:first-child{padding-right:6vw}
.hero-sur-image{padding:120px 0 128px;background:var(--marque);color:#fff}
.hero-sur-image .hero-grille{grid-template-columns:1fr;justify-items:center}
.hero-sur-image .hero-grille>div:first-child{text-align:center;max-width:820px}
.hero-sur-image .chapo,.hero-sur-image .rassurance{color:rgba(255,255,255,.85)}
.hero-sur-image .surtitre{color:rgba(255,255,255,.75)}
.hero-sur-image .surtitre::before{background:#fff}
.hero-sur-image .btn-clair{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.4)}
.hero-sur-image .btn-plein{background:#fff;color:var(--marque)}
.hero-sur-image .boutons,.hero-sur-image .rassurance{justify-content:center}

/* ---- grilles ---- */
.briques.col-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.briques.col-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.briques-filets{gap:0}
.briques-filets .brique{background:none;border:0;border-top:1px solid var(--trait);border-radius:0;padding:22px 18px 22px 0}
.briques-tuiles{grid-auto-flow:dense;gap:12px}
.briques-tuiles .brique:first-child{grid-column:span 2;grid-row:span 2}
.briques-tuiles .brique:nth-child(4n){grid-column:span 2}
@media (max-width:900px){.briques.col-4,.briques.col-2{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
  .briques-tuiles .brique{grid-column:span 1 !important;grid-row:span 1 !important}}

/* ---- tarifs ---- */
.tarifs-cartes table{display:block}
.tarifs-cartes thead{display:none}
.tarifs-cartes tbody{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.tarifs-cartes tr{display:flex;flex-direction:column;gap:6px;background:var(--carte);border:1px solid var(--trait);border-radius:14px;padding:18px}
.tarifs-cartes td{padding:0;border:0}
.tarifs-cartes td:first-child{font-weight:700;font-size:calc(15px * var(--echelle-bloc,1))}
.tarifs-cartes td.tp{font-size:calc(26px * var(--echelle-bloc,1));font-weight:800;color:var(--marque)}
.tarifs-filets table{border-collapse:collapse}
.tarifs-filets th,.tarifs-filets td{border:0;border-bottom:1px solid var(--trait);background:none}

/* ---- contact ---- */
.contact-empile .contact-grille{grid-template-columns:1fr}

/* ---- galerie ---- */
.galerie.col-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.galerie.col-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:760px){.galerie.col-2,.galerie.col-3{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}}

/* ---- ornements ---- */
.orne-halo .hero{position:relative;overflow:hidden}
.orne-halo .hero::before{content:"";position:absolute;top:-30%;right:-10%;width:60vw;height:60vw;
  max-width:760px;max-height:760px;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,var(--marque-claire),transparent 70%);filter:blur(40px);opacity:.9}
.orne-bandeau-defilant .hero .rassurance{display:inline-block;white-space:nowrap;overflow:hidden;max-width:100%}
.orne-bandeau-defilant .hero .rassurance>*{display:inline-block;animation:defile 18s linear infinite}
@keyframes defile{from{transform:translateX(100%)}to{transform:translateX(-100%)}}
@media (prefers-reduced-motion:reduce){.orne-bandeau-defilant .hero .rassurance>*{animation:none}.orne-halo .hero::before{filter:none}}

/* ---- Journal ---- */
.articles{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px}
.article-carte{background:var(--carte);border:1px solid var(--trait);border-radius:14px;overflow:hidden;display:flex;flex-direction:column}
.article-carte img{width:100%;aspect-ratio:16/9;object-fit:cover}
.article-corps{padding:18px 20px 20px}
.article-carte time,.article-date time{font-size:calc(13px * var(--echelle-bloc,1));color:var(--encre-douce);letter-spacing:.02em}
.article-carte h2,.article-carte h3{font-size:calc(19px * var(--echelle-bloc,1));margin:6px 0 8px}
.article-carte h2 a,.article-carte h3 a{color:inherit;text-decoration:none}
.article-carte h2 a:hover,.article-carte h3 a:hover{color:var(--marque)}
.article-carte p{font-size:calc(14.5px * var(--echelle-bloc,1));color:var(--encre-douce)}
.article-date{padding-top:28px;margin-bottom:-40px}
.briques-filets.articles .article-carte{border:0;border-top:1px solid var(--trait);border-radius:0;background:none}


/* =====================================================================
   Styles graphiques.
   Sobre ne pose aucune classe : ce qui suit ne s'applique qu'aux cinq
   autres. Un style ne touche qu'à la manière — rayons, ombres, bordures,
   dégradés — jamais au contenu ni à l'ordre des blocs.
   ===================================================================== */

/* Moderne : grands rayons, ombres douces, dégradés discrets */
.style-moderne .btn{border-radius:999px;padding:14px 26px}
.style-moderne .brique,.style-moderne .simu,.style-moderne .article-carte,.style-moderne .simu-col,
.style-moderne .coord,.style-moderne .formulaire{border-radius:22px;border-color:transparent;
  box-shadow:0 2px 6px rgba(0,0,0,.04),0 18px 40px -20px rgba(0,0,0,.18)}
.style-moderne .brique:hover{transform:translateY(-3px);box-shadow:0 4px 10px rgba(0,0,0,.05),0 28px 48px -22px rgba(0,0,0,.24)}
.style-moderne .brique{transition:transform .2s,box-shadow .2s}
.style-moderne .hero{background:radial-gradient(120% 90% at 10% 0%,var(--marque-claire),var(--papier) 70%)}
.style-moderne .galerie img{border-radius:18px}

/* Classique : angles droits, filets, aucun relief */
.style-classique .btn,.style-classique .brique,.style-classique .simu,.style-classique .simu-col,
.style-classique .article-carte,.style-classique .coord,.style-classique .formulaire,
.style-classique .galerie img,.style-classique input,.style-classique textarea{border-radius:0}
.style-classique .brique,.style-classique .article-carte,.style-classique .simu{box-shadow:none;border:1px solid var(--trait-2)}
.style-classique .hero{background:var(--papier);border-bottom:1px solid var(--trait-2)}
.style-classique .section+.section{border-top:1px solid var(--trait)}
.style-classique h1,.style-classique h2{letter-spacing:.01em}
.style-classique .surtitre::before{border-radius:0;width:18px;height:2px}

/* Cartoon : bordures épaisses, ombres décalées, tout arrondi */
.style-cartoon .btn{border-radius:14px;border:3px solid var(--encre);box-shadow:4px 4px 0 var(--encre);font-weight:800}
.style-cartoon .btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--encre)}
.style-cartoon .btn-plein{color:var(--texte-sur-marque,#fff)}
.style-cartoon .brique,.style-cartoon .simu,.style-cartoon .article-carte,.style-cartoon .coord,
.style-cartoon .formulaire,.style-cartoon .simu-col{border:3px solid var(--encre);border-radius:18px;box-shadow:6px 6px 0 var(--marque)}
.style-cartoon .galerie img{border:3px solid var(--encre);border-radius:14px}
.style-cartoon h1{letter-spacing:-.01em;font-weight:900}
.style-cartoon .surtitre::before{width:10px;height:10px;border:2px solid var(--encre)}
.style-cartoon .hero{background:var(--marque-claire)}

/* Nature : rayons organiques, tons adoucis, papier texturé */
.style-nature .btn{border-radius:18px 8px 18px 8px}
.style-nature .brique,.style-nature .article-carte,.style-nature .simu,.style-nature .coord,
.style-nature .formulaire{border-radius:26px 10px 26px 10px;border-color:var(--trait);box-shadow:0 10px 30px -18px rgba(40,60,40,.25)}
.style-nature .galerie img{border-radius:22px 8px 22px 8px}
.style-nature .hero{background:linear-gradient(160deg,var(--marque-claire) 0%,var(--papier) 60%)}
.style-nature body,.style-nature{background-image:radial-gradient(rgba(0,0,0,.025) 1px,transparent 1px);background-size:6px 6px}
.style-nature .section-alt{background:var(--papier-2)}

/* Gloss : reflets, dégradés brillants, ombres portées */
.style-gloss .btn-plein{background:linear-gradient(180deg,var(--marque) 0%,var(--marque-2) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 6px 14px -6px var(--marque-2);border:0}
.style-gloss .btn-plein:hover{filter:brightness(1.06)}
.style-gloss .brique,.style-gloss .simu,.style-gloss .article-carte,.style-gloss .coord,.style-gloss .formulaire{
  background:linear-gradient(180deg,var(--carte) 0%,var(--papier-2) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 12px 28px -14px rgba(0,0,0,.28);border-color:var(--trait-2)}
.style-gloss .hero{background:linear-gradient(180deg,var(--marque-claire) 0%,var(--papier) 100%);
  box-shadow:inset 0 -40px 60px -50px var(--marque)}
.style-gloss .galerie img{box-shadow:0 10px 24px -12px rgba(0,0,0,.35)}
.style-gloss h1{text-shadow:0 1px 0 rgba(255,255,255,.6)}

@media (prefers-reduced-motion:reduce){
  .style-moderne .brique,.style-cartoon .btn{transition:none}
  .style-moderne .brique:hover,.style-cartoon .btn:hover{transform:none}
}


/* ---- Mise en valeur : ce que devient le texte entre crochets ----
   Gras par défaut. Le mode vient d'une variable posée par le thème ; comme le
   CSS ne branche pas sur une variable, chaque mode est une classe sur le corps. */
.mev-surligne b{font-weight:inherit;background:linear-gradient(transparent 55%,var(--mev-fond) 55%);padding:0 .1em;border-radius:2px}
.mev-couleur b{font-weight:inherit;color:var(--mev-couleur)}
.mev-souligne b{font-weight:inherit;text-decoration:underline;text-decoration-color:var(--mev-couleur);text-decoration-thickness:.12em;text-underline-offset:.15em}

/* ---- Matière : intensité du gloss, force des ombres, rayons ---- */
.style-gloss .btn-plein{box-shadow:inset 0 1px 0 rgba(255,255,255,calc(.5 * var(--gloss,.6))),0 6px 14px -6px var(--marque-2)}
.style-gloss .brique,.style-gloss .simu,.style-gloss .article-carte,.style-gloss .coord,.style-gloss .formulaire{
  box-shadow:inset 0 1px 0 rgba(255,255,255,calc(.9 * var(--gloss,.6))),0 12px 28px -14px rgba(0,0,0,calc(.28 * var(--ombres,.5) * 2))}
.style-gloss h1{text-shadow:0 1px 0 rgba(255,255,255,calc(.8 * var(--gloss,.6)))}
.style-moderne .brique,.style-moderne .simu,.style-moderne .article-carte{
  box-shadow:0 2px 6px rgba(0,0,0,calc(.04 * var(--ombres,.5) * 2)),0 18px 40px -20px rgba(0,0,0,calc(.18 * var(--ombres,.5) * 2))}
.btn{border-radius:calc(10px * var(--rayons,1))}
.brique,.article-carte,.coord,.formulaire{border-radius:calc(14px * var(--rayons,1))}
.simu{border-radius:calc(16px * var(--rayons,1))}
.style-moderne .btn{border-radius:calc(999px * min(var(--rayons,1),1))}


/* ---- Section libre : une grille déclarée, qui s'empile sur mobile ---- */
.section-libre .rangee{display:grid;grid-template-columns:var(--colonnes,1fr);gap:28px;align-items:start;margin-top:28px}
.section-libre .rangee:first-child{margin-top:0}
.section-libre .rangee-centre{align-items:center}
.section-libre .rangee-bas{align-items:end}
.section-libre .cellule{min-width:0}
.section-libre .cellule-chiffre b{display:block;font-family:var(--police-titres);font-weight:var(--titres-graisse,700);font-size:calc(2.6rem*var(--echelle-h2,1));line-height:1;color:var(--marque)}
.section-libre .cellule-chiffre span{display:block;margin-top:8px;color:var(--encre-douce)}
.section-libre .cellule p+p{margin-top:12px}
.section-libre .cellule img{width:100%;height:auto;display:block}
.section-libre .ali-centre{text-align:center}
.section-libre .ali-centre .btn{margin:0 auto}
.section-libre .ali-droite{text-align:right}
.section-libre .ali-justifie{text-align:justify;hyphens:auto}
.section-texte.texte-centre .texte-corps{text-align:center} .section-texte.texte-centre .texte-corps .btn{margin:0 auto}
.section-texte.texte-justifie .texte-corps p{text-align:justify;hyphens:auto}
mark{background:var(--mev-fond,var(--marque-claire));color:inherit;padding:0 .15em;border-radius:3px}
/* Briques « texte » : des cartes de présentation — titre, paragraphes, un lien. */
.briques-texte .brique{padding:26px 24px;display:flex;flex-direction:column}
.briques-texte .brique h3,.briques-texte .brique h2{text-transform:none;letter-spacing:0;font-family:var(--police-titres);font-weight:var(--titres-graisse,600);font-size:calc(21px * var(--echelle-bloc,1))}
.briques-texte .brique ul{font-size:calc(15px * var(--echelle-bloc,1));line-height:1.6;flex:1}
.briques-texte .brique li,.briques-texte .brique li.cle,.briques-texte .brique li:not(.cle){padding:0 0 10px;border:0;color:var(--encre-douce);font-weight:400}
.briques-texte .brique li.cle::before,.briques-texte .brique li:not(.cle)::before{display:none}

.briques-texte .brique .detail{font-size:inherit;color:inherit;margin-top:0;display:inline}
.briques-texte .brique-bouton{margin-top:auto;padding-top:14px}
.briques-texte .brique-bouton .btn{background:transparent;border:0;padding:0;color:var(--lien,var(--marque));font-weight:700;box-shadow:none}
.briques-texte .brique-bouton .btn:hover{text-decoration:underline;transform:none}
.briques-texte .brique-avant li,.briques-texte .brique-avant li.cle,.briques-texte .brique-avant li:not(.cle),.briques-texte .brique-avant .detail{color:inherit}
.briques-texte .brique-avant .brique-bouton .btn{color:#fff}
.briques.briques-texte{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.briques.briques-texte{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.briques.briques-texte{grid-template-columns:1fr}}
.section-libre .ali-droite .btn{margin-left:auto}
.section-libre .btn{display:inline-flex}
.cadre-etroite{max-width:820px}
.cadre-pleine{max-width:none;padding:0 32px}
.esp-serre .rangee{gap:14px;margin-top:14px}
.esp-aere .rangee{gap:44px;margin-top:48px}
/* Les formes d'image : cinq, fermées. */
.forme-carre{border-radius:0}
.forme-arrondi{border-radius:calc(18px * var(--rayons,1))}
.forme-rond{border-radius:50%;aspect-ratio:1;object-fit:cover}
.forme-ovale{border-radius:50%;aspect-ratio:4/5;object-fit:cover}
.forme-biseau{clip-path:polygon(8% 0,100% 0,92% 100%,0 100%)}
@media (max-width:760px){
  .section-libre .rangee{grid-template-columns:1fr !important;gap:18px}
  .section-libre .cellule-vide{display:none}
  .section-libre .ali-droite{text-align:left}
}

/* ── Une image dans tout bloc (livraison 19) ── */
.hero-image{margin:0;align-self:center;overflow:hidden;box-shadow:var(--ombre)}
.hero-image img{width:100%;height:100%;object-fit:cover;display:block}
.hero.avec-image .hero-grille{align-items:center}
.hero.image-gauche .hero-grille>div:first-child{order:2}
.hero.a-fond{background:var(--papier)}
.hero.fond-photo::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--fond-image) var(--fond-position,center) / var(--fond-taille,cover) no-repeat}
.hero.fond-photo::after{content:"";position:absolute;inset:0;z-index:-1;background:rgba(15,22,32,var(--fond-voile,.45))}
.hero.fond-photo{position:relative;isolation:isolate;color:#fff}
.hero.fond-photo .surtitre,.hero.fond-photo .chapo,.hero.fond-photo .rassurance{color:rgba(255,255,255,.88)}
.texte-grille{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:40px;align-items:start}
.section-texte.image-gauche .texte-grille{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr)}
.texte-image{margin:0;overflow:hidden;position:sticky;top:24px;box-shadow:var(--ombre)}
.texte-image img{width:100%;height:100%;object-fit:cover;display:block}
.section-texte.image-dessus .texte-image{margin:0 0 28px;max-height:420px}
.forme-carre{aspect-ratio:1/1;border-radius:6px} .forme-arrondi{aspect-ratio:4/3;border-radius:18px} .forme-rond{aspect-ratio:1/1;border-radius:50%}
.forme-portrait{aspect-ratio:3/4;border-radius:12px} .forme-paysage{aspect-ratio:16/10;border-radius:12px} .forme-large{aspect-ratio:21/9;border-radius:12px}
.brique-image{margin:-4px -4px 12px;overflow:hidden;border-radius:10px 10px 0 0;aspect-ratio:16/9}
.brique-image img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:760px){.texte-grille,.section-texte.image-gauche .texte-grille{grid-template-columns:1fr}.texte-image{position:static}.hero.image-gauche .hero-grille>div:first-child{order:0}}

/* ── Briques : bouton en bas, carte mise en avant (livraison 22) ── */
.brique{display:flex;flex-direction:column}
.brique ul{flex:1}
.brique-bouton{margin:14px 0 0}
.brique-avant{background:var(--bouton,var(--marque));border-color:var(--bouton,var(--marque));color:var(--texte-sur-bouton,var(--texte-sur-marque,#fff))}
.brique-avant h2,.brique-avant h3,.brique-avant li,.brique-avant .detail{color:inherit}
.brique-avant li::before{background:currentColor;opacity:.7}
.brique-avant .btn-plein{background:#fff;color:var(--bouton,var(--marque));border-color:#fff}
.brique-avant .btn-clair{color:inherit;border-color:currentColor}
.brique-avant .brique-ic{background:rgba(255,255,255,.18);color:inherit}
p a,li a,.chapo a{color:var(--lien,var(--marque));text-decoration:underline;text-underline-offset:2px}

/* Un bandeau avec photo à côté : deux colonnes, quel que soit le modèle (centré, panneau dessous…). */
.hero.avec-image .hero-grille,.hero.avec-image.hero-centre .hero-grille,.hero.avec-image.panneau-dessous .hero-grille{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);justify-items:stretch}
.hero.avec-image.hero-centre .hero-grille>div:first-child{max-width:none}
.hero.avec-image .hero-image{width:100%;max-width:560px;justify-self:end}
.hero.avec-image.image-gauche .hero-image{justify-self:start}
.hero.avec-image.image-gauche.panneau-gauche .hero-grille>div:first-child,.hero.avec-image.image-gauche .hero-grille>div:first-child{order:2}
.hero.avec-image:not(.image-gauche) .hero-grille>div:first-child{order:0}
@media (max-width:760px){.hero.avec-image .hero-grille,.hero.avec-image.hero-centre .hero-grille{grid-template-columns:1fr}.hero.avec-image .hero-image{justify-self:stretch;max-width:none}}
/* Aperçu : la section survolée se signale, pour dire qu'on peut cliquer dessus. */
body[data-apercu].studio-encadre [data-bloc]{cursor:pointer;outline:2px solid transparent;outline-offset:-2px;transition:outline-color .15s}
body[data-apercu].studio-encadre [data-bloc]:hover{outline-color:var(--marque)}

/* Réseaux sociaux : logos ronds dans le pied (livraison 23). */
.pied-reseaux-logos ul{display:flex;flex-wrap:wrap;gap:8px}
.pied-reseaux-logos a{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1px solid var(--trait-2,var(--trait));color:inherit;text-decoration:none}
.pied-reseaux-logos a:hover{background:var(--marque);color:var(--texte-sur-marque,#fff);border-color:var(--marque)}
.pied-reseaux-logos-et-noms a{display:inline-flex;align-items:center;gap:8px}
.pied-reseaux-logos-et-noms li{margin-bottom:6px}
.visuellement-cache{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

body[data-apercu] .studio-cible{outline:3px solid var(--marque);outline-offset:-3px;box-shadow:0 0 0 6px color-mix(in srgb,var(--marque) 22%,transparent)}

/* Rangée centrée ou à droite : la colonne de vide se place devant. */
.cellule-vide{min-height:1px}
@media (max-width:760px){.cellule-vide{display:none}}

body[data-apercu].studio-encadre .galerie figure{cursor:grab}
/* Aperçu (livraison 59) : les éléments se désignent, chaque section porte sa barre. Rien sur le site public. */
body[data-apercu].studio-encadre [data-el]{cursor:pointer;border-radius:4px;transition:box-shadow .12s}
body[data-apercu].studio-encadre [data-el]:hover{box-shadow:0 0 0 2px color-mix(in srgb,var(--marque) 55%,transparent)}
body[data-apercu].studio-encadre [data-el].studio-el{box-shadow:0 0 0 2px var(--marque)}
body[data-apercu] [data-bloc]{position:relative !important}
body[data-apercu] .studio-barre{position:absolute;top:8px;right:10px;z-index:40;display:none;gap:2px;align-items:center;padding:3px;border-radius:9px;background:#fff;color:#243B4A;border:1px solid #CED9E0;box-shadow:0 8px 24px -12px rgba(15,26,22,.35);font:13px -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;text-transform:none;letter-spacing:0}
body[data-apercu].studio-encadre [data-bloc]:hover>.studio-barre,body[data-apercu].studio-encadre .studio-cible>.studio-barre{display:flex}
body[data-apercu] .studio-nom{padding:4px 8px;font-weight:700;color:#2C5C8E;border-right:1px solid #E4EAEF;margin-right:3px;max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body[data-apercu] .studio-nom:empty{display:none}
body[data-apercu] .studio-bt{font:inherit;border:0;background:none;padding:4px 8px;border-radius:6px;cursor:pointer;color:#243B4A;line-height:1.2}
body[data-apercu] .studio-bt:hover{background:#E7EFF8;color:#2C5C8E}
body[data-apercu] .studio-bt-retirer:hover{background:#FBEAE7;color:#B3402F}
body[data-apercu] .studio-bt-modele{display:none} body[data-apercu].studio-fin .studio-bt-modele{display:inline-block}
body[data-apercu] .studio-ajouter{position:absolute;left:50%;bottom:-14px;transform:translateX(-50%);z-index:41;display:none;font:700 12px -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:#2C5C8E;color:#fff;border:0;border-radius:999px;padding:6px 13px;cursor:pointer;box-shadow:0 8px 24px -12px rgba(15,26,22,.35);text-transform:none;letter-spacing:0}
body[data-apercu].studio-encadre [data-bloc]:hover>.studio-ajouter,body[data-apercu].studio-encadre .studio-cible>.studio-ajouter{display:block}
body[data-apercu].studio-encadre .studio-touche>.studio-barre{display:flex} body[data-apercu].studio-encadre .studio-touche>.studio-ajouter{display:block}
/* Au doigt et sur petit écran : la barre s'étale sur la largeur de la section, gros boutons. */
@media (hover: none), (max-width: 700px){
  body[data-apercu].studio-encadre .studio-barre{left:6px;right:6px;top:6px;flex-wrap:wrap;justify-content:flex-end;gap:4px}
  body[data-apercu].studio-encadre .studio-nom{flex:1 1 100%;border-right:0;margin:0 0 2px;max-width:none;font-size:12px}
  body[data-apercu].studio-encadre .studio-bt{padding:8px 10px;min-width:40px;font-size:15px}
  body[data-apercu].studio-encadre .studio-ajouter{padding:9px 16px;font-size:13px}
  body[data-apercu].studio-encadre [data-el]:hover{box-shadow:none}
}
body[data-apercu] .studio-ajouter:hover{background:#224A73}
body[data-apercu] .galerie figure.studio-glisse{opacity:.5}
body[data-apercu] .galerie figure.studio-cible-depot{outline:3px dashed var(--marque);outline-offset:-3px}

/* Vidéos : lecteur natif, façade cliquable, grille de plusieurs (livraison 30) */
.videos{max-width:820px;margin:0 auto} .videos-grille{max-width:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:20px}
.video-item{margin:0} .video-item figcaption{padding:8px 4px;font-size:calc(13px * var(--echelle-bloc,1));color:var(--encre-douce);text-align:center}
.video-cadre video{width:100%;height:100%;display:block;background:#000}
.video-facade{display:grid;place-items:center;width:100%;border:0;cursor:pointer;background:linear-gradient(135deg,var(--marque),var(--marque-2,var(--marque))) center/cover no-repeat;color:#fff;position:relative}
.video-item:nth-child(3n+2) .video-facade{background:linear-gradient(135deg,var(--marque) 0%,color-mix(in srgb,var(--marque) 40%,#fff) 100%)} .video-item:nth-child(3n) .video-facade{background:linear-gradient(135deg,var(--marque-2,var(--marque)) 0%,#0f1117 100%)}
.video-facade .video-lecture{width:72px;height:72px;border-radius:50%;background:var(--marque);color:var(--texte-sur-marque,#fff);display:grid;place-items:center;font-size:28px;box-shadow:0 8px 30px rgba(0,0,0,.4)}
.video-facade .video-titre{position:absolute;left:14px;bottom:12px;font-weight:700;text-shadow:0 1px 6px rgba(0,0,0,.7)}
.video-facade:hover .video-lecture{transform:scale(1.06)}

body[data-apercu] .studio-depot{outline:3px dashed var(--marque);outline-offset:-3px;background-color:color-mix(in srgb,var(--marque) 10%,transparent)}

/* Galerie libre : dès qu'une photo a une largeur ou une forme, la grille passe à 12 colonnes
   et chaque photo prend sa part, comme une cellule de section libre. */
.galerie.galerie-libre{grid-template-columns:repeat(12,minmax(0,1fr))}
.galerie.galerie-libre figure{grid-column:span var(--span,3)}
.galerie.galerie-libre figure[class*="forme-"] .gal-vignette img{width:100%;height:100%;object-fit:cover}
.galerie.galerie-libre figure[class*="forme-"] .gal-vignette{display:block;width:100%}
.galerie.galerie-libre figure.forme-carre .gal-vignette{aspect-ratio:1/1} .galerie.galerie-libre figure.forme-arrondi .gal-vignette{aspect-ratio:4/3}
.galerie.galerie-libre figure.forme-rond{border-radius:50%} .galerie.galerie-libre figure.forme-rond .gal-vignette{aspect-ratio:1/1}
.galerie.galerie-libre figure.forme-portrait .gal-vignette{aspect-ratio:3/4} .galerie.galerie-libre figure.forme-paysage .gal-vignette{aspect-ratio:16/10} .galerie.galerie-libre figure.forme-large .gal-vignette{aspect-ratio:21/9}
@media (max-width:760px){.galerie.galerie-libre{grid-template-columns:repeat(2,minmax(0,1fr))}.galerie.galerie-libre figure{grid-column:span 1}.galerie.galerie-libre figure[style*="--span:12"],.galerie.galerie-libre figure[style*="--span:9"],.galerie.galerie-libre figure[style*="--span:8"]{grid-column:span 2}}

/* ── Logo, éventail, boutique, filtres, réseaux du contact, style Case (livraison 35) ── */
.logo-img{height:44px;width:auto;display:block;max-width:220px;object-fit:contain}
.pied-logo{height:36px;width:auto;margin-bottom:10px;display:block;object-fit:contain}
.hero-eventail{position:relative;margin:0;min-height:380px;width:100%}
.hero-eventail img{position:absolute;width:44%;top:8%;left:2%;border:4px solid #fff;box-shadow:8px 8px 0 rgba(0,0,0,.55);transform:rotate(-6deg);background:#fff}
.hero-eventail img.carte-2{left:29%;top:0;transform:rotate(3deg);z-index:2}
.hero-eventail img.carte-3{left:56%;top:12%;transform:rotate(9deg)}
.hero-eventail.n1 img{width:60%;left:20%} .hero-eventail.n2 img.carte-1{left:8%} .hero-eventail.n2 img.carte-2{left:46%}
.hero-badge{position:absolute;left:6%;bottom:2%;z-index:3;background:var(--bouton,var(--marque));color:var(--texte-sur-bouton,var(--texte-sur-marque,#fff));font-family:var(--police-titres);font-size:calc(22px * var(--echelle-bloc,1));padding:8px 16px;border:3px solid #111;transform:rotate(-4deg);box-shadow:5px 5px 0 rgba(0,0,0,.5);letter-spacing:.02em}
.hero.avec-eventail .hero-grille{align-items:center}
@media (max-width:760px){.hero-eventail{min-height:260px}.hero-eventail img{width:48%}}
.filtres{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px}
.filtre{font:inherit;font-weight:700;font-size:calc(14px * var(--echelle-bloc,1));padding:8px 14px;border:2px solid var(--encre);background:var(--papier);color:var(--encre);border-radius:8px;cursor:pointer}
.filtre.actif{background:var(--encre);color:var(--papier)}
.article-carte.masque{display:none}
.articles-couvertures{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.articles-couvertures .article-carte img{aspect-ratio:3/4;object-fit:cover;width:100%;display:block}
.etiquette{display:inline-block;font-size:calc(12.5px * var(--echelle-bloc,1));font-weight:700;color:var(--lien,var(--marque));margin-bottom:4px}
.article-achat{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px}
.article-achat .prix{font-weight:800;font-size:calc(20px * var(--echelle-bloc,1))}
.article-date .prix{font-weight:800;margin-left:10px} .article-date .etiquette{margin-left:8px}
.contact-reseaux{list-style:none;padding:0;margin:16px 0 0;display:flex;gap:10px}
.contact-reseaux a{display:grid;place-items:center;width:44px;height:44px;border:2px solid var(--encre);border-radius:8px;color:inherit}
.contact-reseaux a:hover{background:var(--marque);color:var(--texte-sur-marque,#fff);border-color:var(--marque)}
/* Style Case BD : traits noirs, ombres dures, angles vifs, titres en capitales serrées */
.style-case{--r-carte:6px}
.style-case h1,.style-case h2{text-transform:uppercase;letter-spacing:.03em}
.style-case .fond-sombre h1,.style-case .hero.fond-sombre h1,.style-case .hero.a-fond h1{color:#fff;text-shadow:5px 5px 0 var(--marque)}
.style-case .hero h1{font-size:calc(clamp(44px,7vw,104px) * var(--echelle-bloc,1));line-height:.95}
.style-case .btn{border-radius:4px;border:3px solid #111;box-shadow:4px 4px 0 #111;font-weight:800}
.style-case .btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 #111}
.style-case .brique,.style-case .article-carte,.style-case .coord,.style-case .formulaire,.style-case .simu,.style-case .simu-col,.style-case .video-cadre,.style-case .filtre{border:3px solid #111;border-radius:4px;box-shadow:6px 6px 0 #111}
.style-case .article-carte{overflow:hidden;background:var(--papier)}
.style-case .galerie img,.style-case .texte-image,.style-case .hero-image,.style-case .brique-image{border:3px solid #111;border-radius:4px;box-shadow:6px 6px 0 #111}
.style-case .formulaire input,.style-case .formulaire textarea{border:3px solid #111;border-radius:4px}
.style-case .barre{border-bottom:4px solid var(--marque)} .style-case .pied{border-top:4px solid var(--marque)}
.style-case .filtre.actif{background:#111;color:#fff}
html[data-theme="sombre"] .style-case .btn,html[data-theme="sombre"] .style-case .brique,html[data-theme="sombre"] .style-case .article-carte,html[data-theme="sombre"] .style-case .filtre{border-color:#fff;box-shadow:6px 6px 0 rgba(255,255,255,.35)}

/* ── Panier (livraison 37) ── */
.lien-panier{position:relative;display:grid;place-items:center;width:38px;height:38px;color:var(--encre);border-radius:10px}
.lien-panier:hover{background:var(--papier-2)} .lien-panier svg{width:22px;height:22px}
.panier-compte{position:absolute;top:2px;right:2px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--marque);color:var(--texte-sur-marque,#fff);font-size:11px;font-weight:800;display:grid;place-items:center}
.panier-lignes{width:100%;border-collapse:collapse;margin:0 0 18px}
.panier-lignes th{text-align:left;font-size:calc(12px * var(--echelle-bloc,1));text-transform:uppercase;letter-spacing:.06em;color:var(--encre-faible);padding:0 8px 10px}
.panier-lignes td{padding:10px 8px;border-top:1px solid var(--trait);vertical-align:middle}
.panier-article{display:flex;align-items:center;gap:12px} .panier-article img{width:48px;height:64px;object-fit:cover;border-radius:6px}
.panier-qte{display:inline-flex;align-items:center;gap:8px} .panier-qte button{width:28px;height:28px;border:1px solid var(--trait-2,var(--trait));background:var(--papier);border-radius:6px;cursor:pointer;font-size:16px}
.panier-retirer{border:0;background:none;cursor:pointer;color:var(--encre-faible);font-size:16px}
.panier-total{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin:8px 0 16px} .panier-total b{font-size:calc(22px * var(--echelle-bloc,1))} .panier-total small{flex-basis:100%;color:var(--encre-douce)}
.panier-actions{display:flex;gap:10px;flex-wrap:wrap} .panier-retour{margin:12px 0 0;color:var(--encre-douce)} .panier-secours a{margin:0 2px}
.ajouter-panier.ajoute{background:#0F7B54;border-color:#0F7B54;color:#fff}
.panier-mention{margin-top:20px}

/* ── Motif de texture par-dessus un fond (livraison 39) ── */
.a-motif{position:relative;isolation:isolate}
.a-motif::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:var(--motif);background-size:var(--motif-taille,auto);background-position:var(--motif-position,0 0);background-repeat:repeat}
.fond-photo.a-motif::after{z-index:0}
.fond-photo.a-motif>*{position:relative;z-index:1}

/* Menu et pied avec un fond propre : les couleurs du fond l'emportent sur celles de la barre. */
.barre.a-fond{background-color:transparent} .barre.a-fond.fond-sombre a,.barre.a-fond.fond-sombre .logo,.barre.a-fond.fond-sombre .bascule-theme,.barre.a-fond.fond-sombre .lien-panier{color:#fff}
.pied.a-fond{background-color:transparent}

/* Cartes d'articles : taille des vignettes, prix qui ne se casse pas (livraison 47) */
.articles-couvertures{justify-content:center}
.articles.vignettes-petites{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
.articles.vignettes-moyennes{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.articles.vignettes-grandes{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.articles.vignettes-tres-grandes{grid-template-columns:repeat(auto-fill,minmax(340px,1fr))}
.article-achat{flex-wrap:wrap}
.article-achat .prix{white-space:nowrap;flex:0 0 auto}
.article-achat .btn{flex:1 1 auto;text-align:center;white-space:nowrap}
.articles.titres-minuscules h2,.articles.titres-minuscules h3{text-transform:none;letter-spacing:0}
.articles.vignettes-petites .article-corps{padding:10px} .articles.vignettes-petites .article-achat .btn{font-size:calc(12.5px * var(--echelle-bloc,1));padding:6px 8px}

/* ── Interactions au survol (réglages fins → Interactions) ── */
.btn,.barre ul a,p a,li a{transition:color var(--survol-duree,180ms),background-color var(--survol-duree,180ms),border-color var(--survol-duree,180ms),transform var(--survol-duree,180ms),box-shadow var(--survol-duree,180ms)}
.menu-soulignement .barre ul a{position:relative}
.menu-soulignement .barre ul a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:3px;background:var(--survol-couleur,var(--marque));transform:scaleX(0);transform-origin:left;transition:transform var(--survol-duree,180ms)}
.menu-soulignement .barre ul a:hover::after,.menu-soulignement .barre ul a[aria-current]::after{transform:scaleX(1)}
.menu-fond .barre ul a{padding:6px 10px;border-radius:8px} .menu-fond .barre ul a:hover{background:color-mix(in srgb,var(--survol-couleur,var(--marque)) 14%,transparent)}
.menu-aucun .barre ul a:hover{color:inherit}
.boutons-soulever .btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px -10px rgba(0,0,0,.45)}
.boutons-pousser .btn:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 #111}
.boutons-agrandir .btn:hover{transform:scale(1.04)}
.boutons-aucun .btn:hover{transform:none;filter:none;background:var(--bouton,var(--marque));box-shadow:inherit}
.liens-couleur p a,.liens-couleur li a{text-decoration:none} .liens-couleur p a:hover,.liens-couleur li a:hover{color:var(--survol-couleur,var(--marque))}
.liens-aucun p a,.liens-aucun li a{text-decoration:none;color:inherit}
@media (prefers-reduced-motion:reduce){.btn,.barre ul a{transition:none}}

.barre ul a:hover{color:var(--survol-couleur,var(--marque))}
.menu-soulignement .barre ul a:hover{color:inherit}
/* L'icône du panier et la bascule clair/sombre réagissent comme les liens du menu. */
.barre .lien-panier:hover,.barre .bascule-theme:hover{background:transparent;color:var(--survol-couleur,var(--marque))}
.menu-fond .barre .lien-panier:hover,.menu-fond .barre .bascule-theme:hover{background:color-mix(in srgb,var(--survol-couleur,var(--marque)) 14%,transparent)}
.menu-soulignement .barre .lien-panier{position:relative} .menu-soulignement .barre .lien-panier::after{content:"";position:absolute;left:8px;right:8px;bottom:0;height:3px;background:var(--survol-couleur,var(--marque));transform:scaleX(0);transform-origin:left;transition:transform var(--survol-duree,180ms)}
.menu-soulignement .barre .lien-panier:hover::after{transform:scaleX(1)} .menu-soulignement .barre .lien-panier:hover{color:inherit}
.barre .lien-panier,.barre .bascule-theme{transition:color var(--survol-duree,180ms),background-color var(--survol-duree,180ms)}

/* ── Mode sombre : les fonds clairs des sections s'assombrissent (réglages fins → Mode sombre) ──
   La couleur d'une section est posée en style inline par le rendu (background-color, background-image) ;
   seule une déclaration !important passe devant un style inline. C'est le seul endroit où on s'en sert. */
html[data-theme="sombre"] body:not(.sombre-garde) .a-fond.fond-clair{background-color:color-mix(in srgb,var(--fond-base,var(--papier)) var(--sombre-teinte,14%),var(--papier)) !important;background-image:none !important}
/* Fonds clairs gardés : la section reste claire, son texte doit donc rester sombre. */
html[data-theme="sombre"] body.sombre-garde .a-fond.fond-clair{--encre:#141414;--encre-douce:#4A4A4A;--encre-faible:#6F6F6F;--carte:#FFFFFF;--papier-2:#F4F4F4;--trait:#E4EAEF;--trait-2:#CED9E0;--voile:rgba(255,255,255,.94);color-scheme:light}
html[data-theme="sombre"] body:not(.sombre-garde) .a-fond.fond-clair .hero-badge{border-color:var(--trait-2)}
html[data-theme="sombre"] .style-case .btn,html[data-theme="sombre"] .style-case .filtre,html[data-theme="sombre"] .style-case .brique,html[data-theme="sombre"] .style-case .article-carte,html[data-theme="sombre"] .style-case .coord,html[data-theme="sombre"] .style-case .formulaire,html[data-theme="sombre"] .style-case .video-cadre{border-color:var(--trait-2);box-shadow:6px 6px 0 rgba(0,0,0,.6)}
html[data-theme="sombre"] .style-case .formulaire input,html[data-theme="sombre"] .style-case .formulaire textarea{border-color:var(--trait-2);background:var(--papier-2);color:var(--encre)}
html[data-theme="sombre"] .style-case .barre,html[data-theme="sombre"] .style-case .pied{border-color:var(--marque)}
html[data-theme="sombre"] .style-case .fond-sombre h1,html[data-theme="sombre"] .style-case .hero h1{text-shadow:5px 5px 0 var(--marque-2,var(--marque))}
html[data-theme="sombre"] .logo-img,html[data-theme="sombre"] .pied-logo{filter:none}
html[data-theme="sombre"] .contact-reseaux a,html[data-theme="sombre"] .filtre{border-color:var(--trait-2)}