@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,transform .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 */
  transform:translateY(-2px);
  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);
  transform:translateY(-2px)}
.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;
  background:repeating-linear-gradient(90deg,
    rgba(255,255,255,.11) 0 1px,transparent 1px 72px);
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 34%,#000 72%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0%,#000 34%,#000 72%,transparent 100%)}
.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,transform .25s ease}
.poste:hover .poste__num::before{opacity:1;transform:scale(1.4)}
.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;
  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);
  transition:opacity .35s ease}
.cadre--gauche::after{inset:-12px}
.cadre:hover::after{opacity:.9}

.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;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% 85% at 10% 0%,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}
.savoir .cadre:hover::after{opacity:.95}
.savoir .cadre img{transition:transform .35s ease,box-shadow .35s ease}
.savoir .cadre:hover img{transform:translateY(-5px);
  box-shadow:0 34px 60px -28px color-mix(in srgb,var(--nuit) 88%,transparent)}
.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:1px solid var(--filet)}
.equipe__photo img{width:100%;aspect-ratio:3/2;max-height:32rem;object-fit:cover;
  border-radius:0}
@media (min-width:48rem){.equipe__photo img{aspect-ratio:21/9}}

.contact{padding-block:clamp(3.5rem,9vw,6rem);
  background:radial-gradient(85% 70% at 80% 0%,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}
  .savoir .cadre:hover img{transform:none}
  .bouton{transition:background-color .25s ease,box-shadow .25s ease}
  .bouton--plein:hover,.bouton--plein:focus-visible,
  .bouton--wa:hover,.bouton--wa:focus-visible{transform:none}
  .poste:hover .poste__num::before{transform:none;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}
}

.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}

/* ═══ LA PALETTE VIENT DU LOGO — 02.09.2026 ═════════════════════
   Relevée sur le fichier qu'il nous a envoyé, pas choisie :
     #DF1B22  le rouge des étoiles et de « Valais »
     #F8B034  l'or de « Peinture »
     #A9A9A9  le gris de la maison et du « Sàrl »
     #343331  le noir du rouleau
   Le rouge du logo donne 4,86 contre du texte blanc — ça passe, mais
   c'est trop juste pour un bouton qu'on lit toute la journée. On le
   descend d'un cran : #C41720 mesure 6,02, et l'œil y lit le même
   rouge. Le rouge exact du logo reste sur les aplats décoratifs, où
   rien ne se lit par-dessus. */
:root{
  --encre:#26231f;              /* un noir chaud, pas un gris bleu */
  --encre-douce:#5c554d;        /* 7,34 sur blanc · 6,07 sur --fond-alt */
  --fond:#fbfaf8;
  --fond-alt:#ede9e4;           /* le gris du logo, très éclairci */
  --carte:#ffffff;
  --marque:#c41720;             /* 6,02 en blanc dessus */
  --marque-fonce:#a11219;       /* survol — 8,03 */
  --filet:#dcd6ce;
  --nuit:#2a2825;               /* le noir du rouleau, réchauffé */
  --creme:#f6efe9;              /* 12,91 sur --nuit */
  --creme-doux:#c9c2bb;         /* 8,34 sur --nuit */
  --laiton:#f8b034;             /* l'or, tel quel — 7,88 sur --nuit */
  --laiton-clair:#fbc96a;
  --teinte-1:#c41720;
  --teinte-2:#f8b034;
  --teinte-3:#a9a9a9;
  --teinte-4:#343331;
  --teinte-5:#df1b22;

  /* ⚠ LA BARRE DU HAUT PASSE EN CLAIR, et ce n'est pas un goût.
     Mesuré en posant le logo détouré sur les deux fonds : sur le
     foncé, le manche noir du rouleau se noie et le « Sàrl » gris
     disparaît. Un logo qu'on doit deviner ne sert à rien. */
  --barre:#ffffff;                       /* blanc : c'est le fond du logo */
  --barre-filet:color-mix(in srgb,var(--encre) 14%,transparent);
  --barre-texte:var(--encre);            /* 15,64 sur blanc */
  --barre-texte-doux:var(--encre-douce); /* 7,34 sur blanc */
  --barre-accent:var(--marque);          /* 6,02 sur blanc */
  --police-titre:'PoliceTitre',"Avenir Next",Avenir,"Segoe UI",system-ui,sans-serif;
  --police-libelle:'PoliceLibelle',"Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
}

:root{
  --rayon:0;                     /* les boutons gardent leur pilule : --rayon-bouton intact */
  --assise:10px;                 /* l'aplat qui coiffe les panneaux, épais comme une passe */
  --hauteur-bandeau:86svh;       /* le mur a besoin de hauteur */

  --pnt-t1:var(--teinte-1,color-mix(in oklab,var(--marque) 18%,transparent));
  --pnt-t2:var(--teinte-2,color-mix(in oklab,var(--marque) 38%,transparent));
  --pnt-t3:var(--teinte-3,color-mix(in oklab,var(--marque) 60%,transparent));
  --pnt-t4:var(--teinte-4,color-mix(in oklab,var(--marque) 80%,transparent));
  --pnt-t5:var(--teinte-5,var(--marque));

  --pnt-v1:color-mix(in oklab,var(--pnt-t1) 22%,transparent);
  --pnt-v2:color-mix(in oklab,var(--pnt-t2) 22%,transparent);
  --pnt-v3:color-mix(in oklab,var(--pnt-t3) 22%,transparent);
  --pnt-v4:color-mix(in oklab,var(--pnt-t4) 22%,transparent);
  --pnt-v5:color-mix(in oklab,var(--pnt-t5) 22%,transparent);
  --pnt-o1:color-mix(in oklab,var(--laiton) 22%,transparent);
  --pnt-o2:color-mix(in oklab,var(--laiton) 45%,transparent);
  --pnt-o3:color-mix(in oklab,var(--laiton) 68%,transparent);
  --pnt-o4:color-mix(in oklab,var(--laiton) 86%,transparent);
  --pnt-o5:var(--laiton);

  --pnt-ruban:color-mix(in oklab,var(--laiton) 44%,var(--carte));
  --pnt-ruban-fonce:color-mix(in oklab,var(--laiton) 66%,var(--carte));

  --pnt-bande:clamp(28px,4.4vw,68px);    /* largeur du passage de rouleau du bandeau */
  --pnt-aplat:clamp(96px,13vw,140px);    /* hauteur de l'aplat au pied du bandeau */
}

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

.hero{padding-block:clamp(3rem,8vw,4.5rem) calc(var(--pnt-aplat) - clamp(6px,1.2vw,16px))}

@media (max-width:74rem){
  .hero__bande{padding-left:calc(var(--pnt-bande) + clamp(12px,2.4vw,28px))}
}

.pnt-passe{position:absolute;top:0;display:block;
  background:color-mix(in srgb,var(--marque) 92%,transparent);
  transform-origin:top;
  animation:pnt-descend .95s cubic-bezier(.2,.75,.25,1) both}
.pnt-passe--a{left:0;width:var(--pnt-bande);height:64%}
.pnt-passe--b{left:calc(var(--pnt-bande) * .62);width:calc(var(--pnt-bande) * .55);
  height:41%;background:color-mix(in srgb,var(--marque) 58%,transparent);
  animation-delay:.12s}
.pnt-passe::after{content:"";position:absolute;left:0;right:0;bottom:-13px;height:15px;
  background:
    repeating-linear-gradient(90deg,var(--marque) 0 2px,transparent 2px 7px),
    repeating-linear-gradient(90deg,var(--marque) 0 1px,transparent 1px 13px);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0%,transparent 100%)}

.pnt-coulure{position:absolute;display:block;background:var(--marque);
  transform-origin:top;
  animation:pnt-couler 1.3s cubic-bezier(.35,.8,.3,1) .5s both}
.pnt-coulure::after{content:"";position:absolute;left:50%;bottom:0;
  width:calc(100% + 3px);aspect-ratio:1;border-radius:50%;
  background:var(--marque);transform:translate(-50%,40%)}
.pnt-coulure--a{left:calc(var(--pnt-bande) * .20);top:64%;width:4px;height:clamp(38px,6vw,74px)}
.pnt-coulure--b{left:calc(var(--pnt-bande) * .64);top:41%;width:3px;height:clamp(22px,3.6vw,46px);
  animation-delay:.66s}
.pnt-coulure--c{left:calc(var(--pnt-bande) * .78);top:64%;width:5px;height:clamp(52px,8.4vw,98px);
  animation-delay:.58s}

.pnt-ruban{position:absolute;display:block;
  top:clamp(38px,9%,104px);right:-6%;width:44%;height:clamp(13px,1.7vw,21px);
  background:color-mix(in oklab,var(--pnt-ruban) 58%,transparent);
  border-top:1px solid color-mix(in oklab,var(--creme) 26%,transparent);
  border-bottom:1px solid color-mix(in oklab,var(--nuit) 22%,transparent);
  transform:rotate(-3.4deg);
  animation:pnt-paraitre .8s ease .35s both}

.pnt-aplat{position:absolute;left:0;right:0;bottom:0;display:block;
  height:var(--pnt-aplat);background:var(--marque);transform-origin:bottom;
  animation:pnt-descend .9s cubic-bezier(.2,.75,.25,1) .1s both}
.pnt-aplat::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:color-mix(in oklab,var(--creme) 26%,transparent)}
.pnt-reprise{position:absolute;display:block;bottom:var(--pnt-aplat);background:var(--marque);
  animation:pnt-paraitre .7s ease .55s both}
.pnt-reprise--a{left:70%;width:clamp(58px,9vw,128px);height:clamp(9px,1.2vw,16px)}
.pnt-reprise--b{left:89%;width:clamp(32px,5vw,70px);height:clamp(6px,.9vw,11px);
  background:color-mix(in srgb,var(--marque) 76%,transparent);animation-delay:.68s}

.hero__trame{
  background:repeating-linear-gradient(180deg,
    color-mix(in oklab,var(--creme) 10%,transparent) 0 2px,transparent 2px 29px);
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 22%,#000 66%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0%,#000 22%,#000 66%,transparent 100%)}

.hero__verre{border-radius:0;
  border:1px solid color-mix(in oklab,var(--creme) 16%,transparent);
  border-left:1px solid color-mix(in oklab,var(--creme) 16%,transparent);
  border-bottom:var(--assise) solid var(--marque)}

@keyframes pnt-descend{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes pnt-couler{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes pnt-paraitre{from{opacity:0}to{opacity:1}}

.signature--milieu{display:block;width:100%;overflow:hidden;
  background:linear-gradient(180deg,var(--fond) 0 58%,var(--fond-alt) 58% 100%)}
.pnt-nuancier{display:flex;align-items:flex-start;gap:clamp(3px,.55vw,7px);
  width:100%;height:clamp(118px,15vw,180px)}
.pnt-carte{flex:1 1 0;min-width:0;height:var(--h,52%);display:block}

.pnt-carte:nth-child(1) {--h:44%; background:color-mix(in oklab,var(--pnt-t1) 24%,var(--carte))}
.pnt-carte:nth-child(2) {--h:54%; background:color-mix(in oklab,var(--pnt-t1) 52%,var(--carte))}
.pnt-carte:nth-child(3) {--h:47%; background:var(--pnt-t1)}
.pnt-carte:nth-child(4) {--h:60%; background:color-mix(in oklab,var(--pnt-t2) 24%,var(--carte))}
.pnt-carte:nth-child(5) {--h:50%; background:color-mix(in oklab,var(--pnt-t2) 52%,var(--carte))}
.pnt-carte:nth-child(6) {--h:100%;background:var(--pnt-t2)}
.pnt-carte:nth-child(7) {--h:57%; background:color-mix(in oklab,var(--pnt-t3) 24%,var(--carte))}
.pnt-carte:nth-child(8) {--h:45%; background:color-mix(in oklab,var(--pnt-t3) 52%,var(--carte))}
.pnt-carte:nth-child(9) {--h:63%; background:var(--pnt-t3)}
.pnt-carte:nth-child(10){--h:51%; background:color-mix(in oklab,var(--pnt-t4) 24%,var(--carte))}
.pnt-carte:nth-child(11){--h:43%; background:color-mix(in oklab,var(--pnt-t4) 52%,var(--carte))}
.pnt-carte:nth-child(12){--h:56%; background:var(--pnt-t4)}
.pnt-carte:nth-child(13){--h:48%; background:color-mix(in oklab,var(--pnt-t5) 24%,var(--carte))}
.pnt-carte:nth-child(14){--h:100%;background:color-mix(in oklab,var(--pnt-t5) 52%,var(--carte))}
.pnt-carte:nth-child(15){--h:46%; background:var(--pnt-t5)}
.pnt-carte:nth-child(16){--h:58%; background:color-mix(in oklab,var(--pnt-t1) 78%,var(--carte))}

.signature--contact{display:block;width:100%;overflow:hidden;position:relative;
  --pnt-y:clamp(24px,3.4vw,42px);
  --pnt-h:clamp(44px,5.6vw,66px);
  height:clamp(140px,17.5vw,200px);
  background:linear-gradient(180deg,var(--fond) 0 56%,var(--fond-alt) 56% 100%)}
.pnt-passage{position:absolute;inset:0}
.pnt-passage::before{content:"";position:absolute;left:21%;width:33%;
  top:calc(var(--pnt-y) - 9px);height:calc(var(--pnt-h) + 9px);
  background:color-mix(in oklab,var(--marque) 80%,var(--nuit))}

.pnt-passage__bande{position:absolute;left:0;right:0;display:block;
  top:var(--pnt-y);height:var(--pnt-h);
  background:
    repeating-linear-gradient(90deg,
      color-mix(in oklab,var(--creme) 16%,transparent) 0 1px,transparent 1px 11px),
    var(--marque)}
.pnt-passage__bande::before,.pnt-passage__bande::after{content:"";position:absolute;
  left:0;right:0;height:7px;
  background:
    repeating-linear-gradient(90deg,var(--marque) 0 3px,transparent 3px 8px),
    repeating-linear-gradient(90deg,
      color-mix(in srgb,var(--marque) 62%,transparent) 0 2px,transparent 2px 5px),
    repeating-linear-gradient(90deg,
      color-mix(in srgb,var(--marque) 40%,transparent) 0 1px,transparent 1px 14px)}
.pnt-passage__bande::before{top:-5px;
  -webkit-mask-image:linear-gradient(0deg,#000 0%,transparent 100%);
  mask-image:linear-gradient(0deg,#000 0%,transparent 100%)}
.pnt-passage__bande::after{bottom:-5px;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0%,transparent 100%)}

.pnt-goutte{position:absolute;display:block;background:var(--marque);
  top:calc(var(--pnt-y) + var(--pnt-h) - 2px)}
.pnt-goutte::after{content:"";position:absolute;left:50%;bottom:0;
  width:calc(100% + 3px);aspect-ratio:1;border-radius:50%;
  background:var(--marque);transform:translate(-50%,40%)}
.pnt-goutte--a{left:13%;width:5px;height:clamp(30px,4.4vw,56px)}
.pnt-goutte--b{left:37%;width:3px;height:clamp(18px,2.6vw,32px)}
.pnt-goutte--c{left:68%;width:7px;height:clamp(46px,7vw,86px)}
.pnt-goutte--d{left:88%;width:3px;height:clamp(24px,3.4vw,42px)}

.assise{height:12px;width:min(184px,100%);
  background:linear-gradient(90deg,
    var(--pnt-t1) 0 32px,transparent 32px 38px,
    var(--pnt-t2) 38px 70px,transparent 70px 76px,
    var(--pnt-t3) 76px 108px,transparent 108px 114px,
    var(--pnt-t4) 114px 146px,transparent 146px 152px,
    var(--pnt-t5) 152px 184px,transparent 184px 100%)}
.entete-section--centre .assise{margin-inline:auto;transform-origin:center;
  background:linear-gradient(90deg,
    var(--pnt-t1) 0 32px,transparent 32px 38px,
    var(--pnt-t2) 38px 70px,transparent 70px 76px,
    var(--pnt-t3) 76px 108px,transparent 108px 114px,
    var(--pnt-t4) 114px 146px,transparent 146px 152px,
    var(--pnt-t5) 152px 184px,transparent 184px 100%)}
.savoir .assise,.assise--pied{
  background:linear-gradient(90deg,
    var(--pnt-o1) 0 32px,transparent 32px 38px,
    var(--pnt-o2) 38px 70px,transparent 70px 76px,
    var(--pnt-o3) 76px 108px,transparent 108px 114px,
    var(--pnt-o4) 114px 146px,transparent 146px 152px,
    var(--pnt-o5) 152px 184px,transparent 184px 100%)}

.sur::before{content:"";display:inline-block;width:26px;height:9px;
  margin-right:.55rem;vertical-align:.06em;background:var(--marque)}
.savoir .sur::before{background:var(--laiton)}

.entete{border-bottom:0}
.entete::after{content:"";position:absolute;left:0;right:0;bottom:0;height:5px;
  background:repeating-linear-gradient(90deg,
    var(--pnt-t1) 0 44px,transparent 44px 50px,
    var(--pnt-t3) 50px 94px,transparent 94px 100px,
    var(--pnt-t5) 100px 144px,transparent 144px 150px,
    var(--pnt-t2) 150px 194px,transparent 194px 200px)}
#nav-links li:not(:last-child) a::after{height:4px}

.panneau{border-radius:0}
.panneau::before{border-radius:0;height:var(--assise)}
.panneau::after{content:"";position:absolute;left:-1px;right:-1px;top:var(--assise);
  height:5px;background:var(--pnt-t2)}

.poste__num{padding-left:1.6rem}
.poste__num::before{left:2px;top:.92em;width:11px;height:11px;border-radius:50%;
  background:var(--marque);opacity:.9}
.poste__num::after{content:"";position:absolute;left:6px;top:.18em;width:3px;height:.86em;
  background:var(--marque);opacity:.45}

.poste{position:relative;border-top:0;padding-top:clamp(1rem,2.4vw,1.25rem)}
.poste:first-child{padding-top:.4rem}
.poste:not(:first-child)::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:
    repeating-linear-gradient(90deg,var(--filet) 0 9px,transparent 9px 13px),
    repeating-linear-gradient(90deg,
      color-mix(in oklab,var(--filet) 55%,transparent) 0 5px,transparent 5px 12px),
    repeating-linear-gradient(90deg,
      color-mix(in oklab,var(--filet) 35%,transparent) 0 3px,transparent 3px 7px);
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 5%,#000 90%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0%,#000 5%,#000 90%,transparent 100%)}

.cadre::before,
.cadre::after,.cadre--gauche::after,.realisations__haute::after,
.savoir .cadre::after,.cadre:hover::after,.savoir .cadre:hover::after{
  content:"";position:absolute;pointer-events:none;border:0;border-radius:0;opacity:1;
  background:var(--pnt-ruban);
  box-shadow:0 1px 3px color-mix(in oklab,var(--nuit) 22%,transparent);
  transition:background-color .3s ease,transform .3s ease}
.cadre::before{top:-9px;left:-10px;right:auto;bottom:auto;
  width:clamp(62px,9vw,106px);height:clamp(16px,1.6vw,21px);
  transform:rotate(-5deg)}
.cadre::after,.cadre--gauche::after,.realisations__haute::after,
.savoir .cadre::after,.cadre:hover::after,.savoir .cadre:hover::after{
  inset:auto -10px -9px auto;
  width:clamp(52px,7.5vw,90px);height:clamp(14px,1.4vw,19px);
  transform:rotate(4deg)}
.cadre:hover::before{transform:rotate(-2deg);background:var(--pnt-ruban-fonce)}

.realisations__grille .cadre{display:block}
.realisations__grille img{width:100%;height:auto;aspect-ratio:4/3}
.realisations__grille .cadre:nth-child(1){
  border-top:clamp(24px,3.2vw,42px) solid var(--pnt-t5)}
.realisations__grille .cadre:nth-child(2){
  border-bottom:clamp(15px,2.1vw,27px) solid var(--pnt-t3)}
.realisations__grille .cadre:nth-child(3){
  border-top:clamp(40px,5.6vw,74px) solid var(--pnt-t4)}
@media (min-width:52rem){
  .realisations__grille{grid-template-columns:minmax(0,1fr) minmax(0,1.16fr) minmax(0,.82fr);
    align-items:start}
  .realisations__grille .cadre:not(.realisations__haute),
  .realisations__haute{grid-column:auto;grid-row:auto}
  .realisations__grille .cadre:nth-child(2){margin-top:clamp(20px,3.4vw,48px)}
  .realisations__grille .cadre:nth-child(3){margin-top:clamp(40px,6.6vw,92px)}
  .realisations__grille img{aspect-ratio:4/3;height:auto}
  .realisations__haute img{aspect-ratio:3/4;height:auto}
}

.equipe__photo{position:relative;border-top:0;padding-top:14px}
.equipe__photo::before{content:"";position:absolute;left:0;right:0;top:0;height:14px;
  background:repeating-linear-gradient(90deg,
    var(--pnt-t2) 0 46px,transparent 46px 52px,
    var(--pnt-t4) 52px 98px,transparent 98px 104px,
    var(--pnt-t5) 104px 150px,transparent 150px 156px,
    var(--pnt-t3) 156px 202px,transparent 202px 208px)}

.savoir{background:radial-gradient(120% 85% at 10% 0%,
    color-mix(in oklab,var(--laiton) 15%,transparent),transparent 60%),var(--nuit)}
.contact{background:radial-gradient(85% 70% at 80% 0%,
    color-mix(in oklab,var(--marque) 9%,transparent),transparent 56%),var(--fond-alt)}

@media (prefers-reduced-motion:reduce){
  .pnt-passe{animation-name:pnt-paraitre;animation-duration:.95s;transform:none}
  .pnt-aplat{animation-name:pnt-paraitre;animation-duration:.9s;transform:none}
  .pnt-coulure{animation-name:pnt-paraitre;animation-duration:1.3s;transform:none}
  .cadre::before,.cadre::after{transition:background-color .3s ease}
  .cadre:hover::before{transform:rotate(-5deg);background:var(--pnt-ruban-fonce)}
  .cadre:hover::after{transform:rotate(4deg);background:var(--pnt-ruban-fonce)}
}

.poste                {--carte-teinte:var(--teinte-1)}
.poste:nth-child(2)   {--carte-teinte:var(--teinte-2)}
.poste:nth-child(3)   {--carte-teinte:var(--teinte-3)}
.poste:nth-child(4)   {--carte-teinte:var(--teinte-4)}

.poste__num::before{left:0;top:.34em;width:17px;height:23px;border-radius:1.5px;
  background:var(--carte-teinte);opacity:1;
  box-shadow:0 1px 3px -1px color-mix(in srgb,var(--nuit) 45%,transparent)}
.poste__num::after{left:0;top:calc(.34em + 16px);width:17px;height:7px;
  border-radius:0 0 1.5px 1.5px;
  background:color-mix(in srgb,var(--carte-teinte) 40%,#fff);opacity:1}

.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;
  transition:opacity .4s ease, transform .4s ease}
.cadre:hover::after{opacity:1;transform:scale(1.03)}
.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)}

@media (prefers-reduced-motion:reduce){
  .cadre::after{transition:opacity .4s ease}
  .cadre:hover::after{transform:none}
}

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

/* ═══ LE FORMULAIRE — 01.09.2026 ═══════════════════════════════════
   Il reprend la grammaire du reste : le cadre d'une `.fiche`, le
   bouton `.bouton--plein`, les mêmes familles de police. Les champs
   sont posés sur `--fond` et non sur du blanc pur : sur un panneau
   déjà blanc, une zone de saisie blanche ne se voit pas.
   ⚠ Le libellé est un VRAI <span> au-dessus du champ, jamais un
   `placeholder` seul : un placeholder disparaît dès qu'on tape, et
   la personne ne sait plus quelle case elle remplit. */
.formulaire__corps{display:grid;gap:.85rem;margin:0}
.formulaire__paire{display:grid;gap:.85rem}
@media (min-width:32rem){
  .formulaire__paire{grid-template-columns:1fr 1fr}
}
.formulaire__champ{display:grid;gap:.32rem;min-width:0}
.formulaire__champ > span{
  font-family:var(--police-libelle);font-size:.78rem;font-weight:500;
  text-transform:uppercase;letter-spacing:.09em;
  color:var(--encre-douce)}                     /* 6,98 sur --carte */
.formulaire__champ input,
.formulaire__champ textarea{
  width:100%;box-sizing:border-box;
  min-height:46px;padding:.7rem .85rem;
  font:inherit;font-size:1rem;                  /* 16px : en dessous, l'iPhone zoome tout seul */
  color:var(--encre);background:var(--fond);
  border:1px solid var(--filet);border-radius:var(--rayon);
  transition:border-color .2s ease,box-shadow .2s ease}
.formulaire__champ textarea{min-height:7.5rem;resize:vertical;line-height:1.5}
.formulaire__champ input::placeholder,
.formulaire__champ textarea::placeholder{color:var(--encre-douce);opacity:.75}
.formulaire__champ input:focus-visible,
.formulaire__champ textarea:focus-visible{
  outline:none;border-color:var(--marque);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--marque) 22%,transparent)}
.formulaire__envoi{width:100%;margin-top:.35rem}

/* Le piège à robots : hors écran, jamais `display:none` — certains
   robots ignorent précisément ce qui est masqué comme ça. */
.formulaire__piege{position:absolute;left:-9999px;width:1px;height:1px;
  opacity:0;pointer-events:none}

.formulaire__etat{margin:.2rem 0 0;min-height:1.3em;
  font-family:var(--police-libelle);font-size:.92rem;line-height:1.45;
  color:var(--encre-douce)}
.formulaire__etat.est-bien{color:var(--marque-fonce);font-weight:500}
.formulaire__etat.est-mal{color:#9d2323}          /* rouge foncé : 6,4 sur --carte */

/* ═══ LE LOGO — 02.09.2026, 2e version ═══════════════════════════
   ✅ 04.09 : LE CLIENT A ENVOYÉ LE FICHIER DÉTOURÉ, à fond transparent.
   Le problème est donc réglé là où il devait l'être — dans le fichier, pas
   par un bricolage d'image. ⚠ La plaque blanche du pied reste malgré
   tout NÉCESSAIRE : même détouré, le manche noir du rouleau et le
   « Sàrl » gris se noient sur le fond sombre. Vérifié en posant le
   nouveau fichier sur les deux fonds.

   ⛔ CE QU'IL NE FAUT PAS REFAIRE. Le fichier était un dessin sur du blanc,
   et deux tentatives l'ont abîmé : effacer tout le blanc mange les
   étoiles blanches du drapeau, et un remplissage depuis les bords
   laisse un liseré clair autour de chaque lettre. Un détourage se
   fait sur le fichier vectoriel d'origine, pas sur une image aplatie.
   Donc : on donne au logo le fond qu'il a déjà. La barre du haut
   passe en BLANC, le logo s'y pose intact, et il n'y a plus rien à
   corriger. Au pied, qui est sombre, il vit sur une plaque blanche
   assumée — un panneau, pas un accident.
   Il porte déjà le nom : on ne le répète pas en texte à côté. */
.marque{flex:0 0 auto;gap:.15rem}
.marque__logo{display:block;height:clamp(40px,5.2vw,60px);width:auto;
  max-width:min(56vw,230px);object-fit:contain}
.pied__logo{display:block;height:clamp(52px,9vw,68px);width:auto;
  max-width:min(70vw,270px);object-fit:contain;
  margin:0 auto .8rem;padding:.7rem 1.1rem;box-sizing:content-box;
  background:#fff;border-radius:6px}

/* La barre est claire : son ombre portée doit s'alléger, sinon elle
   pose un trait sale sur le haut du bandeau. */
.entete{box-shadow:0 10px 26px -22px rgba(38,35,31,.45)}

/* ═══ L'APLAT DU BAS DU BANDEAU — 02.09.2026 ═════════════════════
   Quatre versions rendues et regardées côte à côte : rouge vif,
   rouge foncé, noir du rouleau, gris de la maison. Le rouge, sur
   toute la largeur et cent quarante pixels de haut, transforme un
   accent en mur — et le logo, lui, met du rouge sur un fond GRIS.
   On reprend son rapport : l'aplat est le gris de la maison, le
   rouge n'est plus qu'un filet au-dessus. */
.pnt-aplat{background:#8e8780}
.pnt-reprise{background:#8e8780}
.pnt-aplat::before{background:var(--marque);height:6px}

/* Le logo est plus large qu'un mot : la barre repassait à la ligne.
   ⚠ Interdire le retour ne suffit pas : le squelette pose `min-width:0`
   sur `.marque`, donc en `nowrap` le logo se laisse écraser jusqu'à
   disparaître — vu à la capture. Il faut les DEUX. */
@media (min-width:62rem){
  .nav{flex-wrap:nowrap;align-items:center}
  .marque{flex:0 0 auto;min-width:auto}
  .marque__logo{flex:0 0 auto}
  #nav-links,.js #nav-links{width:auto;flex-direction:row;flex:0 0 auto}
}

/* ═══ LE CALAGE DU LOGO — 03.09.2026 ═════════════════════════════
   🚨 LA CAUSE DU DÉCALAGE, ET ELLE N'ÉTAIT PAS DANS LE FICHIER.
   `magick -trim` le confirme : le dessin remplit son canevas, il n'y
   a aucune marge blanche cuite dedans. C'était le CSS. `.marque` est
   une colonne flex : ses enfants s'étirent à la largeur du plus
   large — ici le texte « SIERRE ET ENVIRONS ». La boîte de l'image
   faisait donc la largeur du texte, et `object-fit:contain` CENTRAIT
   le logo dedans. Le logo partait à droite de la moitié de l'écart.
   On cale les deux sur le même bord, et on ne centre plus rien. */
.marque{align-items:flex-start}
.marque__logo{align-self:flex-start;object-position:left center}

/* Et le sous-titre cesse de concurrencer le logo : il était en ROUGE,
   sous un logo déjà rouge et or. Il passe au gris du « Sàrl », plus
   petit, décalé d'un cheveu — une légende, pas une seconde marque. */
.marque__sous{color:var(--barre-texte-doux);font-size:.66rem;
  letter-spacing:.16em;margin-top:.3rem}

/* ═══ LE CADRE DU HAUT SUR TÉLÉPHONE — 03.09.2026 ════════════════
   Son constat : « le cadre il est beaucoup trop à droite, vu qu'il y
   a une sorte de couleur de peinture sur la gauche ».
   MESURÉ à 390 : la gouttière donne 16 px à droite, et à gauche on
   empile 16 + la bande de peinture (28) + son dégagement (12) = 56.
   Le cadre n'était pas « décalé », il avait DEUX marges différentes,
   l'une trois fois et demie l'autre — et il venait toucher le bord
   droit. Sur téléphone la bande décorative sort : elle ne dit rien
   qu'on ne voie déjà, et elle coûte un dixième de la largeur. */
@media (max-width:48rem){
  .signature--hero .pnt-passe,
  .signature--hero .pnt-coulure{display:none}
  .hero__bande{padding-left:var(--gouttiere)}
}

/* ═══ L'ENTÊTE, 2e passe — 03.09.2026 ════════════════════════════
   Ses mots : « j'aime pas le fait qu'il y ait encore deux mots dessus,
   ça joue pas », et l'idée que le logo prenne toute la largeur.

   LE SOUS-TITRE SORT. Le logo porte déjà « Valais Peinture Sàrl » ;
   « SIERRE ET ENVIRONS » juste en dessous répétait le rôle du logo et
   le faisait paraître petit. La commune est de toute façon écrite en
   grand dans le bandeau, juste dessous.

   LA PLEINE LARGEUR, ELLE, A ÉTÉ RENDUE ET REGARDÉE : le fichier fait
   542 × 325, donc étalé sur 390 il monte à ~200 px de haut. Or cette
   barre est COLLANTE, elle suit le lecteur : ce serait un tiers de son
   écran confisqué en permanence. Le logo grandit donc autant qu'une
   barre collante le permet — 52 px — et il vit en grand au pied de
   page, sur sa plaque blanche, là où rien ne défile par-dessus. */
.marque__sous{display:none}
.marque__logo{height:52px;max-width:min(62vw,260px)}
.entete .bande{padding-block:.35rem}
@media (min-width:62rem){
  .marque__logo{height:58px;max-width:300px}
}

/* ═══ LA BARRE SE REMPLIT — 03.09.2026 ═══════════════════════════
   Ses mots : « je parle de la largeur du bandeau pas de la largeur
   totale du logo… soit intelligent ».
   Il avait raison et j'avais mal lu. Le logo n'est pas trop petit :
   c'est la BARRE qui est vide. Sur téléphone il n'y avait que le logo
   à gauche et le menu à droite, avec un grand blanc entre les deux —
   un logo abandonné dans un coin.
   On ne peut pas étirer le logo : il fait 542 × 325, à pleine largeur
   il monterait à 200 px de haut sur une barre qui SUIT le lecteur.
   Ce qu'on met dans ce blanc, c'est ce qui manquait vraiment : son
   NUMÉRO. Il était replié dans le menu — pour appeler un peintre
   depuis son téléphone, il fallait ouvrir un menu et viser un lien.
   Maintenant la barre porte le logo, le bouton d'appel et le menu :
   elle est pleine, et elle sert. */
.marque__appel{
  margin-left:auto;                       /* il pousse jusqu'au menu */
  min-height:44px;padding:.55rem .95rem;   /* 44 : la cible tactile minimale */
  font-size:.8rem;letter-spacing:.06em;gap:.42rem;
  flex:0 0 auto;
}
/* ⚠ Le seuil était à 26rem (416 px) : le mot sautait sur TOUS les
   téléphones, et il ne restait qu'un pictogramme. Or à 360 le compte
   tient — logo 87 + bouton 110 + menu 46 + gouttières 32 = 275 sur
   360. On ne perd le mot qu'en dessous de 22rem, là où plus rien ne
   tient. Une icône seule se comprend moins vite qu'un verbe. */
@media (max-width:22rem){
  .marque__appel span{display:none}
  .marque__appel{padding:.5rem .8rem}
}
.nav{gap:.6rem}


/* ═══ SES CINQ REMARQUES DU 09.09.2026, 21 h 30, sur le site EN LIGNE ═══
   1. « le cadre en haut est légèrement décalé par rapport à la ligne rouge » :
      le panneau descendait de quelques pixels sous le haut de l'aplat. Il se
      pose maintenant exactement dessus.
   2. « un rectangle gris inutile sous le nuancier » : la bande grise sous
      les cartes de couleur part, fond uni.
   3. Les halos flous sous les photos du savoir-faire partent aussi.
   4. « le bandeau rouge poli, en vrai il faut raffiner : des coulées clean,
      en courbe, des gouttes de peinture » : la bande devient unie, sans
      rayures ni bloc foncé, et quatre coulées dessinées (SVG, tracé à la
      main : la coulée se resserre puis finit en goutte ronde) pendent dessous.
   5. « je t'avais donné le logo détouré, pourquoi sur blanc » : le logo du
      pied est posé tel quel, sans plaque. */
.hero{padding-bottom:var(--pnt-aplat)}
.signature--milieu{background:var(--fond)}
.savoir .cadre img,.savoir .cadre:hover img{box-shadow:none}
.pnt-passage::before{display:none}
.pnt-passage__bande{background:var(--marque)}
.pnt-passage__bande::before,.pnt-passage__bande::after{display:none}
.pnt-coulee{position:absolute;display:block;fill:var(--marque);
  top:calc(var(--pnt-y) + var(--pnt-h) - 1px)}
.pnt-coulee--a{left:13%;height:clamp(48px,7vw,96px);width:auto}
.pnt-coulee--b{left:37%;height:clamp(30px,4.4vw,58px);width:auto}
.pnt-coulee--c{left:68%;height:clamp(64px,9.6vw,128px);width:auto}
.pnt-coulee--d{left:88%;height:clamp(36px,5.4vw,72px);width:auto}
.pnt-coulee--a,.pnt-coulee--c{transform-origin:top;animation:pnt-couler 1.2s cubic-bezier(.35,.8,.3,1) .3s both}
.pnt-coulee--b,.pnt-coulee--d{transform-origin:top;animation:pnt-couler 1.2s cubic-bezier(.35,.8,.3,1) .55s both}
.pied__logo{background:transparent;padding:0;border-radius:0;height:clamp(64px,11vw,84px)}
/* Le halo flou (::after, blur 14 px) sous les photos du savoir-faire faisait
   des taches brunes sur le fond sombre : retiré là. Le ruban du haut reste. */
.savoir .cadre::after,.savoir .cadre:hover::after{display:none}
/* Les cartes du nuancier partent de la section sombre du dessous et montent
   (sa remarque du 09.09, 21 h 50), au lieu de pendre depuis le haut. */
.pnt-nuancier{align-items:flex-end}

/* L'image de la section contact (sa remarque du 09.09, 21 h 55) : elle
   était servie en 800×600 et ÉTIRÉE à la hauteur de la colonne du
   formulaire, donc de plus en plus floue à mesure que le champ de texte
   grandissait. Elle est maintenant chargée en 1200×1600, garde son
   format, et ne suit plus la hauteur du formulaire. */
@media (min-width:62rem){
  .contact__grille{align-items:start}
  .contact__visuel{align-self:start}
  .contact__visuel img{height:auto;min-height:0;aspect-ratio:3/4;object-fit:cover}
}

/* Sa remarque suivante (09.09, 22 h) : « plutôt une texture, en hauteur,
   un cadre avec une texture peinture qui s'allonge ». Le cadre du contact
   prend toute la hauteur de la colonne du formulaire et montre un crépi en
   gros plan, chargé en 1200×2400 : une matière, pas une photo qui se
   déforme. */
@media (min-width:62rem){
  .contact__grille{align-items:stretch}
  .contact__visuel{align-self:stretch;display:flex}
  .contact__visuel img{height:100%;min-height:24rem;aspect-ratio:auto;object-fit:cover;object-position:center}
}