/* weezar.fr · feuille de style unique
   Pas de framework, pas de build : ce fichier est servi tel quel.
   Repères : 1. polices  2. jetons  3. base  4. en-tête  5. blocs  6. formulaire  7. pied  8. écrans étroits */

/* ===== 1. Polices (auto-hébergées, aucun appel à Google Fonts : RGPD) ===== */
@font-face{font-family:Inter;src:url(../fonts/inter-light.woff2)format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:Inter;src:url(../fonts/inter-regular.woff2)format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Inter;src:url(../fonts/inter-medium.woff2)format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Inter;src:url(../fonts/inter-semibold.woff2)format("woff2");font-weight:600;font-style:normal;font-display:swap}

/* ===== 2. Jetons ===== */
:root{
  --noir:#0B0B0C;
  --surface:#141417;
  --surface-haute:#1C1C21;
  --trait:#2B2B31;
  --texte:#EDEBE7;
  --texte-doux:#9B9892;
  --accent:#C8CCD2;
  --clair:#F2F0EC;
  --gouttiere:clamp(20px,5vw,64px);
  --largeur:1180px;
  --rythme:clamp(64px,9vw,128px);
}

/* ===== 3. Base ===== */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px} /* l'en-tête est collant : on décale les ancres d'autant */
body{
  margin:0;background:var(--noir);color:var(--texte);
  font:300 clamp(1rem,.96rem + .22vw,1.08rem)/1.65 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img,video{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{font-weight:400;line-height:1.15;letter-spacing:-.015em;margin:0}
h1{font-size:clamp(2.1rem,1.3rem + 3.6vw,4rem)}
h2{font-size:clamp(1.6rem,1.15rem + 1.9vw,2.5rem)}
h3{font-size:clamp(1.12rem,1.02rem + .45vw,1.3rem);font-weight:500}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}
.contenu{width:min(var(--largeur),100% - var(--gouttiere)*2);margin-inline:auto}
.etroit{width:min(760px,100% - var(--gouttiere)*2);margin-inline:auto}
section{padding-block:var(--rythme)}
.surtitre{
  font-size:.74rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;
  color:var(--accent);margin:0 0 18px;
}
.chapo{font-size:clamp(1.05rem,1rem + .4vw,1.25rem);color:var(--texte-doux);max-width:62ch}
.lien-evidence{position:absolute;left:-9999px}
.lien-evidence:focus{left:16px;top:16px;z-index:100;background:var(--texte);color:var(--noir);padding:10px 16px;border-radius:2px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* Boutons */
.bouton{
  display:inline-block;padding:14px 30px;border:1px solid var(--texte);border-radius:2px;
  font-size:.82rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;
  transition:background .18s ease,color .18s ease;
}
.bouton:hover{background:var(--texte);color:var(--noir)}
.bouton.plein{background:var(--texte);color:var(--noir)}
.bouton.plein:hover{background:transparent;color:var(--texte)}

/* ===== 4. En-tête ===== */
.entete{
  position:sticky;top:0;z-index:50;
  background:rgba(11,11,12,.86);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--trait);
}
.entete .contenu{display:flex;align-items:center;gap:24px;min-height:72px}
.marque{
  font-size:1.02rem;font-weight:300;letter-spacing:.42em;text-transform:uppercase;
  text-decoration:none;margin-right:auto;padding-right:.42em;
}
.menu{display:flex;align-items:center;gap:clamp(14px,2vw,30px);list-style:none;margin:0;padding:0}
.menu a{
  font-size:.82rem;font-weight:400;letter-spacing:.04em;text-decoration:none;color:var(--texte-doux);
  padding:6px 0;border-bottom:1px solid transparent;transition:color .18s ease,border-color .18s ease;
}
.menu a:hover{color:var(--texte)}
.menu a[aria-current=page]{color:var(--texte);border-bottom-color:var(--accent)}
.menu .bouton{color:var(--texte);border-color:var(--trait);padding:9px 18px}
.menu .bouton:hover{background:var(--texte);color:var(--noir);border-color:var(--texte)}
.menu .langue a{
  font-size:.74rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);border-bottom:none;
}
.menu .langue a:hover{color:var(--texte)}
.bascule{display:none;background:none;border:1px solid var(--trait);border-radius:2px;color:var(--texte);padding:8px 12px;font:inherit;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;cursor:pointer}

/* ===== 5. Blocs ===== */
/* Bandeau d'ouverture */
.ouverture{position:relative;min-height:clamp(440px,74vh,760px);display:flex;align-items:flex-end;overflow:hidden}
/* Le cadrage est décalé dans la photo pour que le comédien en lévitation se place à
   droite du titre sur grand écran, et au-dessus du titre sur téléphone, où la fenêtre
   de recadrage est beaucoup plus étroite. Deux valeurs, une par largeur.
   À revoir si l'image d'ouverture change. */
.ouverture img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:15% center;opacity:.52}
@media (max-width:820px){.ouverture img{object-position:42% center}}
.ouverture::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,11,12,.72) 0%,rgba(11,11,12,.25) 42%,rgba(11,11,12,.94) 100%)}
.ouverture .contenu{position:relative;z-index:1;padding-block:clamp(48px,8vw,96px)}
.ouverture h1{max-width:18ch}
.ouverture .chapo{margin-top:22px}
.ouverture .actions{margin-top:34px;display:flex;flex-wrap:wrap;gap:14px}

/* Ouverture courte des pages intérieures */
.titre-page{border-bottom:1px solid var(--trait);padding-block:clamp(56px,8vw,104px) clamp(40px,6vw,72px)}
.titre-page .chapo{margin-top:20px}

/* Grille de cartes */
.cartes{display:grid;gap:clamp(20px,2.4vw,32px);grid-template-columns:repeat(auto-fit,minmax(280px,1fr));margin:0;padding:0;list-style:none}
.carte{background:var(--surface);border:1px solid var(--trait);border-radius:3px;overflow:hidden;display:flex;flex-direction:column}
.carte img{aspect-ratio:4/3;object-fit:cover;width:100%}
.carte .corps{padding:26px 26px 30px}
.carte h3{margin-bottom:6px}
.carte .role{font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:12px}
.carte p{color:var(--texte-doux);font-size:.98rem}

/* Liste de points */
.points{list-style:none;margin:16px 0 0;padding:0;color:var(--texte-doux);font-size:.98rem}
.points li{padding-left:20px;position:relative;margin-bottom:8px}
.points li::before{content:"";position:absolute;left:0;top:.68em;width:8px;height:1px;background:var(--accent)}

/* Étapes numérotées (prestations) */
.etapes{display:grid;gap:clamp(28px,4vw,56px);margin:0;padding:0;list-style:none}
.etape{display:grid;gap:clamp(20px,3vw,48px);align-items:start;padding-top:36px;border-top:1px solid var(--trait)}
@media (min-width:860px){.etape{grid-template-columns:minmax(0,1fr) minmax(0,.9fr)}}
.etape .numero{font-size:.76rem;letter-spacing:.2em;color:var(--accent);margin-bottom:14px}
.etape h3{font-size:clamp(1.25rem,1.05rem + .9vw,1.7rem);font-weight:400;margin-bottom:14px}
.etape .sous{color:var(--texte-doux)}
.etape figure{margin:0}
.etape figure img{border-radius:3px;aspect-ratio:3/2;object-fit:cover;width:100%}

/* Galerie */
.galerie{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));margin:0;padding:0;list-style:none}
.galerie figure{margin:0;position:relative;overflow:hidden;border-radius:3px;background:var(--surface)}
.galerie img{width:100%;aspect-ratio:3/2;object-fit:cover;transition:transform .5s ease,opacity .3s ease;opacity:.92}
.galerie figure:hover img{transform:scale(1.035);opacity:1}
.galerie figcaption{
  position:absolute;inset:auto 0 0 0;padding:28px 16px 14px;font-size:.84rem;color:var(--texte);
  background:linear-gradient(180deg,rgba(11,11,12,0),rgba(11,11,12,.9));
}
.galerie .haute img{aspect-ratio:2/3}
.galerie .large{grid-column:span 2}

/* Bande de références */
.references{background:var(--clair);color:#1A1A1C}
.references .surtitre{color:#6B6862}
.logos{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:clamp(28px,5vw,64px);margin:0;padding:0;list-style:none}
/* Les logos sont des fichiers à fond blanc : multiply fait disparaître ce fond
   dans la bande claire, sans avoir à les détourer un par un. */
.logos img{height:clamp(30px,4.6vw,52px);width:auto;object-fit:contain;opacity:.82;mix-blend-mode:multiply;transition:opacity .2s ease}
.logos .carre img{height:clamp(46px,6.6vw,76px)}
.logos li:hover img{opacity:1}

/* Deux colonnes texte */
.duo{display:grid;gap:clamp(28px,4vw,64px)}
@media (min-width:880px){.duo{grid-template-columns:repeat(2,minmax(0,1fr))}}
.duo img{border-radius:3px;width:100%;object-fit:cover}

/* Bandeau d'appel */
.appel{border-top:1px solid var(--trait);border-bottom:1px solid var(--trait);background:var(--surface)}
.appel h2{max-width:20ch}
.appel .actions{margin-top:28px;display:flex;flex-wrap:wrap;gap:14px}

/* Coordonnées */
.coordonnees{display:grid;gap:28px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin:0;padding:0}
.coordonnees dt{font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-bottom:8px}
.coordonnees dd{margin:0;font-size:1.05rem}
.coordonnees a{text-decoration:none;border-bottom:1px solid var(--trait)}
.coordonnees a:hover{border-bottom-color:var(--accent)}

/* Texte long (mentions, confidentialité) */
.texte-long h2{font-size:clamp(1.25rem,1.1rem + .7vw,1.6rem);margin:2.2em 0 .7em}
.texte-long h2:first-of-type{margin-top:1.2em}
.texte-long ul{color:var(--texte-doux);padding-left:20px}
.texte-long li{margin-bottom:6px}
.texte-long a{color:var(--accent)}

/* ===== 6. Formulaire ===== */
.formulaire{display:grid;gap:20px}
@media (min-width:720px){.formulaire{grid-template-columns:repeat(2,minmax(0,1fr))}.pleine{grid-column:1/-1}}
.champ{display:flex;flex-direction:column;gap:7px}
.champ label{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--texte-doux)}
.champ .requis{color:var(--accent)}
.champ input,.champ select,.champ textarea{
  font:inherit;color:var(--texte);background:var(--surface);border:1px solid var(--trait);border-radius:2px;
  padding:13px 14px;width:100%;
}
.champ textarea{min-height:150px;resize:vertical}
.champ input:focus,.champ select:focus,.champ textarea:focus{border-color:var(--accent);outline:none}
.champ .erreur{font-size:.84rem;color:#E7A6A6}
.piege{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.mention-rgpd{font-size:.86rem;color:var(--texte-doux)}
.mention-rgpd a{color:var(--accent)}
.retour{border:1px solid var(--trait);border-left:2px solid var(--accent);background:var(--surface);padding:14px 16px;font-size:.95rem}
.retour[hidden]{display:none}

/* ===== 7. Pied ===== */
.pied{border-top:1px solid var(--trait);padding-block:clamp(44px,6vw,72px) 32px;font-size:.92rem;color:var(--texte-doux)}
.pied-haut{display:grid;gap:36px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin-bottom:40px}
.pied h2{font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--texte);font-weight:500;margin-bottom:14px}
.pied ul{list-style:none;margin:0;padding:0}
.pied li{margin-bottom:8px}
.pied a{text-decoration:none}
.pied a:hover{color:var(--texte)}
.pied-bas{display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between;align-items:center;border-top:1px solid var(--trait);padding-top:24px;font-size:.84rem}

/* ===== 8. Écrans étroits ===== */
@media (max-width:820px){
  .bascule{display:block}
  .menu{
    display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0;
    background:var(--noir);border-bottom:1px solid var(--trait);padding:8px var(--gouttiere) 20px;
  }
  .entete.ouvert .menu{display:flex}
  .menu li{border-top:1px solid var(--trait)}
  .menu a{display:block;padding:15px 0;font-size:.98rem}
  .menu .bouton{margin-top:16px;text-align:center;padding:13px 18px}
  .menu li:last-child{border-top:none}
  .galerie .large{grid-column:span 1}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}