

@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:400;
  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:#161b28;              /* texte courant */
  --encre-douce:#4b5468;        /* texte secondaire — jamais plus clair */
  --fond:#f6f8fd;               /* haut du dégradé des sections claires */
  --fond-bas:#e9edf8;           /* bas du même dégradé (9 points d'écart) */
  --fond-alt:#e7ebf7;           /* haut du dégradé des sections moyennes */
  --alt-bas:#d9e0f0;            /* bas du même dégradé */
  --carte:#ffffff;              /* les panneaux opaques */
  --marque:#2c4489;             /* boutons, assises, accents */
  --marque-fonce:#1e2f63;       /* survol des boutons — mesuré, pas calculé */
  --filet:#c5cee6;              /* filets et bordures : décor, jamais du texte */
  --wa:#25d366;                 /* vert WhatsApp : texte FONCÉ dessus */

  --nuit:#101731;
  --nuit-haut:#1b2547;
  --lin:#f3efe6;                /* écru : le tissu de l'étiquette, le texte sur nuit */
  --lin-doux:#bfc7de;           /* texte secondaire sur nuit */
  --cuivre:#d9b57e;             /* le fil de la piqûre : surtitres et filets sur nuit */

  --police-titre:'PoliceTitre',Georgia,'Times New Roman',serif;
  --police-libelle:'PoliceLibelle',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;

  --colonne:1160px;             /* la colonne de contenu — sert aussi aux gouttières */
  --gouttiere:clamp(1rem,4vw,2rem);
  --rayon:14px;
  --rayon-bouton:10px;
  --rayon-epaule:46px;

  --ombre:0 1px 2px rgba(16,23,49,.09), 0 12px 28px rgba(16,23,49,.14);
  --ombre-haute:0 1px 2px rgba(16,23,49,.09), 0 18px 40px rgba(16,23,49,.20);

  --transition:220ms cubic-bezier(.22,.61,.36,1);
}

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

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

body{
  margin:0;
  background:var(--fond);
  color:var(--encre);
  font-family:var(--police-libelle);
  font-size:clamp(1rem,.97rem + .18vw,1.075rem);
  line-height:1.66;
  font-variant-numeric:lining-nums tabular-nums;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;height:auto;display:block}
a{color:var(--marque)}
:focus-visible{outline:3px solid var(--marque);outline-offset:3px;border-radius:4px}

h1,h2,h3{
  font-family:var(--police-titre);
  font-weight:400;
  line-height:1.1;
  letter-spacing:-.005em;
  margin:0;
  text-wrap:balance;
}
h1{font-size:clamp(2.5rem,1.5rem + 3.6vw,4.4rem)}
h2{font-size:clamp(1.9rem,1.35rem + 2vw,3rem)}
h3{font-size:clamp(1.1rem,1.03rem + .35vw,1.3rem);line-height:1.24}
p{margin:0 0 1rem}
ul,ol{margin:0;padding:0;list-style:none}

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

.saut-contenu{
  position:absolute;left:-9999px;top:0;z-index:60;
  background:var(--marque);color:#fff;
  padding:12px 16px;border-radius:0 0 var(--rayon-bouton) 0;
  text-decoration:none;font-weight:600;
}
.saut-contenu:focus{left:0}

.ruban{
  margin:0;
  background:var(--nuit);
  color:var(--lin-doux);
  font-size:.8rem;
  letter-spacing:.02em;
  text-align:center;
  padding:8px 16px;
}
.ruban a{color:var(--cuivre)}

.entete{position:sticky;top:0;z-index:40}
.entete::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(217,181,126,.34),transparent);
}
.entete .bande{
  background:color-mix(in srgb,var(--nuit) 88%,transparent);
  -webkit-backdrop-filter:blur(16px) saturate(115%);
  backdrop-filter:blur(16px) saturate(115%);
  max-width:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.nav{
  max-width:var(--colonne);
  margin-inline:auto;
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;
  min-height:64px;
}

.marque{
  display:flex;flex-direction:column;
  text-decoration:none;color:var(--lin);
  padding:8px 0;
}
.marque__nom{
  font-family:var(--police-titre);
  font-size:1.24rem;line-height:1.15;
}
.marque__sous{
  font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--lin-doux);
}

#nav-toggle{
  display:inline-flex;flex-direction:column;justify-content:center;gap:5px;
  width:44px;height:44px;padding:0 10px;
  background:transparent;border:1px solid rgba(243,239,230,.26);
  border-radius:var(--rayon-bouton);
  cursor:pointer;
}
.nav-toggle__trait{display:block;height:2px;background:var(--lin);border-radius:2px}

#nav-links{
  display:none;
  position:absolute;left:0;right:0;top:100%;
  background:var(--nuit);
  border-top:1px solid rgba(217,181,126,.22);
  padding:8px var(--gouttiere) 16px;
}
#nav-links.is-open{display:block}
#nav-links li{border-bottom:1px solid rgba(243,239,230,.08)}
#nav-links li:last-child{border-bottom:0;padding-top:12px}
#nav-links a{
  display:block;padding:14px 0;
  color:var(--lin);text-decoration:none;
  font-size:.98rem;letter-spacing:.01em;
}
#nav-links a:hover{color:var(--cuivre)}

@media (min-width:62rem){
  #nav-toggle{display:none}
  #nav-links{
    display:flex;align-items:center;gap:28px;
    position:static;background:none;border:0;padding:0;
  }
  #nav-links li{border:0}
  #nav-links li:last-child{padding-top:0}
  #nav-links a{padding:8px 0;font-size:.95rem}
  #nav-links li:not(:last-child) a{position:relative}
  #nav-links li:not(:last-child) a::after{
    content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;
    background:var(--cuivre);
    transform:scaleX(0);transform-origin:left;
    transition:transform var(--transition);
  }
  #nav-links li:not(:last-child) a:hover::after{transform:scaleX(1)}
}

.bouton{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:12px 24px;
  border-radius:var(--rayon-bouton);
  font-family:var(--police-libelle);
  font-size:1rem;font-weight:600;letter-spacing:.01em;
  text-decoration:none;
  border:1px solid transparent;
  transition:transform var(--transition),box-shadow var(--transition),background-color var(--transition);
}
.bouton--plein{
  background-image:linear-gradient(180deg,var(--marque),var(--marque-fonce));
  background-color:var(--marque);
  color:#fff;
  box-shadow:var(--ombre);
  border-color:rgba(255,255,255,.14);
}
.bouton--plein:hover{
  background-image:linear-gradient(180deg,var(--marque-fonce),var(--marque-fonce));
  box-shadow:var(--ombre-haute);
}
.bouton--grand{min-height:56px;padding:14px 30px;font-size:1.05rem}
.bouton--wa{
  background-image:linear-gradient(180deg,var(--wa),#1eb257);
  background-color:var(--wa);
  color:#0b2c17;                 /* texte FONCÉ sur le vert : 6,1:1 */
  box-shadow:var(--ombre);
}
.bouton--wa:hover{box-shadow:var(--ombre-haute)}
#nav-links .bouton{min-height:44px;padding:10px 18px;font-size:.95rem}

.sur{
  margin:0 0 10px;
  font-family:var(--police-libelle);
  font-size:.74rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--encre-douce);
}
.sur--nuit{color:var(--cuivre)}

.entete-section{position:relative;z-index:1;max-width:44rem;margin-bottom:40px}
.entete-section--centre{max-width:none;text-align:center}
.entete-section--centre .assise{margin-inline:auto}
.entete-section p.intro{
  font-family:var(--police-titre);
  font-size:clamp(1.08rem,1rem + .5vw,1.32rem);
  line-height:1.5;
  color:var(--encre-douce);
  margin:16px 0 0;
}

.assise{
  display:block;width:72px;height:3px;margin-top:20px;
  border-radius:2px;
  background:linear-gradient(90deg,var(--marque),color-mix(in srgb,var(--marque) 40%,transparent));
  transform:scaleX(0);transform-origin:left;
  transition:transform 420ms cubic-bezier(.22,.61,.36,1) 120ms;
}
.assise.est-vu{transform:scaleX(1)}
.assise--nuit{background:linear-gradient(90deg,var(--cuivre),color-mix(in srgb,var(--cuivre) 30%,transparent))}

.section{
  position:relative;
  padding-block:clamp(64px,8vw,112px);
}
#prestations{padding-block:clamp(48px,6vw,80px)}
#etiquettes {padding-block:clamp(72px,9.5vw,128px)}
#apropos    {padding-block:clamp(56px,7vw,96px)}
#contact    {padding-block:clamp(68px,8.5vw,116px)}
.section--claire{background-color:#f6f8fd}
.section--moyenne{background-color:var(--fond)}
.section--nuit{
  background-color:var(--nuit);
  color:var(--lin);
}
.section--nuit h2,.section--nuit h3{color:var(--lin)}
.section--nuit p{color:var(--lin-doux)}

main > section{position:relative}
main > section::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  --goutte:max(0px,calc((100% - var(--colonne)) / 2));
  --modul-1:calc(var(--goutte) + (50% - var(--goutte)) * .38);
  --modul-2:calc(var(--goutte) + (50% - var(--goutte)) * .72);

  background-image:
    radial-gradient(ellipse 58% 34% at 27% 38%,var(--joue-fil) 0,transparent 72%),
    radial-gradient(ellipse 44% 52% at 73% 21%,var(--joue-trame) 0,transparent 70%),
    radial-gradient(ellipse 66% 28% at 51% 79%,var(--joue-trame) 0,transparent 74%),
    linear-gradient(90deg,
      var(--joue-fond) 0%,
      color-mix(in srgb,var(--joue-fond) 52%,transparent) 15%,
      transparent 40%, transparent 60%,
      color-mix(in srgb,var(--joue-fond) 52%,transparent) 85%,
      var(--joue-fond) 100%);
  background-size:
    211px 211px, 167px 167px, 283px 283px,
    auto;
  background-position:
    left top, left top, left top,
    left top;
  background-repeat:
    repeat, repeat, repeat,
    no-repeat;
  -webkit-mask-image:linear-gradient(90deg,
    #000 0 var(--goutte),
    rgba(0,0,0,.72) var(--modul-1),rgba(0,0,0,.44) var(--modul-2),
    rgba(0,0,0,.38) 50%,
    rgba(0,0,0,.44) calc(100% - var(--modul-2)),rgba(0,0,0,.72) calc(100% - var(--modul-1)),
    #000 calc(100% - var(--goutte)));
  mask-image:linear-gradient(90deg,
    #000 0 var(--goutte),
    rgba(0,0,0,.72) var(--modul-1),rgba(0,0,0,.44) var(--modul-2),
    rgba(0,0,0,.38) 50%,
    rgba(0,0,0,.44) calc(100% - var(--modul-2)),rgba(0,0,0,.72) calc(100% - var(--modul-1)),
    #000 calc(100% - var(--goutte)));
}
main > section > .bande,
main > section > .delicat__grille{position:relative;z-index:1}
.section--claire,.section--moyenne{
  --joue-fond:rgba(16,23,49,.32);
  --joue-trait:rgba(16,23,49,.075);
  --joue-jour:rgba(255,255,255,.34);
  --joue-fil:rgba(255,255,255,.09);
  --joue-trame:rgba(16,23,49,.05);
  --joue-arete:rgba(255,255,255,.58);
}
.section--nuit{
  --joue-fond:rgba(243,239,230,.10);
  --joue-trait:rgba(0,0,0,.16);
  --joue-jour:rgba(243,239,230,.075);
  --joue-fil:rgba(243,239,230,.055);
  --joue-trame:rgba(243,239,230,.05);
  --joue-arete:rgba(16,23,49,.44);
}
.hero::after{
  background-image:linear-gradient(90deg,
    rgba(10,15,33,.42) 0,
    transparent var(--goutte),
    transparent calc(100% - var(--goutte)),
    rgba(10,15,33,.42) 100%);
  background-size:auto;
  background-position:left top;
  background-repeat:no-repeat;
  -webkit-mask-image:none;mask-image:none;
}

.hero{
  position:relative;
  background-color:var(--nuit);
  padding-block:clamp(72px,10vw,132px) clamp(64px,8vw,104px);
  overflow:hidden;
}
.hero__fond{position:absolute;inset:0;z-index:0}
.hero__fond img{
  width:100%;height:100%;object-fit:cover;
  object-position:22% 60%;      /* on cadre côté planche à repasser */
}
.hero__fond::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(16,23,49,.62),rgba(16,23,49,.86)),
    linear-gradient(180deg,rgba(27,37,71,.30),transparent 42%);
}

.hero__portant{position:relative;z-index:2}
.hero__barre{
  position:absolute;left:0;right:0;top:12px;
  height:5px;z-index:1;pointer-events:none;
  border-radius:3px;
  background:linear-gradient(180deg,
    rgba(255,255,255,.78) 0,
    rgba(197,206,230,.62) 40%,
    rgba(16,23,49,.42) 100%);
  box-shadow:0 2px 6px rgba(16,23,49,.45);
}

.hero__grille{
  position:relative;z-index:2;
  display:grid;gap:40px;
}
@media (min-width:62rem){
  .hero__grille{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:start;gap:56px}
}

.hero__suspendu,.hero__figure{position:relative;padding-top:48px}

.hero__crochet{
  position:absolute;top:0;left:clamp(20px,4vw,48px);z-index:3;
  display:block;width:30px;height:48px;
  color:rgba(233,237,248,.92);
  filter:drop-shadow(0 2px 4px rgba(16,23,49,.55));
}
.hero__figure .hero__crochet{left:auto;right:clamp(20px,4vw,48px)}
.hero__crochet path{fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round}

.hero__housse{
  position:relative;
  padding:clamp(28px,4vw,44px) clamp(22px,3vw,40px) clamp(28px,4vw,40px);
  border-radius:var(--rayon-epaule) var(--rayon-epaule) var(--rayon) var(--rayon);
  background:color-mix(in srgb,var(--nuit) 92%,transparent);
  -webkit-backdrop-filter:blur(16px) saturate(115%);
  backdrop-filter:blur(16px) saturate(115%);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),var(--ombre-haute);
  overflow:hidden;
  transform-origin:top center;
  animation:balance 5.6s cubic-bezier(.37,0,.63,1) 3 forwards;
}
.hero__housse::before{
  content:"";position:absolute;top:-20%;left:-10%;
  width:46%;height:150%;
  transform:skewX(-14deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent);
  pointer-events:none;
}
@keyframes balance{
  0%  {transform:rotate(.42deg)}
  25% {transform:rotate(-.30deg)}
  50% {transform:rotate(.18deg)}
  75% {transform:rotate(-.08deg)}
  100%{transform:rotate(0deg)}
}

.hero__etiquette{
  margin:0 0 14px;
  font-size:.76rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--cuivre);
}
.hero__titre{color:var(--lin);display:block}
.hero__accent{
  display:block;
  font-family:var(--police-titre);
  font-size:clamp(2.5rem,1.5rem + 3.6vw,4.4rem);
  line-height:1.1;
  color:var(--cuivre);          /* le seul mot d'accent de la page */
}
.hero__intro{
  margin:20px 0 0;max-width:36rem;
  font-family:var(--police-titre);
  font-size:clamp(1.06rem,1rem + .45vw,1.26rem);
  line-height:1.55;
  color:var(--lin);
}
.hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}

:root{--cadre-photo:clamp(7px,.85vw,11px)}
.hero__figure{margin:0}
.hero__cadre{
  border-radius:
    calc(var(--rayon-epaule) + var(--cadre-photo))
    calc(var(--rayon-epaule) + var(--cadre-photo))
    calc(var(--rayon) + var(--cadre-photo))
    calc(var(--rayon) + var(--cadre-photo));
  overflow:hidden;
  border:var(--cadre-photo) solid var(--lin);
  box-shadow:var(--ombre-haute);
}
.hero__cadre img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:82% 50%}
@media (max-width:61.99rem){
  .hero__figure{display:none}   /* sous 992 px, la housse de texte suffit */
}

.housses{
  --gap-housses:clamp(16px,2.4vw,28px);
  position:relative;z-index:1;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:56px var(--gap-housses);   /* 56 px entre les rangées : la hauteur d'un crochet */
}
@media (min-width:60rem){
  .housses{grid-template-columns:repeat(4,minmax(0,1fr))}
}

.housse{position:relative;padding-top:48px}
.housse__portant{
  position:absolute;top:12px;z-index:1;
  left:calc(var(--gap-housses) / -2 - 3px);
  right:calc(var(--gap-housses) / -2 - 3px);
  height:5px;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(255,255,255,.95) 0,
    #c5cee6 45%,
    rgba(16,23,49,.30) 100%);
  box-shadow:0 2px 5px rgba(16,23,49,.18);
}
.housse:nth-child(odd) .housse__portant{border-radius:3px 0 0 3px}
.housse:nth-child(even) .housse__portant{border-radius:0 3px 3px 0}
@media (min-width:60rem){
  .housse:nth-child(odd) .housse__portant,
  .housse:nth-child(even) .housse__portant{border-radius:0}
  .housse:first-child .housse__portant{border-radius:3px 0 0 3px}
  .housse:last-child .housse__portant{border-radius:0 3px 3px 0}
}

.housse__crochet{
  position:absolute;top:0;left:50%;z-index:2;
  width:30px;height:48px;margin-left:-15px;
  color:#7f8bab;
  filter:drop-shadow(0 2px 3px rgba(16,23,49,.22));
}
.housse__crochet path{fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round}

.housse__panneau{
  position:relative;height:100%;
  padding:clamp(20px,2.4vw,28px);
  border-radius:var(--rayon-epaule) var(--rayon-epaule) var(--rayon) var(--rayon);
  background-image:linear-gradient(180deg,rgba(255,255,255,.96),rgba(255,255,255,.72));
  background-color:rgba(255,255,255,.72);
  border:1px solid rgba(255,255,255,.92);
  box-shadow:var(--ombre);
  overflow:hidden;
  transform-origin:top center;
  transition:transform var(--transition),box-shadow var(--transition),
             opacity 460ms ease;
}
.housse__panneau::before{
  content:"";position:absolute;top:-30%;left:-14%;
  width:52%;height:170%;
  transform:skewX(-14deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.72),transparent);
  opacity:.5;pointer-events:none;
  transition:transform 420ms cubic-bezier(.22,.61,.36,1);
}
.housse__panneau:hover{box-shadow:var(--ombre-haute)}
.housse__panneau:hover::before{transform:skewX(-14deg) translateX(190%)}

.housse h3{margin:0 0 8px;color:var(--encre);position:relative}
.housse p{margin:0;color:var(--encre-douce);font-size:.94rem;line-height:1.55;position:relative}
@media (max-width:29.99rem){
  .housse__panneau{padding:16px 14px}
  .housse p{font-size:.86rem;line-height:1.5}
}

.etiquette__grille{
  position:relative;z-index:1;
  display:grid;gap:clamp(32px,5vw,56px);
  align-items:center;
}
@media (min-width:56rem){
  .etiquette__grille{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)}
}

.etiquette__objet{
  position:relative;
  justify-self:center;
  width:min(100%,480px);
  padding:36px 30px 26px;
  border-radius:6px;
  background-color:#f7f4ec;
  background-color:var(--lin);
  transform:rotate(-1.1deg);
  box-shadow:0 1px 2px rgba(16,23,49,.28),0 18px 40px rgba(0,0,0,.42);
}
.etiquette__objet::before{
  content:"";position:absolute;inset:6px;
  border:1px dashed rgba(16,23,49,.30);
  border-radius:3px;pointer-events:none;
}
.etiquette__objet::after{
  content:"";position:absolute;left:14%;right:14%;top:-9px;height:12px;
  border-radius:3px 3px 0 0;
  background:linear-gradient(180deg,#fffdf7,#ded8c9);
  box-shadow:0 -1px 2px rgba(0,0,0,.22);
}
.etiquette__sigles{
  display:flex;align-items:center;justify-content:space-between;
  gap:10px;
}
.etiquette__sigles svg{
  width:clamp(42px,10vw,62px);height:auto;
  color:var(--nuit);flex:0 0 auto;
}
.etiquette__sigles svg path,
.etiquette__sigles svg rect,
.etiquette__sigles svg circle{
  fill:none;stroke:currentColor;stroke-width:3.2;
  stroke-linejoin:round;stroke-linecap:round;
}
.etiquette__sigles svg text{
  fill:currentColor;stroke:none;
  font-family:var(--police-libelle);font-size:26px;font-weight:600;
}
.section--nuit .etiquette__mention,
.etiquette__mention{
  margin:18px 0 0;
  text-align:center;
  font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(16,23,49,.74);      /* 6,7:1 sur l'écru — mesuré au rendu */
}
.etiquette__texte p{max-width:34rem}
.etiquette__texte .intro{
  font-family:var(--police-titre);
  font-size:clamp(1.08rem,1rem + .5vw,1.3rem);
  line-height:1.55;
  color:var(--lin);
  margin-top:16px;
}

.delicat{position:relative}
.delicat__grille{
  position:relative;z-index:1;
  display:grid;
}
@media (min-width:62rem){
  .delicat__grille{grid-template-columns:minmax(0,1fr) minmax(0,.82fr);align-items:stretch}
}
.delicat__texte{
  padding-block:clamp(64px,8vw,112px);
  padding-inline:var(--gouttiere);
  max-width:calc(var(--colonne) / 1.72);
  margin-left:auto;
}
@media (max-width:61.99rem){
  .delicat__texte{max-width:var(--colonne);margin-inline:auto}
}
.delicat__figure{margin:0;position:relative;z-index:1;min-height:clamp(300px,50vw,640px)}
.delicat__figure img{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;
}
@media (max-width:61.99rem){
  .delicat__figure{min-height:280px}
}

.matieres{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.matieres li{
  position:relative;
  padding:8px 16px;
  border-radius:var(--rayon-bouton);
  background:rgba(255,255,255,.78);
  border:1px solid var(--filet);
  box-shadow:0 1px 2px rgba(16,23,49,.09);
  font-size:.9rem;
  color:var(--encre);
}

.apropos{
  position:relative;z-index:1;
  display:grid;gap:clamp(32px,5vw,64px);align-items:center;
}
@media (min-width:56rem){
  .apropos{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
.apropos__figure{margin:0}
.apropos__figure img{
  width:100%;aspect-ratio:1/1;object-fit:cover;object-position:100% 50%;
  border-radius:
    calc(var(--rayon-epaule) + var(--cadre-photo))
    calc(var(--rayon-epaule) + var(--cadre-photo))
    calc(var(--rayon) + var(--cadre-photo))
    calc(var(--rayon) + var(--cadre-photo));
  border:var(--cadre-photo) solid var(--marque);
  box-shadow:var(--ombre-haute);
}
.apropos__texte p{color:var(--encre-douce);max-width:34rem}

.contact__grille{position:relative;z-index:1;max-width:60rem;margin-inline:auto}
.contact__carte{
  padding:clamp(28px,4vw,48px);
  border-radius:var(--rayon-epaule) var(--rayon-epaule) var(--rayon) var(--rayon);
  background-color:var(--carte);
  border:1px solid rgba(255,255,255,.9);
  box-shadow:var(--ombre);
}
.contact__phrase{
  font-family:var(--police-titre);
  font-size:clamp(1.06rem,1rem + .45vw,1.24rem);
  line-height:1.55;
  color:var(--encre-douce);
  margin:0 0 28px;
}

.plaques{display:grid;gap:12px;margin-bottom:32px}
@media (min-width:36rem){.plaques{grid-template-columns:repeat(2,minmax(0,1fr))}}
.plaque{
  display:flex;flex-direction:column;gap:2px;
  min-height:64px;padding:12px 20px;justify-content:center;
  border-radius:var(--rayon-bouton);
  background-image:linear-gradient(180deg,var(--marque),var(--marque-fonce));
  background-color:var(--marque);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:var(--ombre);
  color:#fff;text-decoration:none;
  transition:transform var(--transition),box-shadow var(--transition);
}
.plaque:hover{box-shadow:var(--ombre-haute)}
.plaque__quoi{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;opacity:.86}
.plaque__num{font-size:1.16rem;font-weight:600;letter-spacing:.01em}

.fiche{margin-top:28px}
.fiche__titre{
  margin:0 0 12px;
  font-family:var(--police-libelle);
  font-size:.74rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--encre-douce);
}
.tableau{margin:0;border-top:1px solid var(--filet)}
.tableau__ligne{
  display:grid;grid-template-columns:minmax(6.5rem,.42fr) minmax(0,1fr);
  gap:12px;
  padding:10px 0;
  border-bottom:1px solid var(--filet);
}
.tableau dt{color:var(--encre-douce);font-size:.88rem}
.tableau dd{margin:0;color:var(--encre);font-size:.95rem}
.tableau a{color:var(--marque)}
.tableau__ligne--ferme dd{color:var(--encre-douce)}
.tableau__ligne--aujourdhui{background:rgba(44,68,137,.06)}
.tableau__ligne--aujourdhui dd{font-weight:600}
.tableau__aujourdhui{
  display:inline-block;margin-left:8px;
  font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--marque);
}
.fiche__note{margin:12px 0 0;font-size:.88rem;color:var(--encre-douce)}

.fiches{display:grid;gap:clamp(20px,3vw,40px)}
@media (min-width:52rem){.fiches{grid-template-columns:repeat(2,minmax(0,1fr))}}
.fiches .fiche:first-child{margin-top:0}
@media (min-width:52rem){.fiches .fiche{margin-top:0}}

.pied{
  position:relative;
  background-color:var(--nuit);
  color:var(--lin);
  padding-block:clamp(48px,6vw,80px);
  text-align:center;
}
.pied__nom{
  margin:20px 0 4px;
  font-family:var(--police-titre);
  font-size:clamp(1.5rem,1.2rem + 1.2vw,2.1rem);
  letter-spacing:.04em;
  color:var(--lin);
}
.pied__lieu{
  margin:0 0 28px;
  font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--lin-doux);
}
.pied__bas{border-top:1px solid rgba(243,239,230,.12);padding-top:20px}
.pied__credit{margin:0;font-size:.84rem;color:var(--lin-doux)}
.pied__credit a{color:var(--cuivre)}
.pied .assise{margin-inline:auto}

html.js .reveal{
  opacity:0;
  transform:translateY(16px);
  transition:opacity 460ms ease,transform 460ms cubic-bezier(.22,.61,.36,1);
}
html.js .reveal.est-vu{opacity:1;transform:none}

html.js .housse:nth-child(2) .housse__panneau{transition-delay:80ms}
html.js .housse:nth-child(3) .housse__panneau{transition-delay:160ms}
html.js .housse:nth-child(4) .housse__panneau{transition-delay:240ms}

@media (prefers-reduced-motion:reduce){
  .hero__housse{animation:none;transform:rotate(0deg)}
  html.js .reveal{transform:none;transition:opacity 300ms ease}
  html.js .reveal.est-vu{transform:none}
  .assise{transition:none;transform:scaleX(1)}
  .housse__panneau:hover{box-shadow:var(--ombre-haute);border-color:var(--marque)}
  .housse__panneau:hover::before{transform:skewX(-14deg)}
  html.js .housse:nth-child(n) .housse__panneau{transition-delay:0ms}
}

@media print{
  .ruban,.entete,.hero__fond,.hero__barre,.hero__crochet,
  .housse__portant,.housse__crochet,main > section::after{display:none}
  .housse,.hero__suspendu,.hero__figure{padding-top:0}
  body{background:#fff;color:#000}
  .hero,.section--nuit,.pied{background:#fff;color:#000}
  .hero__housse{backdrop-filter:none;background:#fff;border:1px solid #999;animation:none}
  .hero__titre,.hero__accent,.hero__intro,.section--nuit h2,.section--nuit p,.pied__nom{color:#000}
  .housse,.contact__carte{box-shadow:none;border:1px solid #999}
  html.js .reveal{opacity:1;transform:none}
}

@media (max-width:600px){
  .hero{display:block;padding-top:0}
  .hero__fond{position:relative;inset:auto;
    height:min(36vh,268px);margin-bottom:clamp(20px,5vw,28px)}
  .hero__fond::after{
    background:linear-gradient(180deg,rgba(16,23,49,.10),rgba(16,23,49,.34));
  }
}

.entete .bande{background-color:rgba(16,23,49,0.76)}
.entete{margin-bottom:-64px}
