@font-face{
  font-family:'PoliceTitre';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('police-titre.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:'PoliceLibelle';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('police-libelle.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;
}

:root{
  --encre:#1f2327;              /* texte courant — graphite */
  --encre-douce:#545a60;        /* texte secondaire — jamais plus clair que ça */
  --fond:#f6f5f2;               /* béton clair */
  --fond-alt:#e6e4de;           /* sections alternées, section contact */
  --carte:#ffffff;              /* les panneaux */
  --marque:#9d3a14;             /* brique brûlée : boutons, assises, filets, numéro */
  --marque-clair:color-mix(in oklab, var(--marque) 10%, white);
  --marque-fonce:#772c0f;       /* survol des boutons — mesuré, pas calculé */
  --filet:#d5d2ca;              /* filets et bordures : décor, jamais du texte */
  --wa:#25d366;                 /* vert WhatsApp : texte FONCÉ dessus, jamais blanc */

  --nuit:#191d21;
  --creme:#f2f1ed;              /* texte sur nuit */
  --creme-doux:#bdbcb6;         /* texte secondaire sur nuit */
  --laiton:#d99a5b;             /* surtitres et filets sur nuit */
  --laiton-clair:#e9b482;       /* accents du panneau de verre */

  --liseret:rgba(255,255,255,.9);   /* trait clair en haut du panneau — invisible sur fond noir */
  --ombre-panneau:rgba(31,35,39,.55);
  --ombre-photo:rgba(31,35,39,.7);
  --halo-savoir:color-mix(in srgb,var(--laiton) 16%,transparent);
  --halo-contact:color-mix(in srgb,var(--marque) 9%,transparent);
  --texte-bouton:#fff;              /* passe au fond quand --marque est clair (jaune, laiton) */
  --ruban-fond:var(--marque);
  --ruban-texte:var(--texte-bouton);

  --barre:color-mix(in srgb,var(--nuit) 85%,transparent);
  --barre-filet:color-mix(in srgb,var(--creme) 16%,transparent);
  --barre-texte:var(--creme);       /* le nom de l'entreprise */
  --barre-texte-doux:var(--creme-doux);
  --barre-accent:var(--laiton-clair);

  --police-texte:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --police-titre:'PoliceTitre',"Iowan Old Style","Palatino Linotype",Palatino,
    "Times New Roman",Georgia,serif;
  --police-libelle:'PoliceLibelle',"Avenir Next",Avenir,"Century Gothic","Segoe UI",
    system-ui,sans-serif;

  --rayon:4px;                  /* angles nets : c'est du bâti, pas un magazine */
  --rayon-bouton:2rem;          /* pilule : un bouton n'est JAMAIS un rectangle brut */
  --largeur:1120px;
  --gouttiere:clamp(1rem,3vw,2rem);
  --hauteur-bandeau:78svh;
  --assise:4px;                 /* épaisseur du bandeau d'accent des panneaux */
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--police-texte);
  font-size:clamp(1rem,.95rem + .2vw,1.08rem);   /* jamais sous 16px */
  line-height:1.62;
  color:var(--encre);
  background:var(--fond);
  -webkit-font-smoothing:antialiased;
}
img,svg,video{max-width:100%;height:auto;display:block}
figure{margin:0;max-width:100%}   /* parade : une image cassée ne fait pas déborder la page */
h1,h2,h3{font-family:var(--police-titre);font-weight:400;line-height:1.1;
  margin:0 0 .6em;text-wrap:balance}
h1{font-size:clamp(2rem,1.25rem + 3.1vw,3.5rem);letter-spacing:-.005em}
h2{font-size:clamp(1.7rem,1.15rem + 2.2vw,2.6rem);letter-spacing:-.005em}
h3{font-size:clamp(1.1rem,1.02rem + .42vw,1.32rem)}
p{margin:0 0 1em}
.hero__intro,.contact__phrase,.poste p{max-width:58ch}
ul,ol{margin:0;padding:0;list-style:none}
a{color:inherit;text-decoration:none}
main a:not(.bouton){text-decoration:underline;text-underline-offset:.15em}
main a[href^="tel:"]:not(.bouton),main a[href^="mailto:"]:not(.bouton){
  display:inline-block;padding-block:.25rem}
:focus-visible{outline:3px solid var(--marque);outline-offset:2px;border-radius:2px}
.hero :focus-visible,.savoir :focus-visible,.pied :focus-visible{outline-color:var(--laiton)}

.bande{width:100%;max-width:var(--largeur);margin-inline:auto;padding-inline:var(--gouttiere)}

.saut-contenu{position:absolute;top:-6rem;left:.5rem;z-index:50;background:var(--fond);
  color:var(--encre);padding:.6rem 1rem;border-radius:var(--rayon)}
.saut-contenu:focus{top:.5rem}

.ruban{margin:0;padding:.5rem var(--gouttiere);text-align:center;font-size:.85rem;
  background:var(--ruban-fond);color:var(--ruban-texte)}                     /* 6,89 */
.ruban a,.pied a{display:inline-block;padding-block:.2rem;text-decoration:underline}

.assise{display:block;height:3px;width:min(190px,100%);
  background:linear-gradient(90deg,var(--marque) 0 52px,var(--filet) 52px 100%);
  transform-origin:left;margin-top:.2rem}
.entete-section--centre .assise{margin-inline:auto;
  background:linear-gradient(90deg,var(--filet) 0 calc(50% - 26px),
    var(--marque) calc(50% - 26px) calc(50% + 26px),var(--filet) calc(50% + 26px) 100%);
  transform-origin:center}

.bouton{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:46px;padding:.8rem 1.6rem;border:0;border-radius:var(--rayon-bouton);
  font-family:var(--police-libelle);font-size:.92rem;font-weight:500;
  text-transform:uppercase;letter-spacing:.1em;text-align:center;cursor:pointer;
  font-variant-numeric:lining-nums tabular-nums;
  transition:background-color .25s ease,box-shadow .25s ease;
}
.bouton--plein{background:var(--marque);color:var(--texte-bouton);        /* 6,89 */
  box-shadow:0 1px 0 color-mix(in srgb,var(--liseret) 24%,transparent) inset,
             0 12px 26px -14px color-mix(in srgb,var(--marque) 70%,transparent)}
.bouton--plein:hover,.bouton--plein:focus-visible{background:var(--marque-fonce);  /* 9,76 */
  box-shadow:0 1px 0 color-mix(in srgb,var(--liseret) 28%,transparent) inset,
             0 18px 34px -14px color-mix(in srgb,var(--marque) 80%,transparent)}
.bouton--wa{background:var(--wa);color:#11221a}   /* texte foncé : blanc sur #25d366 = 1,98:1 */
.bouton--wa:hover,.bouton--wa:focus-visible{background:color-mix(in oklab,var(--wa) 88%,black)}
.bouton--grand{min-height:54px;padding:.95rem 1.9rem;font-size:.98rem}

.mobile-seulement{display:inline-flex}
@media (min-width:48rem){.mobile-seulement{display:none}}

.entete{position:sticky;top:0;z-index:30;
  background:var(--barre);
  border-bottom:1px solid var(--barre-filet);
  box-shadow:0 14px 34px -22px rgba(0,0,0,.8)}
@supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){
  .entete{-webkit-backdrop-filter:blur(16px) saturate(1.15);backdrop-filter:blur(16px) saturate(1.15)}
}
.entete::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:linear-gradient(90deg,var(--marque) 0 34%,
    color-mix(in srgb,var(--laiton) 55%,transparent) 34% 62%,transparent 62% 100%);
  opacity:.9;pointer-events:none}
.nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  flex-wrap:wrap;min-height:66px;padding-block:.5rem}
.marque{display:flex;flex-direction:column;line-height:1.15;min-width:0;flex:1 1 auto}
.marque__nom{font-family:var(--police-titre);font-size:1.15rem;
  text-transform:uppercase;letter-spacing:.06em;color:var(--barre-texte);   /* 15,0 sur la barre */
  overflow-wrap:break-word}
.marque__sous{font-family:var(--police-libelle);font-weight:500;font-size:.7rem;
  color:var(--barre-accent);                                  /* 5,25 au pire cas, photo claire */
  text-transform:uppercase;letter-spacing:.18em;margin-top:.25rem}

#nav-toggle{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;
  width:46px;height:46px;padding:0 11px;background:none;border:1px solid var(--barre-filet);
  border-radius:var(--rayon);cursor:pointer;flex:0 0 auto}
.nav-toggle__trait{display:block;height:2px;background:var(--barre-accent);border-radius:1px}

#nav-links{display:flex;flex-direction:column;gap:.15rem;width:100%;padding-bottom:.6rem}
#nav-links{border-top:1px solid var(--barre-filet);padding-top:.5rem;margin-top:.35rem}
#nav-links a{display:flex;align-items:center;min-height:46px;padding:.5rem .25rem;
  font-family:var(--police-libelle);font-weight:500;font-size:.82rem;
  text-transform:uppercase;letter-spacing:.13em;
  color:var(--barre-texte-doux);                              /* 5,12 au pire cas */
  transition:color .2s ease}
#nav-links a:hover,#nav-links a:focus-visible{color:var(--barre-texte)}
#nav-links a.bouton{justify-content:center;letter-spacing:.1em;
  color:var(--texte-bouton);margin-top:.4rem}
.entete :focus-visible{outline-color:var(--barre-accent)}
.js #nav-links{display:none}
.js #nav-links.is-open{display:flex}

@media (min-width:62rem){
  #nav-toggle{display:none}
  #nav-links,.js #nav-links{display:flex;flex-direction:row;align-items:center;
    gap:clamp(.9rem,2vw,1.9rem);width:auto;padding-bottom:0;
    border-top:0;padding-top:0;margin-top:0}
  .marque{flex:0 1 auto}
  #nav-links a{padding:.5rem .3rem}
  #nav-links a.bouton{margin-top:0;padding:.7rem 1.4rem;min-height:44px}
  #nav-links li:not(:last-child) a{position:relative}
  #nav-links li:not(:last-child) a::after{content:"";position:absolute;
    left:.3rem;right:.3rem;bottom:.5rem;height:2px;background:var(--barre-accent);
    transform:scaleX(0);transform-origin:left;transition:transform .28s ease}
  #nav-links li:not(:last-child) a:hover::after,
  #nav-links li:not(:last-child) a:focus-visible::after{transform:scaleX(1)}
}

.entete-section{margin-bottom:clamp(1.5rem,3.5vw,2.2rem)}
.entete-section h2{margin:0 0 .85rem}
.entete-section--centre{text-align:center}
.sur{font-family:var(--police-libelle);font-weight:500;font-size:.72rem;
  text-transform:uppercase;letter-spacing:.26em;color:var(--marque);margin:0 0 .8rem}

.panneau{position:relative;background:var(--carte);
  border:1px solid var(--filet);border-radius:var(--rayon);
  padding:clamp(1.8rem,4vw,3rem) clamp(1.2rem,3.5vw,2.6rem);
  box-shadow:0 1px 0 var(--liseret) inset,0 30px 64px -42px var(--ombre-panneau)}
.panneau::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;
  height:var(--assise);background:var(--marque);
  border-radius:var(--rayon) var(--rayon) 0 0}

.hero{position:relative;display:flex;align-items:flex-end;
  min-height:min(var(--hauteur-bandeau),44rem);
  padding-block:clamp(3rem,9vw,5rem) clamp(4.5rem,11vw,7rem);
  background:var(--nuit)}
.hero__photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center 52%}
.hero__voile{position:absolute;inset:0;
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--nuit) 58%,transparent) 0%,
    color-mix(in srgb,var(--nuit) 26%,transparent) 36%,
    color-mix(in srgb,var(--nuit) 74%,transparent) 100%)}
.hero__trame{position:absolute;inset:0;pointer-events:none}
.hero__bande{position:relative;z-index:2;width:100%}

.hero__verre{
  max-width:46rem;padding:clamp(1.5rem,4vw,2.6rem);
  border-radius:var(--rayon);
  border:1px solid rgba(255,255,255,.14);
  border-left:var(--assise) solid var(--marque);   /* le montant d'accent */
  background:color-mix(in srgb,var(--nuit) 84%,transparent);  /* contrastes mesurés au pire cas */
  box-shadow:0 26px 64px -30px rgba(0,0,0,.75);
  color:var(--creme);
  animation:verre-monte .7s cubic-bezier(.2,.75,.25,1) both;
}
@supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){
  .hero__verre{-webkit-backdrop-filter:blur(18px) saturate(1.1);
    backdrop-filter:blur(18px) saturate(1.1)}
}
@keyframes verre-monte{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes paraitre{from{opacity:0}to{opacity:1}}

.hero__etiquette{font-family:var(--police-libelle);font-weight:500;font-size:.74rem;
  text-transform:uppercase;letter-spacing:.26em;
  color:var(--laiton-clair);margin:0 0 1rem}                        /* 5,53 au pire cas */
.hero__titre{color:var(--creme);margin:0;line-height:1.06}          /* 9,08 au pire cas */
.hero__accent{display:block;font-family:var(--police-titre);line-height:1.06;
  font-size:clamp(2rem,1.25rem + 3.1vw,3.5rem);letter-spacing:-.005em;
  color:var(--laiton-clair);margin:0 0 1rem;text-wrap:balance}       /* 5,53 au pire cas */
.hero__intro{color:var(--creme-doux);font-size:1.05rem;margin:0}     /* 5,39 au pire cas */
.hero__actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.7rem}
@media (max-width:30rem){
  .hero__actions{display:grid;grid-template-columns:1fr}
  .hero__actions .bouton{width:100%;padding-inline:1rem}
}

.travaux{position:relative;z-index:2;
  margin-top:calc(clamp(2rem,5vw,4rem) * -1);
  padding-block:0 clamp(3rem,8vw,5.5rem)}
.travaux__grille{display:grid;gap:clamp(1.6rem,4vw,3rem)}
@media (min-width:62rem){
  .travaux__grille{grid-template-columns:minmax(0,1.14fr) minmax(0,.86fr);align-items:stretch}
  .travaux__visuel{margin-top:clamp(4rem,9vw,7rem);display:flex}
  .travaux__visuel img{height:100%;min-height:20rem;object-fit:cover}
}

.postes{display:grid}
.poste{display:grid;grid-template-columns:auto minmax(0,1fr);
  column-gap:clamp(.9rem,2.5vw,1.3rem);
  padding-block:clamp(1rem,2.4vw,1.25rem);
  border-top:1px solid var(--filet)}
.poste:first-child{border-top:0;padding-top:.4rem}
.poste__num{grid-row:1 / span 2;position:relative;padding-left:1.05rem;padding-top:.3rem;
  font-family:var(--police-libelle);font-weight:500;font-size:.8rem;letter-spacing:.1em;
  font-variant-numeric:lining-nums tabular-nums;
  color:var(--marque)}                                                  /* 6,89 sur --carte */
.poste__num::before{content:"";position:absolute;left:0;top:.72em;width:8px;height:8px;
  background:var(--marque);opacity:.4;
  transition:opacity .25s ease}
.poste:hover .poste__num::before{opacity:1}
.poste h3{grid-column:2;margin:0 0 .3rem;color:var(--encre)}            /* 15,81 */
.poste p{grid-column:2;margin:0;color:var(--encre-douce);font-size:.97rem}  /* 6,98 */
.js .poste.reveal{transition-delay:calc(var(--i,0) * 90ms)}

.cadre{position:relative}
.cadre img{width:100%;border-radius:var(--rayon);
  object-fit:cover;object-position:center 50%;
  box-shadow:0 26px 52px -32px var(--ombre-photo)}
.cadre::after{content:"";position:absolute;inset:-12px;pointer-events:none;
  border:1px solid var(--marque);opacity:.45;border-radius:var(--rayon)}
.cadre--gauche::after{inset:-12px}

.realisations{padding-block:clamp(3rem,8vw,5rem);background:var(--fond-alt)}
.realisations__grille{display:grid;gap:clamp(1rem,2.5vw,1.6rem);
  margin-top:clamp(1.8rem,4vw,2.6rem)}
.realisations__grille .cadre{display:flex}
.realisations__grille img{width:100%;height:100%;
  object-fit:cover;object-position:center 50%;aspect-ratio:3/2}
.realisations__haute img{aspect-ratio:3/4}
@media (min-width:52rem){
  .realisations__grille{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
  .realisations__haute{grid-column:1;grid-row:1 / span 2}
  .realisations__grille .cadre:not(.realisations__haute){grid-column:2}
  .realisations__grille img,.realisations__haute img{aspect-ratio:auto}
}
.realisations__haute::after{inset:12px 12px -12px -12px}

.savoir{color:var(--creme);
  padding-block:clamp(3rem,8vw,5.5rem);
  background:radial-gradient(120% 50% at 10% 50%,var(--halo-savoir),transparent 60%),
    var(--nuit)}
.savoir .sur{color:var(--laiton)}                     /* 7,04 */
.savoir h2{color:var(--creme)}                        /* 15,00 */
.savoir .assise{background:linear-gradient(90deg,color-mix(in srgb,var(--laiton) 28%,transparent) 0 calc(50% - 26px),
  var(--laiton) calc(50% - 26px) calc(50% + 26px),color-mix(in srgb,var(--laiton) 28%,transparent) calc(50% + 26px) 100%)}

.savoir__bande{display:grid;gap:clamp(1.6rem,4vw,2.8rem)}
.savoir__large img{aspect-ratio:3/2}
.savoir__haute img{aspect-ratio:4/5}
@media (min-width:48rem){
  .savoir__bande{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);align-items:end}
  .savoir__haute img{aspect-ratio:3/4}
}
.savoir .cadre::after{border-color:var(--laiton);opacity:.5}
.js .savoir .reveal{transition-delay:calc(var(--i,0) * 110ms)}

.equipe{padding-block:clamp(3rem,8vw,5rem) 0;background:var(--fond)}
.equipe__photo{width:100%;margin:clamp(1.8rem,4vw,2.6rem) 0 0;
  border-top:var(--assise) solid var(--marque);
  border-bottom:0}   /* le bas est fermé par l'arc, plus par un filet */
.equipe__photo img{width:100%;aspect-ratio:3/2;max-height:40rem;object-fit:cover;
  object-position:center 38%;border-radius:0}
@media (min-width:48rem){.equipe__photo img{aspect-ratio:21/7.4}}

.contact{padding-block:clamp(3.5rem,9vw,6rem);
  background:radial-gradient(85% 50% at 80% 50%,var(--halo-contact),transparent 56%),
    var(--fond-alt)}
.contact__grille{display:grid;gap:clamp(1.8rem,4vw,3rem)}
.contact__visuel img{aspect-ratio:16/9}
@media (min-width:62rem){
  .contact__grille{grid-template-columns:minmax(0,1.14fr) minmax(0,.86fr);align-items:stretch}
  .contact__visuel img{height:100%;min-height:24rem;aspect-ratio:auto}
}
.contact__carte{text-align:center}
.contact__phrase{font-size:1.04rem;color:var(--encre);           /* 15,81 sur --carte */
  margin:0 auto .9rem;max-width:36ch}

.fiche{max-width:32rem;margin:clamp(1.4rem,3.5vw,1.9rem) auto 0;text-align:left;
  padding-top:clamp(1.2rem,3vw,1.6rem);border-top:1px solid var(--filet)}
.fiche__titre{margin:0 0 .6rem;text-align:center;
  font-family:var(--police-libelle);font-weight:500;font-size:.7rem;
  text-transform:uppercase;letter-spacing:.18em;color:var(--encre-douce)}   /* 6,98 */

.tableau{margin:0;display:grid}
.tableau__ligne{display:flex;flex-wrap:wrap;align-items:baseline;
  justify-content:space-between;gap:.1rem .9rem;
  padding:clamp(.45rem,1.5vw,.62rem) .5rem;border-radius:var(--rayon)}
.tableau__ligne + .tableau__ligne{border-top:1px solid var(--filet)}
.tableau dt{color:var(--encre-douce);font-family:var(--police-libelle);
  font-weight:500;font-size:.88rem}                                         /* 6,98 */
.tableau dd{margin:0;color:var(--encre);text-align:right;                   /* 15,81 */
  font-variant-numeric:lining-nums tabular-nums}

.tableau dd a[href^="tel:"]{display:inline-block;padding-block:.35rem;
  font-family:var(--police-libelle);font-weight:500;
  font-size:1.14rem;letter-spacing:.01em;
  color:var(--marque);text-decoration:none;                                 /* 6,89 */
  border-bottom:1px solid color-mix(in oklab,var(--marque) 35%,transparent);
  transition:color .25s ease,border-color .25s ease}
.tableau dd a[href^="tel:"]:hover,.tableau dd a[href^="tel:"]:focus-visible{
  color:var(--marque-fonce);border-bottom-color:var(--marque)}              /* 9,76 */

.tableau__ligne--aujourdhui{background:color-mix(in oklab,var(--marque) 7%,transparent)}
.tableau__ligne--aujourdhui dt{color:var(--marque)}                         /* 6,89 */
.tableau--horaires .tableau__ligne--ferme dd{color:var(--encre-douce)}      /* 6,98 */
.tableau__aujourdhui{margin-left:.5rem;padding:.12rem .45rem;border-radius:999px;
  background:var(--marque);color:var(--texte-bouton);                       /* 6,89 */
  font-family:var(--police-libelle);font-weight:500;font-size:.6rem;
  text-transform:uppercase;letter-spacing:.12em;vertical-align:.08em}

.pied{padding-block:clamp(2.8rem,7vw,4rem);background:var(--nuit);color:var(--creme)}
.pied__interieur{text-align:center}
.assise--pied{margin:0 auto clamp(1.2rem,3vw,1.6rem);
  background:linear-gradient(90deg,color-mix(in srgb,var(--laiton) 30%,transparent) 0 calc(50% - 26px),
    var(--laiton) calc(50% - 26px) calc(50% + 26px),color-mix(in srgb,var(--laiton) 30%,transparent) calc(50% + 26px) 100%)}
.pied__nom{margin:0 0 .45rem;font-family:var(--police-titre);
  font-size:clamp(1.3rem,1.05rem + .9vw,1.7rem);line-height:1.2;
  text-transform:uppercase;letter-spacing:.12em;color:var(--creme);
  overflow-wrap:break-word}                                            /* 15,00 */
.pied__lieu{margin:0;font-family:var(--police-libelle);font-weight:500;font-size:.7rem;
  text-transform:uppercase;letter-spacing:.2em;color:var(--creme-doux)}    /* 8,90 */
.pied__bas{font-size:.82rem;text-align:center;
  margin-top:clamp(1.7rem,4vw,2.3rem);padding-top:clamp(1.1rem,2.5vw,1.5rem);
  border-top:1px solid color-mix(in srgb,var(--laiton) 25%,transparent)}
.pied p{margin:0}
.pied__credit{color:var(--creme-doux)}                                     /* 8,90 */

.js .reveal{opacity:0;transform:translateY(16px);
  transition:opacity .55s ease,transform .55s ease}
.js .assise.reveal{transform:scaleX(0);
  transition:opacity .3s ease,transform .8s cubic-bezier(.22,.8,.25,1) .1s}
.js .reveal.est-vu{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .reveal{transform:none;transition:opacity .55s ease}
  .js .reveal.est-vu{transform:none}
  .hero__verre{animation-name:paraitre}
  .js .assise.reveal{transform:none;transition:opacity .8s ease .1s}
  #nav-links li:not(:last-child) a::after{transform:scaleX(1);opacity:0;
    transition:opacity .25s ease}
  #nav-links li:not(:last-child) a:hover::after,
  #nav-links li:not(:last-child) a:focus-visible::after{opacity:1}
}

.nav > .marque{min-width:0;flex:1 1 0}
.nav > #nav-links{flex-basis:100%}
.marque__nom{overflow-wrap:break-word;
  font-size:clamp(.92rem,.78rem + .7vw,var(--taille-marque,1.15rem))}
.nav > #nav-toggle{flex:none}

.bouton{white-space:nowrap}
@media (max-width:26rem){
  .bouton--grand{font-size:.82rem;letter-spacing:.05em;padding:.9rem 1rem}
}
@media (max-width:22rem){
  .bouton--grand{font-size:.76rem;letter-spacing:.03em;padding:.85rem .7rem}
}

.tableau__ligne{display:grid;grid-template-columns:auto minmax(0,1fr);
  align-items:baseline;gap:0 .9rem}
.tableau dd{min-width:0}

:root{
  --encre:#161f1c;
  --encre-douce:#44534e;
  --fond:#f8fbfa;
  --fond-alt:#d9e7e3;
  --carte:#ffffff;
  --marque:#116048;
  --marque-fonce:#0b4636;
  --filet:#bed3cd;
  --nuit:#0e1913;
  --creme:#eef5f2;
  --creme-doux:#b2c5bf;
  --laiton:#c9a24f;
  --laiton-clair:#ddbb77;
  --police-titre:'PoliceTitre',"Source Serif Pro",Cambria,Georgia,serif;
  --police-libelle:'PoliceLibelle',"Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
}

.signature--hero{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1}
.signature--hero svg{width:100%;height:100%;display:block}

:root{
  --rayon:16px;                 /* le tronc est à 4px : angles nets, du bâti.
                                   Ici tout est adouci — rien n'accroche. */
  --rayon-bouton:2rem;
  --gouttiere:clamp(1.15rem,3.6vw,2.6rem);
  --hauteur-bandeau:62svh;      /* tronc : 78svh */
  --assise:3px;

  --lumiere:color-mix(in srgb,var(--carte) 78%,transparent);   /* la lumière sur le propre */
  --buee-clair:color-mix(in srgb,var(--marque) 22%,transparent);
  --buee-nuit:color-mix(in srgb,var(--creme) 26%,transparent);
  --arc-haut:clamp(96px,13vw,190px);
  --lame-aller:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 190' preserveAspectRatio='none'><path fill='%23000' d='M0 190 L0 152 C 322 76 706 22 1200 6 L1200 190 Z'/></svg>");
  --lame-retour:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 190' preserveAspectRatio='none'><path fill='%23000' d='M0 190 L0 6 C 494 22 878 76 1200 152 L1200 190 Z'/></svg>");
  --souffle:color-mix(in srgb,var(--encre) 13%,transparent);   /* les ombres douces */
}

.hero{overflow:hidden;
  padding-block:clamp(2.4rem,7vw,4rem) clamp(5rem,13vw,8.5rem)}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:-1px;z-index:1;
  height:var(--arc-haut);pointer-events:none;
  background:var(--fond);
  -webkit-mask-image:var(--lame-aller);mask-image:var(--lame-aller);
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}

.hero__trame{
  background-image:
    radial-gradient(56% 42% at 6% 16%,var(--buee-nuit) 0%,transparent 70%),
    radial-gradient(38% 58% at 25% 82%,
      color-mix(in srgb,var(--buee-nuit) 70%,transparent) 0%,transparent 74%),
    radial-gradient(70% 28% at -8% 52%,
      color-mix(in srgb,var(--buee-nuit) 58%,transparent) 0%,transparent 78%),
    radial-gradient(26% 30% at 33% 36%,
      color-mix(in srgb,var(--buee-nuit) 46%,transparent) 0%,transparent 72%);
  background-size:auto,auto,auto,auto;
  background-position:left top,left top,left top,left top;
  background-repeat:no-repeat,no-repeat,no-repeat,no-repeat;
  -webkit-mask-image:radial-gradient(118% 132% at 3% -10%,
    #000 0 24%,rgba(0,0,0,.42) 56%,transparent 84%);
  mask-image:radial-gradient(118% 132% at 3% -10%,
    #000 0 24%,rgba(0,0,0,.42) 56%,transparent 84%);
}

.sig-balayage__net{fill:color-mix(in srgb,var(--creme) 9%,transparent)}
.sig-balayage__trainee{fill:none;stroke:color-mix(in srgb,var(--creme) 16%,transparent);
  stroke-width:16;stroke-linecap:round}
.sig-balayage__liseret{fill:none;stroke:color-mix(in srgb,var(--creme) 70%,transparent);
  stroke-width:1.7;stroke-linecap:round}
.sig-balayage__echo{fill:none;stroke:color-mix(in srgb,var(--creme) 20%,transparent);
  stroke-width:1.1;stroke-linecap:round}
.sig-balayage__echo--loin{stroke:color-mix(in srgb,var(--creme) 10%,transparent)}

.sig-luire{position:absolute;top:-12%;bottom:-12%;left:44%;width:52%;
  pointer-events:none;
  background:linear-gradient(90deg,transparent 0,
    color-mix(in srgb,var(--creme) 20%,transparent) 44%,
    color-mix(in srgb,var(--creme) 7%,transparent) 62%,transparent 100%);
  transform:translate3d(-200%,0,0) skewX(-13deg);
  animation:sig-balaye 3.8s cubic-bezier(.35,.66,.3,1) .6s both}
@keyframes sig-balaye{
  from{transform:translate3d(-200%,0,0) skewX(-13deg)}
  to  {transform:translate3d(130%,0,0)  skewX(-13deg)}}
@keyframes sig-pose{from{opacity:0}to{opacity:1}}

.hero__verre{border:0;border-radius:22px;position:relative;overflow:hidden;
  max-width:44rem;
  box-shadow:0 30px 70px -34px color-mix(in srgb,var(--nuit) 90%,transparent),
             0 0 0 1px color-mix(in srgb,var(--creme) 10%,transparent)}
.hero__verre::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(116deg,transparent 0 24%,
    color-mix(in srgb,var(--creme) 13%,transparent) 33% 39%,
    color-mix(in srgb,var(--creme) 5%,transparent) 44% 52%,transparent 60%)}
.hero__verre > *{position:relative;z-index:1}

.signature--milieu,.signature--contact{
  position:relative;display:block;width:100%;overflow:hidden;
  height:clamp(96px,13vw,190px);
  margin-bottom:-1px}
.signature--milieu svg,.signature--contact svg{
  position:relative;z-index:1;display:block;width:100%;height:100%}

.signature--milieu{background:var(--fond)}
.signature--milieu .sig-arc__apres{fill:var(--nuit)}
.signature--milieu .sig-arc__trainee{stroke:color-mix(in srgb,var(--creme) 24%,transparent)}
.signature--milieu .sig-arc__liseret{stroke:color-mix(in srgb,var(--creme) 55%,transparent)}
.signature--milieu .sig-arc__echo{stroke:color-mix(in srgb,var(--creme) 18%,transparent)}
.signature--contact{
  background:var(--fond);
  position:relative;z-index:2;
  margin-top:0}

.signature--milieu::before,.signature--contact::before{display:none}

.sig-arc__apres{fill:var(--fond-alt)}
.sig-arc__trainee{fill:none;stroke:var(--lumiere);stroke-width:5;stroke-linecap:round}
.sig-arc__liseret{fill:none;stroke:color-mix(in srgb,var(--marque) 58%,transparent);
  stroke-width:1.5;stroke-linecap:round}
.sig-arc__echo{fill:none;stroke:color-mix(in srgb,var(--marque) 20%,transparent);
  stroke-width:1.1;stroke-linecap:round}

.savoir{position:relative;overflow:hidden;
  padding-block:clamp(2.6rem,6vw,4.2rem) calc(var(--arc-haut) + clamp(1.2rem,3vw,2.4rem));
  background:var(--nuit)}
.savoir > .bande{position:relative;z-index:1}
.savoir::before{content:none}
.savoir::after{content:"";position:absolute;inset:auto 0 0 0;z-index:0;pointer-events:none;
  height:var(--arc-haut);
  background:var(--fond);
  -webkit-mask-image:var(--lame-retour);mask-image:var(--lame-retour);
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}

.entete{border-bottom:0;
  background:var(--barre);
  box-shadow:0 12px 34px -20px var(--souffle)}
#nav-toggle{border:0;border-radius:50%;
  background:color-mix(in srgb,var(--creme) 14%,transparent)}
#nav-links li:not(:last-child) a::after{
  background:linear-gradient(90deg,var(--barre-accent) 0 22%,
    color-mix(in srgb,var(--barre-accent) 0%,transparent) 100%)}

.panneau{border:0;
  padding:clamp(2rem,4.6vw,3.4rem) clamp(1.3rem,3.8vw,3rem);
  box-shadow:0 34px 74px -46px color-mix(in srgb,var(--encre) 46%,transparent),
             0 2px 6px -4px var(--souffle)}
.panneau::before{content:"";left:0;right:0;top:0;height:44%;
  background:radial-gradient(122% 100% at 26% -34%,
    color-mix(in srgb,var(--marque) 8%,transparent),transparent 70%);
  border-radius:var(--rayon) var(--rayon) 0 0;pointer-events:none}

.poste{border-top:0;padding-block:clamp(.8rem,2vw,1.1rem);
  border-radius:var(--rayon);
  transition:background-color .25s ease}
.poste:first-child{padding-top:clamp(.8rem,2vw,1.1rem)}
.poste:hover{background:color-mix(in srgb,var(--fond-alt) 46%,transparent)}
.poste__num{padding-left:1.6rem}
.poste__num::before{content:"";width:15px;height:15px;top:.38em;left:0;
  border-radius:3px;opacity:1;
  background:
    linear-gradient(114deg,transparent 0 48%,
      color-mix(in srgb,var(--carte) 92%,transparent) 48% 54%,
      var(--marque) 54% 100%),
    radial-gradient(circle,color-mix(in srgb,var(--marque) 52%,transparent) 0 .9px,
      transparent 1.2px),
    color-mix(in srgb,var(--marque) 13%,transparent);
  background-size:100% 100%,4px 4px,auto;
  background-position:0 0,1px 1px,0 0;
  box-shadow:0 1px 3px -1px var(--souffle);
  transition:opacity .25s ease}
.poste__num::after{content:"";position:absolute;left:0;top:.38em;
  width:15px;height:15px;border-radius:3px;pointer-events:none;
  background:var(--marque);opacity:0;
  transition:opacity .25s ease}
.poste:hover .poste__num::before{opacity:1}
.poste:hover .poste__num::after{opacity:1}

.savoir .cadre::after{
  background:radial-gradient(72% 68% at 50% 42%,
    color-mix(in oklab, var(--creme) 22%, transparent) 0%,
    color-mix(in oklab, var(--creme) 9%, transparent) 46%,
    transparent 74%)}
.savoir .cadre img{box-shadow:0 26px 56px -40px color-mix(in srgb,var(--encre) 62%,transparent)}

.assise{height:2px;width:min(280px,100%);border-radius:2px;
  background:linear-gradient(90deg,var(--marque) 0 16%,
    color-mix(in srgb,var(--marque) 42%,transparent) 52%,
    color-mix(in srgb,var(--marque) 0%,transparent) 100%)}
.entete-section--centre .assise{margin-inline:auto;
  background:linear-gradient(90deg,
    color-mix(in srgb,var(--marque) 0%,transparent) 0,
    color-mix(in srgb,var(--marque) 40%,transparent) 34%,
    var(--marque) 50%,
    color-mix(in srgb,var(--marque) 40%,transparent) 66%,
    color-mix(in srgb,var(--marque) 0%,transparent) 100%)}
.savoir .assise{background:linear-gradient(90deg,
    color-mix(in srgb,var(--laiton) 0%,transparent) 0,
    color-mix(in srgb,var(--laiton) 45%,transparent) 34%,
    var(--laiton) 50%,
    color-mix(in srgb,var(--laiton) 45%,transparent) 66%,
    color-mix(in srgb,var(--laiton) 0%,transparent) 100%)}
.assise--pied{background:linear-gradient(90deg,
    color-mix(in srgb,var(--laiton) 0%,transparent) 0,
    color-mix(in srgb,var(--laiton) 45%,transparent) 34%,
    var(--laiton) 50%,
    color-mix(in srgb,var(--laiton) 45%,transparent) 66%,
    color-mix(in srgb,var(--laiton) 0%,transparent) 100%)}

.fiche{border-top:0;padding-top:0;margin-top:clamp(1.7rem,4vw,2.3rem)}
.tableau__ligne + .tableau__ligne{border-top:0}
.tableau__ligne{border-radius:999px;padding:clamp(.5rem,1.6vw,.7rem) clamp(.85rem,2.4vw,1.15rem)}
.tableau__ligne:nth-child(odd){background:color-mix(in srgb,var(--fond-alt) 45%,transparent)}
.tableau__ligne--aujourdhui,
.tableau__ligne--aujourdhui:nth-child(odd){background:color-mix(in oklab,var(--marque) 9%,transparent)}
.tableau dd a[href^="tel:"]{border-bottom:0}

.equipe__photo{position:relative;border-top:0;border-bottom:0}

@media (min-width:62rem){
  .travaux__grille{grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:clamp(1.8rem,4vw,3.2rem);align-items:stretch}
  .travaux__visuel{margin-top:0}
}

.realisations{padding-block:clamp(4rem,10vw,7rem)}
.realisations__grille{gap:clamp(1.1rem,2.8vw,2rem)}
@media (min-width:52rem){
  .realisations__grille{grid-template-columns:repeat(3,minmax(0,1fr))}
  .realisations__grille .cadre,
  .realisations__grille .cadre:not(.realisations__haute),
  .realisations__haute{grid-column:auto;grid-row:auto}
  .realisations__grille img,.realisations__haute img{aspect-ratio:4/5}
}

.savoir__bande{gap:clamp(1.2rem,3vw,2.2rem)}
@media (min-width:48rem){
  .savoir__bande{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
  .savoir__large img,.savoir__haute img{aspect-ratio:4/3}
}

.contact{padding-block:clamp(4rem,10vw,7rem);
  background:radial-gradient(92% 50% at 82% 50%,
    color-mix(in srgb,var(--marque) 7%,transparent),transparent 58%),var(--fond-alt)}
@media (min-width:62rem){
  .contact__grille{grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:clamp(1.8rem,4vw,3.2rem)}
}

.travaux{padding-block:clamp(1.6rem,3.6vw,2.6rem) clamp(4rem,10vw,7rem)}
.equipe{padding-block:clamp(1.6rem,4vw,2.6rem) clamp(2.4rem,6vw,4rem)}

.equipe__phrase{max-width:54ch;margin:0 auto clamp(1.6rem,4vw,2.4rem);
  text-align:center;color:var(--encre-douce)}                            /* 6,98 */
.materiel{list-style:none;margin:0;padding:0;
  display:grid;gap:clamp(1.2rem,3vw,1.9rem) clamp(1.8rem,4.5vw,3.4rem)}
@media (min-width:48rem){.materiel{grid-template-columns:repeat(2,minmax(0,1fr))}}
.materiel__outil{position:relative;padding-left:1.6rem}
.materiel__outil::before{content:"";position:absolute;left:0;top:.62em;
  width:8px;height:8px;background:var(--marque);opacity:.4}
.materiel__outil h3{margin:0 0 .3rem;color:var(--encre)}                 /* 15,81 */
.materiel__outil p{margin:0;color:var(--encre-douce);font-size:.97rem}   /* 6,98 */
.js .materiel__outil.reveal{transition-delay:calc(var(--i,0) * 90ms)}

@media (prefers-reduced-motion:reduce){
  .sig-luire{transform:skewX(-13deg);
    animation:sig-pose 3.8s ease .6s both}
  .poste{transition:background-color .25s ease}
  .poste__num::before,.poste__num::after{transform:none;
    transition:opacity .25s ease}
  .poste:hover .poste__num::before{opacity:1}
  .poste:hover .poste__num::after{opacity:1}
  #nav-links li:not(:last-child) a::after{transform:scaleX(1);opacity:0;
    transition:opacity .25s ease}
  #nav-links li:not(:last-child) a:hover::after,
  #nav-links li:not(:last-child) a:focus-visible::after{opacity:1}
}

.sur::before{content:"";display:inline-block;vertical-align:-.16em;
  width:.98rem;height:.98rem;margin-right:.55rem;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2'%3E%3Crect x='1.6' y='1.6' width='20.8' height='20.8' rx='3'/%3E%3Cpath d='M6.4 12.4l3.8 3.9 7.5-8.4' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2'%3E%3Crect x='1.6' y='1.6' width='20.8' height='20.8' rx='3'/%3E%3Cpath d='M6.4 12.4l3.8 3.9 7.5-8.4' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}

.cadre::after,
.savoir .cadre::after{border:0;border-color:transparent}

.cadre{position:relative;isolation:isolate}
.cadre::after{content:"";position:absolute;z-index:-1;pointer-events:none;
  inset:calc(clamp(6px, 1.9vw, 22px) * -1);
  border:0;border-radius:calc(var(--rayon, 14px) + 16px);
  background:radial-gradient(72% 68% at 50% 42%,
    color-mix(in oklab, var(--marque) 30%, transparent) 0%,
    color-mix(in oklab, var(--marque) 12%, transparent) 46%,
    transparent 74%);
  filter:blur(14px);opacity:.85}
.cadre img{border-radius:var(--rayon, 14px);
  box-shadow:0 26px 48px -28px rgba(0,0,0,.62), 0 6px 16px -10px rgba(0,0,0,.4)}

.a-completer{opacity:.5;font-style:italic;font-size:.92em;letter-spacing:.01em}

.contact__grille{grid-template-columns:minmax(0,1fr)}
.contact__carte{width:100%;max-width:58rem;margin-inline:auto}
.contact__fiches{display:grid;gap:clamp(1.4rem,3.5vw,2.6rem);align-items:start;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,19rem),1fr));
  margin-top:clamp(1.6rem,4vw,2.2rem)}
.contact__colonne{display:block}
.contact__fiches > .fiche,
.contact__colonne > .fiche{max-width:none}
.contact__fiches > .fiche{margin-top:0}
.contact__colonne > .fiche:first-child{margin-top:0}
.plaques + .fiche{margin-top:clamp(1.4rem,3.5vw,2rem)}
@media (min-width:62rem){
  .contact__grille{grid-template-columns:minmax(0,1fr)}
}

.plaques{display:grid;gap:.6rem;max-width:32rem;margin:0 auto;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,11rem),1fr))}
main .plaques a.plaque{display:flex;flex-direction:column;justify-content:center;gap:.15rem;
  min-height:58px;padding:.65rem 1.15rem;text-align:left;text-decoration:none;
  background:var(--carte);border:0;border-radius:var(--rayon);
  box-shadow:0 14px 30px -22px color-mix(in srgb,var(--encre) 52%,transparent),
             0 2px 5px -4px var(--souffle);
  transition:background-color .25s ease,box-shadow .25s ease}
main .plaques a.plaque:hover,main .plaques a.plaque:focus-visible{
  background:color-mix(in srgb,var(--fond-alt) 42%,var(--carte));
  box-shadow:0 20px 40px -24px color-mix(in srgb,var(--encre) 58%,transparent),
             0 2px 5px -4px var(--souffle)}
.plaque__quoi{font-family:var(--police-libelle);font-weight:500;font-size:.68rem;
  text-transform:uppercase;letter-spacing:.18em;color:var(--encre-douce)}  /* 8,32 sur --carte */
.plaque__num{font-family:var(--police-libelle);font-weight:500;font-size:1.2rem;
  font-variant-numeric:lining-nums tabular-nums;color:var(--marque)}       /* 6,89 sur --carte */

.fiche__note{margin:.9rem 0 0;font-size:.9rem;color:var(--encre-douce)}    /* 8,32 */

@media (max-width:600px){
  :root{--bande-photo:min(80vw,325px)}   /* 17.08 : 66vw ne faisait que 257 px a 390 */
  .hero{display:block;min-height:0;
    padding-block:var(--bande-photo) clamp(3.4rem,12vw,5rem)}
  .hero__photo,.hero__voile,.hero__trame,.signature--hero{
    top:0;bottom:auto;height:var(--bande-photo)}
  .hero__photo{object-position:center 50%}
  .hero__bande{margin-top:clamp(1.3rem,5.5vw,1.9rem)}
  .hero__verre{max-width:none}
}

@media (min-width:62rem){
  .nav > #nav-links{flex-basis:auto}
}

/* ⛔ Plus de vert écrit en dur : la barre suit --nuit, donc le thème (09.09.2026, « le bandeau en haut encore vert »). */
.entete{background-color:color-mix(in srgb,var(--nuit) 76%,transparent)}
.entete{margin-bottom:-66px}

@media (min-width:900px){
  .hero{align-items:center;padding-top:calc(clamp(5rem,13vw,8.5rem) + 66px)}
}

@media (max-width:600px){
  section#prestations.travaux{padding-top:40px}   /* haut 26→40 */
}

@media (max-width:600px){
  .tableau__aujourdhui.tableau__aujourdhui.tableau__aujourdhui{font-size:11.6px}
  .plaque__quoi.plaque__quoi.plaque__quoi{font-size:11.6px}
}

:target{scroll-margin-top:0}
html{scroll-padding-top:68px}

@media (max-width:600px){
  div.hero__verre{display:flex;flex-direction:column}
  div.hero__verre > *{order:4}
  div.hero__verre > p.hero__etiquette{order:1}
  div.hero__verre > h1.hero__titre{order:2}
  div.hero__verre > span.hero__accent{order:2}
  div.hero__verre > div.hero__actions{order:3;margin-top:12px;margin-bottom:28px}
}

/* 📞 LA PLAQUE DU NUMÉRO — 09.09.2026, sa remarque sur le site en ligne :
   « la barre blanche sur un fond blanc ». La plaque était en --carte, posée
   SUR la carte de contact, elle aussi en --carte : seule une ombre la
   séparait du fond. Elle prend la couleur du bouton du hero : c'est le
   même geste, appeler, il a la même couleur partout. Blanc sur #116048. */
main .plaques a.plaque{background:var(--marque);
  box-shadow:0 14px 30px -20px color-mix(in srgb,var(--marque) 70%,transparent)}
main .plaques a.plaque:hover,main .plaques a.plaque:focus-visible{background:var(--marque-fonce)}
main .plaques a.plaque .plaque__num{color:var(--carte)}
main .plaques a.plaque .plaque__quoi{color:var(--creme-doux)}

/* 📷 DEUX PHOTOS DANS « L'ÉQUIPE ET LE MATÉRIEL » — 09.09.2026. La cliente
   n'a pas de photos (entreprise de mai 2026) et nous laisse choisir des
   images libres de droit ; la section n'avait aucun cadre. Deux colonnes
   dès 48rem, comme le savoir-faire. */
.equipe__photos{display:grid;gap:clamp(1.2rem,3vw,2.2rem);margin:clamp(1.6rem,4vw,2.6rem) auto 0;max-width:58rem}
.equipe__photos img{aspect-ratio:4/3}
@media (min-width:48rem){.equipe__photos{grid-template-columns:repeat(2,minmax(0,1fr))}}
.equipe__photos + .materiel{margin-top:clamp(1.8rem,4vw,2.8rem)}

/* 🖱 PLUS DE CARTOUCHE AU SURVOL DES PRESTATIONS — 09.09.2026, sa remarque :
   « j'aime pas ces cartouches qui apparaissent en passant le curseur ». Le
   survol ne dessine plus rien : ni fond, ni icône qui se remplit. */
.poste:hover{background:transparent}
.poste:hover .poste__num::before,.poste:hover .poste__num::after{opacity:inherit}
.poste .poste__num::before,.poste .poste__num::after{transition:none}

/* 📐 LA SECTION CONTACT ALIGNÉE — 09.09.2026, sa remarque : « pas aligné
   entre la gauche et la droite ». La plaque du numéro flottait AU-DESSUS de
   la fiche Coordonnées, ce qui décalait son titre par rapport à « Horaires ».
   Elle vit maintenant DANS la fiche, sous le titre : les deux titres sont à
   la même hauteur, les deux colonnes ont la même largeur. */
.contact__fiches{align-items:stretch}
.fiche .plaques{max-width:none;margin:0 0 .9rem}
.fiche .plaques + .tableau{margin-top:0}
/* Un horaire ne se coupe jamais en deux (« 13:00– / 17:00 ») : s'il manque
   la place à côté du badge « aujourd'hui », c'est la ligne entière qui passe
   dessous, pas la moitié de l'heure. */
.tableau--horaires dd{white-space:normal}
.tableau--horaires dd span{white-space:nowrap}  /* une plage ne se coupe jamais ; si les deux ne tiennent pas, la seconde passe dessous */
/* Le badge « aujourd'hui » se pose SOUS le jour, pas à côté : à côté, il
   poussait l'horaire hors du cadre au téléphone (mesuré à 390). */
.tableau__ligne--aujourdhui dt{display:flex;flex-direction:column;align-items:flex-start;gap:.25rem}
.tableau__ligne--aujourdhui .tableau__aujourdhui{margin-left:0}

/* 📱 SES RÉSEAUX — 09.09.2026, les deux liens donnés par Paul (Instagram
   edusabri.nettoyage, page Facebook). Dans les coordonnées et au pied. */
/* « .pied p{margin:0} » gagnait sur cette marge (sa remarque : ronds collés au texte, 09.09). */
.pied p.pied__reseaux{margin:1.5rem 0 0;display:flex;justify-content:center;gap:.7rem}
.pied__reseaux a{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;
  border-radius:50%;border:1.5px solid var(--creme-doux);color:var(--creme)}
.pied__reseaux a:hover,.pied__reseaux a:focus-visible{border-color:var(--laiton);color:var(--laiton)}
.pied__reseaux svg{width:20px;height:20px}
.reseaux{display:flex;flex-wrap:wrap;gap:.8rem;margin:.8rem 0 1.2rem}  /* de l air avec la ligne E-mail dessous */
.bouton--reseau{flex:1 1 9rem;background:transparent;border:1.5px solid var(--marque);color:var(--marque);
  min-height:46px;padding:.55rem 1rem;text-transform:none;letter-spacing:.02em;font-size:.92rem}
.bouton--reseau svg{width:20px;height:20px;flex:none}
.bouton--reseau:hover,.bouton--reseau:focus-visible{background:var(--marque);color:var(--texte-bouton,#fff)}
/* 🧭 LE PANNEAU NE TOUCHE PLUS LA COURBE — 09.09.2026, sa capture à 2560 :
   la lame blanche du bas montait dans le coin bas droit du cartouche. Le
   hero réserve la hauteur de la lame SOUS le panneau, quelle que soit la
   largeur : le panneau reste entier, la courbe passe dessous. */
.hero{padding-bottom:calc(var(--arc-haut) + clamp(2rem,3.5vw,3.5rem))}

/* 🎨 LES COULEURS DE LA CLIENTE — 09.09.2026. Son logo et sa bannière sont
   bleu marine et or ; Paul a choisi la 4e des quatre versions montrées en
   local : fond crème chaud, sections presque noires, or vif sur les
   surtitres et le titre du hero, marine sur les boutons. Ce bloc vient
   APRÈS le thème vert d'origine et le remplace entièrement. */
:root{--encre:#111a2a;--encre-douce:#4a5468;--fond:#faf8f3;--fond-alt:#ece6d8;--filet:#d6cdb8;
  --marque:#1b365d;--marque-fonce:#122745;--nuit:#08111f;--creme:#f4efe4;--creme-doux:#b8b09c;
  --laiton:#e0b14f;--laiton-clair:#ecc772}

/* 🗨 LES DEUX PHOTOS DU SAVOIR-FAIRE ONT UNE LÉGENDE — 09.09.2026, sa
   remarque : « une section avec juste deux images ». Chaque photo dit le
   geste qu'elle montre. */
.savoir__bande figcaption{margin:.7rem .2rem 0;font-family:var(--police-libelle);font-size:.92rem;
  color:var(--creme-doux);text-align:center}

/* 📱 SES QUATRE REMARQUES SUR L'IPHONE — 09.09.2026, 20 h 42.
   1. « en haut c'est moche, y'a des courbes » : les traits clairs dessinés
      par-dessus la photo (signature et trame) partent, partout. Une photo
      ne porte aucun ornement.
   2. « le cadre d'en haut est de la même couleur que le fond » : au
      téléphone le panneau du hero vit SOUS la photo, sur le fond nuit ; il
      était nuit lui aussi. Il prend un bleu plus clair et un filet or.
   3. « pas des demi-cercles, des rectangles à bords arrondis » : les lignes
      des horaires et des coordonnées.
   4. « du texte dans les horaires qui dépasse » : l'horaire du jour, en
      police un peu plus petite au téléphone, tient dans sa ligne. */
.signature--hero,.hero__trame{display:none}
.tableau__ligne{border-radius:12px}
@media (max-width:47.99rem){
  .hero__verre{background:#15284a;border:1px solid rgba(224,177,79,.55)}
  .tableau--horaires dd{font-size:15px;letter-spacing:-.01em}
  .tableau--horaires .tableau__ligne{padding-inline:.75rem}
}

/* 📱 LE HERO AU TÉLÉPHONE, sa demande du 09.09 à 20 h 50 : « le cadre à
   cheval entre l'image et le fond bleu foncé, et que ce fond ne s'arrête
   pas en ligne droite mais en courbe, comme la courbe juste en dessous ».
   La photo se termine par la MÊME lame que le bas du hero (même tracé,
   --lame-aller), en bleu nuit ; le panneau remonte sur la photo. */
@media (max-width:600px){
  .hero::before{content:"";position:absolute;left:0;right:0;z-index:1;pointer-events:none;
    top:calc(var(--bande-photo) - 64px);height:64px;background:var(--nuit);  /* la lame monte à droite : elle dépasse du panneau de ce côté */
    -webkit-mask-image:var(--lame-aller);mask-image:var(--lame-aller);
    -webkit-mask-size:100% 100%;mask-size:100% 100%;
    -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
  .hero__bande{margin-top:calc(-1 * clamp(7rem,32vw,8.5rem))}   /* les deux coins du haut sur la photo, le droit largement */
}

/* ---- 10.09.2026 — les demandes de Sabrina (mail du matin) ----
   « un petit brillant sur le i de Sabri, comme sur l'image » : sur son
   visuel, le point du I majuscule est remplacé par une étoile dorée à
   quatre branches. Le nom est en capitales dans la barre et au pied, donc
   le I n'a pas de point : on pose l'étoile au-dessus. */
.brillant{position:relative;display:inline-block}
.brillant::before{content:"✦";position:absolute;left:50%;top:-.62em;
  transform:translateX(-50%);font-size:.58em;line-height:1;
  color:var(--laiton);text-shadow:0 0 6px color-mix(in srgb,var(--laiton) 55%,transparent);
  pointer-events:none}
.marque__nom .brillant::before{color:var(--barre-accent)}
/* Un deuxième bouton dans le hero, « Demander un devis » : elle veut qu'on
   puisse la contacter facilement pour un devis. Contour clair sur la photo. */
.bouton--contour{background:transparent;color:var(--creme);
  box-shadow:0 0 0 1.5px color-mix(in srgb,var(--creme) 70%,transparent) inset}
.bouton--contour:hover,.bouton--contour:focus-visible{background:color-mix(in srgb,var(--creme) 12%,transparent);
  box-shadow:0 0 0 1.5px var(--creme) inset}
.postes__note{margin:1.4rem 0 0;color:var(--encre-douce);font-size:.97rem;max-width:58ch}  /* 6,98 */
/* Sa phrase de fin, au pied, au-dessus du crédit. */
.pied p.pied__devise{margin:1.3rem auto 0;max-width:34ch;font-size:.95rem;line-height:1.5;
  color:var(--creme);text-align:center}                                     /* 15,00 */
.pied__etoile{color:var(--laiton);margin-left:.35em;font-size:.9em}

/* ---- 10.09.2026, 11 h 30 — ses remarques sur l'iPhone ----
   « le bandeau en haut change de couleur quand on va dans le menu » :
   mesuré, la barre est à 85 % de nuit avec un flou ; ouverte, elle
   s'agrandit sur la photo claire et passe de (27,37,50) à (66,72,82).
   Elle devient opaque, une seule couleur, quoi qu'il y ait derrière. */
.entete{background:var(--nuit);-webkit-backdrop-filter:none;backdrop-filter:none}

/* « aucune animation de déroulement du menu » : il passait de rien à tout.
   Il se déroule (hauteur + fondu), et les lignes arrivent l'une après
   l'autre. Fermé, il est aussi invisible pour le clavier (visibility). */
@media (max-width:47.99rem){
  .js #nav-links{display:flex;flex-direction:column;overflow:hidden;
    max-height:0;opacity:0;visibility:hidden;
    margin-top:0;padding-top:0;padding-bottom:0;border-top-color:transparent;
    transition:max-height .42s cubic-bezier(.2,.75,.25,1),opacity .28s ease,
      padding .42s ease,margin .42s ease,border-color .3s ease,visibility 0s linear .42s}
  .js #nav-links.is-open{max-height:26rem;opacity:1;visibility:visible;
    margin-top:.35rem;padding-top:.5rem;padding-bottom:.6rem;border-top-color:var(--barre-filet);
    transition:max-height .42s cubic-bezier(.2,.75,.25,1),opacity .25s ease .04s,
      padding .42s ease,margin .42s ease,border-color .3s ease,visibility 0s}
  .js #nav-links li{opacity:0;transform:translateY(-7px);transition:opacity .3s ease,transform .3s ease}
  .js #nav-links.is-open li{opacity:1;transform:none}
  .js #nav-links.is-open li:nth-child(1){transition-delay:.06s}
  .js #nav-links.is-open li:nth-child(2){transition-delay:.11s}
  .js #nav-links.is-open li:nth-child(3){transition-delay:.16s}
  .js #nav-links.is-open li:nth-child(4){transition-delay:.21s}
  .js #nav-links.is-open li:nth-child(5){transition-delay:.26s}

  /* « le cadre en haut, le bleu plus clair, ça rend pas très bien » : plus
     de cadre au téléphone. La photo se termine par sa lame, le texte est
     posé à nu sur le fond nuit, sans bord, sans reflet. */
  .hero__verre{background:var(--nuit);border:0;border-radius:0;box-shadow:none;
    padding-inline:0;padding-top:1.4rem;animation:none}
  .hero__verre::before{display:none}
  .hero__bande{margin-top:0}
}
@media (prefers-reduced-motion:reduce) and (max-width:47.99rem){
  .js #nav-links li{transform:none}
}

/* « les sortes de pavé de texte, les trucs à point, il faut enlever ça » :
   les quatre engagements à puces sont sortis du HTML ; les prestations
   deviennent six cartes courtes, sans pictogramme, deux par ligne dès
   qu'il y a la place. */
.postes{display:grid;gap:.75rem}
/* deux par ligne seulement quand le panneau est seul sur sa ligne (tablette) :
   à côté de la photo, à 1280, les cartes faisaient 250 px et coupaient les titres. */
@media (min-width:30rem) and (max-width:47.99rem){.postes{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:48rem){.poste{padding:.9rem 1.1rem .95rem}}
.poste,.poste:first-child{border-top:0;padding:1rem 1.05rem 1.05rem;
  background:var(--fond);border:1px solid var(--filet);border-radius:14px;
  column-gap:.7rem}
.poste__num,.poste .poste__num{padding-left:0;padding-top:.32rem}
.poste .poste__num::before,.poste .poste__num::after{display:none}
.poste p{font-size:.93rem;line-height:1.5}
.poste:hover{background:var(--fond)}

/* ---- 10.09.2026, 12 h 45 — « ce site fait tellement pro, inspire-toi »
   (valais-peinture.ch). Ce qu'on reprend : la structure. Trois arguments à
   pictogramme à droite du titre, le numéro dans la barre, les sections en
   deux colonnes (titre à gauche, texte à droite), quatre étapes numérotées.
   Ce qu'on garde : marine et or, les polices, les photos. */
/* la barre : le numéro en texte or avant le bouton (desktop seulement) */
.nav__tel a{font-family:var(--police-libelle);font-weight:500;font-size:.92rem;letter-spacing:.06em;
  color:var(--barre-accent);white-space:nowrap}                              /* 5,25 */
@media (max-width:61.99rem){.nav__tel{display:none}}

/* le hero à 1280 : panneau à gauche, arguments à droite */
.hero__atouts{list-style:none;margin:1.4rem 0 0;padding:0;display:grid;gap:.7rem}
.atout{display:flex;align-items:center;gap:.9rem;color:var(--creme);font-size:1rem;line-height:1.35}
.atout__ico{flex:0 0 auto;width:42px;height:42px;border-radius:10px;display:grid;place-items:center;
  background:var(--marque);color:var(--laiton-clair);box-shadow:0 10px 24px -14px rgba(0,0,0,.8)}
.atout__ico svg{width:22px;height:22px}
.atout--note a{display:inline-flex;align-items:center;gap:.7rem;color:var(--creme);text-decoration:none;
  padding:.55rem .9rem;border-radius:12px;background:color-mix(in srgb,var(--creme) 8%,transparent);
  border:1px solid color-mix(in srgb,var(--creme) 14%,transparent)}
.atout--note a:hover,.atout--note a:focus-visible{border-color:var(--laiton)}
.atout__etoiles{color:var(--laiton);letter-spacing:.08em;font-size:.95rem}
.atout--note strong{font-weight:600}
@media (min-width:62rem){
  .hero__bande{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
    gap:clamp(2rem,4vw,4rem);align-items:end}
  .hero__atouts{margin:0 0 .6rem;gap:1rem}
  .atout{font-size:1.06rem}
  .atout__ico{width:48px;height:48px}
  .atout--note{margin-top:.4rem}
}
.js .atout.reveal{transition-delay:calc(.25s + var(--i,0) * 90ms)}

/* « qui nous sommes » : titre à gauche, texte à droite */
.equipe__tete{display:grid;gap:1.2rem}
.equipe .entete-section{margin-bottom:0}
.equipe__phrase,.equipe .equipe__phrase{margin:0;text-align:left;max-width:none;
  font-size:1.05rem;line-height:1.65}
@media (min-width:62rem){
  .equipe__tete{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(2rem,5vw,5rem);align-items:start}
  .equipe__phrase{padding-top:.6rem}
}

/* comment ça se passe : quatre étapes */
.etapes{padding-block:clamp(2.6rem,7vw,4.6rem) clamp(3rem,8vw,5rem);background:var(--fond)}
.etapes__tete{display:grid;gap:1.2rem;margin-bottom:clamp(1.6rem,4vw,2.4rem)}
.etapes .entete-section{margin-bottom:0}
.etapes__phrase{margin:0;color:var(--encre-douce);font-size:1.05rem;line-height:1.65}   /* 6,98 */
@media (min-width:62rem){
  .etapes__tete{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(2rem,5vw,5rem);align-items:start}
  .etapes__phrase{padding-top:.6rem}
}
.etapes__grille{list-style:none;margin:0;padding:0;display:grid;gap:.9rem}
@media (min-width:36rem){.etapes__grille{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:62rem){.etapes__grille{grid-template-columns:repeat(4,minmax(0,1fr))}}
.etape{background:var(--carte);border:1px solid var(--filet);border-radius:14px;
  padding:1.3rem 1.25rem 1.35rem;box-shadow:0 1px 0 var(--liseret) inset,0 26px 50px -40px var(--ombre-panneau)}
.etape__num{display:block;font-family:var(--police-titre);font-size:2.1rem;line-height:1;
  color:var(--marque);margin-bottom:.9rem}                                    /* 8,3 */
.etape h3{margin:0 0 .35rem;font-size:1.08rem;color:var(--encre)}
.etape p{margin:0;color:var(--encre-douce);font-size:.95rem;line-height:1.5}
.js .etape.reveal{transition-delay:calc(var(--i,0) * 90ms)}
/* au téléphone, la ligne des prestations est déjà dans l'étiquette du haut :
   on ne la répète pas, le hero était trop long (1114 px mesurés). */
@media (max-width:61.99rem){.atout:nth-child(2){display:none}}
/* la barre à 1280 : avec le numéro et le bouton devis, le nom se cassait sur
   quatre lignes. Il reste sur une ligne, le sous-titre aussi, les liens se
   resserrent un peu. */
@media (min-width:62rem){
  .marque__nom,.marque__sous{white-space:nowrap}
  .nav > .marque{flex:0 0 auto;min-width:max-content}   /* « .nav > .marque{min-width:0;flex:1 1 0} » la comprimait à 130 px : mesuré, elle chevauchait « Prestations » */
  #nav-links{gap:clamp(.7rem,1.4vw,1.4rem)}
  .atout{text-shadow:0 1px 10px rgba(0,0,0,.55)}
  .atout--note a{text-shadow:none}
}
/* mesuré à 1280 : bande de 1036 px, marque 248 + menu 891 = passage à la
   ligne. Les liens se resserrent (police .84rem, gaps courts, bouton moins
   large) et la barre ne replie plus. */
@media (min-width:62rem){
  .nav{flex-wrap:nowrap;gap:1.2rem}
  .nav > #nav-links{flex:1 1 auto;min-width:0;justify-content:flex-end;gap:.55rem}
  #nav-links a{font-size:.84rem;letter-spacing:.08em;padding:.5rem .35rem;white-space:nowrap}
  .nav__tel a{font-size:.86rem;padding:.5rem .35rem}
  #nav-links a.bouton{padding:.62rem 1.05rem;min-height:42px;font-size:.82rem;margin-left:.3rem}
}

/* ---- 10.09.2026, 23 h 30 — sa capture iPhone ----
   « Texte blanc sur blanc, et deux courbes au-dessus de la coupure droite. »
   Le bas du bandeau (54 px) était plus court que la lame claire (96 px) :
   l'avis Google passait dessus. Et sur la petite bande photo du téléphone,
   les deux arcs de la raclette finissaient sur une coupure horizontale.
   Même correctif que dans le squelette nettoyage. */
@media (max-width:600px){
  .hero{padding-bottom:calc(var(--arc-haut) + .9rem)}
  .signature--hero{display:none}
}

/* ---- 11.09.2026 — les questions qu'on nous pose (référencement) ----
   Cinq questions en accordéon, sur le fond clair, dans la matière du site :
   carte à filet, « + » qui pivote. Déclarées aussi en FAQPage. */
.questions{padding-block:clamp(2.6rem,7vw,4.6rem) clamp(3rem,8vw,5rem);background:var(--fond-alt)}
.questions .entete-section{margin-bottom:clamp(1.4rem,3.5vw,2.2rem)}
.questions__liste{display:grid;gap:.7rem;max-width:52rem}
.question{background:var(--carte);border:1px solid var(--filet);border-radius:14px;
  box-shadow:0 1px 0 var(--liseret) inset,0 26px 50px -40px var(--ombre-panneau)}
.question__q{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1rem 1.1rem;font-family:var(--police-titre);font-size:1.08rem;color:var(--encre)}   /* 15,81 */
.question__q::-webkit-details-marker{display:none}
.question__q::after{content:"+";flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  background:color-mix(in srgb,var(--marque) 12%,transparent);color:var(--marque);
  font-family:var(--police-libelle);font-size:1.3rem;line-height:1;
  transition:transform .35s cubic-bezier(.2,.7,.2,1),background-color .25s ease,color .25s ease}
.question[open] .question__q::after{transform:rotate(45deg);background:var(--marque);color:#fff}
.question__a{margin:0;padding:0 1.1rem 1.1rem;color:var(--encre-douce);font-size:.97rem;line-height:1.6;max-width:62ch}  /* 6,98 */
.question[open] .question__a{animation:question-ouvre .35s ease both}
@keyframes question-ouvre{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.question[open] .question__a{animation:none}}

/* ---- 11.09.2026 — « Un travail soigné » s'en va ; la bande de nuit porte
   la FIN DE BAIL (ce qu'on reprend avant l'état des lieux), puis les
   LOCALITÉS. Et les questions repassent sur le fond clair : sur le beige,
   l'arc qui ouvre le contact laissait un bord droit (sa capture, 07 h 24). */
.questions{background:var(--fond)}

.finbail__tete{display:grid;gap:1.2rem;margin-bottom:clamp(1.6rem,4vw,2.4rem)}
.finbail .entete-section{margin-bottom:0}
.finbail__phrase{margin:0;color:var(--creme-doux);font-size:1.05rem;line-height:1.65;max-width:58ch}   /* 8,90 */
.finbail__grille{list-style:none;margin:0;padding:0;display:grid;gap:.8rem}
.finbail__point{position:relative;padding:1rem 1.1rem 1.05rem 2.9rem;border-radius:14px;
  background:color-mix(in srgb,var(--creme) 6%,transparent);border:1px solid color-mix(in srgb,var(--creme) 14%,transparent)}
.finbail__coche{position:absolute;left:1.05rem;top:1.1rem;width:20px;height:20px;border-radius:50%;
  background:var(--laiton) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.2 10.3 8.4 13.4 14.8 6.8' fill='none' stroke='%230d1a24' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/20px no-repeat}
.finbail__point h3{margin:0 0 .3rem;font-size:1.05rem;color:var(--creme)}                /* 15,00 */
.finbail__point p{margin:0;color:var(--creme-doux);font-size:.93rem;line-height:1.5}    /* 8,90 */
.js .finbail__point.reveal{transition-delay:calc(var(--i,0) * 70ms)}
@media (min-width:36rem){.finbail__grille{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:62rem){
  .finbail__tete{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(2rem,5vw,5rem);align-items:start}
  .finbail__phrase{padding-top:.6rem}
  .finbail__grille{grid-template-columns:repeat(4,minmax(0,1fr))}
}

.zones{padding-block:clamp(2.6rem,7vw,4.6rem) clamp(2.6rem,7vw,4.6rem);background:var(--fond-alt)}
.zones__tete{display:grid;gap:1.2rem}
.zones .entete-section{margin-bottom:0}
.zones__phrase{margin:0 0 1rem;color:var(--encre-douce);font-size:1.05rem;line-height:1.65}   /* 5,49 sur fond-alt */
.zones__liste{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.zones__liste li{padding:.42rem .85rem;border-radius:999px;background:var(--carte);border:1px solid var(--filet);
  color:var(--encre);font-size:.92rem;font-family:var(--police-libelle)}                     /* 15,81 */
@media (min-width:62rem){
  .zones__tete{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(2rem,5vw,5rem);align-items:start}
  .zones__corps{padding-top:.6rem}
}

/* ---- 11.09.2026 — LA CARTE, à la place des pastilles (« comme sur
   valais-peinture.ch : une petite carte avec les points, et ça écrit le
   nom »). Le canton du Jura en grand, contours réels (geoBoundaries),
   treize localités à leurs vraies coordonnées ; les principales écrites,
   les autres au survol ou au toucher. La Suisse en médaillon, le Jura
   en couleur dedans. Tout est dans le SVG : rien à charger. */
.zones__carte{margin:1.1rem 0 0;padding:.5rem .5rem .7rem;background:var(--carte);border:1px solid var(--filet);border-radius:16px;
  box-shadow:0 1px 0 var(--liseret) inset,0 26px 50px -40px var(--ombre-panneau)}
.carte{display:block;width:100%;height:auto}
.carte__jura{fill:color-mix(in srgb,var(--marque) 11%,var(--carte));stroke:var(--marque);stroke-width:1.4;stroke-linejoin:round}
.carte__suisse{fill:color-mix(in srgb,var(--encre) 7%,var(--carte));stroke:color-mix(in srgb,var(--encre) 28%,transparent);stroke-width:1.2;stroke-linejoin:round}
.carte__jura-s{fill:var(--marque)}
.carte__pt{cursor:pointer;outline:none}
.carte__halo{fill:var(--laiton);opacity:0;transition:opacity .25s ease}
.carte__point{fill:var(--laiton);stroke:var(--nuit);stroke-width:1.6;transition:r .2s ease}
.carte__pt text{font-family:var(--police-libelle);font-size:13.5px;font-weight:500;fill:var(--encre);
  paint-order:stroke;stroke:var(--carte);stroke-width:4px;stroke-linejoin:round;
  opacity:0;transition:opacity .2s ease;pointer-events:none}
.carte__pt--fixe text,.carte__pt:hover text,.carte__pt:focus-visible text,.carte__pt.est-ouvert text{opacity:1}
.carte__pt:hover .carte__halo,.carte__pt:focus-visible .carte__halo,.carte__pt.est-ouvert .carte__halo{opacity:.28}
.carte__pt:hover .carte__point,.carte__pt.est-ouvert .carte__point{r:6.5}
.carte__legende{margin:.55rem .4rem 0;font-size:.82rem;color:var(--encre-douce)}   /* 6,98 */
@media (max-width:600px){
  .carte__pt text{font-size:19px;stroke-width:5px}
  .carte__point{r:7}
  .carte__halo{r:15}
}
@media (prefers-reduced-motion:reduce){.carte__halo,.carte__point,.carte__pt text{transition:none}}
/* les points respirent : un halo léger en permanence, plus franc au survol */
.carte__halo{opacity:.16;transform-origin:center;transform-box:fill-box;animation:carte-respire 2.8s ease-in-out infinite}
.carte__point{r:6}
@keyframes carte-respire{0%,100%{transform:scale(.85)}50%{transform:scale(1.15)}}
@media (prefers-reduced-motion:reduce){.carte__halo{animation:none}}

/* ---- 11.09.2026, 08 h 40 — la section des zones REFAITE « comme
   valais-peinture.ch » : bande de nuit, texte à gauche, carte grise à droite
   sans cadre ni légende, cinq épingles qui donnent leur nom au survol. Les
   règles de la première version (cadre, pastilles, halos, médaillon) sont
   écrasées ici. ---- */
.zones{background:var(--nuit);color:var(--creme);padding-block:clamp(3rem,8vw,5.5rem)}
.zones .sur{color:var(--laiton)}                       /* 7,04 */
.zones h2{color:var(--creme)}                          /* 15,00 */
.zones .assise{background:linear-gradient(90deg,color-mix(in srgb,var(--laiton) 28%,transparent) 0 calc(50% - 26px),var(--laiton) calc(50% - 26px) calc(50% + 26px),color-mix(in srgb,var(--laiton) 28%,transparent) calc(50% + 26px) 100%)}
.zones__grille{display:grid;gap:clamp(1.6rem,4vw,3rem);align-items:center}
.zones .entete-section{margin-bottom:1.2rem}
.zones__phrase{margin:0;color:var(--creme-doux);font-size:1.05rem;line-height:1.7;max-width:56ch}   /* 8,90 */
.zones__phrase strong{color:var(--creme);font-weight:500}
.zones__carte{margin:0;padding:0;background:none;border:0;box-shadow:none;border-radius:0}
.carte{display:block;width:100%;height:auto;overflow:visible}
.carte__jura{fill:color-mix(in srgb,var(--creme) 40%,var(--nuit));stroke:none}
.carte__epingle{cursor:pointer;outline:none}
.carte__pin{fill:#fff;transform-origin:0 0;transform-box:view-box;transition:transform .25s cubic-bezier(.2,.7,.2,1)}
.carte__oeil{fill:var(--nuit)}
.carte__epingle:hover .carte__pin,.carte__epingle:focus-visible .carte__pin,.carte__epingle.est-ouvert .carte__pin{transform:scale(1.18)}
.carte__bulle{opacity:0;transform:translateY(6px);transition:opacity .22s ease,transform .22s ease;pointer-events:none}
.carte__bulle rect{fill:#fff}
.carte__bulle text{font-family:var(--police-libelle);font-size:13px;font-weight:500;fill:var(--nuit)}
.carte__epingle:hover .carte__bulle,.carte__epingle:focus-visible .carte__bulle,.carte__epingle.est-ouvert .carte__bulle{opacity:1;transform:none}
@media (min-width:62rem){
  .zones__grille{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(2.5rem,6vw,6rem)}
}
@media (max-width:61.99rem){
  .zones__carte{order:-1;max-width:34rem;margin-inline:auto;width:100%}
}
/* téléphone : la carte fait 335 px, l épingle et sa bulle grossissent d un bloc */
.carte__corps{transform-origin:0 0;transform-box:view-box}
@media (max-width:600px){.carte__corps{transform:scale(1.55)}}
@media (prefers-reduced-motion:reduce){.carte__pin,.carte__bulle{transition:none}}