/* ============================================================================
   Salon — feuille de style unique.

   Deux règles tiennent tout le reste :
     1. AUCUN COIN ARRONDI. border-radius: 0 partout, sans exception. C'est le
        geste graphique du site ; une seule pastille arrondie et l'ensemble
        perd son aplomb.
     2. Aucune police, aucune image, aucun script venus d'ailleurs. Les pages
        publiques n'appellent personne : ni Google, ni compteur, ni traceur.
   ========================================================================== */

:root{
  --encre:#15130F; --encre-doux:#3A362F;
  --papier:#FAF8F5; --blanc:#FFFFFF;
  --gris:#6E6A64; --gris-pale:#A6A099;
  --bord:#E3DFD8; --bord-fort:#15130F;
  --or:#8A6A3B; --or-clair:#F2EBE0;
  --rouge:#9B3A2E; --rouge-pale:#F7EDEB;
  --vert:#3E6B4F; --vert-pale:#EDF3EE;
  --serif:Georgia,'Iowan Old Style','Times New Roman',serif;
  --sans:system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box;border-radius:0}
/* Un élément marqué « hidden » doit disparaître, même si sa classe lui donne
   un display : sans cette règle, un bouton masqué par le script reste à
   l'écran et la cliente ne sait plus lequel presser. */
[hidden]{display:none!important}

html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--papier);color:var(--encre);
  font-family:var(--sans);font-size:16px;line-height:1.6}
img{max-width:100%;display:block}
a{color:var(--encre)}

/* --- l'ossature ---------------------------------------------------------- */
.bande{max-width:1120px;margin:0 auto;padding:0 20px}
.section{padding:64px 0}
.section.serre{padding:40px 0}
.section.sombre{background:var(--encre);color:var(--papier)}
.section.sombre a{color:var(--papier)}

h1,h2,h3{font-family:var(--serif);font-weight:400;letter-spacing:-.01em;margin:0}
h1{font-size:38px;line-height:1.15}
h2{font-size:27px;line-height:1.2;margin-bottom:18px}
h3{font-size:19px;line-height:1.3}
.sur-titre{font-family:var(--sans);font-size:12px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--or);margin-bottom:10px}
.chapo{font-size:17px;color:var(--encre-doux);max-width:60ch}
.gris{color:var(--gris)}
.petit{font-size:13.5px}

/* --- l'en-tête ----------------------------------------------------------- */
.entete{position:sticky;top:0;z-index:40;background:var(--papier);
  border-bottom:1px solid var(--bord)}
.entete .bande{display:flex;align-items:center;gap:22px;height:66px}
.marque{font-family:var(--serif);font-size:21px;text-decoration:none;
  letter-spacing:.01em;white-space:nowrap}
.nav{margin-left:auto;display:flex;align-items:center;gap:22px}
.nav a{font-size:14.5px;text-decoration:none;color:var(--encre-doux);
  padding:6px 0;border-bottom:2px solid transparent}
.nav a:hover,.nav a.ici{border-bottom-color:var(--encre)}
/* « .nav a » est plus spécifique que « .bouton » : sans cette ligne, le bouton
   Rendez-vous du menu héritait de la couleur du texte de navigation et
   s'affichait sombre sur sombre, donc illisible. */
.nav a.bouton{color:var(--papier);border-bottom:2px solid var(--encre)}
.nav a.bouton:hover{color:#fff;border-bottom-color:var(--or)}

/* --- boutons, carrés, toujours ------------------------------------------- */
.bouton{display:inline-flex;align-items:center;justify-content:center;
  min-height:50px;padding:13px 26px;background:var(--encre);color:var(--papier);
  border:2px solid var(--encre);font-family:var(--sans);font-size:15px;
  font-weight:600;letter-spacing:.02em;text-decoration:none;cursor:pointer;
  transition:background .12s,color .12s}
.bouton:hover{background:var(--or);border-color:var(--or);color:#fff}
.bouton.clair{background:transparent;color:var(--encre)}
.bouton.clair:hover{background:var(--encre);color:var(--papier)}
.bouton.pleine{width:100%}
.bouton.danger{background:transparent;color:var(--rouge);border-color:var(--rouge)}
.bouton.danger:hover{background:var(--rouge);color:#fff}
.bouton[disabled]{opacity:.45;cursor:default}
.boutons{display:flex;gap:12px;flex-wrap:wrap}
.boutons.deux > *{flex:1 1 200px}

.lien-sobre{font-size:14px;color:var(--gris);text-decoration:none;
  border-bottom:1px solid var(--bord)}
.lien-sobre:hover{color:var(--encre);border-bottom-color:var(--encre)}

/* --- l'accueil ----------------------------------------------------------- */
.hero{position:relative;background:var(--encre)}
.hero img{width:100%;height:clamp(320px,56vh,560px);object-fit:cover;opacity:.72}
.hero .dessus{position:absolute;inset:0;display:flex;align-items:flex-end}
.hero .dessus .bande{width:100%;padding-bottom:44px;color:#fff}
.hero h1{color:#fff;font-size:clamp(32px,5.4vw,56px);max-width:16ch}
.hero p{color:rgba(255,255,255,.88);max-width:46ch;margin:14px 0 24px}

.bandeau-infos{background:var(--encre);color:var(--papier);
  border-top:1px solid rgba(255,255,255,.14)}
.bandeau-infos .bande{display:flex;flex-wrap:wrap;gap:28px;padding-top:18px;padding-bottom:18px;
  font-size:14px}
.bandeau-infos b{color:#fff;font-weight:600}
.bandeau-infos a{color:var(--papier)}

/* --- grilles ------------------------------------------------------------- */
.grille{display:grid;gap:24px}
.g2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.g3{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.g4{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}

/* --- galerie ------------------------------------------------------------- */
.galerie{display:grid;gap:4px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.galerie figure{margin:0;position:relative;background:var(--encre)}
.galerie img{width:100%;aspect-ratio:3/4;object-fit:cover}
.galerie figcaption{position:absolute;left:0;bottom:0;right:0;padding:10px 12px;
  font-size:12.5px;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.66))}

/* --- prestations --------------------------------------------------------- */
.presta{display:flex;align-items:baseline;gap:14px;padding:16px 0;
  border-bottom:1px solid var(--bord)}
.presta:first-child{border-top:1px solid var(--bord)}
.presta .nom{font-family:var(--serif);font-size:19px}
.presta .det{font-size:13.5px;color:var(--gris)}
.presta .pointille{flex:1;border-bottom:1px dotted var(--bord);transform:translateY(-4px)}
.presta .prix{font-size:17px;font-weight:600;white-space:nowrap}
.presta .duree{font-size:13px;color:var(--gris);white-space:nowrap;min-width:62px;text-align:right}

/* --- cartes et formulaires ----------------------------------------------- */
.carte{background:var(--blanc);border:1px solid var(--bord);padding:22px}
.carte.epaisse{border:2px solid var(--encre)}
.carte h3{margin-bottom:8px}

.champ{margin-bottom:18px}
.champ label.etiq{display:block;font-size:13px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--encre-doux);margin-bottom:7px}
.champ .aide{font-size:13px;color:var(--gris);margin-top:6px;line-height:1.5}
input[type=text],input[type=tel],input[type=password],input[type=date],
input[type=time],input[type=number],input[type=search],input[type=email],
input[type=url],select,textarea{
  width:100%;padding:13px 14px;background:var(--blanc);color:var(--encre);
  border:1px solid var(--encre);font-family:inherit;font-size:16px}
input:focus,select:focus,textarea:focus{outline:2px solid var(--or);outline-offset:-2px}
textarea{min-height:90px;resize:vertical}

.cases{display:flex;gap:11px;align-items:flex-start;font-size:14.5px;line-height:1.5}
.cases input{margin-top:3px;width:18px;height:18px;flex:none;accent-color:var(--encre)}

.alerte{padding:14px 16px;border:1px solid var(--encre);background:var(--blanc);
  font-size:14.5px;margin-bottom:20px}
.alerte.ko{border-color:var(--rouge);background:var(--rouge-pale);color:var(--rouge)}
.alerte.ok{border-color:var(--vert);background:var(--vert-pale);color:var(--vert)}

/* --- le tunnel de rendez-vous -------------------------------------------- */
.etapes{display:flex;gap:0;margin-bottom:28px;border:1px solid var(--bord);background:var(--blanc)}
.etapes div{flex:1;padding:10px 8px;text-align:center;font-size:12px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--gris-pale);border-right:1px solid var(--bord)}
.etapes div:last-child{border-right:none}
.etapes div.faite{color:var(--encre)}
.etapes div.ici{background:var(--encre);color:var(--papier);font-weight:700}

.choix{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.choix a,.choix button{display:block;width:100%;text-align:left;padding:16px 18px;
  background:var(--blanc);border:1px solid var(--encre);text-decoration:none;
  color:var(--encre);font-family:inherit;font-size:16px;cursor:pointer}
.choix a:hover,.choix button:hover{background:var(--encre);color:var(--papier)}
.choix .sous{display:block;font-size:13px;color:var(--gris);margin-top:4px}
.choix a:hover .sous,.choix button:hover .sous{color:rgba(255,255,255,.75)}

.jours{display:grid;gap:6px;grid-template-columns:repeat(7,1fr)}
.jours .nomjour{font-size:11px;text-transform:uppercase;letter-spacing:.08em;
  color:var(--gris-pale);text-align:center;padding-bottom:4px}
.jours a,.jours span{display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:62px;background:var(--blanc);border:1px solid var(--bord);
  text-decoration:none;color:var(--encre);font-size:17px;line-height:1.1}
.jours a:hover{border-color:var(--encre);background:var(--encre);color:var(--papier)}
.jours a small,.jours span small{font-size:10.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--gris);margin-top:3px}
.jours a:hover small{color:rgba(255,255,255,.7)}
/* Un jour fermé ou complet est barré, pas seulement grisé : grisé se confond
   avec « pas encore chargé ». */
.jours span.ferme{color:var(--gris-pale);background:transparent;
  border-style:dashed;position:relative;overflow:hidden}
.jours span.ferme::after{content:'';position:absolute;left:-10%;right:-10%;top:50%;
  height:1px;background:var(--bord);transform:rotate(-14deg)}

.heures{display:grid;gap:6px;grid-template-columns:repeat(auto-fill,minmax(92px,1fr))}
.heures a{display:block;padding:14px 6px;text-align:center;background:var(--blanc);
  border:1px solid var(--encre);text-decoration:none;font-size:16px;font-variant-numeric:tabular-nums}
.heures a:hover{background:var(--encre);color:var(--papier)}
.heures .titre-plage{grid-column:1/-1;font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gris);padding-top:10px}

.recap{border:2px solid var(--encre);background:var(--blanc);padding:20px}
.recap dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:8px 18px;font-size:15.5px}
.recap dt{color:var(--gris);font-size:13px;letter-spacing:.04em;text-transform:uppercase;
  padding-top:3px}
.recap dd{margin:0;font-weight:600}

/* --- planning ------------------------------------------------------------ */
.barre-jour{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:22px}
.barre-jour .jour{font-family:var(--serif);font-size:24px}
.barre-jour .pousse{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}

.pilule{display:inline-block;padding:3px 9px;font-size:11.5px;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;border:1px solid var(--bord);color:var(--gris)}
.pilule.or{border-color:var(--or);color:var(--or);background:var(--or-clair)}
.pilule.rouge{border-color:var(--rouge);color:var(--rouge);background:var(--rouge-pale)}
.pilule.vert{border-color:var(--vert);color:var(--vert);background:var(--vert-pale)}

.agenda{border:1px solid var(--bord);background:var(--blanc)}
.agenda .ligne{display:flex;gap:16px;padding:14px 16px;border-top:1px solid var(--bord)}
.agenda .ligne:first-child{border-top:none}
.agenda .h{font-variant-numeric:tabular-nums;font-size:17px;min-width:62px;font-weight:600}
.agenda .corps{flex:1;min-width:0}
.agenda .corps b{font-size:16px;font-weight:600}
.agenda .corps .sous{font-size:13.5px;color:var(--gris);margin-top:2px}
.agenda .actions{display:flex;gap:6px;flex-wrap:wrap;align-items:flex-start}
.agenda .ligne.bloc{background:repeating-linear-gradient(45deg,#FAF8F5,#FAF8F5 7px,#F1EEE9 7px,#F1EEE9 14px)}
.agenda .ligne.trou{color:var(--gris-pale)}

.mini{display:inline-flex;align-items:center;padding:7px 11px;font-size:12.5px;
  font-weight:600;border:1px solid var(--bord);background:var(--blanc);color:var(--encre-doux);
  text-decoration:none;cursor:pointer;font-family:inherit}
.mini:hover{border-color:var(--encre);background:var(--encre);color:var(--papier)}
.mini.danger{color:var(--rouge);border-color:var(--rouge-pale)}
.mini.danger:hover{background:var(--rouge);border-color:var(--rouge);color:#fff}

.semaine{display:grid;gap:4px;grid-template-columns:repeat(7,minmax(0,1fr))}
.semaine .col{background:var(--blanc);border:1px solid var(--bord);min-height:130px;padding:8px}
.semaine .col h4{margin:0 0 8px;font-size:12px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--gris)}
.semaine .col.ferme{background:transparent;border-style:dashed}
.semaine .rdv{font-size:12px;border-left:3px solid var(--encre);padding:3px 0 3px 6px;margin-bottom:5px}
.semaine .rdv.bloc{border-left-color:var(--gris-pale);color:var(--gris)}

.tableau{width:100%;border-collapse:collapse;background:var(--blanc);border:1px solid var(--bord)}
.tableau th,.tableau td{text-align:left;padding:11px 13px;border-bottom:1px solid var(--bord);
  font-size:14.5px;vertical-align:top}
.tableau th{font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:var(--gris);
  background:var(--papier)}
.tableau tr:last-child td{border-bottom:none}

.rien{border:1px dashed var(--bord);background:var(--blanc);padding:30px 22px;text-align:center;
  color:var(--gris);line-height:1.6}
.rien b{display:block;color:var(--encre);font-family:var(--serif);font-size:19px;
  font-weight:400;margin-bottom:6px}

/* --- pied de page -------------------------------------------------------- */
.pied{border-top:1px solid var(--bord);padding:38px 0;font-size:13.5px;color:var(--gris)}
.pied .bande{display:flex;gap:28px;flex-wrap:wrap}
.pied a{color:var(--gris)}
.pied .pousse{margin-left:auto}

@media (max-width:720px){
  .section{padding:40px 0}
  h1{font-size:30px}
  h2{font-size:23px}
  /* Sur un téléphone, les liens s'écrasaient les uns contre les autres et
     « Le salon » se coupait en deux lignes. On laisse l'en-tête respirer sur
     deux rangées plutôt que de serrer. */
  .entete .bande{height:auto;gap:8px;flex-wrap:wrap;padding-top:10px;padding-bottom:10px}
  .nav{width:100%;margin-left:0;gap:12px;justify-content:space-between}
  .nav a{font-size:13.5px;white-space:nowrap}
  .marque{font-size:19px}
  .etapes div{font-size:10px;letter-spacing:.03em;padding:8px 4px}
  .agenda .ligne{flex-wrap:wrap}
  .agenda .actions{width:100%;padding-left:78px}
  .semaine{grid-template-columns:1fr}
  .recap dl{grid-template-columns:1fr;gap:2px 0}
  .recap dd{margin-bottom:10px}
  .pied .pousse{margin-left:0}
}

/* ==========================================================================
   L'ANNUAIRE DE LA PLATEFORME

   Seule partie du site où les coins sont arrondis. Les sites des salons
   gardent leurs angles droits : c'est leur identité, demandée dès le départ.
   Tout ce qui suit est préfixé « pf- » et ne touche à rien d'autre.
   ========================================================================== */

.pf-entete{position:absolute;top:0;left:0;right:0;z-index:5;padding:18px 0}
.pf-entete .bande{display:flex;align-items:center;gap:26px;flex-wrap:wrap}
/* Pas de majuscules forcées : « SimRdv » se lit par ses deux capitales,
   « SIMRDV » n'est plus qu'un bloc de lettres. */
.pf-marque{font-family:var(--sans);font-weight:700;font-size:20px;letter-spacing:.01em;
  color:#fff;text-decoration:none}
.pf-nav{display:flex;gap:20px;flex-wrap:wrap}
.pf-nav a{color:rgba(255,255,255,.92);text-decoration:none;font-family:var(--sans);
  font-size:14.5px;padding:6px 2px;border-bottom:2px solid transparent}
.pf-nav a:hover,.pf-nav a.ici{border-bottom-color:#fff}
.pf-pro{margin-left:auto;display:flex;gap:10px;align-items:center}
.pf-pro a{font-family:var(--sans);font-size:14px;text-decoration:none;
  padding:10px 18px;border-radius:999px;white-space:nowrap}
.pf-pro .creux{color:#fff;border:1px solid rgba(255,255,255,.55)}
.pf-pro .creux:hover{background:rgba(255,255,255,.14)}
.pf-pro .plein{background:#fff;color:var(--encre);font-weight:600}

/* --- le bandeau d'accueil ------------------------------------------------- */
.pf-hero{position:relative;min-height:clamp(440px,64vh,620px);display:grid;
  place-items:center;overflow:hidden;background:var(--encre)}
.pf-hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pf-voile{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(18,18,18,.62) 0%,rgba(18,18,18,.34) 38%,rgba(18,18,18,.56) 100%)}
.pf-hero-dedans{position:relative;width:100%;max-width:980px;padding:92px 20px 46px;text-align:center}
.pf-hero h1{color:#fff;font-size:clamp(34px,5.2vw,54px);line-height:1.08;margin:0}
.pf-hero p.sous{color:rgba(255,255,255,.9);font-family:var(--sans);font-size:15.5px;
  margin:14px 0 0;letter-spacing:.02em}

/* --- la barre de recherche ------------------------------------------------ */
.pf-cherche{margin:30px auto 0;background:#fff;border-radius:18px;padding:10px;
  display:flex;align-items:stretch;gap:6px;box-shadow:0 18px 50px rgba(0,0,0,.28);text-align:left}
.pf-cherche .champ-c{flex:1 1 220px;padding:10px 16px;min-width:0}
.pf-cherche .champ-c + .champ-c{border-left:1px solid var(--trait)}
.pf-cherche label{display:block;font-family:var(--sans);font-size:12px;font-weight:600;
  color:var(--encre-doux);margin-bottom:2px}
.pf-cherche input{width:100%;border:0;padding:0;min-height:26px;font-size:15.5px;
  background:transparent;border-radius:0}
.pf-cherche input:focus{outline:0}
.pf-cherche button{flex:0 0 auto;border:0;border-radius:14px;background:var(--encre);color:#fff;
  font-family:var(--sans);font-weight:600;font-size:15px;padding:0 26px;cursor:pointer;min-height:52px}
.pf-cherche button:hover{background:#000}

/* --- les pastilles de métier ---------------------------------------------- */
.pf-metiers{display:flex;gap:9px;flex-wrap:wrap;justify-content:center;margin-top:22px}
.pf-metiers a{font-family:var(--sans);font-size:14px;text-decoration:none;padding:9px 17px;
  border-radius:999px;border:1px solid rgba(255,255,255,.5);color:#fff;background:rgba(255,255,255,.08)}
.pf-metiers a:hover{background:rgba(255,255,255,.2)}
.pf-metiers a.ici{background:#fff;color:var(--encre);border-color:#fff;font-weight:600}

/* --- les cartes de salon --------------------------------------------------- */
/* « .section » remet un padding complet et efface les 20 px de côté de
   « .bande » : sur un téléphone, les cartes collaient aux deux bords. */
.bande.section{padding-left:20px;padding-right:20px}

.pf-liste{display:grid;gap:22px;grid-template-columns:repeat(auto-fill,minmax(270px,1fr))}
.pf-carte{border-radius:16px;overflow:hidden;background:#fff;border:1px solid var(--trait);
  text-decoration:none;color:inherit;display:flex;flex-direction:column;
  transition:transform .15s ease,box-shadow .15s ease}
.pf-carte:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(0,0,0,.12)}
.pf-carte .vue{aspect-ratio:3/2;background:var(--encre);overflow:hidden}
.pf-carte .vue img{width:100%;height:100%;object-fit:cover;display:block}
.pf-carte .texte{padding:16px 18px 20px}
.pf-carte h3{margin:0;font-size:19px}
.pf-carte .ou{font-family:var(--sans);font-size:13.5px;color:var(--encre-doux);margin-top:4px}
.pf-carte .quoi{display:inline-block;margin-top:12px;font-family:var(--sans);font-size:12px;
  font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--or);
  border:1px solid var(--or);border-radius:999px;padding:4px 11px}

.pf-vide{border:1px dashed var(--trait);border-radius:16px;padding:40px 26px;text-align:center}
.pf-pied{border-top:1px solid var(--trait);margin-top:56px;padding:28px 0 46px}
.pf-pied .bande{display:flex;gap:18px;flex-wrap:wrap;align-items:center;
  font-family:var(--sans);font-size:14px;color:var(--encre-doux)}
.pf-pied a{color:var(--encre-doux)}

@media (max-width:720px){
  .pf-entete{position:static;background:var(--encre);padding:14px 0}
  .pf-entete .bande{gap:12px;flex-wrap:nowrap}
  /* Les métiers sont déjà en pastilles sous le titre : les répéter dans
     l'en-tête ferait trois lignes de menu avant même d'avoir vu la page. */
  .pf-nav{display:none}
  .pf-pro{margin-left:auto;width:auto}
  .pf-pro a{padding:8px 14px;font-size:13px;white-space:nowrap}
  .pf-marque{font-size:18px}
  .pf-hero{min-height:0}
  .pf-hero-dedans{padding:40px 18px 34px}
  .pf-cherche{flex-direction:column;border-radius:16px;padding:6px}
  /* En colonne, « flex:1 1 220px » n'est plus une largeur mais une HAUTEUR :
     les deux champs faisaient 220 px de haut chacun. */
  .pf-cherche .champ-c{flex:0 0 auto;padding:11px 14px}
  .pf-cherche .champ-c + .champ-c{border-left:0;border-top:1px solid var(--trait)}
  .pf-cherche button{min-height:50px;width:100%;margin-top:6px}
  .pf-metiers{margin-top:18px}
}