/* =========================================================
   Atelier Noir - feuille de style unique
   Palette noir / or relevee sur la maquette du 03/09/2026.
   Aucune dependance externe hors Google Fonts.
   ========================================================= */

:root{
  --noir:#0c0c0b;
  --noir-2:#111110;
  --noir-3:#161513;
  --carte:rgba(255,255,255,.022);
  --carte-bord:rgba(201,160,99,.28);
  --or:#c9a063;
  --or-clair:#e2c08c;
  --or-ico:#c9a063;
  --or-sombre:#8a6b40;
  --ivoire:#f2ece1;
  --texte:#e6e1d7;
  --texte-doux:#aca69c;
  --texte-faible:#767068;
  --ligne:rgba(255,255,255,.075);
  --serif:"Playfair Display",Georgia,"Times New Roman",serif;
  --sans:"Barlow",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --script:"Allura","Snell Roundhand",cursive;
  --max:1400px;
  --pad:clamp(1.25rem,4vw,3.25rem);
  --r:1px;
}

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

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

body{
  margin:0;
  background:var(--noir);
  color:var(--texte);
  font-family:var(--sans);
  font-size:1rem;
  line-height:1.65;
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.08;margin:0;letter-spacing:-.005em}
p{margin:0}

::selection{background:var(--or);color:#100c05}
:focus-visible{outline:2px solid var(--or-clair);outline-offset:3px}

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

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* le lien d'evitement doit redevenir visible des qu'il recoit le focus */
.sr-only:focus{
  position:fixed;top:12px;left:12px;z-index:100;
  width:auto;height:auto;margin:0;overflow:visible;clip:auto;
  background:var(--noir-2);color:var(--ivoire);
  border:1px solid var(--or);padding:.75rem 1.15rem;
  font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;
}

/* ---------- vocabulaire commun ---------- */

.surtitre{
  font-size:.72rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--or);font-weight:500;margin:0 0 1.15rem;
}

.titre-section{font-size:clamp(1.75rem,3.1vw,2.5rem);margin:0 0 1rem;color:var(--ivoire)}
.chapeau{color:var(--texte-doux);font-size:1rem;max-width:60ch}

.filet{width:62px;height:1px;background:var(--or);margin:1.3rem 0 1.5rem;opacity:.85}

.insecable{white-space:nowrap}

.entete-section{margin-bottom:clamp(2.5rem,5vw,4rem);max-width:70ch}

section{position:relative}

.section{padding-block:clamp(3.5rem,8vw,6.5rem)}
.section--sombre{background:var(--noir-2)}

/* ---------- boutons ---------- */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.7rem;
  font-family:var(--sans);font-size:.78rem;font-weight:500;
  letter-spacing:.15em;text-transform:uppercase;
  padding:1rem 2rem;border-radius:var(--r);border:1px solid transparent;
  cursor:pointer;transition:background .25s,color .25s,border-color .25s,transform .25s;
}
.btn svg{width:17px;height:17px;flex-shrink:0}

/* bouton plein or de la maquette : degrade sable, liseré clair */
.btn--or{
  background:linear-gradient(180deg,#c7a273,#a98150);
  color:#f6f1e7;border-color:var(--or-clair);
}
.btn--or:hover{background:linear-gradient(180deg,#d5b184,#b98f5c);transform:translateY(-1px)}

/* bouton ligne de la maquette : fond translucide, filet clair */
.btn--ligne{background:rgba(12,12,11,.35);color:var(--texte);border-color:rgba(255,255,255,.42)}
.btn--ligne:hover{border-color:var(--or-clair);color:var(--or-clair)}

/* variante a filet or (colonne rendez-vous) */
.btn--or-ligne{background:transparent;color:var(--texte);border-color:var(--carte-bord)}
.btn--or-ligne:hover{border-color:var(--or);color:var(--or-clair)}

.btn--large{width:100%}

/* ---------- en-tete ---------- */

.entete{
  position:fixed;inset:0 0 auto;z-index:60;
  background:rgba(12,12,11,0);
  border-bottom:1px solid transparent;
  transition:background .3s,border-color .3s,backdrop-filter .3s;
}
.entete.est-collee{
  background:rgba(12,12,11,.93);
  backdrop-filter:saturate(140%) blur(14px);
  -webkit-backdrop-filter:saturate(140%) blur(14px);
  border-bottom-color:var(--ligne);
}
.entete__barre{display:flex;align-items:center;gap:1.5rem;min-height:88px}

.marque{display:inline-flex;align-items:center;gap:.95rem;color:var(--texte)}
.marque__signe{width:40px;height:34px;color:var(--or);flex-shrink:0}
.marque__nom{
  display:block;font-size:1.02rem;font-weight:300;letter-spacing:.28em;
  text-transform:uppercase;line-height:1.1;color:var(--ivoire);white-space:nowrap;
}
.marque__sous{
  display:block;font-size:.6rem;font-weight:300;letter-spacing:.32em;
  text-transform:uppercase;color:var(--texte-faible);margin-top:.3rem;white-space:nowrap;
}

.nav{display:flex;align-items:center;gap:clamp(1.2rem,2.4vw,2.6rem);margin-inline:auto}
.nav a{
  font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;font-weight:400;
  color:var(--texte-doux);padding-block:.45rem;position:relative;transition:color .22s;
}
.nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;
  background:var(--or);transform:scaleX(0);transform-origin:left;transition:transform .28s;
}
.nav a:hover,.nav a[aria-current="page"]{color:var(--ivoire)}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}

.entete .btn{padding:.85rem 1.7rem;font-size:.72rem}

.burger{display:none;background:none;border:0;padding:.5rem;cursor:pointer;color:var(--texte);margin-left:auto}
.burger svg{width:24px;height:24px}

@media (max-width:1180px){
  .nav{gap:1.15rem}
  .nav a{font-size:.72rem;letter-spacing:.1em}
  .entete .btn{padding:.8rem 1.2rem;font-size:.68rem}
}
@media (max-width:1050px){
  .nav,.entete__cta{display:none}
  .burger{display:block}
  .entete{background:rgba(12,12,11,.93);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
  .entete__barre{min-height:70px}
}

/* menu mobile */
.menu-mobile{
  position:fixed;inset:0;z-index:70;background:var(--noir);
  display:flex;flex-direction:column;justify-content:center;
  padding:var(--pad);
  transform:translateY(-100%);
  /* menu ferme : sorti du parcours de tabulation, sinon ses liens restent
     atteignables au clavier alors qu'ils sont hors de l'ecran et aria-hidden */
  visibility:hidden;
  transition:transform .4s cubic-bezier(.7,0,.2,1),visibility 0s linear .4s;
}
.menu-mobile[data-ouvert="true"]{
  transform:translateY(0);visibility:visible;
  transition:transform .4s cubic-bezier(.7,0,.2,1),visibility 0s linear 0s;
}
.menu-mobile__fermer{
  position:absolute;top:16px;right:var(--pad);
  background:none;border:0;color:var(--texte);cursor:pointer;padding:.5rem;
}
.menu-mobile__fermer svg{width:26px;height:26px}
.menu-mobile a{
  font-family:var(--serif);font-size:1.9rem;padding-block:.5rem;
  border-bottom:1px solid var(--ligne);color:var(--ivoire);
}
/* display:grid : les liens sont des <a>, donc en ligne par defaut. Sans cette
   ligne ils s'enchainent en paragraphe (« Accueil Prestations Le salon
   Galerie... ») au lieu de former la liste que dessinent leurs filets. */
.menu-mobile nav{display:grid}
.menu-mobile a:last-of-type{border-bottom:0}
/* le bouton est lui aussi un <a> : sans cette regle il herite du 1,9rem en
   Playfair des liens du menu et sort en capitales de 30 px sur trois lignes */
.menu-mobile .btn{
  margin-top:1.8rem;font-family:var(--sans);font-size:.78rem;font-weight:500;
  letter-spacing:.15em;padding:1rem 2rem;border-bottom:0;
}

/* ---------- heros ---------- */

.heros{
  position:relative;display:flex;align-items:center;overflow:hidden;
  min-height:max(620px,88svh);padding-top:88px;padding-bottom:clamp(5rem,10vw,8rem);
}
.heros__image{position:absolute;inset:0;z-index:0}
.heros__image img{width:100%;height:100%;object-fit:cover;object-position:64% 50%}
.heros__voile{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(90deg,rgba(10,10,9,.97) 0%,rgba(10,10,9,.90) 32%,rgba(10,10,9,.45) 62%,rgba(10,10,9,.12) 100%),
    linear-gradient(0deg,var(--noir) 0%,rgba(10,10,9,0) 42%);
}

.heros__contenu{position:relative;z-index:2;width:100%}
.heros__texte{max-width:min(38rem,52vw)}
.heros .surtitre{font-size:clamp(.62rem,.85vw,.78rem);letter-spacing:.28em;margin-bottom:1.6rem}
.heros h1{
  font-size:clamp(2.4rem,4.6vw,4.4rem);line-height:1.02;margin:0;
  color:var(--ivoire);letter-spacing:-.01em;
}
.heros h1 em{font-style:normal;color:var(--or)}
.heros__accroche{color:var(--texte-doux);font-size:clamp(.98rem,1.15vw,1.08rem);line-height:1.7;max-width:34ch}
.heros__actions{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.4rem;margin-top:2.4rem}

/* Le heros en reduction est traite dans le bloc de fin de feuille : le texte
   reste POSE SUR l'image et garde la largeur relative du grand ecran. */
@media (max-width:1050px){
  .heros{min-height:max(600px,86svh);padding-top:70px}
  .heros__image img{object-position:70% 50%}
  .heros__voile{
    background:
      linear-gradient(90deg,rgba(10,10,9,.95) 0%,rgba(10,10,9,.82) 45%,rgba(10,10,9,.42) 100%),
      linear-gradient(0deg,var(--noir) 2%,rgba(10,10,9,0) 55%);
  }
}

/* ---------- bande des prestations ---------- */

.prestations{position:relative;z-index:3;margin-top:clamp(-7rem,-5vw,-2.5rem)}
.prestations__grille{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  background:rgba(14,14,12,.80);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid var(--carte-bord);
}
.prestation{
  display:flex;gap:1.35rem;align-items:flex-start;
  padding:2rem 1.8rem;border-right:1px solid rgba(201,160,99,.18);
}
.prestation:last-child{border-right:0}
.prestation__ico{width:46px;height:46px;color:var(--or-ico);flex-shrink:0;margin-top:.1rem}
.prestation h3{
  font-family:var(--sans);font-size:.8rem;font-weight:500;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ivoire);margin:0 0 .6rem;
}
.prestation p{color:var(--texte-doux);font-size:.88rem;line-height:1.6}

/* La rangee de quatre reste une rangee de quatre a toutes les largeurs :
   voir le bloc de reduction en fin de feuille. */

/* ---------- bande du salon : quatre colonnes ---------- */

.salon{border-block:1px solid rgba(201,160,99,.22);background:var(--noir-2)}
.salon__grille{
  display:grid;grid-template-columns:1.5fr 1.05fr .9fr 1.1fr;
  max-width:1760px;margin-inline:auto;
}
/* marges interieures relevees sur la maquette (36 px a 1440) : au-dela, les titres
   des colonnes se brisent en trois ou quatre lignes la ou la maquette en montre deux */
.salon__colonne{border-left:1px solid rgba(201,160,99,.18);padding:clamp(1.75rem,2.5vw,2.5rem)}
.salon__colonne:first-child{border-left:0;padding:0;display:grid;grid-template-columns:minmax(0,.36fr) minmax(0,.64fr)}
.salon__texte{padding:clamp(1.75rem,2.5vw,2.5rem)}

.salon h2{font-size:clamp(1.45rem,1.95vw,1.85rem);color:var(--ivoire);line-height:1.14}
.salon p{color:var(--texte-doux);font-size:.94rem;line-height:1.72}
.salon .surtitre{font-size:.68rem;letter-spacing:.24em}

.signature{
  font-family:var(--script);font-size:2rem;line-height:1.2;color:var(--or);
  margin-top:1.9rem;font-weight:400;
}

/* photo du salon (bloc de reserve tant que l'image n'existe pas) */
.salon__photo{position:relative;min-height:340px;background:var(--noir-3);overflow:hidden}
.salon__photo img{width:100%;height:100%;object-fit:cover}

.reserve{
  position:relative;display:grid;place-items:center;
  background:
    repeating-linear-gradient(135deg,rgba(201,160,99,.05) 0 10px,transparent 10px 20px),
    var(--noir-3);
  border:1px dashed rgba(201,160,99,.30);
  color:var(--texte-faible);
  text-align:center;padding:1.5rem;
}
.reserve span{
  display:block;font-size:.63rem;letter-spacing:.2em;text-transform:uppercase;line-height:1.9;
}
.reserve svg{width:26px;height:26px;color:var(--or-sombre);margin:0 auto .8rem}

/* savoir-faire */
.savoir{list-style:none;margin:1.8rem 0 0;padding:0;display:grid;gap:1.5rem}
.savoir li{display:flex;gap:1.1rem;align-items:flex-start}
.savoir svg{width:34px;height:34px;color:var(--or-ico);flex-shrink:0;margin-top:.1rem}
.savoir h3{
  font-family:var(--sans);font-size:.82rem;font-weight:500;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ivoire);margin:0 0 .25rem;
}
.savoir p{font-size:.88rem;line-height:1.6}

/* colonne « ce que propose la maison » (remplace le temoignage invente de la maquette) */
.engagement{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.engagement__guillemet{
  font-family:var(--serif);font-size:3.4rem;line-height:.6;color:var(--or);
  margin-bottom:1.6rem;display:block;
}
/* selecteurs a deux classes : « .salon p » (0,1,1) l'emporterait sinon sur une
   classe seule et imposerait sa taille .94rem et sa couleur douce aux deux lignes */
.engagement .engagement__phrase{
  margin:0;font-family:var(--serif);font-style:italic;font-size:1.16rem;line-height:1.6;
  color:var(--ivoire);max-width:24ch;
}
.engagement__filet{width:64px;height:1px;background:var(--or);opacity:.8;margin:1.9rem 0 1.4rem}
.engagement .engagement__nom{
  font-size:.72rem;line-height:1.65;letter-spacing:.22em;text-transform:uppercase;color:var(--texte);
}
.engagement__ornement{display:flex;align-items:center;gap:.5rem;margin-top:1rem;color:var(--or)}
.engagement__ornement svg{width:13px;height:13px}

/* horaires et rendez-vous */
.horaires{list-style:none;margin:1.4rem 0 0;padding:0;display:grid;gap:.65rem}
.horaires li{display:flex;justify-content:space-between;gap:1.2rem;font-size:.94rem;color:var(--texte-doux)}
.horaires b{font-weight:400;color:var(--texte)}
.horaires span{color:var(--texte-doux);text-align:right}
.salon__separation{height:1px;background:rgba(201,160,99,.28);margin:2rem 0}
.rdv__tel{display:inline-flex;align-items:center;gap:.8rem;margin-top:1.3rem;font-size:1rem;color:var(--texte);letter-spacing:.06em}
.rdv__tel svg{width:18px;height:18px;color:var(--or);flex-shrink:0}
.rdv__tel:hover{color:var(--or-clair)}
.salon .btn{margin-top:1.5rem;width:100%}

/* Les quatre colonnes tiennent jusqu'a 700 px, puis passent en deux par deux :
   voir le bloc de reduction en fin de feuille, avec la mesure qui le justifie. */

/* ---------- galerie ---------- */

.galerie__grille{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(6px,1.1vw,14px);
}
.galerie__case{position:relative;aspect-ratio:4/5;background:var(--noir-3)}
.galerie__case img{width:100%;height:100%;object-fit:cover}
.galerie__case .reserve{position:absolute;inset:0;border:0}
/* Quatre vignettes en rangee a toutes les largeurs : bloc de reduction. */

/* ---------- reservation ---------- */

.reservation{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2.5rem,6vw,5rem)}
/* Texte a gauche, formulaire a droite a toutes les largeurs : bloc de reduction. */

.voies{list-style:none;margin:2.2rem 0 0;padding:0;display:grid;gap:1.4rem}
.voies li{display:flex;gap:1.1rem;align-items:flex-start}
.voies svg{width:19px;height:19px;color:var(--or);flex-shrink:0;margin-top:.4rem}
.voies span{display:block;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--texte-faible);margin-bottom:.15rem}
.voies a,.voies p{font-size:1.02rem;color:var(--texte)}
.voies a:hover{color:var(--or-clair)}

.form{display:grid;gap:1.25rem}
.form__duo{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem}
.champ{display:grid;gap:.5rem}
.champ label{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--texte-faible)}
.champ input,.champ select,.champ textarea{
  width:100%;background:rgba(255,255,255,.03);color:var(--texte);
  border:1px solid var(--ligne);border-radius:var(--r);
  padding:.9rem 1rem;font-family:var(--sans);font-size:.98rem;font-weight:300;
  transition:border-color .25s,background .25s;
}
.champ textarea{min-height:130px;resize:vertical}
.champ input:focus,.champ select:focus,.champ textarea:focus{
  outline:none;border-color:var(--or);background:rgba(255,255,255,.05);
}
.champ select{
  appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,#c9a063 50%),linear-gradient(135deg,#c9a063 50%,transparent 50%);
  background-position:calc(100% - 19px) 50%,calc(100% - 14px) 50%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
}
.champ select option{background:var(--noir-2);color:var(--texte)}
.form__pot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form__mention{font-size:.8rem;color:var(--texte-faible);line-height:1.6}
.form__etat{font-size:.9rem;color:var(--or-clair);min-height:1.4em}

/* ---------- barre de contact ---------- */

.barre{border-top:1px solid rgba(201,160,99,.22);background:var(--noir-2)}
.barre__grille{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:1.2rem 2.5rem;padding-block:1.5rem;
}
.barre__item{display:inline-flex;align-items:center;gap:.85rem;font-size:.76rem;letter-spacing:.13em;text-transform:uppercase;color:var(--texte-doux)}
.barre__item svg{width:19px;height:19px;color:var(--or);flex-shrink:0}
.barre__item a:hover{color:var(--or-clair)}
.barre__reseaux{display:inline-flex;align-items:center;gap:1.1rem}
.barre__reseaux a{color:var(--texte-doux);transition:color .22s}
.barre__reseaux a:hover{color:var(--or-clair)}
.barre__reseaux svg{width:19px;height:19px}
.barre__suivez{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--texte-faible)}
/* Quatre reperes en rangee, puis deux par deux sous 620 px : bloc de reduction. */

/* ---------- pied de page ---------- */

.pied{border-top:1px solid var(--ligne);background:var(--noir);padding-block:3.2rem 1.8rem}
.pied__haut{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:2.5rem;padding-bottom:2.4rem;border-bottom:1px solid var(--ligne)}
/* Trois colonnes a toutes les largeurs : bloc de reduction. */
.pied .marque{margin-bottom:1.1rem}
.pied p{color:var(--texte-doux);font-size:.9rem;max-width:44ch}
.pied h4{font-family:var(--sans);font-size:.68rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--or-clair);margin:0 0 1.05rem}
.pied ul{list-style:none;margin:0;padding:0;display:grid;gap:.65rem}
.pied ul a{font-size:.9rem;color:var(--texte-doux);transition:color .22s}
.pied ul a:hover{color:var(--texte)}
.pied__bas{display:flex;flex-wrap:wrap;gap:.8rem 2rem;justify-content:space-between;padding-top:1.7rem}
.pied__bas p,.pied__bas a{font-size:.78rem;color:var(--texte-faible)}
.pied__bas a:hover{color:var(--texte-doux)}

/* ---------- apparition au defilement ---------- */

.js .apparait{opacity:0;transform:translateY(20px);transition:opacity .7s ease,transform .7s ease}
.js .apparait.est-visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js .apparait{opacity:1;transform:none;transition:none}
}

/* ---------- page annexe ---------- */

.page-texte{padding-block:clamp(7rem,14vh,10rem) clamp(4rem,8vw,6rem)}
.page-texte h1{font-size:clamp(2rem,5vw,3rem);margin-bottom:2rem;color:var(--ivoire)}
.page-texte h2{font-size:1.35rem;margin:2.6rem 0 .9rem;color:var(--or-clair)}
.page-texte p,.page-texte li{color:var(--texte-doux);font-size:.97rem}
.page-texte p+p{margin-top:.8rem}
.page-texte ul{padding-left:1.2rem;display:grid;gap:.5rem;margin:.6rem 0 0}
.page-texte a{color:var(--or-clair);text-decoration:underline;text-underline-offset:3px}
.page-texte .bloc{max-width:78ch}

/* =========================================================
   LA MEME PAGE, EN REDUCTION
   ---------------------------------------------------------
   Principe : l'ecran de reference fait 1280 px. Toute valeur ci-dessous est
   la mesure relevee sur ce grand ecran divisee par 12,8, donc exprimee en vw.
   La page garde ainsi EXACTEMENT sa composition - rangee de quatre
   prestations, bande du salon dont la premiere colonne est une photo a gauche
   et un texte a droite, galerie de quatre vignettes en ligne, texte a gauche
   et formulaire a droite, quatre reperes de contact en ligne, pied en trois
   colonnes, deux mentions cote a cote - et ne fait que retrecir. Rien ne
   change de place ni d'ordre.
   Chaque clamp() porte un PLANCHER EN PIXELS : sans lui, a 375 px, 1,1vw
   tomberait a 4 px. Le plancher est a 11 px pour tout texte courant.
   minmax(0,1fr) sur toutes les grilles etroites : sans lui un mot insecable
   impose sa largeur a sa colonne et pousse la grille hors de l'ecran.
   L'interlettrage des capitales du grand ecran (.15em a .32em) est ramene a
   une valeur faible : a 11 px il vaut jusqu'a 3,5 px par signe, soit plus de
   la moitie d'une lettre, et c'est LUI, pas la taille, qui fait deborder les
   libelles. Une taille ecrite en dur (11px, sans clamp) signale une valeur
   deja sous le plancher a 1050 px : elle vaut 11 px sur toute la plage.
   Ce bloc s'arrete a 1050 px, la ou l'en-tete passe deja au menu bouton :
   au-dessus, le grand ecran n'est pas touche d'un pixel.
   ========================================================= */
@media (max-width:1050px){

  /* --- vocabulaire commun --- */
  .contenu{padding-inline:clamp(12px,4vw,52px)}
  .section{padding-block:clamp(24px,8vw,104px)}
  .surtitre{font-size:11px;letter-spacing:.14em;margin-bottom:clamp(6px,1.44vw,18.4px)}
  .titre-section{font-size:clamp(13px,3.1vw,40px);margin-bottom:clamp(5px,1.25vw,16px)}
  .chapeau{font-size:clamp(11px,1.25vw,16px);line-height:1.5}
  .filet{width:clamp(14px,4.84vw,62px);margin:clamp(6px,1.63vw,20.8px) 0 clamp(7px,1.88vw,24px)}
  .entete-section{margin-bottom:clamp(14px,5vw,64px)}
  /* la marge de l'en-tete de galerie est posee en style en ligne dans le HTML :
     on la met a l'echelle sans toucher au HTML */
  .galerie .entete-section[style]{margin-bottom:clamp(12px,4vw,48px)!important}

  .btn{
    font-size:clamp(11px,.975vw,12.48px);letter-spacing:.08em;
    gap:clamp(4px,.875vw,11.2px);
    padding:clamp(6px,1.25vw,16px) clamp(8px,2.5vw,32px);
  }
  .btn svg{width:clamp(11px,1.33vw,17px);height:clamp(11px,1.33vw,17px)}

  /* l'en-tete garde ses dimensions : c'est du mobilier, pas de la composition.
     Seul le sous-titre remonte au plancher de 11 px, son interlettrage etant
     reduit d'autant pour qu'il reste plus court que le nom au-dessus. */
  .entete .marque__sous{font-size:11px;letter-spacing:.12em}

  /* --- heros : le texte reste POSE SUR l'image, a gauche, et garde la
     largeur relative du grand ecran (608 px sur 1280, soit 47,5 %) --- */
  .heros__texte{max-width:47.5vw}
  .heros .surtitre{font-size:11px;letter-spacing:.12em;margin-bottom:clamp(5px,1.6vw,20.5px)}
  .heros h1{font-size:clamp(18px,4.6vw,58.9px);line-height:1.1}
  .heros .filet{margin:clamp(6px,1.63vw,20.8px) 0 clamp(7px,1.88vw,24px)}
  .heros__accroche{font-size:clamp(11px,1.15vw,14.72px);line-height:1.45;max-width:47.5vw}
  .heros__actions{gap:clamp(5px,1.3vw,16.6px) clamp(6px,1.8vw,23px);margin-top:clamp(8px,3vw,38.4px)}
  .heros__actions .btn{letter-spacing:.04em;padding:clamp(6px,1.25vw,16px) clamp(7px,2vw,25.6px)}

  /* --- prestations : la rangee de quatre reste une rangee de quatre ---
     L'icone passe AU-DESSUS du texte. Mesure refaite au navigateur en forcant
     l'icone a gauche a 375 px : la cellule fait 85,8 px, l'icone en prend 18 et
     sa gouttiere 6,3, les marges 17,9 - il ne reste que 43,5 px de texte, et le
     paragraphe deborde alors reellement de sa colonne (scrollWidth 48 pour
     clientWidth 44). L'icone au-dessus rend a la colonne ses 67,9 px entiers.
     Le reste de la composition - quatre cases, meme ordre, memes filets - est
     inchange. */
  .prestations{margin-top:-5vw}
  .prestations__grille{grid-template-columns:repeat(4,minmax(0,1fr))}
  .prestation{
    flex-direction:column;align-items:flex-start;
    gap:clamp(5px,1.69vw,21.6px);
    padding:clamp(8px,2.5vw,32px) clamp(6px,2.25vw,28.8px);
  }
  .prestation>div{min-width:0;width:100%}
  .prestation__ico{width:clamp(18px,3.59vw,46px);height:clamp(18px,3.59vw,46px);margin-top:0}
  /* cesure autorisee : a 375 px la colonne offre 67,9 px de texte et le mot
     TRADITIONNEL en mesure 73 a 11 px, le plancher (mesure : scrollWidth 73
     pour clientWidth 68). Plutot que de descendre sous le plancher ou de
     casser la rangee de quatre, on le laisse se couper a la cesure - la page
     est en lang="fr", la coupure TRADITION-NEL est reglementaire. */
  .prestation h3{font-size:clamp(11px,1vw,12.8px);letter-spacing:.01em;margin-bottom:clamp(3px,.75vw,9.6px);-webkit-hyphens:auto;hyphens:auto}
  .prestation p{font-size:clamp(11px,1.1vw,14.08px);line-height:1.45}

  /* --- bande du salon : quatre colonnes, dont la premiere garde sa photo a
     gauche et son texte a droite --- */
  .salon__grille{grid-template-columns:minmax(0,1.5fr) minmax(0,1.05fr) minmax(0,.9fr) minmax(0,1.1fr)}
  .salon__colonne{padding:clamp(7px,2.5vw,32px);min-width:0}
  .salon__colonne:first-child{grid-template-columns:minmax(0,.36fr) minmax(0,.64fr)}
  .salon__texte{padding:clamp(7px,2.5vw,32px);min-width:0}
  .salon h2{font-size:clamp(13px,1.95vw,24.96px);line-height:1.14}
  .salon p{font-size:clamp(11px,1.175vw,15.04px);line-height:1.5}
  .salon .surtitre{font-size:11px;letter-spacing:.1em}
  .signature{font-size:clamp(15px,2.5vw,32px);margin-top:clamp(8px,2.38vw,30.4px)}

  .salon__photo{min-height:clamp(90px,26.56vw,340px)}
  .reserve{padding:clamp(4px,1.88vw,24px)}
  /* Le cadre photo du salon n'offre que 52,9 px de zone de texte a 375 px
     (67,5 px de large moins ses deux marges de 7,05 px) et le mot INTERIEUR en
     demande environ 63 a 11 px - il tient sans coupure des que la marge tombe a
     zero, soit 67,5 px de zone, et pas avant. Sans coupure il sortait donc du
     cadre, que le overflow:hidden de .salon__photo rognait net. Mesure du
     defaut avant correction : scrollWidth 71 pour clientWidth 66 a 375 px
     (5 px a droite, le bloc etant centre, donc 10 px de trop en tout), 68 pour
     56 a 320 px, 83 pour 81 a 701 px - la fin du mot etait coupee a l'ecran.
     La page est en lang="fr" : hyphens:auto coupe au bon endroit, et
     overflow-wrap:anywhere garantit qu'aucun mot ne depasse, quelle que soit
     la largeur. Vaut aussi pour les vignettes de la galerie, qui portent la
     meme classe et n'en ont pas besoin a ce jour. */
  .reserve span{font-size:11px;letter-spacing:.03em;line-height:1.5;-webkit-hyphens:auto;hyphens:auto;overflow-wrap:anywhere}
  .reserve svg{width:clamp(12px,2.03vw,26px);height:clamp(12px,2.03vw,26px);margin-bottom:clamp(3px,.63vw,8px)}

  .savoir{margin-top:clamp(8px,2.25vw,28.8px);gap:clamp(6px,1.88vw,24px)}
  .savoir li{gap:clamp(4px,1.375vw,17.6px)}
  .savoir li>div{min-width:0}
  .savoir svg{width:clamp(14px,2.66vw,34px);height:clamp(14px,2.66vw,34px)}
  .savoir h3{font-size:clamp(11px,1.025vw,13.12px);letter-spacing:.01em;margin-bottom:clamp(1px,.25vw,4px)}
  .savoir p{font-size:clamp(11px,1.1vw,14.08px);line-height:1.45}

  .engagement__guillemet{font-size:clamp(20px,4.25vw,54.4px);margin-bottom:clamp(8px,2vw,25.6px)}
  .engagement .engagement__phrase{font-size:clamp(11px,1.45vw,18.56px);line-height:1.45}
  .engagement__filet{width:clamp(14px,5vw,64px);margin:clamp(8px,2.38vw,30.4px) 0 clamp(6px,1.75vw,22.4px)}
  .engagement .engagement__nom{font-size:11px;letter-spacing:.05em;line-height:1.4}
  .engagement__ornement{gap:clamp(3px,.625vw,8px);margin-top:clamp(4px,1vw,12.8px)}
  .engagement__ornement svg{width:clamp(8px,1.02vw,13px);height:clamp(8px,1.02vw,13px)}

  .horaires{margin-top:clamp(6px,1.75vw,22.4px);gap:clamp(3px,.81vw,10.4px)}
  /* a 768 px la colonne 4 n'offre que 148 px et la ligne « Mardi - Vendredi /
     A completer » en demande 161 : la valeur descend alors d'un bloc a la ligne
     suivante, toujours calee a droite, au lieu de se briser en « A / completer ». */
  .horaires li{font-size:clamp(11px,1.175vw,15.04px);gap:clamp(3px,1.5vw,19.2px);line-height:1.35;flex-wrap:wrap}
  .horaires span{white-space:nowrap;margin-left:auto}
  .salon__separation{margin:clamp(8px,2.5vw,32px) 0}
  .salon .btn{margin-top:clamp(6px,1.88vw,24px)}
  .rdv__tel{margin-top:clamp(5px,1.63vw,20.8px);gap:clamp(4px,.625vw,12.8px);font-size:clamp(11px,1.25vw,16px);letter-spacing:0}
  .rdv__tel svg{width:clamp(11px,1.41vw,18px);height:clamp(11px,1.41vw,18px)}

  /* --- galerie : quatre vignettes en ligne --- */
  .galerie__grille{grid-template-columns:repeat(4,minmax(0,1fr))}

  /* --- reservation : texte a gauche, formulaire a droite --- */
  .reservation{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(10px,6vw,76.8px)}
  .voies{margin-top:clamp(8px,2.75vw,35.2px);gap:clamp(6px,1.75vw,22.4px)}
  .voies li{gap:clamp(4px,1.375vw,17.6px)}
  .voies li>div{min-width:0}
  .voies svg{width:clamp(11px,1.48vw,19px);height:clamp(11px,1.48vw,19px);margin-top:clamp(2px,.4vw,5.1px)}
  .voies span{font-size:11px;letter-spacing:.05em}
  /* l'adresse de courriel est un mot de 19 signes : sans coupure elle sort de
     sa colonne de 122 px a 375 px */
  .voies a,.voies p{font-size:clamp(11px,1.275vw,16.32px);overflow-wrap:anywhere;line-height:1.4}

  .form{gap:clamp(6px,1.56vw,20px)}
  .form__duo{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(6px,1.56vw,20px)}
  .champ{gap:clamp(3px,.625vw,8px)}
  .champ label{font-size:11px;letter-spacing:.03em;line-height:1.3}
  .champ input,.champ select,.champ textarea{
    padding:clamp(5px,1.125vw,14.4px) clamp(6px,1.25vw,16px);
    font-size:clamp(11px,1.225vw,15.68px);
  }
  .champ textarea{min-height:clamp(45px,10.16vw,130px)}
  .champ select{background-position:calc(100% - clamp(8px,1.48vw,19px)) 50%,calc(100% - clamp(5px,1.09vw,14px)) 50%}
  .form__mention{font-size:clamp(11px,1vw,12.8px);line-height:1.45}
  .form__etat{font-size:clamp(11px,1.125vw,14.4px)}

  /* --- barre de contact : les quatre reperes restent en ligne ---
     La grille remplace le space-between du grand ecran : a quatre colonnes
     egales, le premier repere reste colle a gauche et le dernier a droite,
     comme sur le grand ecran, sans qu'un repere long ecrase ses voisins. */
  .barre__grille{
    display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
    align-items:center;gap:clamp(6px,1vw,12.8px) clamp(6px,2.5vw,32px);
    padding-block:clamp(8px,1.88vw,24px);
  }
  .barre__item{font-size:11px;letter-spacing:.04em;gap:clamp(4px,.85vw,10.9px);line-height:1.35;min-width:0}
  .barre__item:last-child{justify-self:end}
  .barre__item svg{width:clamp(11px,1.48vw,19px);height:clamp(11px,1.48vw,19px)}
  .barre__reseaux{gap:clamp(5px,1.1vw,14.1px)}
  .barre__reseaux svg{width:clamp(11px,1.48vw,19px);height:clamp(11px,1.48vw,19px)}
  .barre__suivez{font-size:11px;letter-spacing:.04em}

  /* --- pied : trois colonnes, puis les deux mentions cote a cote --- */
  .pied{padding-block:clamp(16px,4vw,51.2px) clamp(10px,2.25vw,28.8px)}
  .pied__haut{
    grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr);
    gap:clamp(7px,3.125vw,40px);padding-bottom:clamp(10px,3vw,38.4px);
  }
  .pied .marque{gap:clamp(4px,1.19vw,15.2px);margin-bottom:clamp(6px,1.375vw,17.6px)}
  .pied .marque__signe{width:clamp(14px,3.125vw,40px);height:clamp(12px,2.66vw,34px)}
  .pied .marque__nom{font-size:clamp(12.5px,1.275vw,16.32px);letter-spacing:.06em}
  .pied .marque__sous{font-size:11px;letter-spacing:.06em;margin-top:clamp(2px,.375vw,4.8px)}
  .pied p{font-size:clamp(11px,1.125vw,14.4px);line-height:1.45}
  .pied h4{font-size:11px;letter-spacing:.05em;margin-bottom:clamp(6px,1.31vw,16.8px)}
  .pied ul{gap:clamp(4px,.81vw,10.4px)}
  .pied ul a{font-size:clamp(11px,1.125vw,14.4px);overflow-wrap:anywhere;line-height:1.35;display:inline-block}
  .pied__bas{padding-top:clamp(8px,2.13vw,27.2px);gap:clamp(4px,1vw,12.8px) clamp(8px,2.5vw,32px)}
  /* base de 48 % : les deux mentions restent sur la MEME ligne, comme sur le
     grand ecran, au lieu de se mettre l'une sous l'autre */
  .pied__bas p{font-size:clamp(11px,.975vw,12.48px);flex:0 1 48%;line-height:1.4}
  .pied__bas p:last-child{text-align:right}

  /* page annexe (mentions legales) */
  .page-texte h1{margin-bottom:clamp(10px,2.5vw,32px)}
  .page-texte h2{font-size:clamp(13px,1.69vw,21.6px);margin:clamp(12px,3.25vw,41.6px) 0 clamp(5px,1.13vw,14.4px)}
  .page-texte p,.page-texte li{font-size:clamp(11px,1.21vw,15.52px);line-height:1.5}
}

/* ---- sous 700 px : le heros en portrait ----
   Modele repris du projet peinture et du site de phare : la photo est affichee
   ENTIERE (hauteur naturelle, aucun rognage) et le texte reste POSE DESSUS, cale
   en haut a gauche, bride a la largeur de la zone sombre pour ne jamais deborder
   sur le barbier. La composition du grand ecran est reproduite en reduction, pas
   reorganisee.
   C'est le MEME fichier qu'au bureau, le paysage 1536 x 1024 : servi sur toute la
   largeur, il mesure donc 100vw x 2/3 de haut, et c'est cette valeur qui cale le
   voile, lui-meme hors flux. Le fichier carre qui etait servi ici montrait moins
   de scene que le grand ecran - cadre plus serre a gauche, haut de la salle
   coupe : il n'est plus appele (les images restent sur le disque).
   Le texte descend plus bas que la photo : il continue sur le fond de page, ou le
   voile a deja fondu au noir. C'est voulu, et c'est ce que fait le projet
   peinture. */
@media (max-width:700px){
  .heros{
    display:grid;grid-template-columns:minmax(0,1fr);align-items:start;
    min-height:0;padding-top:70px;padding-bottom:clamp(12px,5vw,32px);
    overflow:hidden;background:var(--noir);
  }
  .heros__image{position:relative;grid-area:1/1;align-self:start}
  .heros__image img{height:auto}
  /* 100vw x 1024/1536 : la hauteur exacte de la photo servie ici.
     Memes valeurs de voile qu'au grand ecran, la photo etant desormais la meme :
     releve sur les pixels rendus, texte masque, sur la portion de scene commune
     aux deux affichages, la luminance moyenne vaut 0,98 fois celle du bureau
     (0,93 avec les valeurs qui servaient la photo carree). */
  .heros__voile{
    top:70px;height:calc(100vw * 2 / 3);
    background:
      linear-gradient(90deg,rgba(10,10,9,.97) 0%,rgba(10,10,9,.90) 32%,rgba(10,10,9,.45) 62%,rgba(10,10,9,.12) 100%),
      linear-gradient(0deg,var(--noir) 0%,rgba(10,10,9,0) 42%);
  }
  .heros__contenu{grid-area:1/1;align-self:start;padding-block:clamp(10px,3.5vw,26px)}
}

/* ---- sous 700 px : la bande du salon passe de quatre colonnes a deux ----
   Mesure qui le justifie : la colonne 1 est elle-meme coupee en photo (.36) et
   texte (.64). A quatre colonnes, la part de texte vaut
   0,64 x 1,5/4,55 x largeur moins ses deux marges de 2,5vw, soit 0,161 x
   largeur. A 375 px cela fait 60 px, ou une ligne de 11 px ne porte que dix
   signes : le paragraphe « Atelier Noir est ne d'une passion... » y descend en
   ruban de dix-huit lignes et le mot « contemporaine » n'y tient pas. Le seuil
   ou cette part atteint 112 px, soit vingt signes, est 700 px : c'est la que la
   rangee passe en deux par deux. En deux colonnes la part de texte vaut
   0,27 x largeur, donc 101 px a 375 px et 112 px a 414 px.
   Jamais une seule colonne : les paires restent cote a cote. */
@media (max-width:700px){
  .salon__grille{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .salon__colonne:nth-child(odd){border-left:0}
  .salon__colonne:nth-child(3),.salon__colonne:nth-child(4){border-top:1px solid rgba(201,160,99,.18)}
}

/* ---- sous 620 px : les quatre reperes de contact passent en deux par deux ----
   Mesure REFAITE au navigateur, en forcant la rangee de quatre a toutes les
   largeurs de 700 a 320 px : les libelles ne se chevauchent JAMAIS - ils se
   replient d'eux-memes sur deux lignes - et ne debordent de leur cellule qu'a
   partir de 360 px. Ce n'est donc pas une collision qui fait le seuil,
   contrairement a ce que disait la premiere redaction de ce commentaire.
   Ce qui le fait, c'est la largeur de la colonne de texte. Chaque cellule vaut
   0,211 x largeur ; son texte, une fois retires l'icone (11 px au plancher) et
   sa gouttiere, vaut 0,202 x largeur moins 11 px : 114,5 px a 620 px,
   110,4 px a 600 px, 89,2 px a 495 px. Le seuil est pose a 620 px, la derniere
   largeur ou ce texte reste au-dessus de 112 px, soit vingt signes a 11 px -
   le meme plancher que la bande du salon, qui bascule a 700 px pour la meme
   raison, mesuree de la meme facon.
   Deux repliements mesures confirment le sens de la marche : a 495 px le repere
   des reseaux se brise en deux lignes, a 414 px le numero « 07 00 00 00 00 » se
   coupe en plein milieu. Deux par deux, chaque cellule offre 167,8 px. */
@media (max-width:620px){
  .barre__grille{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}

/* ---- sous 375 px seulement ----
   La colonne 1 du pied tombe a 118 px et le sous-titre SALON DE BARBIER, en
   nowrap, en mesure 105 a 11 px avec un interlettrage de .06em : 5,4 px de
   depassement mesures a 320 px. On lui retire l'interlettrage plutot que de
   descendre sous le plancher de 11 px. A 375 px et au-dessus la regle est sans
   effet, les deux valeurs y tiennent deja. */
@media (max-width:374px){
  .pied .marque__sous{letter-spacing:.01em}
  .pied .marque__nom{letter-spacing:.03em}
}

@media print{
  .entete,.menu-mobile{display:none}
  body{background:#fff;color:#000}
}

/* Photos livrees le 08/09/2026 : la case reservee garde sa geometrie, l'image la remplit. */
.photo-remplie{border:0!important;background:none!important;padding:0!important;overflow:hidden}
.photo-remplie .photo-modele{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit}