/* ==========================================================================
   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;
  --bleu:#2E7FB8;
  --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}
.entete .logo img{width:168px}
.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 .menu-devis a{padding-block:0; border-bottom:0; color:#fff}
.menu .menu-devis a:hover{color:#fff; 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(--encre); 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(--encre); color:#fff; border-color:var(--encre)}
.bouton.or{background:var(--or); border-color:var(--or); color:#fff}
.bouton.or:hover{background:var(--encre); border-color:var(--encre)}

/* ---------- bannière ---------- */
.banniere{position:relative; background:var(--encre); color:#fff; overflow:hidden;
  border-radius:0 0 32px 32px}
.banniere img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.42}
.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:#E3E8EC; margin:0 0 34px}
.banniere .bouton.clair{color:#fff; border-color:rgba(255,255,255,.4)}
.banniere .bouton.clair:hover{background:#fff; color:var(--encre); border-color:#fff}

.surtitre{font-family:var(--etiquette); font-weight:600; font-size:12.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--or-clair); 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(--papier-gris); 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}
.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(--encre); color:#fff; border-color:var(--encre)}

/* ---------- 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(--encre); color:#fff; 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:#C6BEB2; max-width:46ch}
.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:#37332D; color:#BDB6AA; font-size:14px; 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:#fff; 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:#fff}
.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(--encre); color:#fff; border-color:var(--encre)}
.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}

  .menu{position:fixed; inset:0 0 auto; top:0; background:var(--papier); flex-direction:column;
    gap:0; padding:88px 24px 32px; margin:0; height:100dvh; transform:translateX(100%);
    transition:transform .25s ease; overflow-y:auto; z-index:40}
  .menu.ouvert{transform:translateX(0)}
  .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(--encre); color:#fff; border-color:var(--encre)}

/* ---------- 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-clair); background:rgba(255,255,255,.12)}
.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:#fff; border-color:#fff; color:var(--encre)}

/* 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%, #4A443B 0%, #37332D 45%, #2A2722 100%)}
.banniere .wrap{position:relative; z-index:3; padding-block:clamp(72px,10vw,120px) clamp(80px,11vw,132px)}
.banniere.avec-image img{opacity:.22}

/* 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:.4;
  background-image:radial-gradient(rgba(255,255,255,.22) .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(201,174,107,.20) 0%, rgba(201,174,107,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:#DED8CE; 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 quatre 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:radial-gradient(120% 90% at 50% 0%, #403A32 0%, #2F2C26 100%);
  border-radius:var(--r-grand); padding:clamp(18px,2.4vw,30px); overflow:hidden}
.carte svg{width:100%; height:auto; max-height:min(74vh,620px); display:block; margin-inline:auto}
.carte .grille line{stroke:rgba(255,255,255,.09); stroke-width:2}
.carte .point{cursor:pointer}
.carte .noyau{fill:var(--or-clair); opacity:.95;
  transition:fill .2s, opacity .2s, r .2s cubic-bezier(.22,.61,.36,1)}
.carte .halo{opacity:.62; transition:opacity .2s}
.carte .touche{fill:transparent}
.carte .point:hover .noyau,.carte .point:focus-visible .noyau{fill:#fff; opacity:1}
.carte .point:hover .halo,.carte .point:focus-visible .halo{opacity:1}
.carte .point:focus-visible{outline:2px solid #fff; outline-offset:2px}
.carte figcaption{margin-top:16px; font-size:13.5px; line-height:1.6;
  color:rgba(255,255,255,.62); text-align:center}

/* 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:62vh}
}
@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. */
.carte .lac polygon{fill:rgba(46,127,184,.34); stroke:rgba(100,180,235,.5); stroke-width:2}
/* 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:rgba(255,255,255,.72); font-size:23px; font-weight:600;
  letter-spacing:.01em; paint-order:stroke; stroke:rgba(26,24,21,.8); stroke-width:5px}
.carte .reperes .lac-nom{fill:rgba(158,206,240,.85); 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.
   ========================================================================== */
.carte .territoire .dep{fill:rgba(255,255,255,.055); stroke:rgba(255,255,255,.22); stroke-width:2;
  stroke-linejoin:round}
.carte .territoire .dep-74{fill:rgba(255,255,255,.085)}
.carte .territoire .dep-73{fill:rgba(255,255,255,.07)}
.carte .territoire .dep-38{fill:rgba(255,255,255,.045); stroke:rgba(255,255,255,.17)}
.carte .territoire .lac{fill:rgba(46,127,184,.42); stroke:rgba(110,185,240,.55); stroke-width:2}
.carte .reperes .dep-nom{fill:rgba(255,255,255,.3); font-size:17px; font-weight:600;
  letter-spacing:.18em; stroke:none}

/* Marqueur mis en évidence : une onde lente le désigne sans clignoter. */
.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}
}