/* ==========================================================================
   Flora Lys — feuille de styles du thème
   Identité tirée du logo : or #C8B050, bleu goutte #38B0F8, lettrage serif.
   ========================================================================== */

/* ---------- police ----------
   Figtree est servie depuis ce serveur, plus depuis Google : aucune adresse IP
   de visiteur ne part chez un tiers, et il n'y a donc aucun consentement à
   demander. Un seul fichier variable couvre les graisses 400 à 700. */
@font-face{
  font-family:'Figtree';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('../fonts/figtree-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:'Figtree';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('../fonts/figtree-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;
}

:root{
  color-scheme: light;

  --or:#866C28;
  --or-clair:#C9AE6B;
  /* L'or du logo, tel quel. Il porte du texte sombre, jamais du blanc :
     en blanc il tombe à 2,1:1, illisible. */
  --or-logo:#C8B050;
  --or-logo-fonce:#B59A3C;
  /* Le bleu de la goutte du logo, décliné pour l'écran.
     --bleu est la version lisible sur fond clair, --bleu-clair celle du logo. */
  --bleu:#1D6E9B;
  --bleu-clair:#38B0F8;
  --bleu-voile:#EAF4FB;
  --bleu-trait:#CFE4F2;
  /* Les grands aplats ne sont plus noirs : un bleu ardoise profond,
     qui tient le contraste sans assombrir la page. */
  --sombre:#2B3A45;
  /* Les grands aplats ne sont plus sombres du tout : un ciel très clair,
     tiré de la goutte du logo. */
  --ciel:#E8F4FC;
  --ciel-fonce:#D2E9F7;
  --ciel-trait:#B9DCF2;
  --encre:#37332D;
  --encre-douce:#6E675E;
  --fond:#FDFCFA;
  --papier:#FFFFFF;
  --papier-gris:#F3F1EC;
  --trait:#E5E1D8;

  /* Une seule famille sur tout le site : des formes rondes et ouvertes,
     qui se lisent longtemps sans fatiguer. */
  --sans:"Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --titre:"Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --etiquette:"Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  --r-grand:20px;
  --r-moyen:14px;
  --r-petit:999px;

  --colonne:1180px;
  --gouttiere:24px;
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--fond);
  color:var(--encre);
  font-family:var(--sans);
  font-size:16.5px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,svg,video{max-width:100%; height:auto; display:block}
a{color:inherit}
h1,h2,h3,h4{text-wrap:balance}
:focus-visible{outline:2px solid var(--or); outline-offset:3px}
@media (prefers-reduced-motion:reduce){*{transition:none !important; animation:none !important}}

.wrap{max-width:var(--colonne); margin-inline:auto; padding-inline:var(--gouttiere)}
.lecture{max-width:68ch}

.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0}
.skip-link{position:absolute; left:-9999px; top:0; z-index:999; background:var(--encre);
  color:#fff; padding:12px 20px; border-radius:0 0 var(--r-moyen) 0}
.skip-link:focus{left:0}

  border-bottom:1px solid var(--trait)}
.bandeau .wrap{display:flex; flex-wrap:wrap; gap:4px 28px; padding-block:5px; align-items:center}
.bandeau a{display:inline-block; padding-block:5px}
.bandeau b{color:var(--encre); font-weight:600}
.bandeau a{text-decoration:none}
.bandeau a:hover{color:var(--encre)}
.bandeau .pousse{margin-left:auto}

/* ---------- en-tête ---------- */
.entete{position:sticky; top:0; z-index:50; background:rgba(253,252,250,.92);
  backdrop-filter:blur(8px); border-bottom:1px solid var(--trait)}
.entete .wrap{display:flex; align-items:center; gap:24px; padding-block:14px}
/* Assez grand pour que « la propreté à votre portée » se lise. */
.entete .logo img{width:252px}
.entete .logo{text-decoration:none; font-family:var(--titre); font-weight:700;
  letter-spacing:-.03em; font-size:25px; line-height:1}

.menu{display:flex; gap:26px; margin-left:auto; flex-wrap:wrap; list-style:none; padding:0; margin-block:0}
.menu a{text-decoration:none; font-size:14.5px; color:var(--encre-douce); padding-block:8px;
  border-bottom:2px solid transparent; transition:color .15s, border-color .15s; display:block}
.menu a:hover,.menu .current-menu-item > a{color:var(--encre); border-bottom-color:var(--or)}
.menu .sub-menu{display:none}
/* Le bouton de devis est devenu le dernier élément du menu (voir floralys.js) :
   il garde son écart propre et reste aligné sur la barre. */
.menu .menu-devis{display:flex; align-items:center; margin-left:4px}
/* .menu a (0,2,0) l'emporte sur .bouton (0,1,0) : sans cette règle le
   bouton du menu reprend la couleur des liens et disparaît sur l'or. */
.menu .menu-devis a{padding-block:0; border-bottom:0; color:#2B2A26}
.menu .menu-devis a:hover{color:#2B2A26; border-bottom:0}

.burger{display:none; margin-left:auto; background:none; border:1px solid var(--trait);
  border-radius:var(--r-petit); width:46px; height:46px; cursor:pointer; position:relative}
.burger span{position:absolute; left:13px; right:13px; height:2px; background:var(--encre);
  transition:transform .2s, opacity .2s}
.burger span:nth-child(1){top:16px}
.burger span:nth-child(2){top:22px}
.burger span:nth-child(3){top:28px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ---------- boutons ---------- */
.bouton{display:inline-block; background:var(--sombre); color:#fff; text-decoration:none;
  font-size:14.5px; font-weight:500; padding:12px 24px; border:1px solid var(--encre);
  border-radius:var(--r-petit); cursor:pointer; font-family:inherit;
  transition:background .15s, color .15s, border-color .15s}
.bouton:hover{background:var(--or); border-color:var(--or); color:#fff}
.bouton.clair{background:transparent; color:var(--encre); border-color:var(--trait)}
.bouton.clair:hover{background:var(--sombre); color:#fff; border-color:var(--sombre)}
/* L'or du logo, avec du texte sombre : c'est la seule façon de garder la
   couleur exacte de la marque et un contraste lisible (6,7:1). */
.bouton.or{background:var(--or-logo); border-color:var(--or-logo); color:#2B2A26}
.bouton.or:hover{background:var(--or-logo-fonce); border-color:var(--or-logo-fonce); color:#2B2A26}
.bouton.or:hover{background:var(--encre); border-color:var(--encre)}

/* ---------- bannière ---------- */
.banniere{position:relative; background:var(--ciel); color:var(--encre); overflow:hidden;
  border-radius:0 0 32px 32px}
.banniere img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.16}
.banniere .wrap{position:relative; padding-block:96px 84px}
.banniere h1{font-family:var(--titre); font-weight:600; letter-spacing:-.025em; font-size:clamp(40px,6.4vw,74px);
  line-height:1.03; margin:0 0 22px; max-width:17ch}
.banniere p{max-width:60ch; font-size:17.5px; color:var(--encre-douce); margin:0 0 34px}
.banniere .bouton.clair{color:var(--encre); border-color:rgba(43,58,69,.28)}
.banniere .bouton.clair:hover{background:var(--encre); color:#fff; border-color:var(--encre)}

.surtitre{font-family:var(--etiquette); font-weight:600; font-size:12.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--or); margin:0 0 20px}
.actions{display:flex; flex-wrap:wrap; gap:12px}

/* en-tête des pages intérieures */
.entete-page{background:var(--papier-gris); border-radius:0 0 32px 32px}
.entete-page .wrap{padding-block:62px 56px}
.entete-page h1{font-family:var(--titre); font-weight:600; letter-spacing:-.025em; font-size:clamp(34px,5vw,56px);
  line-height:1.06; margin:0 0 14px}
.entete-page p{margin:0; color:var(--encre-douce); max-width:62ch; font-size:17px}
.fil{font-family:var(--etiquette); font-weight:600; font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--encre-douce); margin:0 0 18px}
.fil a{text-decoration:none}
.fil a:hover{color:var(--or)}

/* ---------- chiffres ---------- */
.chiffres .wrap{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; padding-block:40px}
.chiffre{background:var(--bleu-voile); border:1px solid var(--bleu-trait);
  border-radius:var(--r-moyen); padding:24px 22px}
.chiffre b{display:block; font-family:var(--titre); font-weight:700; letter-spacing:-.03em; font-size:44px; line-height:1;
  font-variant-numeric:tabular-nums; margin-bottom:8px; color:var(--bleu);
  white-space:nowrap}
.chiffre span{font-size:13.5px; color:var(--encre-douce); display:block; max-width:22ch}

/* ---------- sections ---------- */
.section{padding-block:76px}
.section.gris{background:var(--papier-gris)}
.titre{font-family:var(--titre); font-weight:600; letter-spacing:-.025em; font-size:clamp(30px,4vw,44px);
  line-height:1.12; margin:0 0 14px}
.chapo{max-width:62ch; color:var(--encre-douce); margin:0 0 44px; font-size:17px}

/* ---------- grille de prestations ---------- */
.grille3{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.presta{background:var(--papier); padding:30px 28px 32px; min-width:0;
  border:1px solid var(--trait); border-radius:var(--r-moyen); text-decoration:none; display:block;
  transition:box-shadow .25s, transform .25s}
.presta:hover{box-shadow:0 12px 30px rgba(55,51,45,.07); transform:translateY(-2px)}
.presta h3{font-size:16.5px; font-weight:600; margin:0 0 10px}
.presta p{margin:0; font-size:14.8px; color:var(--encre-douce)}
.presta .num{font-family:var(--etiquette); font-weight:600; font-size:12px; color:var(--or); letter-spacing:.08em;
  display:block; margin-bottom:14px}

/* ---------- séquence ---------- */
.sequence{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
.etape{padding:26px 24px 28px; background:var(--papier); min-width:0;
  border:1px solid var(--trait); border-radius:var(--r-moyen); border-top:3px solid var(--or)}
.etape .tag{font-family:var(--etiquette); font-weight:600; font-size:11.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--or); display:block; margin-bottom:10px}
.etape h3{font-size:17px; margin:0 0 9px; font-weight:600}
.etape p{margin:0; font-size:14.6px; color:var(--encre-douce)}

/* ---------- références ---------- */
.refs{display:flex; flex-wrap:wrap; gap:10px; list-style:none; padding:0; margin:0}
.refs li{border:1px solid var(--trait); background:var(--papier); padding:10px 20px;
  font-size:14.5px; color:var(--encre-douce); border-radius:var(--r-petit)}

/* ---------- réalisations ---------- */
.grille-proj{display:grid; grid-template-columns:repeat(2,1fr); gap:26px}
.proj{min-width:0; text-decoration:none; display:block; background:var(--papier);
  border:1px solid var(--trait); border-radius:var(--r-grand); overflow:hidden;
  transition:box-shadow .25s, transform .25s}
.proj:hover{box-shadow:0 14px 34px rgba(55,51,45,.09); transform:translateY(-2px)}
.proj .vignette{aspect-ratio:16/10; overflow:hidden; background:var(--papier-gris)}
.proj .vignette img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease}
.proj:hover .vignette img{transform:scale(1.035)}
.proj .texte{padding:22px 24px 26px}
.proj .lieu{font-family:var(--etiquette); font-weight:600; font-size:11.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--or); display:block; margin-bottom:9px}
.proj h3{font-family:var(--titre); font-weight:600; letter-spacing:-.025em; font-size:27px; margin:0 0 10px; line-height:1.15}
.proj p{margin:0; font-size:14.6px; color:var(--encre-douce)}
.proj dl{display:flex; gap:26px; margin:16px 0 0; padding-top:15px; border-top:1px solid var(--trait);
  font-size:13px; flex-wrap:wrap}
.proj dt{color:var(--encre-douce); margin:0 0 2px}
.proj dd{margin:0; font-weight:600; font-variant-numeric:tabular-nums}

/* filtres de la page réalisations */
.filtres{display:flex; flex-wrap:wrap; gap:10px; margin:0 0 34px; padding:0; list-style:none}
.filtres a{display:inline-block; text-decoration:none; font-size:14px; padding:9px 20px;
  border:1px solid var(--trait); border-radius:var(--r-petit); color:var(--encre-douce)}
.filtres a:hover,.filtres .actif a{background:var(--sombre); color:#fff; border-color:var(--sombre)}

/* ---------- fiche projet ---------- */
.fiche{display:grid; grid-template-columns:2fr 1fr; gap:46px; align-items:start}
.fiche .galerie{display:grid; grid-template-columns:1fr 1fr; gap:14px; min-width:0}
.fiche .galerie img{width:100%; border-radius:var(--r-moyen); aspect-ratio:4/3; object-fit:cover}
.fiche .galerie .large{grid-column:1 / -1; aspect-ratio:16/9}
.fiche aside{min-width:0}
.fiche aside h2{font-family:var(--titre); font-weight:600; letter-spacing:-.025em; font-size:26px; margin:0 0 14px}
.fiche aside h3{font-size:14px; letter-spacing:.04em; text-transform:uppercase; margin:34px 0 14px;
  color:var(--encre-douce)}
.infos{width:100%; border-collapse:collapse; font-size:14.5px}
.infos td{padding:11px 14px; border-bottom:1px solid var(--trait)}
.infos tr:nth-child(odd) td{background:var(--papier-gris)}
.infos td:first-child{color:var(--encre-douce)}
.infos td:last-child{text-align:right; font-weight:500}
.liste-taches{list-style:none; padding:0; margin:0; display:grid; gap:11px; font-size:14.6px}
.liste-taches li{padding-left:28px; position:relative; color:var(--encre-douce)}
.liste-taches li::before{content:""; position:absolute; left:0; top:7px; width:16px; height:16px;
  border-radius:50%; border:1.5px solid var(--or)}
.liste-taches li::after{content:""; position:absolute; left:5px; top:12px; width:6px; height:3px;
  border-left:1.5px solid var(--or); border-bottom:1.5px solid var(--or); transform:rotate(-45deg)}

/* ---------- contenu éditorial ---------- */
.contenu{font-size:16.5px}
.contenu h2{font-family:var(--titre); font-weight:600; letter-spacing:-.025em; font-size:32px; margin:44px 0 14px}
.contenu h3{font-size:19px; margin:32px 0 10px}
.contenu p{margin:0 0 18px}
.contenu ul,.contenu ol{margin:0 0 18px; padding-left:22px}
.contenu li{margin-bottom:8px}
.contenu img{border-radius:var(--r-moyen); margin-block:24px}
.contenu a{color:var(--or)}
.contenu blockquote{margin:28px 0; padding:22px 26px; background:var(--papier-gris);
  border-radius:var(--r-moyen); border-left:3px solid var(--or)}

/* ---------- appel final ---------- */
.final{background:var(--ciel); color:var(--encre); border:1px solid var(--ciel-trait);
  border-radius:32px; margin-inline:16px}
.final .wrap{display:flex; flex-wrap:wrap; gap:36px; align-items:center;
  justify-content:space-between; padding-block:66px}
.final h2{font-family:var(--titre); font-weight:600; letter-spacing:-.025em; font-size:clamp(28px,3.6vw,40px);
  margin:0 0 12px; line-height:1.14; max-width:20ch}
.final p{margin:0; color:var(--encre-douce); max-width:46ch}
/* Le bouton clair est dessiné pour un fond clair : sur l'aplat sombre du bloc
   final il arrivait en 1,07:1, c'est-à-dire invisible. */
.final .bouton.clair{color:var(--encre); border-color:rgba(43,58,69,.28)}
.final .bouton.clair:hover{background:var(--encre); color:#fff; border-color:var(--encre)}
.final .tel{font-family:var(--titre); font-weight:600; letter-spacing:-.02em; font-size:32px; text-decoration:none; display:block;
  margin-bottom:6px}

/* ---------- formulaire ---------- */
.formulaire{display:grid; gap:16px; grid-template-columns:1fr 1fr; max-width:760px}
.champ{display:grid; gap:7px; min-width:0}
.champ.large{grid-column:1 / -1}
.champ label{font-size:13.5px; color:var(--encre-douce)}
.champ input,.champ textarea,.champ select{font:inherit; font-size:16px; padding:13px 16px;
  border:1px solid var(--trait); border-radius:var(--r-moyen); background:var(--papier);
  color:var(--encre); width:100%}
.champ textarea{min-height:150px; resize:vertical}
.champ input:focus,.champ textarea:focus,.champ select:focus{border-color:var(--or); outline:none}
.consentement{grid-column:1 / -1; display:flex; gap:11px; align-items:flex-start;
  font-size:13.5px; color:var(--encre-douce)}
.consentement input{margin-top:3px; width:18px; height:18px; flex:none}
.formulaire h2.groupe{grid-column:1 / -1; font-family:var(--titre); font-weight:600; letter-spacing:-.025em; font-size:21px;
  margin:14px 0 -2px; padding-top:14px; border-top:1px solid var(--trait); color:var(--encre)}
.formulaire h2.groupe:first-of-type{margin-top:0; padding-top:0; border-top:0}
.champ .aide{font-size:12.8px; color:var(--encre-douce); line-height:1.5}
.champ input[type=file]{padding:11px 14px; background:var(--papier-gris); border-style:dashed; cursor:pointer}
.champ input[type=file]::file-selector-button{font:inherit; font-size:13.5px; margin-right:12px;
  padding:7px 14px; border:1px solid var(--trait); border-radius:var(--r-petit);
  background:var(--papier); color:var(--encre); cursor:pointer}
.champ input[type=file]:hover{border-color:var(--or)}
.champ.envoi{display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px}
.champ.envoi .bouton{width:auto}

.avis{border-radius:var(--r-grand); padding:22px 26px; margin-bottom:40px;
  border:1px solid var(--trait); background:var(--papier-gris)}
.avis h2{margin:0 0 6px; font-size:19px; font-weight:600; font-family:var(--sans)}
.avis p{margin:0; color:var(--encre-douce); font-size:15.2px}
.avis.bon{border-color:var(--bleu); background:#F0F7FC}
.avis.attention{border-color:var(--or); background:#FBF7EC}
.avis.probleme{border-color:#C0392B; background:#FBF0EF}

/* ---------- pied de page ---------- */
.pied{background:var(--ciel); color:var(--encre-douce); font-size:14px;
  border-top:1px solid var(--ciel-trait); border-radius:32px 32px 0 0; margin-top:28px}
.pied .wrap{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:36px; padding-block:52px}
.pied h2{color:var(--encre); font-size:13px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  margin:0 0 14px}
.pied a{text-decoration:none}
.pied a:hover{color:var(--or)}
.pied ul{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.copy{border-top:1px solid #4A443B}
.copy .wrap{display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between;
  padding-block:20px; font-size:13px}

/* ---------- pagination ---------- */
/* WordPress enveloppe la pagination dans une <ul class="page-numbers"> :
   c'est elle qui porte la rangée, jamais le style de pastille. */
.pagination{margin-top:44px}
.pagination ul.page-numbers{display:flex; flex-wrap:wrap; gap:8px; align-items:center;
  list-style:none; margin:0; padding:0}
.pagination ul.page-numbers li{margin:0}
.pagination a.page-numbers,
.pagination span.page-numbers,
.pagination > a,
.pagination > span{display:inline-flex; align-items:center; justify-content:center;
  min-width:44px; min-height:44px; padding:0 16px; border:1px solid var(--trait);
  border-radius:var(--r-petit); text-decoration:none; font-size:14.5px; font-weight:500;
  transition:border-color .15s, color .15s, background .15s}
.pagination a.page-numbers:hover,
.pagination > a:hover{border-color:var(--or); color:var(--or)}
.pagination .current{background:var(--sombre); color:#fff; border-color:var(--sombre)}
.pagination .dots{border-color:transparent}

/* ---------- adaptatif ---------- */
@media (max-width:980px){
  .fiche{grid-template-columns:1fr; gap:36px}
  .chiffres .wrap{grid-template-columns:repeat(2,1fr)}
  .grille3,.sequence{grid-template-columns:1fr 1fr}
  .pied .wrap{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  /* Au doigt, un lien de 17 px de haut collé au suivant se rate.
     On aère les listes du pied de page et on élargit la zone touchable. */
  .pied ul{gap:2px}
  .pied a{display:inline-block; padding-block:8px}
  .copy .wrap{gap:14px}
  .copy a{display:inline-block; padding-block:6px}

  /* Le tiroir était caché par translateX(100%). Un élément en position fixed
     se cale sur la fenêtre et échappe à l'overflow-x du body : il créait donc
     750 px de large sur un écran de 375, et un défilement horizontal sur
     toutes les pages. Le masquer par display supprime la cause ; l'ouverture
     s'anime en fondu vertical, qui ne peut déborder sur les côtés.
     (Un overflow-x sur html réglait aussi le débordement, mais cassait
     l'en-tête collant : vérifié, l'en-tête partait avec le défilement.) */
  .menu{display:none; position:fixed; inset:0 0 auto; top:0; background:var(--papier);
    flex-direction:column; gap:0; padding:88px 24px 32px; margin:0; height:100dvh;
    overflow-y:auto; z-index:40}
  .menu.ouvert{display:flex; animation:fl-tiroir .22s ease-out}
  @keyframes fl-tiroir{from{opacity:0; transform:translateY(-10px)} to{opacity:1; transform:none}}
  .menu li{border-bottom:1px solid var(--trait)}
  .menu a{padding-block:16px; font-size:17px; border-bottom:0}
  .burger{display:block; z-index:60}
  /* Le devis est l'action principale : on la garde, au bas du menu. */
  .menu .menu-devis{border-bottom:0; margin-top:26px}
  .menu .menu-devis .bouton{display:block; text-align:center; padding-block:15px;
    font-size:16px; width:100%}
  .banniere .wrap{padding-block:64px 56px}
  .section{padding-block:54px}
  .grille3,.sequence,.grille-proj,.pied .wrap,.formulaire{grid-template-columns:1fr}
  .chiffres .wrap{grid-template-columns:1fr 1fr}
  .fiche .galerie{grid-template-columns:1fr}
  .proj h3{font-size:24px}
}

/* champ de dépôt de fichiers, habillé en français */
.champ input.depot-natif{position:absolute; width:1px; height:1px; opacity:0; pointer-events:none}
.depot{display:flex; align-items:center; gap:14px; flex-wrap:wrap; cursor:pointer;
  padding:11px 14px; border:1px dashed var(--trait); border-radius:var(--r-moyen);
  background:var(--papier-gris)}
.depot:hover{border-color:var(--or)}
.depot-bouton{font-size:13.5px; padding:7px 14px; border:1px solid var(--trait);
  border-radius:var(--r-petit); background:var(--papier); white-space:nowrap}
.depot-noms{font-size:13.8px; color:var(--encre-douce); min-width:0; overflow-wrap:anywhere}

/* vignette d'un chantier sans photo : un chiffre plutôt qu'un cadre vide */
.vignette.sans-image{aspect-ratio:auto; display:flex; flex-direction:column;
  align-items:flex-start; justify-content:center; gap:2px; padding:26px;
  background:linear-gradient(155deg,#F8F6F1 0%,#EBE6DB 100%);
  border-bottom:1px solid var(--trait)}
.vignette.sans-image .nombre{font-family:var(--titre); font-weight:700; letter-spacing:-.035em;
  font-size:52px; line-height:1; color:var(--encre)}
.vignette.sans-image .mention{font-weight:600; font-size:12px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--or)}
.vignette.sans-image .mention.seule{font-family:var(--titre); font-size:19px;
  letter-spacing:-.015em; text-transform:none; color:var(--encre); font-weight:600}

/* ---------- page à propos ---------- */
.intro-section{max-width:62ch; color:var(--encre-douce); font-size:17px; margin:14px 0 0}
.sous-titre{font-family:var(--titre); font-weight:600; letter-spacing:-.02em;
  font-size:24px; margin:54px 0 18px}
.fondateurs{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-top:34px}
.personne{background:var(--papier); border:1px solid var(--trait); border-radius:var(--r-moyen);
  padding:26px 24px; display:flex; flex-direction:column; gap:4px; min-width:0}
.personne .pastille{width:48px; height:48px; border-radius:50%; display:grid; place-items:center;
  background:var(--papier-gris); color:var(--or); font-weight:700; font-size:16px;
  letter-spacing:.02em; margin-bottom:14px}
.personne .nom{font-weight:600; font-size:16.5px; letter-spacing:-.01em; overflow-wrap:anywhere}
.personne .role{font-size:13.5px; color:var(--encre-douce)}
.infos.large td{padding:13px 16px; font-size:15px}
.infos.large td:last-child{text-align:left; font-weight:500}
@media (max-width:980px){
  .fondateurs{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .fondateurs{grid-template-columns:1fr}
}

/* barre basse : la liste des mentions reste une liste, sans puce */
.copy .menu-pied{display:flex; flex-wrap:wrap; gap:8px 22px; list-style:none; margin:0; padding:0}
.copy .menu-pied li{margin:0}

/* fiche chantier sans galerie : pas de colonne vide, le texte respire */
.fiche.sans-galerie{grid-template-columns:1fr; max-width:760px}
.fiche.sans-galerie aside h2{font-size:30px}
.fiche.sans-galerie aside > p:first-of-type{font-size:17.5px; line-height:1.65;
  color:var(--encre-douce)}

/* ==========================================================================
   Navigation — ajouts du 07/10/2026
   ========================================================================== */

/* ---------- lien de retour ----------
   Au-dessus du titre d'une fiche : la sortie la plus courte vers la liste
   d'où l'on vient, sans dépendre du bouton « précédent » du navigateur. */
.retour{display:inline-flex; align-items:center; gap:8px; font-size:14.5px;
  color:var(--encre-douce); text-decoration:none; padding:8px 14px 8px 10px;
  border:1px solid var(--trait); border-radius:var(--r-petit); background:var(--papier);
  transition:color .15s, border-color .15s, background .15s}
.retour:hover{color:var(--encre); border-color:var(--encre-douce)}
.retour::before{content:"←"; font-size:16px; line-height:1}

/* ---------- chantier précédent / suivant ----------
   Remplace le tirage au sort : la liste a un ordre, la fiche doit le suivre. */
.voisinage{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:8px}
.voisinage a{display:flex; flex-direction:column; gap:4px; padding:18px 22px;
  border:1px solid var(--trait); border-radius:var(--r-moyen); background:var(--papier);
  text-decoration:none; transition:border-color .15s, transform .15s}
.voisinage a:hover{border-color:var(--encre-douce); transform:translateY(-2px)}
.voisinage .sens{font-size:12.5px; letter-spacing:.1em; text-transform:uppercase;
  font-weight:600; color:var(--or)}
.voisinage .nom{font-weight:600; letter-spacing:-.015em; color:var(--encre)}
.voisinage .suivant{text-align:right; align-items:flex-end}
.voisinage .vide{border:1px dashed var(--trait); background:transparent}

/* ---------- recherche ---------- */
.recherche{display:flex; gap:10px; max-width:520px}
.recherche input[type="search"]{flex:1; min-width:0; font:inherit; font-size:16px;
  padding:12px 16px; border:1px solid var(--trait); border-radius:var(--r-petit);
  background:var(--papier); color:var(--encre)}
.recherche input[type="search"]:focus{border-color:var(--or); outline:none}
.recherche .bouton{flex:none}

/* ---------- retour en haut ----------
   Apparaît après un défilement franc. L'en-tête porte un backdrop-filter et
   devient un bloc conteneur : ce bouton doit donc rester hors de l'en-tête. */
.haut{position:fixed; right:20px; bottom:20px; z-index:40;
  width:48px; height:48px; border-radius:50%; border:1px solid var(--trait);
  background:var(--papier); color:var(--encre); cursor:pointer; font-size:19px;
  line-height:1; display:grid; place-items:center;
  box-shadow:0 6px 20px rgba(55,51,45,.14);
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .2s, transform .2s, visibility .2s}
.haut.visible{opacity:1; visibility:visible; transform:none}
.haut:hover{background:var(--sombre); color:#fff; border-color:var(--sombre)}

/* ---------- résultats de recherche ---------- */
.resultat{padding-block:24px; border-bottom:1px solid var(--trait)}
.resultat:last-child{border-bottom:0}
.resultat h2{margin:0 0 6px; font-size:20px; letter-spacing:-.015em}
.resultat h2 a{text-decoration:none}
.resultat h2 a:hover{color:var(--or)}
.resultat .type{font-size:12.5px; letter-spacing:.1em; text-transform:uppercase;
  font-weight:600; color:var(--or); display:block; margin-bottom:6px}
.resultat p{margin:0; color:var(--encre-douce)}

@media (max-width:760px){
  .voisinage{grid-template-columns:1fr}
  .voisinage .suivant{text-align:left; align-items:flex-start}
  .haut{right:14px; bottom:14px; width:44px; height:44px}
  .recherche{flex-direction:column}
  .recherche .bouton{width:100%; text-align:center}
}

/* Recherche du pied de page : le fond y est sombre, un .bouton standard
   (encre sur encre) y serait invisible — même piège qu'en en-tête. */
.pied .recherche{flex-direction:column; gap:8px; max-width:none}
.pied .recherche input[type="search"]{background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.22);
  color:#fff; font-size:15px; padding:10px 14px}
.pied .recherche input[type="search"]::placeholder{color:rgba(255,255,255,.5)}
.pied .recherche input[type="search"]:focus{border-color:var(--or); background:#fff}
.pied .recherche .bouton{background:var(--or-clair); border-color:var(--or-clair);
  color:var(--encre); font-weight:600; width:100%; text-align:center}
.pied .recherche .bouton:hover{background:var(--encre); border-color:var(--encre); color:#fff}

/* Case de consentement : à 18px elle était trop petite pour un doigt, alors
   que c'est une case obligatoire. On l'agrandit et on élargit la zone active
   au libellé entier. */
.consentement{display:flex; align-items:flex-start; gap:12px}
.consentement input[type="checkbox"]{flex:none; width:24px; height:24px; margin:1px 0 0;
  accent-color:var(--or); cursor:pointer}
.consentement label{cursor:pointer; padding-block:2px}

/* ==========================================================================
   Mise en scène — 07/10/2026
   Le site n'a pas de photos de chantier. La matière visuelle vient donc de la
   typographie, de la profondeur et du mouvement, jamais d'images décoratives
   sans rapport avec le métier.
   ========================================================================== */

/* ---------- apparition au défilement ----------
   Discret : 14px de montée, pas de zoom, pas de rebond. Et rien du tout pour
   qui a demandé moins d'animations — la page s'affiche alors d'emblée. */
/* Le masquage n'existe que si la classe « anime » a été posée sur <html> par
   le script d'en-tête. Si le JavaScript échoue, est bloqué ou n'arrive jamais,
   la règle ne s'applique pas et la page reste entièrement lisible. */
.anime [data-revele]{opacity:0; transform:translateY(14px);
  transition:opacity .55s cubic-bezier(.22,.61,.36,1), transform .55s cubic-bezier(.22,.61,.36,1)}
.anime [data-revele].vu{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  .anime [data-revele]{opacity:1; transform:none; transition:none}
}

/* ---------- bannière ---------- */
.banniere{min-height:clamp(520px,78vh,760px); display:flex; align-items:center;
  background:radial-gradient(120% 100% at 15% 0%, #F2FAFE 0%, var(--ciel) 45%, var(--ciel-fonce) 100%)}
.banniere .wrap{position:relative; z-index:3; padding-block:clamp(72px,10vw,120px) clamp(80px,11vw,132px)}
.banniere.avec-image img{opacity:.15}

/* Un voile de grain très fin : il casse la platitude du dégradé sans
   alourdir la page d'une image. */
.banniere .voile{position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.35;
  background-image:radial-gradient(rgba(43,58,69,.14) .5px, transparent .5px);
  background-size:3px 3px}
.banniere .lueur{position:absolute; z-index:2; pointer-events:none;
  width:52vw; height:52vw; max-width:680px; max-height:680px; right:-8vw; top:-14vw;
  background:radial-gradient(circle, rgba(56,176,248,.30) 0%, rgba(56,176,248,0) 68%)}
/* Une seconde lueur, dorée et basse à gauche : les deux couleurs du logo
   se répondent au lieu de se disputer le même coin. */
.banniere .lueur::after{content:""; position:absolute;
  width:140%; height:140%; left:-150%; top:40%;
  background:radial-gradient(circle, rgba(200,176,80,.26) 0%, rgba(200,176,80,0) 68%)}

.banniere h1{font-size:clamp(38px,5.6vw,70px); line-height:1.04; letter-spacing:-.03em;
  max-width:20ch; margin:0 0 24px}
.banniere .chapo-h{max-width:58ch; font-size:clamp(16.5px,1.5vw,18.5px); line-height:1.68;
  color:var(--encre-douce); margin:0 0 36px}
.banniere .actions{display:flex; flex-wrap:wrap; gap:12px}

/* Repère de défilement : une barre qui descend lentement. */
.banniere .defile{position:absolute; left:50%; bottom:22px; z-index:3;
  width:1px; height:46px; background:rgba(255,255,255,.18); overflow:hidden}
.banniere .defile span{position:absolute; inset:0; background:var(--or-clair);
  animation:fl-defile 2.4s cubic-bezier(.65,0,.35,1) infinite}
@keyframes fl-defile{
  0%{transform:translateY(-100%)}
  60%,100%{transform:translateY(100%)}
}
@media (prefers-reduced-motion:reduce){.banniere .defile{display:none}}

/* ---------- chiffres ---------- */
.chiffres b{font-variant-numeric:tabular-nums}

/* ---------- cartes de prestation ---------- */
.presta{position:relative; transition:transform .25s cubic-bezier(.22,.61,.36,1),
  border-color .25s, box-shadow .25s}
.presta:hover{transform:translateY(-4px); border-color:var(--or-clair);
  box-shadow:0 18px 38px -22px rgba(55,51,45,.5)}
.presta .fleche{position:absolute; right:24px; bottom:22px; color:var(--or);
  opacity:0; transform:translateX(-6px); transition:opacity .25s, transform .25s}
.presta:hover .fleche{opacity:1; transform:none}

.proj{transition:transform .25s cubic-bezier(.22,.61,.36,1), box-shadow .25s}
.proj:hover{transform:translateY(-4px); box-shadow:0 22px 44px -26px rgba(55,51,45,.55)}

/* ---------- séquence ----------
   Un rail vertical se remplit à mesure qu'on descend : le visiteur parcourt
   le calendrier de livraison au lieu de lire cinq encadrés côte à côte. */
.sequence-section .sequence{position:relative; list-style:none; margin:46px 0 0; padding:0;
  display:grid; grid-template-columns:1fr; gap:clamp(26px,3.4vw,44px); max-width:860px}
.sequence .rail{position:absolute; left:11px; top:10px; bottom:10px; width:2px;
  background:var(--trait)}
.sequence .rail-plein{position:absolute; inset:0 0 auto 0; height:0;
  background:linear-gradient(var(--or-clair), var(--or)); transition:height .3s linear}
.sequence .etape{position:relative; padding:2px 0 2px 54px; background:none;
  border:0; border-radius:0}
.sequence .pastille{position:absolute; left:0; top:4px; width:24px; height:24px;
  border-radius:50%; border:2px solid var(--trait); background:var(--fond);
  transition:border-color .3s, background .3s, box-shadow .3s}
.sequence .etape.active .pastille{border-color:var(--or); background:var(--or);
  box-shadow:0 0 0 6px rgba(134,108,40,.14)}
.sequence .etape h3{margin:6px 0 8px; font-size:clamp(19px,2vw,23px); letter-spacing:-.02em}
.sequence .etape p{margin:0; color:var(--encre-douce); max-width:62ch}
.sequence .tag{font-size:12.5px; letter-spacing:.12em; text-transform:uppercase;
  font-weight:600; color:var(--or)}

/* ---------- notre terrain ---------- */
.terrain-grille{display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,72px);
  align-items:center}
.terrain-texte .titre{margin-top:0}
.terrain-faits{margin:30px 0 0; display:grid; gap:1px; background:var(--trait);
  border:1px solid var(--trait); border-radius:var(--r-moyen); overflow:hidden}
.terrain-faits > div{background:var(--papier); padding:15px 20px; display:flex;
  justify-content:space-between; gap:16px; flex-wrap:wrap}
.terrain-faits dt{color:var(--encre-douce); font-size:14.5px; margin:0}
.terrain-faits dd{margin:0; font-weight:600; font-size:14.5px}
.terrain-action{margin:30px 0 0}

.carte{margin:0; background:linear-gradient(170deg, #F4FAFE 0%, #E4F0F9 100%);
  border:1px solid var(--bleu-trait);
  border-radius:var(--r-grand); padding:clamp(16px,2vw,24px); overflow:hidden}
/* Plus basse qu'avant : elle situait le territoire, elle ne doit pas
   occuper un écran entier pour le dire. */
.carte svg{width:100%; max-width:520px; height:auto; max-height:min(58vh,480px);
  display:block; margin-inline:auto}
.carte .grille line{stroke:rgba(43,58,69,.07); stroke-width:2}
.carte .point{cursor:pointer}
.carte .noyau{fill:var(--or); opacity:.95;
  transition:fill .2s, opacity .2s, r .2s cubic-bezier(.22,.61,.36,1)}
.carte .halo{opacity:.55; transition:opacity .2s}
.carte .touche{fill:transparent}
/* Commune où nous sommes intervenus sans fiche publiée : présente sur le
   territoire, mais rien à ouvrir. */
.carte .point.simple{cursor:default}
.carte .point.simple .noyau{fill:var(--or-clair); opacity:.75}
.carte .point.simple .halo{display:none}
.carte .point:hover .noyau,.carte .point:focus-visible .noyau{fill:var(--sombre); opacity:1}
.carte .point:hover .halo,.carte .point:focus-visible .halo{opacity:1}
.carte .point:focus-visible{outline:2px solid var(--sombre); outline-offset:2px}
.carte figcaption{margin-top:14px; font-size:13.5px; line-height:1.6;
  color:var(--encre-douce); text-align:center}

/* Légende des zones : la Haute-Savoie et la Savoie sont le territoire du
   nettoyage de fin de chantier, l'Isère n'est que du débarrassage. Sans ce
   rappel, la carte laisse croire à trois départements équivalents. */
.carte-legende{list-style:none; margin:16px 0 0; padding:0;
  display:flex; flex-wrap:wrap; justify-content:center; gap:8px 22px;
  font-size:13px; line-height:1.5; color:var(--encre-douce)}
.carte-legende li{display:flex; align-items:center; gap:8px}
.carte-legende .pastille{width:14px; height:14px; border-radius:4px; flex:none}
.carte-legende .zone-principale{background:#BBD9EE; border:1.5px solid #5E9EC6}
.carte-legende .zone-secondaire{background:#EFF3F6; border:1.5px dashed #A9BBC8}

/* Les points se posent un à un à l'arrivée de la carte dans l'écran. */
.anime .carte .point{opacity:0; transform:scale(.4); transform-origin:center;
  transition:opacity .4s, transform .5s cubic-bezier(.34,1.3,.64,1)}
.anime .carte.posee .point{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  .anime .carte .point{opacity:1; transform:none; transition:none}
}

/* ---------- mur de références ---------- */
.refs{display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  gap:1px; background:var(--trait); border:1px solid var(--trait);
  border-radius:var(--r-moyen); overflow:hidden; list-style:none; margin:40px 0 0; padding:0}
.refs li{background:var(--papier); padding:22px 20px; text-align:center;
  font-weight:600; font-size:15.5px; letter-spacing:-.01em; color:var(--encre-douce);
  display:flex; align-items:center; justify-content:center; min-height:76px;
  transition:background .2s, color .2s}
.refs li:hover{background:var(--papier-gris); color:var(--encre)}

@media (max-width:900px){
  .terrain-grille{grid-template-columns:1fr}
  .terrain-carte{order:-1}
  .carte svg{max-height:52vh}
}
@media (max-width:760px){
  .banniere{min-height:auto}
  .banniere h1{font-size:clamp(31px,8.4vw,42px)}
  .banniere h1 br{display:none}
  .banniere .actions .bouton{flex:1 1 100%; text-align:center}
  .sequence .etape{padding-left:46px}
  .refs{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
  .refs li{min-height:64px; padding:16px 12px; font-size:14px}
}

/* Repères de la carte : le lac d'Annecy et quelques noms de villes. Sans eux
   la carte n'est qu'une constellation de points, et personne ne reconnaît
   la région. */
/* Tailles exprimées en unités du viewBox : le dessin est affiché réduit,
   des pixels d'écran y arriveraient deux fois trop petits. */
.carte .reperes text{fill:var(--sombre); font-size:23px; font-weight:600;
  letter-spacing:.01em; paint-order:stroke; stroke:rgba(255,255,255,.9); stroke-width:5px}
.carte .reperes .lac-nom{fill:var(--bleu); font-size:19px; font-style:italic;
  font-weight:500; letter-spacing:.02em}

/* ==========================================================================
   Carte : fond géographique
   Les contours des départements rendent la carte lisible ; sans eux ce
   n'étaient que des points flottants.
   ========================================================================== */
/* Deux traitements, pas trois : la zone du lot nettoyage est pleine et
   cernée, celle du seul débarrassage est pâle et en pointillés. */
.carte .territoire .dep{stroke-linejoin:round}
.carte .territoire .dep-74,
.carte .territoire .dep-73{fill:#BBD9EE; stroke:#5E9EC6; stroke-width:2.5}
.carte .territoire .dep-38{fill:#EFF3F6; stroke:#A9BBC8; stroke-width:2;
  stroke-dasharray:9 7}
.carte .territoire .lac{fill:#6FB7E6; stroke:#3E93C9; stroke-width:2}
.carte .reperes .dep-nom{fill:rgba(43,58,69,.45); font-size:17px; font-weight:600;
  letter-spacing:.18em; stroke:rgba(255,255,255,.85); stroke-width:4px}
.carte .reperes .dep-nom-38{fill:rgba(43,58,69,.32)}

/* Marqueur mis en évidence : une onde lente le désigne sans clignoter. */
/* Le chantier ouvert garde son onde, mais plus sa grosseur : il était
   deux fois plus large que les autres communes. */
.carte .point.actif .noyau{fill:#fff}
.carte .point.attenue .noyau{fill:var(--or-clair); opacity:.42}
.carte .point.attenue .halo{opacity:.18}
.carte .onde{fill:none; stroke:var(--or-clair); stroke-width:3; transform-origin:center;
  transform-box:fill-box; animation:fl-onde 2.6s ease-out infinite}
@keyframes fl-onde{
  0%{transform:scale(1); opacity:.8}
  70%,100%{transform:scale(2.9); opacity:0}
}
@media (prefers-reduced-motion:reduce){.carte .onde{animation:none; opacity:.55}}

/* ---------- carte d'une fiche de chantier ---------- */
.situation .carte{height:100%; display:flex; flex-direction:column; justify-content:center}
.situation .carte svg{max-height:min(82vh,760px)}

/* ---------- carte de la page de contact ---------- */
.venir{display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,68px); align-items:center}
.venir .titre{margin-top:0}
.venir-carte .carte svg{max-height:min(66vh,520px)}

/* ==========================================================================
   Page À propos
   ========================================================================== */
.entete-riche .chapo-page{max-width:60ch; font-size:clamp(16.5px,1.6vw,18.5px); line-height:1.66}

/* Texte long : une colonne étroite, des titres détachés, un premier
   paragraphe plus présent. On lit un article, pas un formulaire. */
.editorial{max-width:70ch}
.editorial > p:first-of-type{font-size:clamp(17.5px,1.8vw,20px); line-height:1.62; color:var(--encre)}
.editorial h2{font-size:clamp(23px,2.6vw,30px); letter-spacing:-.022em; margin:52px 0 16px;
  padding-top:26px; border-top:1px solid var(--trait)}
.editorial h3{font-size:clamp(18px,2vw,21px); margin:34px 0 12px}
.editorial p{margin:0 0 18px; color:var(--encre-douce)}

.engagements .presta{cursor:default}
.engagements .presta:hover{transform:none; border-color:var(--trait); box-shadow:none}

.maison{display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,70px); align-items:start}
.maison .titre{margin-top:0}

.fondateurs{display:grid; grid-template-columns:1fr; gap:12px; margin-top:34px}
.fondateurs .personne{display:flex; flex-direction:row; align-items:center; text-align:left;
  gap:16px; padding:14px 18px;
  background:var(--papier); border:1px solid var(--trait); border-radius:var(--r-moyen);
  transition:border-color .2s, transform .2s}
.fondateurs .personne:hover{border-color:var(--or-clair); transform:translateX(3px)}
.fondateurs .pastille{flex:none; width:46px; height:46px; border-radius:50%;
  background:var(--papier-gris); color:var(--or); display:grid; place-items:center;
  font-weight:700; font-size:15px; letter-spacing:.02em}
.fondateurs .identite{display:flex; flex-direction:column; min-width:0}
.fondateurs .nom{font-weight:600; letter-spacing:-.015em; font-size:16.5px; overflow-wrap:normal}
.fondateurs .role{font-size:14px; color:var(--encre-douce)}

.maison-fiche{background:var(--papier); border:1px solid var(--trait);
  border-radius:var(--r-grand); padding:clamp(22px,3vw,32px)}
.maison-fiche h3{margin:0 0 20px; font-size:19px; letter-spacing:-.015em}
.identite-liste{margin:0; display:grid; gap:0}
.identite-liste > div{display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
  padding:12px 0; border-top:1px solid var(--trait)}
.identite-liste > div:first-child{border-top:0; padding-top:0}
.identite-liste dt{margin:0; color:var(--encre-douce); font-size:14.5px}
.identite-liste dd{margin:0; font-weight:600; font-size:14.5px; text-align:right}

@media (max-width:900px){
  .venir,.maison{grid-template-columns:1fr}
  .venir-carte{order:-1}
  .maison-fiche{margin-top:8px}
}
@media (max-width:760px){
  .editorial h2{margin-top:38px; padding-top:22px}
  .identite-liste dd{text-align:left}
  .venir-carte .carte svg{max-height:56vh}
}

/* ==========================================================================
   Refonte du 07/10/2026 — vides comblés, bandeau supprimé
   ========================================================================== */

/* ---------- téléphone dans l'en-tête ----------
   Le bandeau du haut est supprimé ; le numéro ne devait pas disparaître
   avec lui, il est la deuxième action la plus utilisée après le devis. */
.tel-entete{display:inline-flex; align-items:center; gap:7px; text-decoration:none;
  font-weight:600; font-size:15px; letter-spacing:-.01em; color:var(--encre);
  padding:9px 14px; border-radius:var(--r-petit); transition:background .15s, color .15s}
.tel-entete::before{content:""; width:15px; height:15px; flex:none; background:currentColor;
  -webkit-mask:var(--icone-tel) center/contain no-repeat; mask:var(--icone-tel) center/contain no-repeat}
.tel-entete:hover{background:var(--papier-gris); color:var(--or)}
.entete .menu{margin-left:auto}
.entete .tel-entete{margin-left:4px}

:root{
  --icone-tel:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.79 19.79 0 0 1 2.12 4.18 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.9.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
}

/* ---------- bandeau défilant des références ----------
   Deux copies de la liste se suivent ; la piste glisse d'exactement la
   largeur d'une copie, donc la boucle est invisible. */
.defilant{margin-top:40px; position:relative; overflow:hidden;
  -webkit-mask:linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask:linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent)}
.defilant-piste{display:flex; width:max-content; animation:fl-defilant 46s linear infinite}
.defilant:hover .defilant-piste,.defilant:focus-within .defilant-piste{animation-play-state:paused}
.defilant-liste{display:flex; align-items:center; gap:14px; list-style:none; margin:0; padding:0 7px}
.defilant-liste li{flex:none}
.defilant .marque{display:flex; align-items:center; justify-content:center; height:78px;
  padding:0 30px; background:var(--papier); border:1px solid var(--trait);
  border-radius:var(--r-moyen); font-weight:600; font-size:16px; letter-spacing:-.015em;
  color:var(--encre-douce); white-space:nowrap; transition:color .2s, border-color .2s}
.defilant .marque:hover{color:var(--encre); border-color:var(--or-clair)}
.defilant .marque img{max-height:40px; width:auto}
@keyframes fl-defilant{from{transform:translateX(0)} to{transform:translateX(-50%)}}

/* Sans animation : une grille sage, tout reste lisible et rien ne bouge. */
@media (prefers-reduced-motion:reduce){
  .defilant{mask:none; -webkit-mask:none; overflow:visible}
  .defilant-piste{animation:none; width:auto; flex-wrap:wrap}
  .defilant-liste:last-child{display:none}
  .defilant-liste{flex-wrap:wrap; justify-content:center}
}

/* ---------- fiche chantier : la carte sous les photos ----------
   La colonne des visuels s'arrêtait 630 px avant la colonne de droite. */
.fiche .colonne-visuels{display:flex; flex-direction:column; gap:22px; min-width:0}
.situation.sous-galerie .carte{margin-top:0}
.situation .carte svg{max-height:min(74vh,640px)}

/* ---------- contact : colonne latérale collante ----------
   Le formulaire fait 1 358 px, la colonne 540 : elle suit maintenant la
   lecture au lieu de laisser 818 px de vide. */
.aide-carte{font-size:14.5px; color:var(--encre-douce); margin:0 0 14px}
.action-carte{margin:16px 0 0}
.action-carte .bouton{width:100%; text-align:center}

@media (min-width:901px){
  .fiche > aside{position:sticky; top:96px; align-self:start}
  .panneau-collant{position:sticky; top:96px}
}

/* ---------- à propos : le texte et son panneau ----------
   La colonne de lecture laissait 440 px morts sur toute sa hauteur. */
.editorial-grille{display:grid; grid-template-columns:minmax(0,1fr) 340px;
  gap:clamp(34px,5vw,74px); align-items:start}
.editorial-grille .editorial{max-width:70ch}
.panneau{min-width:0}
.panneau-collant{background:var(--papier); border:1px solid var(--trait);
  border-radius:var(--r-grand); padding:26px 24px}
.panneau-collant h2{margin:0 0 18px; font-size:18px; letter-spacing:-.015em}
.panneau-adresses{margin:18px 0 0; font-size:14.5px; line-height:1.6; color:var(--encre-douce)}
.panneau-adresses strong{color:var(--encre); font-weight:600}
.panneau-action{margin:24px 0 0}
.panneau-action .bouton{width:100%; text-align:center}

/* Les fondateurs reprennent toute la largeur, deux par rangée. */
.fondateurs{grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px}
.fondateurs .role{font-size:14px; line-height:1.4}

@media (max-width:900px){
  .editorial-grille{grid-template-columns:1fr}
  .editorial-grille .editorial{max-width:none}
  .fondateurs{grid-template-columns:1fr}
}

@media (max-width:760px){
  /* Dans le menu déroulant, le téléphone devient une ligne pleine largeur. */
  .menu .menu-tel{border-bottom:0; margin-top:16px}
  .menu .menu-tel .tel-entete{display:flex; justify-content:center; width:100%;
    padding-block:15px; font-size:16px; border:1px solid var(--trait)}
  .defilant .marque{height:64px; padding:0 20px; font-size:14.5px}
  .situation .carte svg{max-height:none}
}

@media (max-width:760px){
  /* Tant que le script n'a pas déplacé le téléphone et le devis dans le menu,
     ils resteraient dans la barre et la feraient déborder. Une fois déplacés
     ils ne sont plus enfants directs de .wrap, donc ils réapparaissent. */
  .entete .wrap > .tel-entete,
  .entete .wrap > .bouton{display:none}
}

/* ==========================================================================
   Prestations et archive des réalisations
   ========================================================================== */

/* ---------- le détail du lot nettoyage ---------- */
.postes{display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(18px,2.4vw,26px); margin-top:40px}
.poste{background:var(--papier); border:1px solid var(--trait);
  border-radius:var(--r-grand); padding:clamp(22px,2.6vw,30px)}
.poste h3{margin:0 0 16px; font-size:18px; letter-spacing:-.015em;
  padding-bottom:14px; border-bottom:1px solid var(--trait)}
.poste .liste-taches{margin:0}

/* ---------- bloc devis ---------- */
.devis-rapide{display:grid; grid-template-columns:1fr 400px;
  gap:clamp(30px,5vw,66px); align-items:center}
.devis-rapide .titre{margin-top:0}
.devis-rapide .bouton{margin-right:10px}
.devis-besoins{background:var(--papier); border:1px solid var(--trait);
  border-radius:var(--r-grand); padding:clamp(22px,2.6vw,30px)}
.devis-besoins h3{margin:0 0 16px; font-size:17px; letter-spacing:-.015em}
.devis-besoins .liste-taches{margin:0}

/* ---------- panorama de l'archive ----------
   La carte sert d'index : on entre dans la liste par le territoire. */
.panorama-grille{display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(32px,5vw,70px); align-items:center}
.panorama-texte .titre{margin-top:0}
.panorama-chiffres{margin:30px 0 0; display:grid; gap:1px; background:var(--trait);
  border:1px solid var(--trait); border-radius:var(--r-moyen); overflow:hidden}
.panorama-chiffres > div{background:var(--papier); padding:15px 20px; display:flex;
  justify-content:space-between; gap:16px; flex-wrap:wrap}
.panorama-chiffres dt{margin:0; color:var(--encre-douce); font-size:14.5px}
.panorama-chiffres dd{margin:0; font-weight:600; font-size:14.5px; text-align:right}

@media (max-width:900px){
  .postes{grid-template-columns:1fr}
  .devis-rapide,.panorama-grille{grid-template-columns:1fr}
  .panorama-carte{order:-1}
  .panorama-chiffres dd{text-align:left}
}
@media (max-width:760px){
  .devis-rapide .bouton{display:block; width:100%; text-align:center; margin:0 0 10px}
}

/* ==========================================================================
   Conciergerie et location courte durée
   ========================================================================== */

.banniere-conciergerie{min-height:clamp(440px,62vh,620px);
  background:radial-gradient(120% 100% at 18% 0%, #F2FAFE 0%, var(--ciel) 48%, var(--ciel-fonce) 100%)}
.banniere-conciergerie h1{max-width:22ch}

/* ---------- les cinq atouts ---------- */
/* Cinq cartes dans une grille automatique tombaient en 4 + 1, et la cinquième
   restait seule, étirée en hauteur. Une grille de six colonnes permet 3 + 2 :
   trois cartes sur deux colonnes, puis deux cartes sur trois. */
.atouts{display:grid; grid-template-columns:repeat(6,minmax(0,1fr));
  gap:clamp(16px,2.2vw,24px); margin-top:42px}
.atout{grid-column:span 2}
.atout:nth-child(4),.atout:nth-child(5){grid-column:span 3}

@media (max-width:1020px){
  .atouts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .atout,.atout:nth-child(4),.atout:nth-child(5){grid-column:auto}
  .atout:nth-child(5){grid-column:1 / -1}
}
@media (max-width:640px){
  .atouts{grid-template-columns:1fr}
  .atout:nth-child(5){grid-column:auto}
}
.atout{background:var(--papier); border:1px solid var(--trait);
  border-radius:var(--r-grand); padding:clamp(22px,2.6vw,28px); position:relative}
.atout .num{font-size:12.5px; font-weight:600; letter-spacing:.08em; color:var(--or)}
.atout h3{margin:12px 0 10px; font-size:18px; letter-spacing:-.015em}
.atout p{margin:0; font-size:14.8px; line-height:1.62; color:var(--encre-douce)}

.atouts-courts{margin-top:28px}

/* ---------- maillage des communes ---------- */
.communes-liste{list-style:none; margin:30px 0 0; padding:0; display:grid; gap:1px;
  background:var(--trait); border:1px solid var(--trait); border-radius:var(--r-moyen);
  overflow:hidden}
.communes-liste li{background:var(--papier); margin:0}
.communes-liste a,.communes-liste span{display:block; padding:14px 20px; text-decoration:none;
  font-size:15px; font-weight:500; transition:background .15s, color .15s}
.communes-liste a:hover{background:var(--papier-gris); color:var(--or)}
.communes-liste a::after{content:" →"; color:var(--or); opacity:0; transition:opacity .15s}
.communes-liste a:hover::after{opacity:1}
.communes-liste.large{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}

/* ---------- questions fréquentes ---------- */
.faq{margin-top:38px; border:1px solid var(--trait); border-radius:var(--r-grand);
  overflow:hidden; background:var(--papier); max-width:860px}
.faq details{border-top:1px solid var(--trait)}
.faq details:first-child{border-top:0}
.faq summary{cursor:pointer; padding:19px 56px 19px 24px; font-weight:600; font-size:16.5px;
  letter-spacing:-.015em; position:relative; list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; position:absolute; right:24px; top:50%; translate:0 -50%;
  font-size:21px; font-weight:400; color:var(--or); transition:rotate .2s}
.faq details[open] summary::after{content:"−"}
.faq summary:hover{color:var(--or)}
.faq details p{margin:0; padding:0 24px 22px; color:var(--encre-douce); max-width:72ch}

@media (max-width:760px){
  .faq summary{padding:16px 46px 16px 18px; font-size:15.5px}
  .faq details p{padding:0 18px 18px}
  .communes-liste a,.communes-liste span{padding:15px 18px}
}

.panneau-sous-titre{margin:26px 0 14px; padding-top:20px; border-top:1px solid var(--trait);
  font-size:15px; letter-spacing:-.01em}
.panneau-collant .liste-taches{margin:0; font-size:14.5px}

/* ---------- les deux publics de la conciergerie ----------
   Une conciergerie et un propriétaire n'ont pas le même problème : la page
   les sépare avant de leur parler. */
.publics{display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(18px,2.6vw,28px); margin-top:42px}
.public{background:var(--papier); border:1px solid var(--trait);
  border-radius:var(--r-grand); padding:clamp(24px,3vw,34px)}
.public .etiquette{display:inline-block; font-size:12px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--or);
  background:var(--papier-gris); padding:6px 13px; border-radius:var(--r-petit)}
.public h3{margin:16px 0 12px; font-size:21px; letter-spacing:-.02em}
.public > p{margin:0 0 20px; color:var(--encre-douce); line-height:1.62}
.public .liste-taches{margin:0; padding-top:18px; border-top:1px solid var(--trait)}

@media (max-width:860px){
  .publics{grid-template-columns:1fr}
}

/* ==========================================================================
   Iconographie et immersion — conciergerie
   ========================================================================== */

/* Les icônes sont tracées dans le thème, sur la même grille et la même
   épaisseur de trait. Elles héritent de la couleur du texte. */
.icone{width:24px; height:24px; flex:none; display:block}

.atout-tete{display:flex; align-items:center; justify-content:space-between; gap:12px}
.atout-icone{width:30px; height:30px; color:var(--or)}
.atout .num{font-size:12.5px; font-weight:600; letter-spacing:.08em; color:var(--encre-douce)}

.poste-icone{width:28px; height:28px; color:var(--or); margin-bottom:14px}

/* ---------- bandeau de confiance ----------
   Quatre faits vérifiables, posés avant tout argument commercial. */
.confiance{background:var(--papier-gris); border-bottom:1px solid var(--trait)}
.confiance .wrap{display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(16px,2.4vw,30px); padding-block:22px}
.confiance-item{display:flex; align-items:center; gap:13px; min-width:0}
.confiance-item .icone{color:var(--or)}
.confiance-item span{display:flex; flex-direction:column; min-width:0;
  font-size:13.5px; line-height:1.45; color:var(--encre-douce)}
.confiance-item b{font-size:14.5px; font-weight:600; color:var(--encre); letter-spacing:-.01em}

/* ---------- déroulé d'une rotation ----------
   Reprend le rail de la séquence de chantier : même code visuel, donc le
   visiteur comprend qu'il s'agit de la même méthode appliquée ailleurs. */
.rotation .tag{font-variant-numeric:tabular-nums; font-size:13px; letter-spacing:.06em}
.rotation .etape h3{font-size:clamp(18px,1.9vw,21px)}

/* ---------- plateformes ----------
   Des noms composés en typographie, jamais les logos : Flora Lys n'est
   partenaire d'aucune de ces plateformes, et leurs chartes l'interdisent. */
.plateformes{display:flex; flex-wrap:wrap; gap:12px; margin-top:38px}
.plateforme{display:inline-flex; align-items:center; height:62px; padding:0 26px;
  background:var(--papier); border:1px solid var(--trait); border-radius:var(--r-moyen);
  font-weight:600; font-size:16px; letter-spacing:-.015em; color:var(--encre-douce);
  transition:color .2s, border-color .2s}
.plateforme:hover{color:var(--encre); border-color:var(--or-clair)}
.mention-marques{margin:22px 0 0; font-size:13px; line-height:1.55; color:var(--encre-douce);
  max-width:72ch}

@media (max-width:900px){
  .confiance .wrap{grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px}
}
@media (max-width:560px){
  .confiance .wrap{grid-template-columns:1fr}
  .plateforme{height:54px; padding:0 18px; font-size:14.5px}
}

/* ==========================================================================
   Les gestes du lot nettoyage, en images
   Une grande vue qui pose la scène, puis quatre plans rapprochés. La grille
   est en douze colonnes : c'est le seul moyen d'obtenir 7+5 puis 4+4+4 sans
   qu'une image orpheline s'étire sur une ligne pour elle seule.
   ========================================================================== */
.gestes{display:grid; grid-template-columns:repeat(12,1fr); gap:18px; margin-top:38px}
/* Six images : une grande et une haute sur la première ligne (7+5), puis
   quatre vignettes à égalité (3+3+3+3). Toute autre répartition laisse une
   image orpheline qui s'étire sur sa ligne. */
.geste{margin:0; position:relative; border-radius:var(--r-moyen); overflow:hidden;
  grid-column:span 3; background:var(--papier-gris)}
.geste-grand{grid-column:span 7}
.geste-haut{grid-column:span 5}
/* Les quatre vignettes du bas ne font que trois colonnes : en 3/2 elles
   deviennent si basses que la légende recouvre l'image. Le 4/5 leur rend
   la hauteur nécessaire. */
.geste img{display:block; width:100%; height:100%; object-fit:cover; aspect-ratio:4/5}
.geste-grand img,.geste-haut img{aspect-ratio:16/10}

/* La légende est posée sur l'image : un dégradé, pas un voile plein, pour que
   la photographie reste lisible sous le texte. */
.geste figcaption{position:absolute; inset:auto 0 0 0; padding:52px 18px 16px; color:#fff;
  background:linear-gradient(to top, rgba(26,32,37,.88) 0%, rgba(26,32,37,.62) 45%, rgba(26,32,37,0) 100%)}
.geste figcaption b{display:block; font-family:var(--titre); font-weight:600; font-size:16px;
  letter-spacing:-.015em; margin-bottom:3px}
.geste-grand figcaption b,.geste-haut figcaption b{font-size:19px}
.geste figcaption span{display:block; font-size:13.5px; line-height:1.5; color:rgba(255,255,255,.84);
  max-width:40ch}
.gestes-mention{margin:14px 0 0; font-size:12.5px; color:var(--encre-douce); text-align:right}

@media (max-width:900px){
  .gestes{grid-template-columns:repeat(2,1fr); gap:14px}
  .geste,.geste-grand,.geste-haut{grid-column:span 1}
  .geste-grand{grid-column:span 2}
  .geste img,.geste-grand img,.geste-haut img{aspect-ratio:3/2}
  .geste figcaption{padding:40px 14px 13px}
  .geste figcaption b{font-size:15.5px}
  .geste figcaption span{font-size:12.5px}
}
@media (max-width:560px){
  .gestes{grid-template-columns:1fr}
  .geste,.geste-grand,.geste-haut{grid-column:span 1}
}