/* =====================================================================
   SHAÏZ · Feuille de style
   Mobile d'abord : tout est pensé pour l'iPhone, puis élargi sur ordinateur.

   ► Pour changer une couleur, une typo ou un espacement :
     modifie uniquement les variables ci-dessous (section RÉGLAGES).
   ===================================================================== */


/* ---------------------------------------------------------------------
   RÉGLAGES (couleurs, typos, espacements)
   --------------------------------------------------------------------- */
:root {
  /* Couleurs */
  --noir:        #0a0a0a;   /* fond du site */
  --noir-2:      #141414;   /* fond des blocs */
  --blanc:       #f2efe9;   /* blanc cassé : texte principal */
  --gris:        #8d8a85;   /* texte secondaire */
  --trait:       rgba(242, 239, 233, .14);   /* lignes fines */
  --encre:       #141414;   /* texte sur les sections claires */
  --sable:       #e6e0d5;   /* 2e fond clair, pour alterner sans gros contraste */
  --rouge:       #c3282d;   /* rouge : très rares détails (point du menu) */

  /* Le dégradé chrome (rappelle le chrome-cobalt poli) */
  --chrome: linear-gradient(100deg, #8e9196 0%, #f5f6f7 18%, #a7aab0 32%, #ffffff 46%, #7d8086 62%, #dfe1e4 80%, #9a9da2 100%);
  --chrome-fonce: linear-gradient(100deg, #1d1f22 0%, #6d7076 18%, #2b2d31 32%, #9a9da3 46%, #1d1f22 62%, #5c5f64 80%, #2b2d31 100%);   /* titres sur fond clair */

  /* Typos */
  --typo-titre: "Dela Gothic One", system-ui, sans-serif;
  --typo-label: "JetBrains Mono", ui-monospace, monospace;
  --typo-texte: "Inter", system-ui, sans-serif;

  /* Espacements */
  --marge: 22px;            /* marge gauche/droite sur mobile */
  --espace-section: 96px;   /* espace entre deux sections */
  --largeur-max: 560px;     /* largeur maximale du contenu */
}


/* ---------------------------------------------------------------------
   BASE
   --------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--noir);
  color: var(--blanc);
  font-family: var(--typo-texte);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

img { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }


/* ---------------------------------------------------------------------
   ÉLÉMENTS RÉUTILISÉS
   --------------------------------------------------------------------- */

/* Texte chrome avec un reflet qui passe lentement */
.chrome {
  background: var(--chrome);
  background-size: 250% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  animation: reflet 6s ease-in-out infinite;
}
@keyframes reflet {
  0%, 100% { background-position: 0% 0; }
  50%      { background-position: 100% 0; }
}

/* Petit texte façon étiquette (majuscules espacées) */
.label {
  font-family: var(--typo-label);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--blanc);
}
.label--centre { text-align: center; }

/* Bouton principal : chrome + éclat lumineux qui le traverse */
.bouton {
  position: relative;
  overflow: hidden;
  display: block;
  width: 100%;
  padding: 17px 18px;
  text-align: center;
  text-decoration: none;
  font-family: var(--typo-texte);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--noir);
  background: var(--chrome);
  background-size: 200% 100%;
}
.bouton::after {
  content: "";
  position: absolute;
  top: 0; left: -60%;
  width: 40%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.85), transparent);
  transform: skewX(-20deg);
  animation: eclat 3.5s ease-in-out infinite;
}
@keyframes eclat {
  0%, 60% { left: -60%; }
  100%    { left: 130%; }
}

/* Variante : bouton à contour (moins mis en avant) */
.bouton--contour {
  background: transparent;
  color: var(--blanc);
  border: 1px solid rgba(242, 239, 233, .6);
}
.bouton--contour::after { background: linear-gradient(100deg, transparent, rgba(255,255,255,.25), transparent); }

/* Lien texte simple */
.lien {
  display: inline-block;
  font-family: var(--typo-label);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--gris);
  border-bottom: 1px solid var(--trait);
  padding-bottom: 3px;
}

/* Grain discret par-dessus les photos */
.grain {
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: .13;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Grand logo en contour fin, en fond (comme la story tarifs) */
.logo-fond {
  position: absolute;
  width: 190%;
  max-width: none;
  left: -45%;
  top: 18%;
  opacity: .28;
  transform: rotate(-68deg);
  pointer-events: none;
}


/* ---------------------------------------------------------------------
   1. ACCUEIL
   --------------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  min-height: 100svh;          /* hauteur réelle de l'écran sur iPhone */
  display: flex;
}
.hero__photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 55%;
  filter: grayscale(.15) contrast(1.05);
}
.hero__voile {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,10,10,.6) 0%, rgba(10,10,10,.2) 35%, rgba(10,10,10,.85) 70%, var(--noir) 100%);
}
.hero__contenu {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--largeur-max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  padding: calc(48px + env(safe-area-inset-top)) var(--marge) calc(36px + env(safe-area-inset-bottom));
}
.hero__logo { width: 120px; align-self: center; }
.hero__lieu {
  align-self: center;
  margin-top: 10px;
  padding-left: .32em;          /* compense l'espacement des lettres pour bien centrer */
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .32em;
  text-transform: uppercase;
}
.hero__bas { margin-top: auto; text-align: center; }
.hero__titre {
  font-family: var(--typo-titre);
  font-weight: 400;
  font-size: clamp(48px, 15vw, 88px);
  line-height: .92;
  text-transform: uppercase;
}
.hero__bas .label { margin-top: 14px; }
.hero__texte { margin-top: 10px; font-size: 14px; color: #c9c5bf; }
.hero__bas .bouton { margin-top: 22px; }


/* ---------------------------------------------------------------------
   SECTIONS (structure commune)
   --------------------------------------------------------------------- */
.section {
  max-width: var(--largeur-max);
  margin: 0 auto;
  padding: var(--espace-section) var(--marge) 0;
}
.section--large { max-width: 900px; }

.titre-section {
  font-family: var(--typo-titre);
  font-weight: 400;
  font-size: clamp(24px, 7.2vw, 48px);   /* « RÉALISATIONS » doit tenir sur un iPhone SE */
  line-height: 1;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 36px;
}
.titre-section + .label--centre { margin: -20px 0 28px; }

.texte-centre { text-align: center; color: #c9c5bf; }


/* ---------------------------------------------------------------------
   2. COMMENT ÇA MARCHE
   --------------------------------------------------------------------- */
.etapes { list-style: none; border-top: 1px solid var(--trait); }
.etape {
  display: flex;
  gap: 18px;
  padding: 22px 0;
  border-bottom: 1px solid var(--trait);
}
.etape__num {
  font-family: var(--typo-label);
  font-size: 13px;
  color: var(--gris);
  padding-top: 3px;
  min-width: 22px;
}
.etape__titre {
  font-family: var(--typo-titre);
  font-weight: 400;
  font-size: 19px;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.etape p { color: #c9c5bf; font-size: 15px; }


/* ---------------------------------------------------------------------
   3. CHROME-COBALT
   --------------------------------------------------------------------- */
.atouts { list-style: none; display: grid; gap: 12px; }
.atouts li {
  padding: 22px 20px;
  background: var(--noir-2);
  border: 1px solid var(--trait);
  text-align: center;
}
.atouts .label { margin-bottom: 8px; }
.atouts p { color: #c9c5bf; font-size: 15px; }


/* ---------------------------------------------------------------------
   4. TARIFS (lignes avec pointillés, comme la story)
   --------------------------------------------------------------------- */
.tarifs { list-style: none; }
.tarifs li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 11px 0;
  font-family: var(--typo-titre);
  font-size: 18px;
  text-transform: uppercase;
}
.tarifs i { flex: 1; border-bottom: 1px solid var(--trait); transform: translateY(-5px); }
.tarifs b { font-weight: 400; }
.encadre {
  margin-top: 28px;
  padding: 16px;
  border: 1px solid rgba(242, 239, 233, .6);
  text-align: center;
  font-family: var(--typo-titre);
  font-size: 16px;
  text-transform: uppercase;
}


/* ---------------------------------------------------------------------
   5. RÉALISATIONS (galerie)
   --------------------------------------------------------------------- */
.galerie {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}
.galerie__item {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--noir-2);
}
.galerie__item img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.galerie__item:hover img { transform: scale(1.04); }
#realisations .lien { display: table; margin: 28px auto 0; }

/* Visionneuse (photo agrandie) */
.visionneuse {
  position: fixed; inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(10, 10, 10, .96);
}
.visionneuse[hidden] { display: none; }
.visionneuse img { max-height: 86vh; width: auto; }
.visionneuse__fermer {
  position: absolute;
  top: calc(12px + env(safe-area-inset-top)); right: 16px;
  font-size: 34px;
  line-height: 1;
  padding: 8px;
}


/* ---------------------------------------------------------------------
   6. L'ATELIER
   --------------------------------------------------------------------- */
.atelier__photo {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  margin-bottom: 22px;
}


/* ---------------------------------------------------------------------
   7. RÉSERVER
   --------------------------------------------------------------------- */
.calendrier {
  margin-top: 28px;
  padding: 36px 20px;
  border: 1px dashed var(--trait);
  text-align: center;
}
.calendrier .bouton { margin-top: 18px; }
.rappel {
  margin-top: 14px;
  padding: 24px 20px;
  background: var(--noir-2);
  border: 1px solid var(--trait);
  text-align: center;
}
.rappel__titre { font-weight: 600; }
.rappel p + p { color: #c9c5bf; font-size: 15px; margin-top: 4px; }
.rappel .bouton { margin-top: 18px; }


/* ---------------------------------------------------------------------
   8. FAQ (questions qui s'ouvrent au toucher)
   --------------------------------------------------------------------- */
.faq { border-top: 1px solid var(--trait); }
.faq details { border-bottom: 1px solid var(--trait); }
.faq summary {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0;
  cursor: pointer;
  font-family: var(--typo-titre);
  font-size: 17px;
  text-transform: uppercase;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font-family: var(--typo-label);
  font-size: 20px;
  color: var(--gris);
  transition: transform .25s ease;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 0 20px; color: #c9c5bf; font-size: 15px; }
.faq details .lien { margin-bottom: 20px; }


/* ---------------------------------------------------------------------
   9. BAS DE PAGE
   --------------------------------------------------------------------- */
.footer {
  margin-top: var(--espace-section);
  padding: 48px var(--marge) calc(40px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--trait);
  text-align: center;
}
.footer__logo { width: 84px; margin: 0 auto 14px; opacity: .9; }
.footer__liens {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 22px;
  margin-top: 22px;
  font-size: 14px;
}
.footer__liens a { color: var(--gris); text-decoration: none; }
.footer__copy { margin-top: 22px; font-size: 12px; color: var(--gris); }


/* ---------------------------------------------------------------------
   ORDINATEUR (écrans larges)
   --------------------------------------------------------------------- */
@media (min-width: 760px) {
  :root { --espace-section: 130px; }
  .galerie { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .atouts { grid-template-columns: repeat(3, 1fr); }
  .logo-fond { width: 120%; left: -10%; top: 0; transform: rotate(-20deg); }
}


/* ---------------------------------------------------------------------
   FINITIONS : animations discrètes
   --------------------------------------------------------------------- */

/* Arrivée sur le site : la photo recule doucement, le texte monte un par un */
@keyframes entree {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes recul {
  from { transform: scale(1.08); }
  to   { transform: scale(1); }
}
.hero__photo     { animation: recul 2.4s cubic-bezier(.2,.7,.2,1) both; }
.hero__logo      { animation: entree .9s .15s both; }
.hero__lieu      { animation: entree .9s .3s both; }
.hero__titre     { animation: entree .9s .45s both, reflet 6s ease-in-out infinite; }
.hero__bas .label{ animation: entree .9s .65s both; }
.hero__texte     { animation: entree .9s .75s both; }
.hero__bas .bouton { animation: entree .9s .9s both; }

/* Au défilement : chaque bloc apparaît quand il arrive à l'écran.
   (La classe .js est ajoutée par le script : sans JavaScript, tout reste visible.) */
.js .apparait {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1);
  transition-delay: var(--delai, 0s);
}
.js .apparait.visible { opacity: 1; transform: none; }

/* Photo agrandie : fondu à l'ouverture */
.visionneuse:not([hidden]) { animation: fondu .25s ease both; }
@keyframes fondu { from { opacity: 0; } to { opacity: 1; } }

/* Onglets de la galerie : Tout / Classique / Custom */
.filtres { display: flex; justify-content: center; gap: 8px; margin: -12px 0 22px; }
.filtre {
  padding: 8px 16px;
  border: 1px solid var(--trait);
  border-radius: 0;                 /* carré, comme le reste du site */
  font-family: var(--typo-label);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gris);
  transition: background .2s, color .2s;
}
.filtre.actif { background: var(--blanc); border-color: var(--blanc); color: var(--noir); }
.galerie__item[hidden] { display: none; }




/* ---------------------------------------------------------------------
   AMBIANCE : sections claires et noires en alternance
   (1re, 3e, 5e… section = claire ; les autres restent noires)
   --------------------------------------------------------------------- */
main .section { padding-bottom: var(--espace-section); }
.footer { margin-top: 0; }

main .section {
  --trait: rgba(20, 20, 20, .15);
  --gris: #77736c;
  --noir-2: #e8e4dc;
  background: var(--blanc);
  color: var(--encre);
  box-shadow: 0 0 0 100vmax var(--blanc);   /* étend le fond sur toute la largeur */
  clip-path: inset(0 -100vmax);
}
main .section .label { color: var(--encre); }
main .section :is(.texte-centre, .etape p, .atouts p, .rappel p + p, .faq details p) { color: #4d4a45; }
main .section .chrome { background-image: var(--chrome-fonce); }
main .section .bouton { background: var(--encre); color: var(--blanc); }
main .section .bouton--contour { background: transparent; color: var(--encre); border-color: rgba(20,20,20,.6); }
main .section .encadre { border-color: rgba(20,20,20,.5); }

/* Toutes les sections ont le même fond clair : les blocs se séparent par l'espace et un trait fin */
main .section + .section { border-top: 1px solid var(--trait); }

/* Grain argentique très léger sur tout le site (comme l'accueil) */
body::after {
  content: "";
  position: fixed; inset: 0;
  z-index: 20;
  pointer-events: none;
  opacity: .07;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Photos : léger étalonnage chaud, façon pellicule */
main img:not(.portrait-net), main video { filter: sepia(.12) saturate(.92) contrast(1.04); }

/* Section courte (ex. chrome-cobalt) : moins d'espace */
main .section--compacte { padding-top: 56px; padding-bottom: 56px; }
.section--compacte .texte-centre { margin-top: 10px; font-size: 15px; }

/* ---------------------------------------------------------------------
   MENU « ••• » (en haut à droite, sur toutes les pages)
   --------------------------------------------------------------------- */
.menu-bouton {
  position: fixed;
  z-index: 30;
  top: calc(14px + env(safe-area-inset-top));
  right: 14px;
  height: 42px;
  padding: 0 15px;
  border-radius: 99px;
  border: 1px solid rgba(242, 239, 233, .28);
  background: rgba(10, 10, 10, .72);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center; gap: 4px;
}
.menu-bouton__texte { margin-right: 6px; font-family: var(--typo-label); font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--blanc); }
.menu-bouton i { width: 5px; height: 5px; border-radius: 50%; background: var(--blanc); transition: transform .3s; }
.menu-bouton i:nth-of-type(2) { background: var(--rouge); }      /* le petit détail rouge */
.menu-ouvert .menu-bouton i:nth-of-type(1) { transform: translateX(9px); }
.menu-ouvert .menu-bouton i:nth-of-type(3) { transform: translateX(-9px); }

.menu {
  position: fixed; inset: 0; z-index: 25;
  background: var(--noir);
  display: flex; flex-direction: column;
  padding: calc(90px + env(safe-area-inset-top)) var(--marge) calc(36px + env(safe-area-inset-bottom));
  animation: fondu .25s ease both;
}
.menu[hidden] { display: none; }
.menu ul { list-style: none; border-top: 1px solid var(--trait); max-width: var(--largeur-max); width: 100%; margin: 0 auto; }
.menu li { border-bottom: 1px solid var(--trait); }
.menu a.menu__lien {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 2px;
  font-family: var(--typo-titre);
  font-size: 26px;
  text-transform: uppercase;
  text-decoration: none;
}
.menu a.menu__lien::after { content: "→"; font-family: var(--typo-texte); font-size: 18px; color: var(--gris); }
.menu a[aria-current="page"]::after { content: ""; width: 8px; height: 8px; background: var(--rouge); }
.menu__bas { margin-top: auto; display: flex; justify-content: center; gap: 22px; }
.menu__bas a { font-family: var(--typo-label); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--gris); text-decoration: none; }
.menu-ouvert { overflow: hidden; }

/* Barre du haut des pages intérieures (logo = retour à l'accueil) */
.entete {
  background: var(--noir);
  display: flex; justify-content: center;
  padding: calc(22px + env(safe-area-inset-top)) var(--marge) 22px;
}
.entete img { width: 84px; }


/* ---------------------------------------------------------------------
   ACCUEIL : les deux façons de commander, au même niveau
   --------------------------------------------------------------------- */
.commander { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 26px; }
.commander__choix { display: flex; flex-direction: column; gap: 9px; }
.commander__choix .label { font-size: 11px; color: #c9c5bf; }
.commander .bouton { margin-top: 0; padding: 16px 6px; font-size: 12px; letter-spacing: .08em; }


/* ---------------------------------------------------------------------
   PETITS DÉTAILS ROUGES
   --------------------------------------------------------------------- */
main .section .etape__num,
.etape__num {
  align-self: flex-start;
  padding: 2px 7px;
  background: var(--rouge);
  color: var(--blanc);
}
.filtre.actif { background: var(--rouge); border-color: var(--rouge); color: var(--blanc); }


/* ---------------------------------------------------------------------
   TARIFS : composer son grillz sur une arcade
   --------------------------------------------------------------------- */
/* L'arcade : dessin au trait, comme une fiche de prescription */
.arcade-cadre { padding: 6px 0 0; }
.arcade__aide { margin-top: 10px; font-size: 13px; color: var(--gris); text-align: center; }
.arcade { display: block; width: 100%; max-width: 440px; margin: 0 auto; touch-action: manipulation; }
.arcade .dent { cursor: pointer; }
.arcade .dent path { fill: #fbf9f5; stroke: var(--encre); stroke-width: 2.6; stroke-linejoin: round; transition: fill .15s; }
.arcade .dent:hover path { fill: #ece7de; }
.arcade .dent.choisie path { fill: url(#chrome-dent); }
.arcade .dent text { display: none; font-family: var(--typo-label); font-size: 24px; font-weight: 600; text-anchor: middle; fill: var(--encre); pointer-events: none; letter-spacing: 0; }
.arcade .dent.choisie text { display: block; }
.arcade__cotes { display: flex; justify-content: space-between; max-width: 440px; margin: 0 auto 4px; font-family: var(--typo-label); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.arcade text { font-family: var(--typo-label); font-size: 9px; letter-spacing: .2em; fill: var(--gris); }
.arcade .dent:focus { outline: none; }
.arcade .dent:focus-visible path { stroke: var(--rouge); stroke-width: 5; }

.devis {
  margin-top: 22px;
  border: 1px solid var(--trait);
  padding: 18px;
  text-align: center;
}
.devis__detail { font-size: 14px; color: #4d4a45; min-height: 1.5em; }
.devis__total {
  margin-top: 6px;
  font-family: var(--typo-titre);
  font-size: 34px;
  text-transform: uppercase;
}
.regle { margin: 18px 0 4px; padding-top: 16px; border-top: 1px solid var(--trait); text-align: left; }
.regle .label { text-align: center; margin-bottom: 12px; }
.regle ul { list-style: none; display: grid; gap: 10px; }
.regle li { padding-left: 12px; border-left: 2px solid var(--rouge); }
.regle b { display: block; font-weight: 600; font-size: 14px; }
.regle span { display: block; font-size: 13px; color: var(--gris); margin-top: 2px; }
.regle__note { margin-top: 12px; font-size: 13px; color: var(--gris); text-align: center; }
.devis .bouton { margin-top: 16px; }
.devis__effacer { margin-top: 12px; font-size: 13px; color: var(--gris); text-decoration: underline; }


/* ---------------------------------------------------------------------
   QUI JE SUIS
   --------------------------------------------------------------------- */
.portrait { width: 100%; max-width: 380px; margin: 0 auto 26px; }
.qui__nom { text-align: center; font-family: var(--typo-titre); font-size: 22px; text-transform: uppercase; }
.qui__nom + .label { text-align: center; margin: 6px 0 22px; }
.qui__texte p { color: #4d4a45; margin-bottom: 12px; text-align: center; }
.atelier__ligne { margin-top: 18px; }

/* ---------------------------------------------------------------------
   EN-TÊTE DES PAGES : fond noir + signature en contour (comme l'accueil)
   --------------------------------------------------------------------- */
.tete {
  position: relative;
  overflow: hidden;
  background: var(--noir);
  text-align: center;
  padding: 54px var(--marge) 50px;
}
.tete .logo-fond { width: 150%; left: -25%; top: -30%; opacity: .22; transform: rotate(-14deg); }
.tete__titre {
  position: relative;
  font-family: var(--typo-titre);
  font-weight: 400;
  font-size: clamp(34px, 11vw, 72px);
  line-height: 1;
  text-transform: uppercase;
}
.tete .label { position: relative; margin-top: 14px; color: #c9c5bf; }
.tete + main .section:first-child, .bandeau + main .section:first-child { padding-top: 56px; }


/* ---------------------------------------------------------------------
   1. BANDEAU QUI DÉFILE (texte en boucle)
   --------------------------------------------------------------------- */
.bandeau {
  overflow: hidden;
  background: var(--noir);
  border-top: 1px solid rgba(242, 239, 233, .12);
  border-bottom: 1px solid rgba(242, 239, 233, .12);
  padding: 9px 0;
  white-space: nowrap;
}
.bandeau__piste { display: inline-flex; animation: defile 28s linear infinite; }
.bandeau span {
  font-family: var(--typo-label);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--blanc);
  padding-right: 1.4em;
}
.bandeau b { color: var(--rouge); font-weight: 400; padding-right: 1.4em; }
@keyframes defile { to { transform: translateX(-50%); } }


/* ---------------------------------------------------------------------
   3. REFLET CHROME PILOTÉ (inclinaison du téléphone, doigt ou défilement)
   --------------------------------------------------------------------- */
.reflet-pilote .chrome { animation: none; background-position: var(--reflet, 50%) 0; transition: background-position .25s ease-out; }
.reflet-pilote .hero__titre { animation: entree .9s .45s both; }
.reflet-pilote .bouton:not(.bouton--contour) { background-position: var(--reflet, 50%) 0; transition: background-position .25s ease-out; }


/* ---------------------------------------------------------------------
   2. CRÉATIONS EN MODE STORIES (plein écran, tap pour avancer)
   --------------------------------------------------------------------- */
.stories {
  position: fixed; inset: 0; z-index: 60;
  background: #000;
  display: flex; align-items: center; justify-content: center;
  animation: fondu .2s ease both;
  touch-action: none;
}
.stories[hidden] { display: none; }
.stories img { max-width: 100%; max-height: 100%; object-fit: contain; }
.stories__barres {
  position: absolute; left: 10px; right: 10px; top: calc(10px + env(safe-area-inset-top));
  display: flex; gap: 3px;
}
.stories__barres i { flex: 1; height: 2px; background: rgba(255, 255, 255, .3); overflow: hidden; }
.stories__barres i::after { content: ""; display: block; height: 100%; width: 0; background: #fff; }
.stories__barres i.vue::after { width: 100%; }
.stories__barres i.encours::after { animation: progression var(--duree, 4s) linear forwards; }
.stories.pause .stories__barres i.encours::after { animation-play-state: paused; }
@keyframes progression { to { width: 100%; } }
.stories__fermer {
  position: absolute; right: 10px; top: calc(20px + env(safe-area-inset-top));
  width: 44px; height: 44px; color: #fff; font-size: 30px; line-height: 1;
}
.stories__zone { position: absolute; top: 70px; bottom: 0; width: 40%; }
.stories__zone--prec { left: 0; }
.stories__zone--suiv { right: 0; width: 60%; }


/* ---------------------------------------------------------------------
   4 et 5. INTRO (1re visite) + TRANSITION ENTRE LES PAGES
   --------------------------------------------------------------------- */
.voile-page {
  position: fixed; inset: 0; z-index: 90;
  background: var(--noir);
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity .35s ease;
}
.voile-page img, .voile-page svg { width: 150px; }
.voile-page.visible { opacity: 1; pointer-events: auto; }
.voile-page--intro { opacity: 1; }
.voile-page--intro svg path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: trace 1.5s cubic-bezier(.6, 0, .3, 1) .15s forwards; }
@keyframes trace { to { stroke-dashoffset: 0; } }
.voile-page--sort { opacity: 0; transition: opacity .6s ease .1s; }

/* 7. Titres des pages qui se dévoilent de gauche à droite */
@keyframes devoile { from { clip-path: inset(0 100% 0 0); transform: translateX(-6px); } to { clip-path: inset(0 0 0 0); transform: none; } }
.tete__titre { animation: devoile 1s cubic-bezier(.6, 0, .2, 1) .25s both, reflet 6s ease-in-out infinite; }
.reflet-pilote .tete__titre { animation: devoile 1s cubic-bezier(.6, 0, .2, 1) .25s both; }


/* ---------------------------------------------------------------------
   6. BOUTON « RÉSERVER » DISCRET (pages intérieures, après un peu de défilement)
   --------------------------------------------------------------------- */
.reserver-fixe {
  position: fixed; z-index: 24;
  left: 50%; bottom: calc(14px + env(safe-area-inset-bottom));
  transform: translate(-50%, 140%);
  display: flex; align-items: center; gap: 8px;
  padding: 11px 18px;
  border-radius: 99px;
  background: rgba(10, 10, 10, .72);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: var(--blanc);
  font-family: var(--typo-label); font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  text-decoration: none;
  transition: transform .35s ease;
}
.reserver-fixe::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--rouge); }
.reserver-fixe.montre { transform: translate(-50%, 0); }

/* ---------------------------------------------------------------------
   ACCESSIBILITÉ : si la personne a désactivé les animations sur son téléphone
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .apparait { opacity: 1; transform: none; }
  .bandeau__piste { animation: none; }
  .voile-page { display: none; }
  html { scroll-behavior: auto; }
}

/* Lien « Pas à Toulouse ? » sous les deux boutons de l'accueil */
.hero__distance { margin-top: 20px; color: #c9c5bf; }

/* L'atelier : bande de photos + vidéos à faire glisser du doigt */
.bande, .reels {
  display: flex; gap: 6px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  margin: 0 calc(-1 * var(--marge));
  padding: 0 var(--marge);
  scrollbar-width: none;
}
.bande::-webkit-scrollbar, .reels::-webkit-scrollbar { display: none; }
.bande img { flex: none; width: 34%; aspect-ratio: 1; object-fit: cover; scroll-snap-align: start; }
.reels { margin-top: 10px; gap: 8px; }


/* ---------------------------------------------------------------------
   QUI JE SUIS : en-tête photo (comme l'accueil), film, atelier sombre
   --------------------------------------------------------------------- */
html { overflow-x: hidden; }                 /* le logo en fond ne doit pas faire déborder la page */
.hero--page { min-height: 86vh; min-height: 86svh; }
.hero--page .hero__photo { object-position: center 38%; }
.hero--page .hero__titre { font-size: clamp(40px, 12.5vw, 80px); margin-top: 10px; }
.hero--page .hero__texte { margin-top: 12px; }

.film { position: relative; margin-top: 34px; }
.film__video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--noir); }
.film__lecture {
  position: absolute; left: 12px; top: 12px;
  display: flex; align-items: center; gap: 8px;
  padding: 9px 13px;
  background: rgba(10, 10, 10, .6);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: var(--blanc);
  font-family: var(--typo-label); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
}
.film__lecture span { width: 0; height: 0; border-left: 8px solid var(--blanc); border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.film--lance .film__lecture { display: none; }
/* Sous le film : une phrase à gauche, la vidéo de saut à droite */
.film__duo { display: grid; grid-template-columns: minmax(0, 1fr) 42%; gap: 18px; align-items: end; margin-top: 10px; }
.film__duo p { color: #4d4a45; font-size: 15px; padding-bottom: 6px; }
.film__saut { display: block; width: 100%; aspect-ratio: 9 / 16; object-fit: cover; background: var(--noir); }

/* Section sombre (l'atelier) : même ambiance que l'accueil */
main .section.section--sombre {
  position: relative;
  overflow: hidden;
  --trait: rgba(242, 239, 233, .14);
  --gris: #8d8a85;
  --noir-2: #141414;
  background: var(--noir);
  color: var(--blanc);
  box-shadow: 0 0 0 100vmax var(--noir);
  border-top: 0;
}
main .section.section--sombre .chrome { background-image: var(--chrome); }
main .section.section--sombre .label { color: var(--blanc); }
main .section.section--sombre .texte-centre { color: #c9c5bf; }
.section--sombre .logo-fond { width: 150%; left: -25%; top: 4%; opacity: .16; transform: rotate(-12deg); }
.section--sombre > *:not(.logo-fond) { position: relative; }
.reels video { flex: none; width: 58%; aspect-ratio: 9 / 16; object-fit: cover; scroll-snap-align: center; background: var(--noir-2); }
@media (min-width: 760px) { .bande img { width: 20%; } .reels video { width: 30%; } }

/* Qui je suis : le prénom ne se coupe jamais */
.hero--page .hero__titre { white-space: nowrap; font-size: clamp(36px, 11vw, 80px); }

/* Section avec une de tes photos de paysage en fond (assombrie) */
main .section.section--photo {
  max-width: none;
  padding: var(--espace-section) var(--marge);
  background:
    linear-gradient(180deg, rgba(10,10,10,.78) 0%, rgba(10,10,10,.62) 45%, rgba(10,10,10,.9) 100%),
    url("../images-CLAUDE/web-CLAUDE/fond-riviere.jpg") center / cover;
  box-shadow: none;
  clip-path: none;
  color: var(--blanc);
  border-top: 0;
}
.section--photo > * { max-width: var(--largeur-max); margin-left: auto; margin-right: auto; }
.section--photo .qui__texte p { color: #e4dfd7; }
.section--photo .film__duo p { color: var(--blanc); font-family: var(--typo-titre); font-size: 17px; line-height: 1.15; text-transform: uppercase; }
.section--photo .film__duo .label { font-family: var(--typo-label); font-size: 11px; color: var(--rouge); margin-bottom: 8px; }

/* Bon à savoir (page Réserver) */
.savoir { display: grid; gap: 14px; }
.savoir > div { padding: 18px; background: var(--noir-2); border-left: 2px solid var(--rouge); }
.savoir .label { margin-bottom: 8px; }
.savoir p { font-size: 15px; color: #4d4a45; }
.savoir p + p { margin-top: 8px; }

/* Qui je suis : photo lifestyle entre le texte et le film */
.qui__photo { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 60%; margin-top: 30px; }

/* L'atelier : grande photo + les 3 étapes, lisibles */
.atelier__une { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 62% center; }
.procede { list-style: none; margin: 26px 0 30px; border-top: 1px solid var(--trait); }
.procede li { display: grid; grid-template-columns: 34px 1fr; column-gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--trait); }
.procede span { grid-row: span 2; font-family: var(--typo-label); font-size: 12px; color: var(--rouge); padding-top: 3px; }
.procede b { font-family: var(--typo-titre); font-weight: 400; font-size: 18px; text-transform: uppercase; }
.procede p { color: #c9c5bf; font-size: 15px; margin-top: 2px; }
.reels { margin-top: 10px; }

/* ---------------------------------------------------------------------
   NAVIGATION PRATIQUE
   --------------------------------------------------------------------- */
/* Lien « Page suivante » en bas des pages */
.suite {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 46px var(--marge);
  background: var(--noir);
  text-decoration: none;
  border-bottom: 1px solid var(--trait);
}
.suite .label { color: var(--gris); }
.suite b { font-family: var(--typo-titre); font-weight: 400; font-size: clamp(26px, 8vw, 44px); text-transform: uppercase; }

/* Liens vers toutes les pages, dans le bas de page */
.footer__pages { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; margin: 18px 0 6px; }
.footer__pages a { font-family: var(--typo-label); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--blanc); text-decoration: none; }

/* Barre de progression rouge en haut de l'écran */
.progression {
  position: fixed; left: 0; top: 0; z-index: 31;
  width: 100%; height: 2px;
  background: var(--rouge);
  transform-origin: left; transform: scaleX(0);
}

/* Petit retour visuel quand on appuie sur un bouton */
.bouton, .filtre, .menu-bouton, .reserver-fixe { -webkit-tap-highlight-color: transparent; }
.bouton:active { transform: scale(.98); }
.filtre:active, .menu-bouton:active { opacity: .7; }

/* Pages légales : texte long, lisible */
.texte-legal h2 { font-family: var(--typo-titre); font-weight: 400; font-size: 17px; text-transform: uppercase; margin: 30px 0 8px; }
.texte-legal h2:first-of-type { margin-top: 0; }
.texte-legal p { font-size: 15px; color: #4d4a45; margin-bottom: 10px; }
.texte-legal a { color: var(--encre); }
.texte-legal .a-completer { color: var(--rouge); }
.legal-liens { margin-top: 34px; text-align: center; font-size: 13px; }

/* Page 404 */
.hero--404 { background: var(--noir); }
.hero--404 .hero__titre { font-size: clamp(90px, 34vw, 200px); }

/* Tarifs : bouton « Envoyer mon choix en DM » */
.devis__dm { margin-top: 10px; }
.devis__copie { margin-top: 8px; font-size: 13px; color: var(--rouge); }
main .section .devis .bouton--contour { width: 100%; }

/* Un élément caché reste caché, même si c'est un bouton */
[hidden] { display: none !important; }

/* ---------------------------------------------------------------------
   TARIFS : le « stylo » Full / Open
   --------------------------------------------------------------------- */
.stylo { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; max-width: 320px; margin: 20px auto 0; }
.stylo__choix {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 12px 10px;
  border: 1px solid var(--encre);
  font-family: var(--typo-label); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--encre);
  transition: background .2s, color .2s;
}
.stylo__choix.actif { background: var(--encre); color: var(--blanc); }
.stylo__ico { width: 14px; height: 18px; border-radius: 6px 6px 4px 4px; background: var(--chrome); background-size: 200% 100%; }
.stylo__ico--open { background: transparent; border: 3px solid #b9bcc1; }

/* Dent en open : on voit la dent au centre, le métal fait le contour */
.arcade .dent .fenetre { display: none; }
.arcade .dent.choisie.open .fenetre { display: block; fill: #fbf9f5; stroke: var(--encre); stroke-width: 1.8; }

/* Qui je suis : la ligne « Grillz maker depuis 2025 », en grand */
.section--photo .qui__depuis { margin-top: 18px; font-family: var(--typo-titre); font-size: clamp(19px, 6vw, 28px); line-height: 1.05; text-transform: uppercase; color: var(--blanc); }

/* Film en boucle : petit badge « son » en bas à gauche */
.film { cursor: pointer; }
.film__son {
  position: absolute; left: 12px; bottom: 12px;
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  background: rgba(10, 10, 10, .6);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: var(--blanc);
  font-family: var(--typo-label); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  pointer-events: none;
}
.film__icone { width: 8px; height: 8px; border-radius: 50%; background: var(--gris); }
.film--son .film__icone { background: var(--rouge); }

/* ---------------------------------------------------------------------
   À DISTANCE : le kit en grand + les étapes façon affiche
   --------------------------------------------------------------------- */
main .section.section--kit {
  position: relative; overflow: hidden;
  max-width: none;
  padding: 70px var(--marge) 74px;
  text-align: center;
  background:
    linear-gradient(180deg, rgba(10,10,10,.82), rgba(10,10,10,.9)),
    url("../images-CLAUDE/web-CLAUDE/atelier-22.jpg") center / cover;
  box-shadow: none; clip-path: none; border-top: 0;
  color: var(--blanc);
}
.section--kit .logo-fond { width: 160%; left: -30%; top: -10%; opacity: .14; transform: rotate(-16deg); }
.section--kit > *:not(.logo-fond) { position: relative; }
main .section.section--kit .label { color: #c9c5bf; }
.kit__prix { margin-top: 10px; font-family: var(--typo-titre); font-size: clamp(84px, 30vw, 160px); line-height: 1; }
.kit__titre { margin-top: 6px; font-family: var(--typo-titre); font-size: 22px; text-transform: uppercase; }
.kit__texte { margin-top: 8px; color: #c9c5bf; font-size: 15px; }

.trajet { list-style: none; }
.trajet li { display: grid; grid-template-columns: 74px 1fr; align-items: center; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--trait); }
.trajet li:first-child { border-top: 1px solid var(--trait); }
.trajet__num { font-family: var(--typo-titre); font-size: 46px; line-height: 1; }
main .section .trajet__num.chrome { background-image: var(--chrome-fonce); }
.trajet h2 { font-family: var(--typo-titre); font-weight: 400; font-size: 19px; text-transform: uppercase; }
.trajet p { color: #4d4a45; font-size: 15px; margin-top: 2px; }

.duo-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 28px; }
.duo-photos figure { margin: 0; }
.duo-photos img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block; }
.duo-photos figcaption { margin-top: 8px; font-family: var(--typo-label); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--gris); }
main .section.section--kit .chrome { background-image: var(--chrome); }

/* ---------------------------------------------------------------------
   L'ATELIER EN 3 ÉTAPES : titre + bande de photos et vidéos
   --------------------------------------------------------------------- */
.etape-atelier { margin-top: 30px; }
.etape-atelier:first-of-type { margin-top: 0; }
.etape-atelier h3 {
  display: flex; align-items: baseline; gap: 12px;
  padding: 0 0 12px; margin-bottom: 12px;
  border-bottom: 1px solid var(--trait);
  font-family: var(--typo-titre); font-weight: 400; font-size: 24px; text-transform: uppercase;
}
.etape-atelier h3 span { font-family: var(--typo-label); font-size: 12px; color: var(--rouge); }
.defile {
  display: flex; gap: 8px;
  overflow-x: auto; scroll-snap-type: x mandatory;
  margin: 0 calc(-1 * var(--marge)); padding: 0 var(--marge);
  scrollbar-width: none;
}
.defile::-webkit-scrollbar { display: none; }
.defile > * { flex: none; width: 62%; aspect-ratio: 3 / 4; object-fit: cover; scroll-snap-align: center; background: var(--noir-2); display: block; }
.defile--seul > * { width: 100%; aspect-ratio: 4 / 5; }
@media (min-width: 760px) { .defile > * { width: 32%; } .defile--seul > * { width: 60%; } }

/* À distance : « commande en ligne, en cours de chargement » */
.chargement { margin-bottom: 30px; padding: 16px; border: 1px solid var(--trait); }
.chargement__haut { display: flex; justify-content: space-between; font-family: var(--typo-label); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.chargement__etat { color: var(--rouge); animation: clignote 1.4s steps(2, start) infinite; }
@keyframes clignote { to { visibility: hidden; } }
.chargement__barre { position: relative; height: 6px; margin: 12px 0; background: var(--noir-2); overflow: hidden; }
.chargement__barre i {
  position: absolute; top: 0; bottom: 0; left: 0; width: 68%;
  background: repeating-linear-gradient(-45deg, var(--encre) 0 6px, #3a3a3a 6px 12px);
  background-size: 17px 100%;
  animation: rayures 1s linear infinite;
}
@keyframes rayures { to { background-position: 17px 0; } }
.chargement p { font-size: 14px; color: #4d4a45; }
.section--photo .qui__depuis span { display: block; margin-bottom: 6px; font-family: var(--typo-label); font-size: 12px; letter-spacing: .16em; color: var(--rouge); }

/* ---------------------------------------------------------------------
   COMPTEURS D'ABONNÉS (accueil + Qui je suis)
   --------------------------------------------------------------------- */
.abonnes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
.abonnes a {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 10px 6px;
  border: 1px solid rgba(242, 239, 233, .22);
  text-decoration: none;
}
.compteur { font-family: var(--typo-titre); font-weight: 400; font-size: 26px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.abonnes span { font-family: var(--typo-label); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: #c9c5bf; }
.hero .abonnes { animation: entree .9s .82s both; }
.section--photo .abonnes { margin: 22px auto 0; max-width: 360px; }
main .section.section--photo .chrome { background-image: var(--chrome); }