@charset "UTF-8";
/* =============================================================
   Portfolio Maëlyss Lopez — thème posé sur Bootstrap 5.3
   -------------------------------------------------------------
   Reprend la maquette « Maquette graphique site V0.1 » :
   grands titres capitales avec un mot fantôme derrière, numéro de
   section, cadres roses, téléphones au trait, étoile à quatre
   branches, et l'alternance bordeaux / rose / crème.
   ============================================================= */

/* -------------------------------------------------------------
   1. Polices (SIL Open Font License), calquées sur la maquette
      Fredoka       -> remplace l'Arial gras : arrondie, chaleureuse
      Bodoni Moda   -> remplace Bodoni MT : la didone des accents
      Courier Prime -> remplace Courier New : les micro-étiquettes
   ⚠️ Google Fonts émet les blocs italiques AVANT les romains ;
      ici les fichiers sont nommés par style, plus d'ambiguïté.
   ------------------------------------------------------------- */
@font-face {
  font-family: 'Fredoka'; src: url('../fonts/fredoka-normal-latin.woff2') format('woff2');
  font-weight: 300 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: 'Fredoka'; src: url('../fonts/fredoka-normal-latin-ext.woff2') format('woff2');
  font-weight: 300 700; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+1E00-1E9F, U+1EF2-1EFF, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Bodoni Moda'; src: url('../fonts/bodoni-normal-latin.woff2') format('woff2');
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: 'Bodoni Moda'; src: url('../fonts/bodoni-italic-latin.woff2') format('woff2');
  font-weight: 400 700; font-style: italic; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: 'Bodoni Moda'; src: url('../fonts/bodoni-normal-latin-ext.woff2') format('woff2');
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+1E00-1E9F, U+1EF2-1EFF, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Courier Prime'; src: url('../fonts/courier-normal-latin.woff2') format('woff2');
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122;
}

/* -------------------------------------------------------------
   2. Jetons — couleurs relevées dans la maquette
   ------------------------------------------------------------- */
:root {
  --bordeaux:   #4D0008;   /* fond dominant des sections fortes */
  --cherry:     #86010E;
  --hibiscus:   #EAA2B1;
  --rose-clair: #F4CAD3;
  --creme:      #F7F0DF;
  --creme-vif:  #FFF9ED;
  --encre:      #241315;

  --font-display: 'Fredoka', system-ui, sans-serif;   /* titres ET texte */
  --font-serif:   'Bodoni Moda', Georgia, serif;      /* accents éditoriaux */
  --font-mono:    'Courier Prime', 'Courier New', monospace;

  --bs-body-bg: var(--creme);
  --bs-body-color: var(--encre);
  --bs-body-font-family: var(--font-display);
  --bs-body-font-size: 1.0625rem;
  --bs-body-font-weight: 400;
  --bs-body-line-height: 1.7;
  --bs-primary: var(--cherry);
  --bs-link-color: var(--cherry);
  --bs-link-color-rgb: 134, 1, 14;
  --bs-link-hover-color: var(--bordeaux);
  --bs-link-hover-color-rgb: 77, 0, 8;
  --bs-border-color: rgba(36, 19, 21, .14);
  --bs-border-radius: .8rem;
  --bs-border-radius-lg: 1.4rem;

  --sect: clamp(4.5rem, 11vh, 8rem);
  --ease: cubic-bezier(.22, .61, .36, 1);

  /* Rôles réassignés par section */
  --fg: var(--encre);
  --fg-soft: rgba(36, 19, 21, .68);
  --accent: var(--cherry);
  --ghost: rgba(134, 1, 14, .1);
}

/* -------------------------------------------------------------
   3. Base
   ------------------------------------------------------------- */
html { scroll-behavior: smooth; overflow-x: clip; }
body { -webkit-font-smoothing: antialiased; overflow-x: clip; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1; letter-spacing: -.01em; }
::selection { background: var(--cherry); color: var(--creme); }
:focus-visible { outline: 3px solid var(--cherry); outline-offset: 3px; }

.section { padding-block: var(--sect); position: relative; }
.section-sm { padding-block: calc(var(--sect) * .62); position: relative; }

/* --- Ambiances : les trois fonds de la maquette --------------- */
.bg-creme   { background: var(--creme);    --fg: var(--encre); --fg-soft: rgba(36,19,21,.68); --accent: var(--cherry);   --ghost: rgba(134,1,14,.09); color: var(--fg); }
.bg-creme-2 { background: var(--creme-vif);--fg: var(--encre); --fg-soft: rgba(36,19,21,.68); --accent: var(--cherry);   --ghost: rgba(134,1,14,.09); color: var(--fg); }
.bg-rose    { background: var(--hibiscus); --fg: var(--bordeaux); --fg-soft: rgba(77,0,8,.72); --accent: var(--cherry);  --ghost: rgba(247,240,223,.5); color: var(--fg); }
.bg-cherry  { background: var(--cherry);   --fg: var(--creme); --fg-soft: rgba(247,240,223,.8); --accent: var(--hibiscus); --ghost: rgba(247,240,223,.16); color: var(--fg); }
.bg-bordeaux{ background: var(--bordeaux); --fg: var(--creme); --fg-soft: rgba(247,240,223,.78); --accent: var(--hibiscus); --ghost: rgba(234,162,177,.14); color: var(--fg); }
.bg-rose h1, .bg-rose h2, .bg-rose h3,
.bg-cherry h1, .bg-cherry h2, .bg-cherry h3,
.bg-bordeaux h1, .bg-bordeaux h2, .bg-bordeaux h3 { color: var(--fg); }

.text-cherry { color: var(--accent) !important; }
.text-soft { color: var(--fg-soft); }

/* --- Titre géant + mot fantôme derrière (signature de la maquette) --- */
.titre-bloc { position: relative; display: block; max-width: 100%; }
.titre-geant {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.6rem, 7.5vw, 6.5rem);
  line-height: .92;
  letter-spacing: -.02em;
  text-transform: uppercase;
  margin: 0;
  position: relative; z-index: 2;
}
.ghost {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.6rem, 7.5vw, 6.5rem);
  line-height: .92;
  letter-spacing: -.02em;
  text-transform: uppercase;
  color: var(--ghost);
  position: absolute; top: 0; left: 52%;
  white-space: nowrap; pointer-events: none; user-select: none; z-index: 0;
  opacity: .55;
}
.ghost--bas { top: auto; bottom: -.1em; left: 30%; }

/* --- Numéro de section, en bas à droite ----------------------- */
.num-section {
  position: absolute; right: clamp(1rem, 4vw, 3rem); bottom: clamp(1rem, 3vw, 2rem);
  font-family: var(--font-mono); font-size: .8rem; letter-spacing: .1em;
  color: var(--fg-soft); z-index: 2;
}

/* --- Étiquettes techniques (Courier, comme la maquette) ------- */
.etiquette {
  font-family: var(--font-mono);
  font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--accent);
  display: flex; width: fit-content; align-items: center; gap: .6rem; margin-bottom: 1.2rem;
}
.etiquette::before { content: ""; width: 1.6rem; height: 1px; background: currentColor; }
.etiquette--nu::before { display: none; }

.serif { font-family: var(--font-serif); font-style: italic; }
.lead { font-size: 1.1rem; line-height: 1.65; color: var(--fg-soft); }

/* --- Étoile à quatre branches --------------------------------- */
.star {
  display: inline-block; flex: none;
  width: var(--s, .6rem); height: var(--s, .6rem);
  background: currentColor; color: var(--accent); font-size: 0;
  clip-path: polygon(50% 0%, 56% 44%, 100% 50%, 56% 56%, 50% 100%, 44% 56%, 0% 50%, 44% 44%);
}
.star-lg { --s: 2.6rem; }
.star-xl { --s: clamp(3rem, 7vw, 6rem); }

/* -------------------------------------------------------------
   4. Boutons & liens
   ------------------------------------------------------------- */
.btn { font-family: var(--font-display); font-weight: 500; border-radius: 999px; padding: .8rem 1.7rem; transition: transform .25s var(--ease), background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease); }
.btn:hover { transform: translateY(-2px); }
.btn-cherry { background: var(--cherry); border: 2px solid var(--cherry); color: var(--creme); }
.btn-cherry:hover { background: var(--bordeaux); border-color: var(--bordeaux); color: var(--creme); }
.btn-outline-cherry { background: transparent; border: 2px solid currentColor; color: var(--fg); }
.btn-outline-cherry:hover { background: var(--accent); border-color: var(--accent); color: var(--creme); }
.bg-cherry .btn-cherry, .bg-bordeaux .btn-cherry { background: var(--creme); border-color: var(--creme); color: var(--cherry); }
.bg-cherry .btn-cherry:hover, .bg-bordeaux .btn-cherry:hover { background: var(--hibiscus); border-color: var(--hibiscus); color: var(--bordeaux); }
.btn-lg { padding: 1rem 2.1rem; }

.link-arrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-mono); font-size: .8rem; letter-spacing: .1em; text-transform: uppercase;
  text-decoration: none; color: var(--accent);
  border-bottom: 2px solid currentColor; padding-bottom: .2rem;
  transition: gap .25s var(--ease);
}
.link-arrow:hover { gap: .95rem; color: var(--accent); }

/* -------------------------------------------------------------
   5. Navigation
   ------------------------------------------------------------- */
.site-nav { position: fixed; inset: 0 0 auto 0; z-index: 1030; padding-block: 1.1rem; transition: padding .3s var(--ease), background-color .3s var(--ease), box-shadow .3s var(--ease); }
.site-nav.is-stuck { padding-block: .6rem; background: rgba(247, 240, 223, .94); backdrop-filter: blur(14px); box-shadow: 0 1px 0 rgba(36,19,21,.08); }
.page-interne .site-nav { background: rgba(247, 240, 223, .94); backdrop-filter: blur(14px); }

.brand { font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; letter-spacing: .02em; text-transform: uppercase; text-decoration: none; color: var(--encre); line-height: 1.05; }
.brand small { display: block; font-family: var(--font-mono); font-size: .58rem; letter-spacing: .18em; text-transform: uppercase; color: var(--cherry); margin-top: .2rem; }

.site-nav .nav-link { font-family: var(--font-mono); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--encre); position: relative; padding: .4rem 0 !important; margin-inline: .8rem; }
.site-nav .nav-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--cherry); transform: scaleX(0); transform-origin: right; transition: transform .3s var(--ease); }
.site-nav .nav-link:hover::after, .site-nav .nav-link.active::after { transform: scaleX(1); transform-origin: left; }
.navbar-toggler { border: 2px solid rgba(36,19,21,.16); border-radius: 999px; width: 2.9rem; height: 2.9rem; padding: 0; }
.navbar-toggler:focus { box-shadow: none; }
.offcanvas { background: var(--creme); }

/* -------------------------------------------------------------
   6. Introduction
   ------------------------------------------------------------- */
.hero { padding-block: clamp(8rem, 19vh, 12rem) var(--sect); position: relative; overflow: clip; }
/* Le titre d'accueil est une phrase, pas un mot : il doit pouvoir revenir à
   la ligne, sinon « COMMUNICATION » sort de la colonne. */
.hero__titre {
  font-size: clamp(2.4rem, 5.4vw, 4.6rem);
  line-height: .95; letter-spacing: -.02em; text-transform: uppercase;
  font-weight: 600; margin: 0;
  overflow-wrap: break-word; hyphens: auto;
}

/* Cadre photo de la maquette : un aplat décalé derrière l'image */
.cadre-photo { position: relative; }
.cadre-photo::before {
  content: ""; position: absolute; inset: 0;
  translate: -1.1rem -1.1rem;
  border: 2px solid var(--accent);
  border-radius: .4rem;
}
.cadre-photo figure, .cadre-photo .vide {
  position: relative; margin: 0; overflow: hidden; border-radius: .4rem;
  aspect-ratio: 4/5; background: var(--rose-clair);
}
.cadre-photo img { width: 100%; height: 100%; object-fit: cover; }
.cadre-photo .vide { display: grid; place-items: center; }
.cadre-photo .vide span { font-family: var(--font-serif); font-style: italic; font-size: clamp(2.5rem, 6vw, 4rem); color: var(--cherry); }

/* -------------------------------------------------------------
   7. TÉLÉPHONES — au trait, comme la maquette
   ------------------------------------------------------------- */
.phone-band { position: relative; }
.phone-row {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 3vw, 2.5rem); align-items: start;
  width: min(100%, 48rem); margin-inline: auto;
}
.phone-row--wide { width: min(100%, 60rem); }

.phone { position: relative; margin: 0; }
.phone__device {
  position: relative; aspect-ratio: 9 / 18.5;
  border: 3px solid var(--fg);
  border-radius: clamp(1.4rem, 3vw, 2.2rem);
  padding: .4rem; background: transparent;
}
.phone__screen { position: relative; height: 100%; display: grid; border-radius: clamp(1.1rem, 2.4vw, 1.85rem); overflow: hidden; background: var(--rose-clair); }
.phone__screen img, .phone__screen video { width: 100%; height: 100%; object-fit: cover; grid-area: 1 / 1; }
.phone__device::before {
  content: ""; position: absolute; top: .9rem; left: 50%; translate: -50% 0;
  width: 22%; height: .35rem; border-radius: 999px; background: var(--fg); z-index: 3; opacity: .85;
}
.phone__placeholder { grid-area: 1 / 1; display: grid; place-content: center; gap: .6rem; text-align: center; padding: 1.2rem; }
.phone__placeholder strong { font-family: var(--font-serif); font-style: italic; font-size: 1.2rem; font-weight: 500; line-height: 1.2; }
.phone__placeholder span { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; opacity: .75; }
.ph--rose  { background: var(--hibiscus);  color: var(--bordeaux); }
.ph--rouge { background: var(--cherry);    color: var(--creme); }
.ph--creme { background: var(--creme-vif); color: var(--cherry); }
.ph--encre { background: var(--bordeaux);  color: var(--creme); }

.phone__sound { position: absolute; right: .7rem; bottom: .7rem; z-index: 4; width: 2.1rem; height: 2.1rem; border-radius: 999px; border: 0; cursor: pointer; background: rgba(36,19,21,.65); color: #fff; display: grid; place-items: center; font-size: .8rem; }

.phone__info { margin-top: 1rem; display: grid; gap: .35rem; }
.phone__channel { font-family: var(--font-mono); font-size: .64rem; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); display: flex; align-items: center; gap: .4rem; }
.phone__name { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; line-height: 1.2; margin: 0; }
.phone__caption { font-size: .88rem; color: var(--fg-soft); line-height: 1.5; margin: 0; }
.phone__link { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; border-bottom: 2px solid currentColor; justify-self: start; padding-bottom: .1rem; color: var(--accent); }
.phone__badge { justify-self: start; font-family: var(--font-mono); font-size: .58rem; letter-spacing: .12em; text-transform: uppercase; border: 2px solid var(--bs-border-color); border-radius: 999px; padding: .18rem .6rem; color: var(--fg-soft); }

/* Statistiques */
.phone__stats { list-style: none; margin: .7rem 0 0; padding: 0; display: grid; gap: .3rem; }
.phone__stats li { display: flex; justify-content: space-between; gap: .8rem; font-size: .78rem; border-bottom: 1px dotted var(--bs-border-color); padding-bottom: .25rem; }
.phone__stats span { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-soft); }
.phone__stats b { font-family: var(--font-serif); font-size: 1rem; color: var(--accent); }

/* --- Flèche rose + case de détail (idée des slides 11/12) ----- */
.detail-bloc { margin-top: .9rem; display: grid; gap: .7rem; }
.detail-case {
  position: relative;
  background: var(--creme-vif);
  border: 2px solid var(--hibiscus);
  border-radius: .9rem;
  padding: .85rem 1rem;
}
.bg-creme-2 .detail-case { background: var(--creme); }
.bg-rose .detail-case, .bg-cherry .detail-case, .bg-bordeaux .detail-case { background: rgba(255, 249, 237, .95); color: var(--encre); }
.detail-case__titre { font-family: var(--font-mono); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--cherry); margin: 0 0 .3rem; }
.detail-case__texte { font-size: .84rem; line-height: 1.5; margin: 0; color: rgba(36,19,21,.78); }
/* La flèche : une image SVG rose, orientée vers l'écran au-dessus. */
.fleche {
  display: block; width: 3.4rem; height: auto; margin-left: 1rem;
  transform: scaleX(-1);
}
.fleche--droite { transform: none; margin-left: auto; margin-right: 1rem; }

.phone-nav { display: none; }

/* -------------------------------------------------------------
   8. Cartes projet / polaroids
   ------------------------------------------------------------- */
.projet-card {
  display: block; text-decoration: none; color: inherit; height: 100%;
  background: var(--creme-vif); border: 2px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius-lg); overflow: hidden;
  transition: transform .3s var(--ease), border-color .3s var(--ease);
}
.projet-card:hover { transform: translateY(-5px); border-color: var(--accent); color: inherit; }
.projet-card__media { aspect-ratio: 4/3; overflow: hidden; background: var(--rose-clair); position: relative; }
.projet-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.projet-card:hover .projet-card__media img { transform: scale(1.05); }
.projet-card__plate { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 1.4rem; }
.projet-card__plate span { font-family: var(--font-serif); font-style: italic; font-size: 1.6rem; line-height: 1.1; }
.projet-card__body { padding: 1.3rem 1.4rem 1.5rem; }
.projet-card__tag { font-family: var(--font-mono); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--cherry); }

/* Une famille qui ne compte qu'un projet : la carte occupe toute la largeur
   et passe à l'horizontale, plutôt que de laisser deux colonnes vides. */
@media (min-width: 62rem) {
  .projet-card--large { display: grid; grid-template-columns: 1.1fr 1fr; align-items: stretch; }
  .projet-card--large .projet-card__media { aspect-ratio: auto; height: 100%; min-height: 20rem; }
  .projet-card--large .projet-card__body { padding: clamp(1.8rem, 3vw, 2.8rem); align-self: center; }
  .projet-card--large .projet-card__body h3 { font-size: 1.6rem; }
}

/* -------------------------------------------------------------
   9. « Qui suis-je ? » — carte papier + formations
   ------------------------------------------------------------- */
.paper { position: relative; background: var(--creme-vif); border: 2px solid var(--cherry); border-radius: .4rem; padding: clamp(1.6rem, 3.5vw, 2.8rem); }
.paper h2 { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--cherry); font-size: clamp(1.4rem, 2.4vw, 2rem); margin-bottom: 1.1rem; }
.paper p { margin-bottom: .9rem; }
.paper p:last-child { margin-bottom: 0; }

/* Le cheminement de formation : des cartes reliées par un pointillé */
.parcours { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); position: relative; }
.parcours li {
  background: var(--bordeaux); color: var(--creme);
  border-radius: 1rem; padding: 1.2rem 1rem; text-align: center;
  display: grid; gap: .4rem; align-content: start;
}
.parcours .periode { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .1em; color: var(--hibiscus); }
.parcours .intitule { font-weight: 600; line-height: 1.25; }
.parcours .ecole { font-family: var(--font-serif); font-style: italic; font-size: .82rem; opacity: .85; }

/* -------------------------------------------------------------
   10. Formulaire & divers
   ------------------------------------------------------------- */
.form-label { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; }
.form-control, .form-select { border-radius: .6rem; border: 2px solid var(--bs-border-color); padding: .8rem 1rem; background: var(--creme-vif); font-size: 1rem; }
.form-control:focus, .form-select:focus { border-color: var(--cherry); box-shadow: 0 0 0 .2rem rgba(134,1,14,.1); background: #fff; }
.form-check-input:checked { background-color: var(--cherry); border-color: var(--cherry); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.info-card { background: var(--creme-vif); border: 2px solid var(--bs-border-color); border-radius: var(--bs-border-radius-lg); padding: 1.5rem; }
.chip { display: inline-block; font-family: var(--font-mono); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; border: 2px solid var(--bs-border-color); border-radius: 999px; padding: .32rem .8rem; }
.gallery img { width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: var(--bs-border-radius-lg); }

/* Chiffres clés — « NUMBERS MATTER » de la maquette */
.chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: clamp(1.5rem, 4vw, 3rem); }
.chiffre b { display: block; font-family: var(--font-serif); font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: 1; color: var(--accent); }
.chiffre span { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-soft); }

.site-footer { background: var(--bordeaux); color: var(--creme); padding-block: clamp(3.5rem, 8vh, 5rem) 2rem; }
.site-footer a { color: rgba(247,240,223,.86); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer h4 { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--hibiscus); margin-bottom: 1rem; }

.cookie { position: fixed; inset: auto 1rem 1rem; z-index: 1080; max-width: 34rem; margin-inline: auto; background: var(--creme-vif); border: 2px solid var(--cherry); border-radius: var(--bs-border-radius-lg); padding: 1.4rem; display: grid; gap: .9rem; }

/* -------------------------------------------------------------
   11. Révélations
   ------------------------------------------------------------- */
.js [data-reveal] { opacity: 0; }
.js [data-reveal].is-in { opacity: 1; }

/* -------------------------------------------------------------
   12. Responsive
   ------------------------------------------------------------- */
@media (max-width: 62rem) {
  .ghost { display: none; }
  .phone-row {
    display: flex; width: auto; gap: 1rem; overflow-x: auto;
    scroll-snap-type: x mandatory; padding-inline: 10%; scroll-padding-inline: 10%;
    padding-block: 1rem; margin-inline: calc(var(--bs-gutter-x, 1.5rem) * -.5); scrollbar-width: none;
  }
  .phone-row::-webkit-scrollbar { display: none; }
  .phone { flex: 0 0 76%; scroll-snap-align: center; }
  .js .phone-nav { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: .5rem; }
  .phone-nav button { width: 2.9rem; height: 2.9rem; border-radius: 999px; border: 2px solid var(--bs-border-color); background: transparent; color: inherit; cursor: pointer; }
  .phone-nav button:disabled { opacity: .35; cursor: default; }
  .phone-nav span { font-family: var(--font-mono); font-size: .7rem; min-width: 3rem; text-align: center; }
  .cadre-photo::before { translate: -.6rem -.6rem; }
}

/* -------------------------------------------------------------
   13. Accessibilité
   ------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .js [data-reveal] { opacity: 1 !important; transform: none !important; }
}
@media print { .site-nav, .cookie, .phone-nav { display: none !important; } body { background: #fff; color: #000; } }