@font-face{
  font-family:'PoliceTitre';
  src:url('police-titre.woff2?v=1') format('woff2');
  font-weight:400 700;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'PoliceLibelle';
  src:url('police-libelle.woff2?v=1') format('woff2');
  font-weight:400 700;font-style:normal;font-display:swap;
}

:root{
  --police-titre:'PoliceTitre',"Book Antiqua",Palatino,Georgia,"Times New Roman",serif;
  --police-libelle:'PoliceLibelle',"Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;

  --nuit:#171A2B;         /* LA LAINE SOMBRE : bandeau, bande des retouches, pied */
  --nuit-haut:#1E2237;    /* le haut du dégradé des bandes sombres */
  --laine-haut:#252B45;   /* le haut d'une pièce de tissu coupée */
  --laine-bas:#1E2337;    /* son bas — ΔL* 4,0, le tissu ne change pas de couleur */

  --fond:#F6F2EA;         /* LA TOILE ÉCRUE : le fond de page */
  --fond-alt:#EAE3D6;     /* la toile plus dense : les bandes claires alternées */
  --carte:#FCFAF5;        /* le fond des objets posés sur la toile */
  --toile-haut:#F2ECE0;   /* le haut d'un coupon de nuancier */
  --toile-bas:#E6DDCC;    /* son bas */

  --encre:#221F2B;        /* le texte sur fond clair */
  --encre-douce:#5B5566;  /* le texte secondaire sur fond clair */
  --craie:#F1EFF6;        /* LA CRAIE DE TAILLEUR : le texte sur fond sombre */
  --craie-douce:#BFBACB;  /* le texte secondaire sur fond sombre */

  --fil:#9E2B4F;          /* LE FIL, garance : l'accent sur fond clair */
  --fil-fonce:#83203F;    /* son survol */
  --fil-clair:#E79AAF;    /* l'accent sur fond sombre — JAMAIS sur du clair */

  --filet:rgba(34,31,43,.14);        /* le trait sur fond clair */
  --filet-clair:rgba(241,239,246,.16); /* le trait sur fond sombre */

  --rayon:12px;
  --rayon-bouton:10px;

  --pad-essayage:clamp(2.75rem,6.5vw,4.5rem);
  --remontee-photo:6rem;      /* ce que la photo mord sur la bande sombre */
  --degagement-halo:4.25rem;  /* 68 px : le halo en déborde de 40 */
  --colonne:1120px;
  --gouttiere:clamp(1rem,3vw,2rem);

  --ombre:0 1px 2px rgba(23,26,43,.08), 0 12px 28px rgba(23,26,43,.14);
  --ombre-haute:0 1px 2px rgba(23,26,43,.08), 0 18px 40px rgba(23,26,43,.20);
  --ombre-coupee:drop-shadow(0 12px 22px rgba(23,26,43,.28));
  --ombre-coupee-haute:drop-shadow(0 18px 32px rgba(23,26,43,.36));
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--police-libelle);
  font-size:clamp(1rem,.95rem + .2vw,1.08rem);   /* jamais sous 16 px */
  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}
figure img{width:100%}
ul,ol,dl,dd{margin:0;padding:0;list-style:none}
p{margin:0 0 1em}
a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid var(--fil);outline-offset:3px;border-radius:4px}

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

h1,h2,h3{font-family:var(--police-titre);line-height:1.14;margin:0 0 .5em;
  font-weight:600;text-wrap:balance}
.titre2{font-size:clamp(1.6rem,1.15rem + 1.9vw,2.5rem);color:var(--encre)}
.titre2--clair{color:var(--craie)}

.sur{margin:0 0 .5rem;font-size:.8rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--encre-douce);
  display:flex;align-items:center;gap:.75rem}
.sur::after{content:"";flex:1;max-width:96px;height:1px;
  background-image:repeating-linear-gradient(90deg,currentColor 0 6px,transparent 6px 12px);
  opacity:.5}
.sur--clair{color:var(--craie-douce)}

.para{margin:0 0 1em;max-width:64ch;color:var(--encre-douce)}
.para--clair{color:var(--craie-douce)}
.para--large{max-width:70ch}
.entete-section{margin-bottom:clamp(1.5rem,4vw,2.5rem)}

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

.ruban{margin:0;padding:.5rem var(--gouttiere);text-align:center;font-size:.85rem;
  background:var(--nuit);color:var(--craie-douce)}
.ruban a{color:var(--fil-clair);text-decoration:underline;text-underline-offset:.2em;
  display:inline-block;padding-block:.25rem}

main > section{position:relative}
main > section > .colonne{position:relative;z-index:1}

main > section::after,.pied::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  --goutte:max(0px,calc((100% - var(--colonne)) / 2));
  --joue-masque:linear-gradient(90deg,#000 0,
    rgba(0,0,0,.92) var(--goutte),
    rgba(0,0,0,.09) 46%,
    rgba(0,0,0,.09) 54%,
    rgba(0,0,0,.92) calc(100% - var(--goutte)),#000 100%);
  background-image:
    repeating-linear-gradient(90deg,var(--joue-couture) 0 7px,transparent 7px 14px),
    radial-gradient(126% 74% at 16% 6%,var(--joue-trait) 0,transparent 64%),
    radial-gradient(88% 92% at 88% 38%,var(--joue-bouton) 0,transparent 60%),
    radial-gradient(150% 66% at 44% 98%,var(--joue-trait) 0,transparent 68%),
    linear-gradient(90deg,var(--joue-fond) 0,transparent var(--goutte),
      transparent calc(100% - var(--goutte)),var(--joue-fond) 100%);
  background-size:
    100% 1px,
    100% 100%, 100% 100%, 100% 100%,
    100% 100%;
  background-position:
    center top,
    left top, left top, left top,
    left top;
  background-repeat:
    no-repeat,
    no-repeat, no-repeat, no-repeat,
    no-repeat;
  -webkit-mask-image:var(--joue-masque);
  mask-image:var(--joue-masque);
}
main > section{--joue-couture:transparent}
main > section + section{--joue-couture:var(--joue-piqure)}
.pied{--joue-couture:var(--joue-piqure)}

.bandeau{--joue-trait:rgba(231,235,246,.030);--joue-bouton:rgba(231,235,246,.022)}

.est-claire{
  --joue-fond:rgba(23,26,43,.15);
  --joue-trait:rgba(23,26,43,.060);
  --joue-bouton:rgba(23,26,43,.042);
  --joue-piqure:rgba(23,26,43,.30);
}
.est-sombre,.pied{
  --joue-fond:rgba(231,235,246,.07);
  --joue-trait:rgba(231,235,246,.060);
  --joue-bouton:rgba(231,235,246,.042);
  --joue-piqure:rgba(241,239,246,.26);
}

.entete{position:sticky;top:0;z-index:40;
  background:color-mix(in srgb,var(--fond) 86%,transparent);
  backdrop-filter:blur(12px) saturate(115%);
  -webkit-backdrop-filter:blur(12px) saturate(115%);
  border-bottom:1px solid var(--filet);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  flex-wrap:wrap;min-height:64px;padding-block:.5rem}
.marque{display:flex;flex-direction:column;line-height:1.2}
.marque__nom{font-family:var(--police-titre);font-weight:700;font-size:1.2rem}
.marque__sous{font-size:.78rem;letter-spacing:.06em;color:var(--encre-douce)}

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

#nav-links{display:flex;flex-direction:column;gap:.25rem;width:100%;padding-bottom:.5rem}
#nav-links a{display:flex;align-items:center;min-height:44px;padding:.5rem .25rem;
  font-size:.9rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--encre-douce);border-bottom:1px solid transparent;
  transition:color .22s ease,border-color .22s ease}
#nav-links a:hover,#nav-links a:focus-visible{color:var(--fil)}
/* ⚠ 23.09.2026 : le menu s'ouvrait en poussant la barre, donc en faisant
   sauter toute la page (l'entête est sticky). Il se déploie maintenant EN
   SUPERPOSITION sous la barre, et l'ouverture est animée. Correctif propagé
   depuis le gabarit par outils/menu-fluide.mjs. */
.js #nav-links{
  display:flex;
  position:absolute; top:100%; left:0; right:0;
  width:auto; margin:0;
  padding:.35rem var(--gouttiere,1rem) .9rem;
  background:var(--fond,#fff);
  border-bottom:1px solid var(--filet,rgba(0,0,0,.12));
  box-shadow:0 12px 26px -16px rgba(0,0,0,.4);
  opacity:0; visibility:hidden; transform:translateY(-10px);
  transition:opacity .2s ease,
             transform .26s cubic-bezier(.4,0,.2,1),
             visibility 0s linear .26s;
}
.js #nav-links.is-open{
  opacity:1; visibility:visible; transform:none;
  transition:opacity .2s ease,
             transform .26s cubic-bezier(.4,0,.2,1),
             visibility 0s;
}
/* Mouvement réduit : on retire le DÉPLACEMENT, pas la transition. */
@media (prefers-reduced-motion:reduce){
  .js #nav-links{transform:none;transition:opacity .14s linear,visibility 0s linear .14s}
  .js #nav-links.is-open{transition:opacity .14s linear,visibility 0s}
}

@media (min-width:62rem){
  #nav-toggle{display:none}
  #nav-links,.js #nav-links{display:flex;flex-direction:row;align-items:center;
    gap:clamp(.75rem,2vw,2rem);width:auto;padding-bottom:0;position:static;opacity:1;visibility:visible;transform:none;background:none;border:0;box-shadow:none;padding:0;transition:none}
  #nav-links a{min-height:40px;padding-inline:0}
  #nav-links a:hover,#nav-links a:focus-visible{border-bottom-color:var(--fil)}
}

.plaque{
  display:inline-flex;flex-direction:column;gap:.1rem;
  min-height:56px;padding:.7rem 1.5rem;border-radius:var(--rayon-bouton);
  background-image:linear-gradient(180deg,var(--fil),var(--fil-fonce));
  color:#fff;box-shadow:var(--ombre),inset 0 1px 0 rgba(255,255,255,.16);
  transition:transform .24s ease,box-shadow .24s ease,filter .24s ease}
.plaque__libelle{font-size:.74rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;opacity:.86}
.plaque__num{font-size:1.22rem;font-weight:700;letter-spacing:.02em;
  font-variant-numeric:tabular-nums}
.plaque:hover,.plaque:focus-visible{
  box-shadow:var(--ombre-haute),inset 0 1px 0 rgba(255,255,255,.16);
  filter:saturate(112%)}
.plaque--seconde{background-image:linear-gradient(180deg,var(--nuit-haut),var(--nuit));
  color:var(--craie)}
.plaque--seconde .plaque__libelle{color:var(--craie-douce);opacity:1}
.plaque--wa{background-image:linear-gradient(180deg,#25D366,#1EB558);color:#0E2A1B}
.plaque--wa .plaque__libelle{opacity:1}

.bandeau{
  display:flex;align-items:center;
  min-height:min(84svh,44rem);
  padding-block:clamp(3rem,9vw,6rem);
  background-color:#1e2237;
  color:var(--craie);
  overflow:hidden}
.bandeau__photo{position:absolute;inset:0;z-index:0}
.bandeau__photo img{width:100%;height:100%;object-fit:cover;object-position:50% 38%}
@media (max-width:640px){
  .bandeau__photo img{object-position:50% 28%}
}
.bandeau__photo::after{content:"";position:absolute;inset:0;
  background-color:color-mix(in srgb,var(--nuit) 76%,transparent)}

.bandeau__panneau{
  max-width:44rem;padding:clamp(1.5rem,4vw,2.5rem);
  border-radius:var(--rayon);
  border:1px solid rgba(255,255,255,.14);
  background:color-mix(in srgb,var(--nuit) 86%,transparent);
  backdrop-filter:blur(16px) saturate(115%);
  -webkit-backdrop-filter:blur(16px) saturate(115%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 1px 2px rgba(0,0,0,.18),
             0 24px 48px rgba(0,0,0,.32)}
.bandeau__titre{margin:0;color:var(--craie);
  font-size:clamp(2.4rem,1.4rem + 4.4vw,4.4rem);line-height:1.02;
  letter-spacing:-.012em}
.bandeau__accent{margin:0;color:var(--fil-clair);font-family:var(--police-titre);
  font-style:italic;font-weight:600;
  font-size:clamp(2.4rem,1.4rem + 4.4vw,4.4rem);line-height:1.02;
  letter-spacing:-.012em}
.bandeau__intro{margin:1.25rem 0 2rem;max-width:52ch;color:var(--craie-douce);
  font-size:clamp(1rem,.96rem + .3vw,1.14rem)}

.piqure{margin:.75rem 0 0;overflow:visible}
.piqure path{fill:none;stroke:var(--fil-clair);stroke-width:2.5;
  stroke-linecap:round;stroke-dasharray:9 8}
.js .piqure path{stroke-dashoffset:300}
.js .piqure.est-vu path{stroke-dashoffset:0;transition:stroke-dashoffset 1.5s ease .2s}

.matieres{padding-block:clamp(2.75rem,6.5vw,4.75rem);
  background-color:#f6f2ea}

.nuancier{display:grid;gap:clamp(1.5rem,3vw,2rem);grid-template-columns:1fr}
@media (min-width:34rem){.nuancier{grid-template-columns:repeat(2,1fr)}}
@media (min-width:62rem){.nuancier{grid-template-columns:repeat(3,1fr)}}

.coupon{position:relative;--epingle-x:1.25rem;--epingle-y:.5rem;
  padding:1rem 1rem 1.25rem;
  background-color:#f2ece0;
  box-shadow:var(--ombre),inset 0 1px 0 rgba(255,255,255,.7);
  transition:transform .26s ease,box-shadow .26s ease}
.coupon:hover{
  box-shadow:var(--ombre-haute),inset 0 1px 0 rgba(255,255,255,.7)}
.coupon__nom{margin:1rem 0 .25em;font-size:1.16rem;color:var(--encre)}
.coupon__texte{margin:0;font-size:.94rem;color:var(--encre-douce)}

.coupon__tissu{display:block;height:92px;
  box-shadow:inset 0 0 0 1px rgba(23,26,43,.14),inset 0 2px 6px rgba(23,26,43,.14)}
.coupon__tissu--jean{background-image:
  repeating-linear-gradient(45deg,#2E3C63 0 4px,#3A4A75 4px 8px)}
.coupon__tissu--soie{background-image:
  linear-gradient(160deg,#E6DEEA 0%,#C6B9D2 42%,#F1ECF4 62%,#CFC3DA 100%)}
.coupon__tissu--laine{background-color:#8d8a82;background-image:radial-gradient(58% 130% at 22% 28%,rgba(255,255,255,.13) 0,transparent 62%),radial-gradient(48% 140% at 66% 76%,rgba(23,26,43,.16) 0,transparent 64%),radial-gradient(70% 120% at 90% 20%,rgba(255,255,255,.09) 0,transparent 58%),radial-gradient(circle at 11% 62%,rgba(255,255,255,.20) 0 1.4px,transparent 2.2px),radial-gradient(circle at 29% 17%,rgba(23,26,43,.20) 0 1.6px,transparent 2.4px),radial-gradient(circle at 41% 71%,rgba(255,255,255,.16) 0 1.2px,transparent 2px),radial-gradient(circle at 57% 34%,rgba(23,26,43,.16) 0 1.5px,transparent 2.3px),radial-gradient(circle at 73% 82%,rgba(255,255,255,.18) 0 1.3px,transparent 2.1px),radial-gradient(circle at 84% 45%,rgba(23,26,43,.18) 0 1.4px,transparent 2.2px),radial-gradient(circle at 94% 74%,rgba(255,255,255,.15) 0 1.2px,transparent 2px),radial-gradient(circle at 19% 90%,rgba(23,26,43,.14) 0 1.3px,transparent 2.1px);
  background-size:100% 100%;background-repeat:no-repeat}
.coupon__tissu--jersey{background-color:#A7B3AC;
  background-image:
    radial-gradient(circle at 50% 118%,
      transparent 0 5.2px,rgba(255,255,255,.60) 5.2px 6.6px,transparent 7.4px),
    radial-gradient(circle at 50% 118%,
      transparent 0 5.2px,rgba(23,26,43,.24) 5.2px 6.6px,transparent 7.4px);
  background-size:11px 9px,11px 9px;
  background-position:0 0,5.5px 4.5px}
.coupon__tissu--popeline{background-image:
  repeating-linear-gradient(180deg,#D2D9E3 0 1px,#EDF1F6 1px 4px)}
.coupon__tissu--dentelle{background-color:#DCCFCC;
  background-image:
    radial-gradient(circle at 50% 50%,
      transparent 0 2px,rgba(255,255,255,.95) 2px 3.1px,transparent 3.6px),
    radial-gradient(circle at 50% 50%,rgba(255,255,255,.85) 0 1.1px,transparent 1.7px),
    radial-gradient(circle at 50% 50%,
      transparent 0 5.4px,rgba(255,255,255,.62) 5.4px 6.3px,transparent 6.8px);
  background-size:16px 16px;
  background-position:0 0,0 0,8px 8px}

.coupon::before{content:"";position:absolute;z-index:2;pointer-events:none;
  left:var(--epingle-x);top:var(--epingle-y);width:2px;height:42px;border-radius:1px;
  background-image:linear-gradient(180deg,#D3D8DF 0%,#9AA2AD 55%,#7A828D 100%);
  transform-origin:50% 0;transform:rotate(-37deg);
  box-shadow:0 1px 2px rgba(23,26,43,.34)}
.coupon::after{content:"";position:absolute;z-index:3;pointer-events:none;
  left:calc(var(--epingle-x) - 4px);top:calc(var(--epingle-y) - 5px);
  width:10px;height:10px;border-radius:50%;
  background-image:radial-gradient(circle at 33% 28%,#fff 0 1.6px,var(--fil) 2.4px 100%);
  box-shadow:0 1px 3px rgba(23,26,43,.45)}

.retouches{padding-block:clamp(3.5rem,9vw,6.75rem);
  background-color:#1e2237;
  color:var(--craie)}
.retouches .entete-section{position:relative}
.retouches .entete-section::before{content:"";position:absolute;
  left:0;top:-50%;width:min(100%,42rem);height:220%;pointer-events:none;z-index:-1;
  background-image:radial-gradient(60% 50% at 22% 40%,
    rgba(231,154,175,.07),transparent 70%)}

.pieces{display:grid;gap:clamp(1.5rem,3vw,2rem);grid-template-columns:1fr}
@media (min-width:48rem){.pieces{grid-template-columns:repeat(2,1fr)}}

.piece{--biais:28px;
  padding:1.5rem 1.5rem 1.5rem 2.75rem;
  clip-path:polygon(0 0,calc(100% - var(--biais)) 0,100% var(--biais),100% 100%,0 100%);
  filter:var(--ombre-coupee);
  background-color:#252b45;background-image:repeating-linear-gradient(180deg,var(--filet-clair) 0 6px,transparent 6px 12px),linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.10));
  background-size:1px 100%,100% 1px;
  background-position:left 18px top 0,left top;
  background-repeat:no-repeat;
  transition:transform .26s ease,filter .26s ease}
.piece:hover{filter:var(--ombre-coupee-haute)}
.piece__nom{margin:0 0 .4em;font-size:1.24rem;color:var(--craie)}
.piece__texte{margin:0;font-size:.96rem;color:var(--craie-douce)}

.essayage{padding-block:var(--pad-essayage);
  background-color:#f6f2ea}
.essayage__grille{display:grid;gap:clamp(2rem,5vw,3.5rem);align-items:start}
.essayage__grille>*{min-width:0}
@media (min-width:62rem){
  .essayage__grille{grid-template-columns:1.15fr .85fr;align-items:stretch}
  .essayage .cadre{display:flex}
  .essayage .cadre img{height:100%;min-height:26rem;object-fit:cover}
}

.cadre{position:relative;border-radius:var(--rayon);overflow:hidden;
  box-shadow:
    0 0 0 6px color-mix(in srgb,var(--carte) 80%,transparent),
    0 0 26px 14px color-mix(in srgb,var(--carte) 44%,transparent),
    var(--ombre),inset 0 1px 0 rgba(255,255,255,.4)}
.cadre img{width:100%}
@media (min-width:62rem){
  .retouches{padding-bottom:calc(var(--remontee-photo) + var(--degagement-halo))}
  .essayage .cadre{margin-top:calc(-1 * (var(--pad-essayage) + var(--remontee-photo)))}
}

.atelier{padding-block:clamp(3.5rem,9vw,6.5rem);overflow:hidden;
  background-color:#1e2237;
  color:var(--craie)}
.atelier__photo{position:absolute;inset:0;z-index:0}
.atelier__photo img{width:100%;height:100%;object-fit:cover;object-position:50% 46%}
.atelier__photo::after{content:"";position:absolute;inset:0;
  background-color:color-mix(in srgb,var(--nuit) 88%,transparent)}
.atelier__dedans .para{max-width:62ch}

.contact{padding-block:clamp(3.25rem,7.5vw,5.5rem);
  background-color:#f6f2ea}
.contact__grille{display:grid;gap:clamp(2rem,5vw,3.5rem);align-items:start}
.contact__grille>*{min-width:0}
@media (min-width:62rem){.contact__grille{grid-template-columns:1.05fr .95fr}}

.tableau{margin:0 0 2rem;font-variant-numeric:tabular-nums}
.tableau__ligne{display:flex;flex-wrap:wrap;gap:.25rem 1rem;
  justify-content:space-between;padding-block:.6rem;
  border-bottom:1px solid var(--filet)}
.tableau__ligne:last-child{border-bottom:0}
.tableau dt{font-weight:600;color:var(--encre)}
.tableau dd{margin:0;color:var(--encre-douce)}
.tableau__ligne--ferme dd{color:var(--encre-douce);opacity:.75;font-style:italic}
.tableau__ligne--aujourdhui dt{color:var(--fil)}
.tableau__aujourdhui{margin-left:.5rem;font-size:.7rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--fil-fonce)}
.tableau a{color:var(--fil-fonce);font-weight:600;
  text-decoration:underline;text-underline-offset:.2em;
  display:inline-block;padding-block:.2rem}

.numeros{display:flex;flex-wrap:wrap;gap:1rem;margin-bottom:2rem}
.contact__cote{display:grid;gap:clamp(1.5rem,3vw,2rem);align-content:start}

.etiquette{position:relative;padding:2rem 1.5rem 1.5rem;
  background-color:#f6f2ea;
  box-shadow:var(--ombre),inset 0 1px 0 rgba(255,255,255,.8)}
.etiquette::before{content:"";position:absolute;left:1rem;right:1rem;top:.75rem;
  height:3px;pointer-events:none;
  background-image:
    repeating-linear-gradient(90deg,rgba(23,26,43,.34) 0 6px,transparent 6px 12px),
    repeating-linear-gradient(90deg,rgba(255,255,255,.9) 0 6px,transparent 6px 12px);
  background-size:100% 1px,100% 1px;
  background-position:left top,left bottom;
  background-repeat:no-repeat}
.etiquette__titre{margin:0 0 .75rem;font-size:.8rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--encre-douce);
  font-family:var(--police-libelle)}
.tableau--etiquette{margin-bottom:0}
.tableau--etiquette .tableau__ligne{padding-block:.5rem}

.pied{padding-block:2.5rem;background:var(--nuit);color:var(--craie-douce);
  border-top:1px solid rgba(255,255,255,.08)}
.pied__dedans{display:flex;flex-wrap:wrap;gap:.5rem 2rem;justify-content:space-between}
.pied p{margin:0;font-size:.9rem}
.pied__qui{color:var(--craie);font-weight:600}
.pied__demo{font-size:.82rem;letter-spacing:.02em}
.pied a{color:var(--fil-clair);text-decoration:underline;text-underline-offset:.2em;
  display:inline-block;padding-block:.25rem}

.a-completer{opacity:.55;font-style:italic;font-size:.92em}

.js .reveal{opacity:0;transform:translateY(16px);
  transition:opacity .55s ease,transform .55s ease;
  transition-delay:var(--d,0s)}
.js .reveal.est-vu{opacity:1;transform:none}
.js .coupon.reveal{transform:translateY(18px) rotate(-1.4deg)}
.js .coupon.reveal:nth-child(even){transform:translateY(18px) rotate(1.4deg)}
.js .coupon.reveal.est-vu{transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .reveal,
  .js .coupon.reveal,
  .js .coupon.reveal:nth-child(even){transform:none;transition:opacity .4s ease}
  .js .piqure path{stroke-dashoffset:0;transition:none}
  .plaque,.coupon,.piece,.cadre,.cadre img,#nav-links a{transition:box-shadow .3s ease,filter .3s ease}
}

.pied{position:relative}
.pied__dedans{position:relative;z-index:1}

@media (max-width:600px){
  .bandeau{display:block;min-height:0;padding-block:0 clamp(2.5rem,8vw,4rem)}
  .bandeau__photo{position:relative;height:40vh;max-height:330px}
  .bandeau__dedans{margin-top:-26px}
}

.entete{background-color:rgba(246,242,234,0.76)}
.entete{margin-bottom:-65px}

#nav-links a{color:#171a2b}

@media (min-width:900px){
  .bandeau{align-items:center;padding-top:calc(clamp(3rem,9vw,6rem) + 65px)}
}

@media (max-width:600px){
  div.bandeau__photo > img{height:325px;min-height:0;max-height:none;aspect-ratio:auto;object-fit:cover}
}

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

@media (max-width:600px){
  div.bandeau__panneau{display:flex;flex-direction:column}
  div.bandeau__panneau > *{order:4}
  div.bandeau__panneau > p.sur.sur--clair{order:1}
  div.bandeau__panneau > h1#bandeau-titre.bandeau__titre{order:2}
  div.bandeau__panneau > p.bandeau__accent{order:2}
  div.bandeau__panneau > svg{order:2}
  div.bandeau__panneau > a.plaque{order:3;margin-top:28px;margin-bottom:28px}
}

@media (max-width:34rem){
  .coupon{
    display:grid;
    grid-template-columns:112px minmax(0,1fr);
    grid-template-rows:auto auto;
    column-gap:14px;row-gap:2px;
    align-items:start;
    padding:.9rem 1rem 1rem;
  }
  .coupon__tissu{grid-row:1 / span 2;align-self:center;height:88px}
  .coupon__nom{margin:.1rem 0 .25em}
}