/* === DEBUT DU BLOC DES POLICES, GENERE PAR outils/polices.mjs === */
/* ---------- Polices hebergees sur notre serveur ----------
   Bloc GENERE par outils/polices.mjs. Ne pas le modifier a la main.

   Les fichiers latin-ext ne sont telecharges par le navigateur que si une
   page contient un caractere qui sort du latin de base. En francais cela
   n'arrive pas : les accents, le e dans l'o et le signe euro sont tous
   dans le sous-ensemble latin.

   Licence : SIL Open Font License 1.1 pour les deux familles. */
@font-face{
  font-family:'Comfortaa';
  font-style:normal;
  font-weight:300 400;
  font-display:swap;
  src:url(/assets/fonts/comfortaa-variable-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Comfortaa';
  font-style:normal;
  font-weight:300 400;
  font-display:swap;
  src:url(/assets/fonts/comfortaa-variable-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Open Sans';
  font-style:normal;
  font-weight:400 600;
  font-display:swap;
  src:url(/assets/fonts/open-sans-variable-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Open Sans';
  font-style:normal;
  font-weight:400 600;
  font-display:swap;
  src:url(/assets/fonts/open-sans-variable-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* === FIN DU BLOC DES POLICES === */

/* au Jardin de Julie - feuille de style unique
   -------------------------------------------------------------------------
   Toutes les valeurs de couleur, de typographie et de mise en page viennent
   de CHARTE.md, ou elles sont relevees sur le site en ligne puis arbitrees.
   Ne pas en changer une ici sans la changer la-bas : la charte est le
   document que le client a valide.

   Deux valeurs du site actuel sont des defauts corriges, pas des choix :
   - le gris #5E5E5E du menu sur fond noir plafonne a 3,24:1, en echec AA ;
   - le body portait line-height:14px pour font-size:14px, les lignes se
     touchaient.
   ------------------------------------------------------------------------- */

:root{
  /* Noir pur et blanc pur provoquent un halo a la lecture. L'ecart est
     invisible cote identite, le confort est mesurable. */
  --bg:#0D0D0D;
  --surface:#141414;
  --fg:#F2F0EC;
  --fg-soft:#ABA8A1;
  --nav:#C9C9C9;
  --vert:#87B71D;
  --vert-fonce:#6F9916;
  --line:#262626;

  --titre:"Comfortaa","Trebuchet MS",sans-serif;
  --corps:"Open Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;

  --wrap:1200px;
  --read:72ch;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--corps);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
/* height:auto est indispensable : sans lui, les attributs width/height du HTML
   (poses pour reserver la place et eviter les sauts de mise en page)
   l'emportent sur aspect-ratio et imposent la hauteur d'origine. */
img{display:block;max-width:100%;height:auto}
picture{display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--vert);outline-offset:3px;border-radius:4px}

.skip{position:absolute;left:-9999px;top:0;background:var(--vert);color:#0D0D0D;padding:.7em 1.2em;z-index:100;font-weight:600}
.skip:focus{left:0}

/* Conteneur borne a 1200px. Le site actuel laisse le texte filer sur toute la
   largeur : 1425px de ligne sur un ecran de 1440, illisible. */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:20px}
section{padding-block:clamp(48px,7vw,88px)}

/* Libelle reserve aux lecteurs d'ecran */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Typographie ---------- */
h1,h2,h3{font-family:var(--titre);font-weight:400;text-wrap:balance;margin:0}
h1{font-size:clamp(1.9rem,1.3rem + 2.6vw,2.5rem);line-height:1.25;letter-spacing:-.01em}
h2{font-size:clamp(1.45rem,1.15rem + 1.3vw,2rem);line-height:1.3}
h3{font-size:1.15rem;line-height:1.4}
p{margin:0;max-width:var(--read)}
.lead{font-size:clamp(1.08rem,1rem + .4vw,1.25rem);line-height:1.6;color:var(--fg-soft)}
.stack{display:flex;flex-direction:column;gap:18px;align-items:flex-start}

/* ---------- Boutons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.6em;
  font-family:var(--corps);font-size:.95rem;font-weight:600;
  padding:.82em 1.6em;border-radius:100px;border:1px solid transparent;
  text-decoration:none;cursor:pointer;transition:background .2s,color .2s,border-color .2s;
}
/* Le vert #87B71D tient 9:1 avec du texte sombre dessus, mais seulement 2,4:1
   avec du blanc : le libelle d'un bouton vert doit rester sombre. */
.btn-main{background:var(--vert);color:#0D0D0D}
.btn-main:hover{background:var(--vert-fonce)}
.btn-ghost{border-color:#5A5A5A;color:var(--fg);background:transparent}
.btn-ghost:hover{border-color:var(--fg);background:rgba(242,240,236,.06)}

/* ---------- En-tete ---------- */
header{
  position:sticky;top:0;z-index:40;
  background:rgba(13,13,13,.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.bar{display:flex;align-items:center;gap:20px;min-height:72px}
.logo{
  font-family:var(--titre);font-weight:300;
  font-size:clamp(1.5rem,1.1rem + 1.6vw,1.95rem);
  color:var(--fg);text-decoration:none;line-height:1;white-space:nowrap;
}

.nav-desk{margin-left:auto;display:flex;align-items:center;gap:14px}
.menu{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:2px}
.menu > li{position:relative}
.menu-lien{
  display:inline-flex;align-items:center;gap:.45em;
  font-family:var(--corps);font-size:.92rem;color:var(--nav);
  background:none;border:0;cursor:pointer;text-decoration:none;
  padding:10px 12px;border-radius:9px;
  transition:color .2s,background .2s;
}
.menu-lien:hover,.has-sub:hover > .menu-lien{color:var(--vert);background:rgba(135,183,29,.1)}
.menu-lien.actif{color:var(--vert);font-weight:600}
.chev{
  width:7px;height:7px;flex:none;margin-top:-3px;
  border-right:1.7px solid currentColor;border-bottom:1.7px solid currentColor;
  transform:rotate(45deg);transition:transform .2s,margin .2s;
}
.has-sub:hover .chev,[aria-expanded="true"] .chev{transform:rotate(225deg);margin-top:3px}

.sous-menu{
  position:absolute;top:100%;left:-6px;min-width:230px;
  list-style:none;margin:0;padding:8px;
  background:var(--surface);border:1px solid var(--line);
  border-radius:14px;box-shadow:0 18px 44px rgba(0,0,0,.6);
  opacity:0;visibility:hidden;transform:translateY(7px);
  transition:opacity .18s,transform .18s,visibility .18s;
}
.has-sub:hover > .sous-menu,
.menu-lien[aria-expanded="true"] + .sous-menu{opacity:1;visibility:visible;transform:translateY(0)}
.sous-menu a{display:block;padding:10px 12px;border-radius:9px;font-size:.92rem;color:var(--nav);text-decoration:none;white-space:nowrap}
.sous-menu a:hover{background:rgba(242,240,236,.06);color:var(--vert)}
.sous-menu a[aria-current="page"]{color:var(--vert);font-weight:600}

.burger{
  display:none;margin-left:auto;align-items:center;justify-content:center;
  width:46px;height:46px;flex:none;padding:0;cursor:pointer;
  background:var(--surface);border:1px solid var(--line);border-radius:13px;
  transition:border-color .2s;
}
.burger:hover{border-color:var(--vert)}
.burger-traits{display:flex;flex-direction:column;gap:5px;width:20px}
.burger-traits i{display:block;height:2px;background:var(--fg);border-radius:2px}

@media (max-width:1040px){
  .nav-desk{display:none}
  .burger{display:inline-flex}
}

/* ---------- Modale mutualisee ----------
   Un seul squelette pour le menu mobile et la visionneuse de photos. Le site
   actuel chargeait fancybox et jQuery pour ce seul usage. */
.modale{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:20px}
.modale[hidden]{display:none}
.modale-fond{
  position:absolute;inset:0;
  background:rgba(0,0,0,.72);
  -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
  animation:modale-fondu .22s ease both;
}
.modale-boite{
  position:relative;z-index:1;
  width:100%;max-width:440px;
  max-height:calc(100vh - 40px);overflow-y:auto;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:22px;
  box-shadow:0 18px 60px rgba(0,0,0,.7);
  padding:26px 22px 22px;
  animation:modale-monte .26s cubic-bezier(.2,.8,.3,1) both;
}
@supports (max-height:100dvh){
  .modale-boite{max-height:calc(100dvh - 40px)}
}
@keyframes modale-fondu{from{opacity:0}to{opacity:1}}
@keyframes modale-monte{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}

.modale-x{
  position:absolute;top:14px;right:14px;z-index:3;
  width:40px;height:40px;flex:none;padding:0;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--bg);border:1px solid var(--line);border-radius:50%;
  transition:background .2s,transform .2s;
}
.modale-x:hover{background:#1E1E1E;transform:rotate(90deg)}
.modale-x svg{width:17px;height:17px;fill:none;stroke:var(--fg);stroke-width:2.1;stroke-linecap:round}

body.modale-ouverte{overflow:hidden}

/* ---------- Menu mobile ---------- */
.modale-boite--menu{max-width:420px}
.modale-titre{
  font-family:var(--titre);font-weight:300;font-size:1.5rem;line-height:1.2;
  color:var(--fg);margin:0 0 10px;padding-right:46px;
}
.nav-mob ul{list-style:none;margin:0;padding:0}
.nav-mob > ul > li + li{border-top:1px solid var(--line)}
.nav-mob-parent{
  display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
  font-family:var(--titre);font-size:1.1rem;color:var(--fg);text-align:left;
  background:none;border:0;padding:15px 2px;cursor:pointer;text-decoration:none;
}
.nav-mob-parent[aria-current="page"]{color:var(--vert)}
.nav-mob-sous{display:none;padding:0 0 12px 2px}
.nav-mob-parent[aria-expanded="true"] + .nav-mob-sous{display:block}
.nav-mob-sous a{display:block;padding:9px 0;font-size:.98rem;color:var(--fg-soft);text-decoration:none}
.nav-mob-sous a:hover{color:var(--vert)}
.nav-mob-sous a[aria-current="page"]{color:var(--vert);font-weight:600}
.modale-tel{width:100%;justify-content:center;margin-top:18px}

/* ---------- Visionneuse de photos ----------
   Le role de bouton et le focus sont poses par le script : sans JavaScript il
   n'y a pas de visionneuse, donc rien ne doit laisser croire le contraire. */
.galerie img.zoomable{cursor:zoom-in}
.galerie img.zoomable:focus-visible{outline:2px solid var(--vert);outline-offset:3px}

.modale-boite--photo{width:-moz-fit-content;width:fit-content;max-width:min(1080px,100%);padding:14px 14px 4px}
.visionneuse{position:relative;line-height:0}
.visionneuse img{
  display:block;width:auto;max-width:100%;max-height:calc(100vh - 190px);
  border-radius:12px;background:var(--bg);
}
@supports (max-height:100dvh){
  .visionneuse img{max-height:calc(100dvh - 190px)}
}
.vis-nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:44px;height:44px;padding:0;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(13,13,13,.86);border:1px solid var(--line);border-radius:50%;
}
.vis-nav:hover{background:var(--bg)}
.vis-nav svg{width:20px;height:20px;fill:none;stroke:var(--fg);stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.vis-prec{left:12px}
.vis-suiv{right:12px}
.visionneuse-legende{
  display:flex;justify-content:space-between;gap:20px;align-items:baseline;
  margin:12px 4px;font-size:.88rem;color:var(--fg-soft);max-width:none;
}
.visionneuse-compteur{flex:none;font-variant-numeric:tabular-nums;color:var(--fg)}
.visionneuse.seule .vis-nav,
.visionneuse.seule ~ .visionneuse-legende .visionneuse-compteur{display:none}

/* ---------- Ouverture : le diaporama ----------
   Pleine largeur, hors conteneur (decision du 2026-10-27). L'effet du plugin
   actuel (kenburns.js : fondu enchaine plus zoom-travelling) est refait ici en
   CSS pur, sans jQuery ni plugin. 3 vues, 7 s chacune, cycle de 21 s.
   Valeurs et keyframes : CHARTE.md. */
.hero{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:clamp(420px,66vh,640px);
  display:flex;align-items:flex-end;
  background:#000;
}
.hero-slides{position:absolute;inset:0;z-index:-2}
.hero-slides picture{position:absolute;inset:0}
.hero-slides img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;
  animation:kenburns 21s infinite both;
}
.hero-slides picture:nth-child(1) img{animation-delay:0s}
.hero-slides picture:nth-child(2) img{animation-delay:7s}
.hero-slides picture:nth-child(3) img{animation-delay:14s}

@keyframes kenburns{
  0%   { opacity:0; transform:scale(1.00) translate(0,0); }
  2%   { opacity:1; }
  31%  { opacity:1; }
  34%  { opacity:0; transform:scale(1.11) translate(-1.4%,-1%); }
  100% { opacity:0; transform:scale(1.00) translate(0,0); }
}

/* Degrade de lisibilite. Sans lui, un titre clair sur une composition claire
   disparait : c'est l'audit color-contrast en echec sur le site actuel. */
.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(0,0,0,.52) 0%,rgba(0,0,0,.18) 40%,rgba(0,0,0,.82) 100%);
}
.hero-inner{padding-block:clamp(36px,6vw,64px);width:100%}
.hero h1{color:#fff;text-shadow:0 2px 24px rgba(0,0,0,.55)}
.hero-sub{font-size:clamp(1.02rem,.95rem + .4vw,1.2rem);color:rgba(255,255,255,.92);margin-top:14px}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px;align-items:center}

/* Pastille d'etat d'ouverture, calculee chez le visiteur.
   Le fond est sombre et opaque a 78%, et non translucide clair : sur le
   diaporama la pastille se pose sur une photo dont la luminosite change a
   chaque vue, et le vert #87B71D ne tient pas le contraste sur un fond clair
   (2,4:1 sur blanc). Sur fond sombre il est a 9:1. Le flou derriere evite
   l'effet d'etiquette collee. */
.etat-boutique{
  display:inline-flex;align-items:center;gap:.6em;
  font-size:.92rem;font-weight:600;color:var(--fg);
  background:rgba(13,13,13,.78);border:1px solid rgba(242,240,236,.22);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  border-radius:100px;padding:.45em 1.1em;max-width:none;
}
.etat-boutique::before{
  content:"";width:8px;height:8px;border-radius:50%;flex:none;background:var(--fg-soft);
}
.etat-boutique[data-ouvert="oui"]{color:var(--vert)}
.etat-boutique[data-ouvert="oui"]::before{background:var(--vert)}
.etat-boutique[data-ouvert="non"]::before{background:#8A8A8A}

/* ---------- Cartes ---------- */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media (max-width:900px){.grid3{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.grid3{grid-template-columns:1fr}}
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:14px;
  padding:26px 24px 28px;display:flex;flex-direction:column;gap:12px;min-width:0;
}
.card h3{color:var(--fg)}
.card p{color:var(--fg-soft);font-size:.97rem;line-height:1.65;max-width:none}
.card .more{margin-top:auto;padding-top:8px;font-size:.9rem;font-weight:600;color:var(--vert);text-decoration:none}
.card .more:hover{text-decoration:underline}
.card .tel{font-family:var(--titre);font-size:1.5rem;color:var(--fg);text-decoration:none}
.card .tel:hover{color:var(--vert)}
.card table{border-collapse:collapse;width:100%;font-size:.95rem}
.card th{text-align:left;font-weight:400;color:var(--fg);padding:.25em 0}
.card td{text-align:right;color:var(--fg-soft);padding:.25em 0;font-variant-numeric:tabular-nums}

.bande{background:#111111;border-block:1px solid var(--line)}

.prestations{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.prestations li{
  font-size:.88rem;padding:.35em .85em;border-radius:100px;
  background:var(--surface);border:1px solid var(--line);color:var(--fg-soft);
}

/* ---------- Galerie ----------
   Grille, pas carrousel. Le site actuel affiche 9 photos de 1980x1320
   redimensionnees par le navigateur a 1368x912, chargees toutes d'un coup :
   2 235 Ko d'images pour une page. Ici le shortcode photo decline chaque
   fichier en AVIF, WebP et JPEG a 4 largeurs, et tout ce qui n'est pas dans
   le premier ecran est en loading="lazy". */
.galerie{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:760px){.galerie{grid-template-columns:repeat(2,1fr);gap:10px}}
.galerie picture{line-height:0}
.galerie img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:10px;max-width:100%}
.galerie-titre{margin-bottom:22px}

/* Trou de contenu assume et visible. Voir la regle « photos par page » de
   DECISIONS.md : on marque ce qui manque, on ne le bouche pas avec les
   photos d'une autre page. A retirer quand le client a fourni les visuels. */
.manque{
  margin-top:20px;padding:14px 18px;border-radius:10px;
  border:1px dashed #5A5A5A;color:var(--fg-soft);font-size:.92rem;max-width:none;
}

/* ---------- Pages de contenu ---------- */
.page-head{
  background:#111111;
  padding-block:clamp(28px,4vw,48px) clamp(24px,3.5vw,38px);
  border-bottom:1px solid var(--line);
}
.page-head h1{margin-top:12px;color:var(--vert)}
/* Page deuil : le H1 reste clair et aucun aplat vert n'apparait. Un vert vif
   au-dessus d'une composition funeraire sonne faux. Seule page concernee,
   ecart valide (CHARTE.md). */
.page-head--sobre h1{color:var(--fg)}
.page-head .lead{margin-top:16px}
.contenu{max-width:var(--read);display:flex;flex-direction:column;gap:20px}
.contenu h2{margin-top:18px;font-size:clamp(1.3rem,1.1rem + .9vw,1.7rem)}
.contenu h3{margin-top:10px}
.contenu ul{margin:0;padding-left:1.3em;color:var(--fg-soft)}
.contenu li{margin-block:.3em}
.contenu .prestations{padding-left:0}
.contenu dl{margin:0;display:flex;flex-direction:column;gap:16px}
.contenu dt{font-weight:600;color:var(--fg)}
.contenu dd{margin:0;color:var(--fg-soft)}
.contenu a{color:var(--vert)}
.contenu em{color:var(--fg-soft)}
.ariane{font-size:.85rem;color:var(--fg-soft)}
.ariane a{text-decoration:none}
.ariane a:hover{color:var(--vert)}

/* ---------- Contact ---------- */
.contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,5vw,56px);align-items:start}
@media (max-width:860px){.contact-grid{grid-template-columns:1fr}}
.tel-bloc{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:2px}
.tel{
  font-family:var(--titre);font-size:clamp(1.6rem,1.3rem + 1.4vw,2.1rem);
  color:var(--fg);text-decoration:none;
}
.tel:hover{color:var(--vert)}
.infos{display:flex;flex-direction:column;gap:20px}
.info-l{font-size:.78rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--vert);margin-bottom:4px}
.info-v{color:var(--fg-soft);font-size:.97rem}
table.horaires{border-collapse:collapse;width:100%;max-width:340px;font-size:.97rem}
table.horaires th{text-align:left;font-weight:400;color:var(--fg);padding:.3em 0}
table.horaires td{text-align:right;color:var(--fg-soft);padding:.3em 0;font-variant-numeric:tabular-nums}

/* ---------- Plan du site en pied de page ---------- */
.pied-liens{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:28px;
  padding-block:8px 28px;border-bottom:1px solid var(--line);margin-bottom:24px;
}
@media (max-width:760px){.pied-liens{grid-template-columns:repeat(2,1fr);gap:22px}}
.pied-titre{font-size:.78rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--vert);margin:0 0 10px}
.pied-liens ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.pied-liens a{text-decoration:none;color:var(--nav);font-size:.9rem}
.pied-liens a:hover{color:var(--vert)}
.pied-liens a[aria-current="page"]{color:var(--vert);font-weight:600}
.pied-liens li{font-size:.9rem;color:var(--fg-soft)}

footer{border-top:1px solid var(--line);padding-block:32px 40px;font-size:.88rem;color:var(--fg-soft)}
.foot{display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center}
.foot .logo{font-size:1.3rem;color:var(--fg-soft)}

/* ---------- Appel a l'action de bas de page ----------
   Le site actuel laisse environ 400px de noir vide juste avant le pied de
   page, sur toutes les pages. */
.bande-contact{background:var(--vert);padding-block:clamp(40px,5.5vw,68px)}
.bande-contact h2,.bande-contact p{color:#0D0D0D}
.bande-contact p{max-width:56ch;opacity:.86}
.bande-contact .btn-main{background:#0D0D0D;color:var(--fg);margin-top:6px}
.bande-contact .btn-main:hover{background:#000}
.bande-contact--sobre{background:#111111;border-top:1px solid var(--line)}
.bande-contact--sobre h2{color:var(--fg)}
.bande-contact--sobre p{color:var(--fg-soft);opacity:1}
.cta{display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px}
.cta p{text-align:center}

/* ---------- Barre d'appel mobile ----------
   Un fleuriste se joint au telephone : sur mobile le numero ne doit jamais
   demander un defilement. */
.callbar{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:50;
  background:var(--vert);
  padding:12px 20px calc(12px + env(safe-area-inset-bottom,0px));
  justify-content:center;
}
.callbar a{
  color:#0D0D0D;text-decoration:none;font-weight:600;font-size:1rem;
  display:inline-flex;align-items:center;gap:.6em;
}
@media (max-width:760px){
  .callbar{display:flex}
  body{padding-bottom:74px}
}

/* Le mouvement du diaporama est un effet, pas une information : il se coupe
   entierement quand le visiteur a demande moins d'animations. */
@media (prefers-reduced-motion: reduce){
  *{animation:none!important;transition:none!important}
  .hero-slides img{opacity:0}
  .hero-slides picture:first-child img{opacity:1}
}

/* Variante 4 colonnes : l'accueil garde 3 photos pour le diaporama et il en
   reste 4 pour la galerie. Sur une grille a 3 colonnes, la quatrieme laisse
   un trou. */
.galerie--quatre{grid-template-columns:repeat(4,1fr)}
@media (max-width:760px){.galerie--quatre{grid-template-columns:repeat(2,1fr)}}

/* Une seule photo : dans une grille a 3 colonnes elle occupait un tiers de la
   largeur et paraissait perdue. C'est le cas de /deuil/ et de
   /fleuriste-mulhouse/, ou il manque justement des visuels. */
.galerie--seule{grid-template-columns:minmax(0,620px);justify-content:center}
.galerie--seule img{aspect-ratio:3/2}

/* Dans une colonne de texte, .contenu est un flex en colonne : la pastille
   s'etirait sur toute la largeur de lecture au lieu d'epouser son texte. */
.contenu .etat-boutique{align-self:flex-start}

/* Deux photos : une grille a 3 colonnes en laisse une vide. */
.galerie--deux{grid-template-columns:repeat(2,1fr)}
@media (max-width:620px){.galerie--deux{grid-template-columns:1fr}}

/* Galerie sans recadrage, pour les documents : une coupure de presse rognee
   en 4/3 perd son titre et devient illisible. Ici l'image garde ses
   proportions et se pose sur un fond neutre. */
.galerie--libre{align-items:start}
.galerie--libre img{aspect-ratio:auto;object-fit:contain;background:#1A1A1A}

/* ---------- Avis Google ----------
   Affichage seulement : aucun balisage AggregateRating, voir le commentaire
   dans index.njk. */
.avis{display:grid;grid-template-columns:auto 1fr;gap:clamp(28px,5vw,56px);align-items:center}
@media (max-width:700px){.avis{grid-template-columns:1fr;gap:24px}}
.avis-note{text-align:center;flex:none}
.avis-chiffre{
  font-family:var(--titre);font-size:clamp(3rem,2rem + 4vw,4.5rem);line-height:1;
  color:var(--fg);margin:0;max-width:none;
}
.avis-chiffre span{font-size:.38em;color:var(--fg-soft)}
.avis-nombre{font-size:.92rem;color:var(--fg-soft);margin-top:6px;max-width:none}

/* Les etoiles : une seule chaine de caracteres, remplie en vert sur la part
   correspondant a la note. Pas d'image, pas d'icone a charger. */
.etoiles{margin:8px 0 0;max-width:none;font-size:1.5rem;line-height:1;letter-spacing:.1em}
.etoiles span{
  display:inline-block;
  background:linear-gradient(90deg,var(--vert) var(--part),#3A3A3A var(--part));
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
}

/* Fleche des liens qui ouvrent une nouvelle fenetre. Le lecteur d'ecran, lui,
   recoit la mention en toutes lettres via .sr dans le lien. */
.ico-sortie{
  width:.85em;height:.85em;flex:none;margin-left:.1em;
  fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
}

/* Bouton d'action secondaire, dans une colonne d'informations. */
.btn-petit{font-size:.88rem;padding:.6em 1.2em;margin-top:4px}