/* Le Boudoir de Paula - feuille de style commune
   Posee le 01.09.2026. Source versionnee : site/css/style.css */

:root{
  /* Palette relevee sur l'ancien site, au getComputedStyle, le 02.09.2026.
     Reference : backups/2026-09-02_1230_ancien-site-rendu/ */
  --ink:#463939;        /* texte courant, brun-gris */
  --ink-soft:#6b5c5c;
  --line:#e6e0e0;
  --cream:#ffffff;      /* fond principal : blanc, comme avant */
  --card:#f7f7f7;       /* fond de section alterne */
  --accent:#E82372;     /* LE rose de la marque */
  --accent-soft:#f06ba0;
  --dark:#1e1e1e;
  --max:1120px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--cream);color:var(--ink);
  font:16px/1.7 Verdana,Geneva,"DejaVu Sans",sans-serif;}
/* height:auto est INDISPENSABLE : les <img> portent des attributs width/height (bon pour
   eviter le layout shift), et sans cette regle max-width:100% reduit la largeur en gardant
   la hauteur de l'attribut -> image ecrasee. Constate le 02.09.2026 en production. */
img{max-width:100%;height:auto;display:block}
a{color:var(--accent)}
.wrap{max-width:var(--max);margin:0 auto;padding:0 22px}
h1,h2,h3{font-family:Verdana,Geneva,"DejaVu Sans",sans-serif;font-weight:400;
  letter-spacing:.01em;line-height:1.3;color:var(--dark)}

/* En-tete */
header{background:var(--card);border-bottom:1px solid var(--line)}
.bar{display:flex;flex-direction:column;align-items:center;gap:14px;padding:22px 0 16px}
.brand{text-decoration:none;color:var(--ink);display:block;text-align:center}
.brand img{height:64px;width:auto;display:block;margin:0 auto}
.brand span{display:block;font-size:.68rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--accent-soft);margin-top:6px;text-align:center}
@media(max-width:600px){.brand img{height:50px}}
/* max-width:100% : sans elle, la nav est un flex-item en min-width:auto et deborde
   du padding du conteneur des que les libelles ne tiennent plus. Sur 390 px les
   liens venaient toucher les deux bords. Constate le 02.09.2026. */
.bar nav{display:flex;gap:22px;flex-wrap:wrap;justify-content:center;font-size:.8rem;
  text-transform:uppercase;letter-spacing:.12em;max-width:100%;min-width:0}
@media(max-width:600px){
  .bar nav{gap:13px;font-size:.72rem;letter-spacing:.08em;row-gap:9px}
}
.bar nav a{color:var(--ink-soft);text-decoration:none}
.bar nav a:hover{color:var(--accent)}
.bar nav a[aria-current="page"]{color:var(--accent);border-bottom:1px solid var(--accent)}
/* Bandeau rose colle a droite, sous l'en-tete : signature de l'ancien site. */
.strip{background:var(--card);border-top:1px solid var(--line);display:flex;justify-content:flex-end}
.strip a{background:var(--accent);color:#fff;text-decoration:none;padding:9px 26px;
  font-size:.85rem;letter-spacing:.04em}
.strip a:hover{background:#c81a5f}

/* Bandeau d'accueil */
/* Bandeau d'accueil.
   L'image et le texte occupent LA MEME cellule de grille : la hauteur du bandeau est
   donc celle du plus haut des deux. Une hauteur fixe faisait deborder le contenu
   (logo + titre + accroche + 2 boutons) des que la fenetre etait un peu basse :
   le logo touchait le haut et le bouton telephone etait coupe. Constate le 02.09.2026. */
.hero{position:relative;background:var(--dark);overflow:hidden}
/* L'image est SORTIE DU FLUX : sinon elle impose sa hauteur intrinseque (897 px
   sur un ecran large) et le bandeau devient enorme. C'est le texte qui dicte la
   hauteur, avec un plancher, et le bandeau grandit si le contenu le depasse. */
.hero>picture{position:absolute;inset:0;display:block}
.hero>picture>img{width:100%;height:100%;object-fit:cover;opacity:.46}
.hero .txt{position:relative;display:flex;flex-direction:column;
  justify-content:center;align-items:center;text-align:center;color:#fff;
  padding:48px 24px;min-height:clamp(340px,52vh,540px)}
.hero-logo{width:min(340px,68vw);height:auto;margin:0 auto 18px;
  filter:brightness(0) invert(1) drop-shadow(0 2px 14px rgba(0,0,0,.45))}
.hero h1{font-size:clamp(1.5rem,3.6vw,2.1rem);margin:0 0 12px;font-weight:400;color:#fff;
  letter-spacing:.06em;text-transform:uppercase;text-shadow:0 2px 20px rgba(0,0,0,.75)}
.hero p{max-width:600px;margin:0 0 26px;font-size:clamp(1rem,2.2vw,1.13rem);color:#fff;
  text-shadow:0 1px 14px rgba(0,0,0,.7)}
@media(max-width:600px){
  .hero-logo{width:min(250px,64vw);margin-bottom:14px}
  .hero p{margin-bottom:20px}
  .hero h1{font-size:1.35rem}
}

/* Bandeau des pages internes */
.page-head{background:var(--card);border-bottom:1px solid var(--line);padding:44px 0 38px;text-align:center}
.page-head h1{font-size:clamp(1.8rem,4.4vw,2.6rem);margin:0 0 10px}
.page-head p{margin:0 auto;max-width:640px;color:var(--ink-soft)}
.crumb{font-size:.85rem;color:var(--accent-soft);margin:0 0 14px}
.crumb a{color:var(--accent-soft);text-decoration:none}
.crumb a:hover{color:var(--accent)}

/* Boutons */
.btns{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.btn{display:inline-block;padding:13px 26px;border-radius:2px;text-decoration:none;
  font-size:.95rem;letter-spacing:.03em;border:1px solid transparent}
.btn-p{background:var(--accent);color:#fff}
.btn-p:hover{background:#c81a5f}
.btn-s{border-color:rgba(255,255,255,.75);color:#fff}
.btn-s:hover{background:rgba(255,255,255,.13)}
.btn-o{border-color:var(--accent);color:var(--accent)}
.btn-o:hover{background:var(--accent);color:#fff}

/* Sections */
section{padding:58px 0}
section:nth-of-type(even):not(.cta){background:var(--card)}
.sec-t{text-align:center;margin:0 0 10px;font-size:clamp(1.5rem,3.4vw,2rem)}
.sec-l{text-align:left;margin:0 0 16px;font-size:clamp(1.4rem,3.2vw,1.85rem)}
.sec-s{text-align:center;color:var(--ink-soft);margin:0 auto 38px;max-width:640px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.two-top{align-items:start}
@media(max-width:820px){.two{grid-template-columns:1fr;gap:28px}}
.prose{max-width:760px;margin:0 auto}
.prose h2{margin:34px 0 12px;font-size:1.35rem;color:var(--accent)}
.prose h2:first-child{margin-top:0}
.prose ul{padding-left:20px}
.prose li{margin:5px 0}

/* Cartes de tarifs */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:22px}
.card{background:var(--cream);border:1px solid var(--line);border-radius:3px;padding:26px}
section:nth-of-type(even) .card{background:var(--card)}
.card h3{margin:0 0 16px;font-size:1.2rem;color:var(--accent);
  border-bottom:1px solid var(--line);padding-bottom:10px}
.card ul{list-style:none;margin:0;padding:0}
.card li{display:flex;justify-content:space-between;gap:14px;padding:7px 0;font-size:.95rem}
.card li b{font-weight:600;white-space:nowrap}
.note{text-align:center;color:var(--ink-soft);font-size:.88rem;margin-top:26px}

/* Horaires */
.hours{list-style:none;margin:0;padding:0;max-width:430px}
.hours li{display:flex;justify-content:space-between;gap:16px;padding:11px 0;
  border-bottom:1px solid var(--line);align-items:flex-start}
.hours li b{text-align:right;line-height:1.5}
.hours li:last-child{border-bottom:0}
.closed{color:var(--accent-soft)}
.info{list-style:none;margin:0;padding:0}
.info li{padding:6px 0;color:var(--ink-soft);font-size:.95rem}

/* Avis */
.rev{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:22px;text-align:center}
.rev div{background:var(--card);border:1px solid var(--line);padding:26px 20px;border-radius:3px}
section:nth-of-type(even) .rev div{background:var(--cream)}
.score{font-size:2.5rem;color:var(--accent);line-height:1}
.stars{color:#c9a227;letter-spacing:3px;margin:8px 0 6px}

/* Galerie */
.gal{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.gal picture,.gal-big picture{display:block}
.gal img{height:230px;width:100%;object-fit:cover;border-radius:3px}
.gal-big{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:18px}
.gal-big img{width:100%;height:300px;object-fit:cover;border-radius:3px}
.gal-big figure{margin:0}
.gal-big figcaption{font-size:.85rem;color:var(--ink-soft);padding-top:7px}

/* Portrait d'accueil de la page contact.
   Le cadre rose est un simple trait decale DERRIERE la photo : il pose la couleur de la
   marque sans rien poser sur le visage. `isolation:isolate` est indispensable, sinon le
   z-index:-1 du pseudo-element l'envoie derriere le fond de la <section> et il disparait. */
.hello-grid{display:grid;grid-template-columns:360px 1fr;gap:56px;align-items:center}
.hello-photo{position:relative;isolation:isolate}
.hello-photo::before{content:"";position:absolute;z-index:-1;
  top:22px;right:-22px;bottom:-22px;left:22px;
  border:1px solid var(--accent);border-radius:3px}
.hello-photo img{border-radius:3px;box-shadow:0 14px 36px rgba(70,57,57,.18)}
.hello-txt .sec-l{margin-bottom:14px}
.kicker{font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--accent-soft);margin:0 0 8px}
.btns-l{justify-content:flex-start;margin-top:26px}
@media(max-width:820px){
  /* Une colonne : la photo se centre et se bride, sinon elle occupe tout l'ecran
     avant meme le premier mot. Le cadre decale se resserre pour rester dans les
     22 px de padding de .wrap et ne pas creer de defilement horizontal. */
  .hello-grid{grid-template-columns:1fr;gap:30px;justify-items:center}
  .hello-photo{max-width:290px}
  .hello-photo::before{top:14px;right:-14px;bottom:-14px;left:14px}
  /* Titre et sur-titre centres, mais texte courant a gauche : centre sur cinq ou six
     lignes, chaque ligne repart d'un bord different et la lecture devient penible. */
  .hello-txt .kicker,.hello-txt .sec-l{text-align:center}
  .btns-l{justify-content:center}
}

/* Contact */
.contact{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:32px}
.contact h3{font-size:1.05rem;margin:0 0 10px;color:var(--accent)}
.contact p{margin:0 0 6px;color:var(--ink-soft)}
.contact a{color:var(--ink);text-decoration:none}
.contact a:hover{color:var(--accent)}

/* Bandeau d'appel a l'action */
.cta{background:var(--accent);color:#fff;text-align:center}
.cta h2{color:#fff}
.cta h2{margin:0 0 12px;color:#fff}
.cta p{margin:0 0 24px;opacity:.92}
.cta .btn-o{border-color:#fff;color:#fff}
.cta .btn-o:hover{background:#fff;color:var(--accent)}

footer{background:var(--dark);color:#cfc9c9;padding:34px 0;font-size:.85rem}
footer .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:flex-start}
footer a{color:#e8ddd4}
.f-logo{height:58px;width:auto;margin:0 0 12px;filter:brightness(0) invert(1);opacity:.92}
footer nav{display:flex;gap:16px;flex-wrap:wrap}
.f-legal{font-size:.82rem;opacity:.75;margin-top:14px;width:100%}