/* =========================================================
   MS DESIGNERS — Le sélecteur de métier
   Utilisé sur services/site-vitrine.html.
   Le visiteur clique sur son secteur et la vitrine d'aperçu se
   recompose : palette, typographie, mots, contenu et composition.
   Dix modèles de composition pour huit métiers.
   Données et logique : js/secteurs.js
   ========================================================= */

/* ---------- Les commandes ---------- */
/* ---------- Disposition : commandes à gauche, aperçu à droite ---------- */
.duo{display:grid;grid-template-columns:minmax(260px,360px) 1fr;
  gap:clamp(1.2rem,2.6vw,2.2rem);align-items:start;margin-top:1.6rem}
@media (max-width:980px){ .duo{grid-template-columns:1fr} }

.secteurs{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.secteur{position:relative;padding:.85rem .9rem;border-radius:12px;
  background:rgba(255,255,255,.04);border:1px solid var(--line-strong);
  transition:transform .35s var(--ease),border-color .35s,background .35s}
.secteur:hover{transform:translateY(-2px);border-color:rgba(201,168,106,.5)}
.secteur[aria-pressed="true"]{background:rgba(201,168,106,.13);
  border-color:var(--gold);box-shadow:0 0 26px -10px rgba(201,168,106,.7)}
.secteur__ico{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;
  margin-bottom:.5rem;color:var(--gold-bright);background:rgba(201,168,106,.1);
  border:1px solid rgba(201,168,106,.3)}
.secteur__ico svg{width:17px;height:17px}
.secteur b{display:block;font-family:var(--ui);font-size:.84rem;font-weight:600;
  color:var(--white);line-height:1.25}

/* ---------- L'aperçu : une fenêtre de navigateur ---------- */
.apercu{border-radius:16px;overflow:hidden;border:1px solid var(--line-strong);
  box-shadow:0 40px 90px -40px rgba(0,0,0,.9);background:#0B0D12}
.apercu__barre{display:flex;align-items:center;gap:.5rem;padding:.6rem .85rem;
  background:rgba(255,255,255,.05);border-bottom:1px solid var(--line)}
.apercu__barre i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.2)}
.apercu__url{margin-left:.6rem;flex:1;height:20px;border-radius:100px;
  background:rgba(0,0,0,.35);display:flex;align-items:center;padding:0 .7rem;
  font-size:.64rem;color:rgba(255,255,255,.4);letter-spacing:.02em}

/* ===== Le mini-site. Tout ce qui suit se recolore, jamais ne se déplace. ===== */
.site{
  --f-titre:var(--ui); --f-corps:var(--corps);
  --c-fond:#111; --c-surface:#1a1a1a; --c-titre:#fff; --c-texte:#aaa;
  --c-accent:#888; --c-btn-fond:#888; --c-btn-txt:#fff; --c-bord:rgba(255,255,255,.12);
  --motif:none; --motif-taille:auto;
  background-color:var(--c-fond);background-image:var(--motif);
  background-size:var(--motif-taille);background-repeat:repeat;
  color:var(--c-texte);font-family:var(--f-corps);
  transition:background-color .55s var(--ease),color .55s var(--ease)}

/* Le bloc du bas laisse voir la matiere du fond plutot que de l'aplatir */
.site__bloc{background-color:color-mix(in srgb, var(--c-surface) 82%, transparent)}

/* Vignettes : un degrade tire de la palette, au lieu d'un gris mort */
.g3 i{background-image:linear-gradient(150deg,
  color-mix(in srgb, var(--c-accent) 34%, transparent),
  color-mix(in srgb, var(--c-accent) 12%, transparent) 55%,
  transparent)}
/* Sur fond clair, une vignette trop pale se confond avec la page.
   Un aplat sombre dessous la fait lire comme un objet pose la. */
.est-clair .g3 i{background-color:color-mix(in srgb, var(--c-titre) 15%, transparent)}

/* Univers clairs : les ombres remplacent les bordures pour porter le relief */
.est-clair .site__cta,.est-clair .site__bouton{
  box-shadow:0 8px 22px -10px color-mix(in srgb, var(--c-btn-fond) 70%, transparent)}
.est-clair .gar div,.est-clair .off div,.est-clair .cre span{
  background:color-mix(in srgb, var(--c-fond) 55%, #fff);
  box-shadow:0 2px 10px -6px rgba(0,0,0,.28)}
.site *{transition:background-color .55s var(--ease),color .55s var(--ease),
  border-color .55s var(--ease)}

.site__nav{display:flex;align-items:center;justify-content:space-between;
  padding:.9rem 1.4rem;border-bottom:1px solid var(--c-bord)}
.site__marque{font-family:var(--f-titre);font-weight:700;font-size:1rem;color:var(--c-titre);
  letter-spacing:.01em}
.site__liens{display:flex;gap:1.1rem;font-size:.72rem;color:var(--c-texte)}
@media (max-width:640px){ .site__liens{display:none} }
.site__cta{font-family:var(--f-corps);font-weight:700;font-size:.7rem;padding:.42rem .95rem;
  border-radius:var(--r-btn,100px);background:var(--c-btn-fond);color:var(--c-btn-txt);
  white-space:nowrap}

.site__hero{padding:clamp(1.6rem,4vw,2.8rem) 1.4rem}
.site__oeil{font-size:.64rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--c-accent);display:block;margin-bottom:.6rem}
.site__titre{font-family:var(--f-titre);font-size:clamp(1.5rem,3.6vw,2.5rem);line-height:1.1;
  color:var(--c-titre);margin-bottom:.6rem;font-weight:var(--w-titre,700);
  letter-spacing:var(--ls-titre,-.01em)}
.site__sous{font-size:.88rem;max-width:46ch;margin-bottom:1.2rem}
.site__bouton{display:inline-block;font-weight:700;font-size:.76rem;padding:.6rem 1.4rem;
  border-radius:var(--r-btn,100px);background:var(--c-btn-fond);color:var(--c-btn-txt);
  /* Dans un hero en colonne flex, un enfant s'etire sur toute la largeur.
     On l'en empeche : le bouton doit tenir a la largeur de son libelle. */
  align-self:flex-start;width:fit-content}

.site__bloc{padding:1.4rem;border-top:1px solid var(--c-bord);background:var(--c-surface)}
.bloc{display:none}
.bloc.is-on{display:block}
.bloc__titre{font-family:var(--f-titre);font-size:.95rem;color:var(--c-titre);
  margin-bottom:.9rem;font-weight:var(--w-titre,700)}

/* Galerie */
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem}
.g3 i{display:block;aspect-ratio:4/3;border-radius:8px;background:var(--c-bord);
  border:1px solid var(--c-bord)}
/* Garanties */
.gar{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem}
.gar div{padding:.7rem;border-radius:8px;border:1px solid var(--c-bord);text-align:center;
  font-size:.68rem;color:var(--c-texte)}
.gar b{display:block;color:var(--c-accent);font-size:1.05rem;margin-bottom:.2rem;
  font-family:var(--f-titre)}
/* Carte de restaurant */
.carte div{display:flex;align-items:baseline;gap:0;margin-bottom:.5rem;font-size:.78rem}
.carte span:first-child{color:var(--c-titre);white-space:nowrap}
.carte em{flex:1;border-bottom:1px dotted var(--c-bord);margin:0 .35rem 0 .25rem;
  transform:translateY(-3px)}
.carte span:last-child{color:var(--c-accent);font-weight:700;white-space:nowrap}
/* Domaines */
.dom{display:grid;grid-template-columns:1fr 1fr;gap:.5rem .9rem;font-size:.76rem}
.dom div{padding-left:.9rem;position:relative;color:var(--c-texte)}
.dom div::before{content:"";position:absolute;left:0;top:.55em;width:5px;height:1px;
  background:var(--c-accent)}
/* Créneaux */
.cre{display:flex;flex-wrap:wrap;gap:.45rem}
.cre span{padding:.4rem .8rem;border-radius:100px;border:1px solid var(--c-bord);
  font-size:.72rem;color:var(--c-texte)}
.cre span.libre{border-color:var(--c-accent);color:var(--c-accent);font-weight:700}
/* Offres */
.off{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.off div{padding:.85rem;border-radius:10px;border:1px solid var(--c-bord)}
.off b{display:block;font-family:var(--f-titre);font-size:1.15rem;color:var(--c-accent);
  margin-bottom:.15rem}
.off span{font-size:.7rem;color:var(--c-texte)}

/* =========================================================
   HUIT MODÈLES DE COMPOSITION
   Chaque métier reçoit sa propre disposition, pas seulement sa
   palette. Le cadre du navigateur reste identique pour que la
   comparaison soit possible, mais l'agencement interne change
   complètement d'un secteur à l'autre.
   ========================================================= */

/* 1 · CENTRÉ — marque et hero centrés, galerie large dessous.
   Registre atelier : symétrique, posé, rien ne se bouscule. */
.m-centre .site__nav{justify-content:center;gap:1.6rem;flex-wrap:wrap}
.m-centre .site__hero{text-align:center;padding-inline:2rem}
.m-centre .site__sous{margin-inline:auto}
.m-centre .site__bouton{margin-inline:auto}

/* 2 · SPLIT — texte à gauche, preuve à droite immédiatement.
   Registre bâtiment : dense, efficace, on va au fait. */
.m-split .site__corps{display:grid;grid-template-columns:1.15fr .85fr;align-items:stretch}
.m-split .site__bloc{border-top:none;border-left:1px solid var(--c-bord)}
.m-split .site__hero{padding-block:1.6rem}
@media (max-width:720px){ .m-split .site__corps{grid-template-columns:1fr}
  .m-split .site__bloc{border-left:none;border-top:1px solid var(--c-bord)} }

/* 3 · ÉDITORIAL — titre monumental centré, carte sur deux colonnes.
   Registre restaurant : la salle, puis la carte. */
.m-editorial .site__nav{justify-content:center;gap:1.6rem}
.m-editorial .site__hero{text-align:center;padding-block:clamp(2rem,5vw,3.4rem)}
.m-editorial .site__titre{font-size:clamp(1.8rem,4.6vw,3.2rem);line-height:1.04}
.m-editorial .site__sous{margin-inline:auto}
.m-editorial .site__bouton{margin-inline:auto}
.m-editorial .carte{columns:2;column-gap:2rem}
@media (max-width:640px){ .m-editorial .carte{columns:1} }

/* 4 · COLONNE — colonne étroite alignée à gauche, liens sous la marque.
   Registre cabinet : austère, dense, on lit plutôt qu'on regarde. */
.m-colonne .site__nav{flex-direction:column;align-items:flex-start;gap:.55rem}
.m-colonne .site__liens{gap:1.4rem}
.m-colonne .site__cta{align-self:flex-start;margin-top:.2rem}
.m-colonne .site__hero{max-width:36rem;padding-block:2rem}
.m-colonne .site__titre{font-size:clamp(1.4rem,3vw,2.1rem)}
.m-colonne .site__bloc{max-width:36rem}

/* 5 · AÉRÉ — hero centré, respiration maximale, créneaux au milieu.
   Registre santé : le calme se joue dans le vide autour du texte. */
.m-aere .site__nav{justify-content:space-between}
.m-aere .site__hero{text-align:center;padding-block:clamp(2.4rem,6vw,4rem);padding-inline:2.4rem}
.m-aere .site__sous{margin-inline:auto;max-width:38ch}
.m-aere .site__bouton{margin-inline:auto}
.m-aere .site__bloc{text-align:center;padding-block:2rem}
.m-aere .cre{justify-content:center}
.m-aere .bloc__titre{margin-bottom:1.2rem}

/* 6 · INVERSÉ — l'offre d'abord à gauche, le discours à droite.
   Registre coaching : on montre le format avant de convaincre. */
.m-inverse .site__corps{display:grid;grid-template-columns:.85fr 1.15fr;align-items:stretch}
.m-inverse .site__hero{order:2;padding-block:1.8rem}
.m-inverse .site__bloc{order:1;border-top:none;border-right:1px solid var(--c-bord)}
@media (max-width:720px){ .m-inverse .site__corps{grid-template-columns:1fr}
  .m-inverse .site__hero{order:1} .m-inverse .site__bloc{order:2;
  border-right:none;border-top:1px solid var(--c-bord)} }

/* 7 · BANDEAU — le titre repose en bas du hero, comme sur une affiche.
   Registre immobilier : l'image d'abord, le mot ensuite. */
.m-bandeau .site__hero{min-height:190px;display:flex;flex-direction:column;
  justify-content:flex-end;padding-block:1.4rem 1.6rem;
  background:linear-gradient(180deg,transparent 30%,rgba(0,0,0,.28))}
.m-bandeau .site__titre{font-size:clamp(1.5rem,3.4vw,2.3rem)}
.m-bandeau .site__bloc .g3{grid-template-columns:repeat(3,1fr)}

/* 8 · MINIMAL — navigation réduite, titre énorme, tout resserré.
   Registre studio indépendant : peu d'éléments, beaucoup d'aplomb. */
.m-minimal .site__liens{display:none}
.m-minimal .site__nav{padding-block:.7rem}
.m-minimal .site__hero{padding-block:clamp(1.8rem,4.4vw,3rem)}
.m-minimal .site__titre{font-size:clamp(1.8rem,4.4vw,3rem);line-height:1.02}
.m-minimal .site__sous{font-size:.82rem;max-width:36ch}
.m-minimal .site__bloc{padding-block:1.1rem}

/* 9 · INSTITUTION — beaucoup d'air, un filet fin sous l'entête, titre
   généreux aligné à gauche. Registre des cabinets d'affaires : la
   sobriété se joue dans l'espace laissé vide, pas dans l'étroitesse. */
.m-institution .site__nav{padding-block:1.2rem;border-bottom-width:2px}
.m-institution .site__hero{padding-block:clamp(2.2rem,5.5vw,3.6rem);max-width:52rem}
.m-institution .site__oeil{padding-bottom:.7rem;margin-bottom:1rem;
  border-bottom:1px solid var(--c-bord);display:inline-block}
.m-institution .site__titre{line-height:1.22}
.m-institution .site__sous{max-width:52ch;margin-bottom:1.6rem}
.m-institution .site__bloc{background:transparent}
.m-institution .dom{gap:.8rem 2.4rem}
.m-institution .dom div{padding-left:0;padding-block:.55rem;
  border-top:1px solid var(--c-bord)}
.m-institution .dom div::before{display:none}

/* 10 · VITRINE — le travail avant les mots : la galerie ouvre la page,
   le discours vient dessous. C'est ainsi que procèdent les ateliers. */
.m-vitrine .site__corps{display:flex;flex-direction:column}
.m-vitrine .site__bloc{order:1;border-top:none;border-bottom:1px solid var(--c-bord);
  background:transparent;padding-block:1.2rem}
.m-vitrine .site__hero{order:2}
.m-vitrine .site__bloc .bloc__titre{font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--c-accent);margin-bottom:.8rem}
.m-vitrine .g3{grid-template-columns:repeat(3,1fr);gap:.5rem}
.m-vitrine .g3 i{aspect-ratio:1/1;border-radius:0}

/* ---------- Légende sous l'aperçu ---------- */
/* Mention sous l'aperçu : elle dit franchement ce que le visiteur regarde,
   sans quoi il pourrait juger un site fini là où il voit une direction. */
.apercu__mention{margin-top:.9rem;font-size:.86rem;line-height:1.6;
  color:var(--muted);max-width:62ch}