/* ==========================================================================
   ACCROCHE STUDIO — feuille de style unique
   --------------------------------------------------------------------------
   Sommaire :
     1.  Polices
     2.  Variables de couleur (thème clair, thème sombre, bloc inversé)
     3.  Remise à zéro et bases
     4.  Textures de fond : grain d'impression et colonnes de grille
     5.  Éléments réutilisés (enveloppe, meta, bouton, lien, apparitions)
     6.  En-tête
     7.  Hero et fiche technique
     8.  Bandeau défilant
     9.  En-tête de section
     10. Le travail — grille de vignettes vidéo
     11. Comment je travaille — étapes et précisions
     12. Ce que vous recevez — bloc inversé
     13. Tarifs — bordereau et colonne de rappels
     14. Contact — formulaire
     15. Pied de page
     16. Accessibilité et mouvement réduit
   ========================================================================== */


/* ==========================================================================
   1. POLICES
   --------------------------------------------------------------------------
   Deux fichiers, deux graisses, hébergés dans /polices. Aucune requête vers
   un domaine externe.

     Bricolage Grotesque 700 — titres, prix, bouton. Un caractère marqué :
     contreformes serrées, coupes franches. C'est elle qui porte la page.

     Instrument Sans 400 — texte courant et étiquettes. Neutre, très lisible
     en petit corps, elle laisse la vedette aux titres.

   Comme aucune des deux n'a de seconde graisse, `font-synthesis` est coupé
   plus bas : le navigateur ne fabriquera jamais un faux gras baveux. Tout ce
   qui doit être gras utilise donc Bricolage Grotesque.
   ========================================================================== */

@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('polices/bricolage-grotesque-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('polices/instrument-sans-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ==========================================================================
   2. VARIABLES DE COULEUR
   Les quatre couleurs du logotype, et rien d'autre. La classe .bloc-nuit,
   définie à la fin de cette section, sert aux deux blocs pleins en bleu
   nuit : la section des vidéos et le pied de page.
   ========================================================================== */

:root {
  /* ------------------------------------------------------------------------
     LA PALETTE VIENT DU LOGOTYPE, pas d'un choix décoratif.
     Bleu nuit, brique, ambre, crème : les quatre couleurs des bacs empilés.
     Chacune a un seul rôle, et ce rôle ne change jamais d'une section à
     l'autre — c'est ce qui fait tenir l'ensemble.

       crème   le fond de page
       nuit    le texte, et les blocs pleins (vidéos, pied de page)
       brique  l'action et les repères chiffrés
       ambre   les aplats chauds (bandeau, étiquettes)

     Deux règles de contraste à ne pas oublier si tu y touches :
       · l'ambre ne passe JAMAIS en texte sur du crème (rapport 2:1, illisible),
         elle ne sert que d'aplat sous du bleu nuit ;
       · la brique du bouton est volontairement plus sombre que celle du logo,
         pour que le blanc posé dessus reste conforme AA.
     ------------------------------------------------------------------------ */

  /* --- Thème clair (par défaut) --- */
  --papier:       #F8F3EA;   /* crème du logo, éclaircie pour le fond */
  --papier-creux: #F1E9DA;   /* sections en léger retrait */
  --encre:        #172B42;   /* bleu nuit, un cran plus sombre que les blocs */
  --gris:         #55606E;   /* texte secondaire, bleuté — AA validé */
  --filet:        rgba(23, 43, 66, 0.16);
  --filet-fort:   rgba(23, 43, 66, 0.30);

  --nuit:         #1D3A5C;   /* bleu du logo — fond des blocs pleins */
  --accent:       #BE4129;   /* brique — chiffres, coches, mot surligné */
  --accent-vif:   #BE4129;   /* brique en aplat — bouton, prix d'entrée */
  --chaud:        #E7A02E;   /* ambre — aplats uniquement, jamais en texte */
  --sur-accent:   #FFFFFF;   /* texte posé sur un aplat de brique */

  /* --- Typographie --- */
  --titre: 'Bricolage Grotesque', 'Helvetica Neue', Arial, sans-serif;
  --texte: 'Instrument Sans', 'Helvetica Neue', Arial, sans-serif;

  /* --- Rythme --- */
  --marge-page:  clamp(1.25rem, 5vw, 4.5rem);
  --air-section: clamp(4.5rem, 11vw, 9rem);

  /* --- Animation --- */
  --duree: 320ms;
  --courbe: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* --- Texture : intensité du grain d'impression --- */
  --grain: 0.05;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* La même palette, transposée : le fond devient un bleu nuit très
       profond, le crème passe en texte, et la brique s'éclaircit pour rester
       lisible sur sombre. L'ambre, elle, fonctionne telle quelle. */
    --papier:       #101A24;
    --papier-creux: #17222E;
    --encre:        #F2E9DB;   /* le crème du logo, en texte */
    --gris:         #A3AEBB;
    --filet:        rgba(242, 233, 219, 0.16);
    --filet-fort:   rgba(242, 233, 219, 0.32);

    --nuit:         #1D3A5C;   /* inchangé : c'est le bleu de la marque */
    --accent:       #E9705A;   /* brique éclaircie — AA sur fond sombre */
    --accent-vif:   #C74A32;
    --chaud:        #E7A02E;
    --sur-accent:   #FFFFFF;

    --grain: 0.08;

    color-scheme: dark;
  }
}

/* Les blocs pleins en bleu nuit : la section des vidéos et le pied de page.
   Ils gardent la MÊME couleur dans les deux thèmes — c'est le bleu du
   logotype, ce n'est pas une variation de mise en page. La classe redéfinit
   les variables pour tout ce qu'elle contient, donc les composants imbriqués
   s'adaptent sans une ligne de code en double. */
.bloc-nuit {
  background: var(--nuit);
  color: #F2E9DB;
  --papier:     var(--nuit);
  --encre:      #F2E9DB;
  --gris:       #A9B4C2;
  --filet:      rgba(242, 233, 219, 0.18);
  --filet-fort: rgba(242, 233, 219, 0.34);
  --accent:     #E7A02E;   /* sur bleu nuit, c'est l'ambre qui porte, pas la brique */

  /* Et ce qui se pose SUR un aplat d'ambre doit être sombre : du blanc
     dessus tomberait à 1,9:1, illisible. En bleu nuit, on est à 5,3:1. */
  --sur-accent: var(--nuit);
}


/* ==========================================================================
   3. REMISE À ZÉRO ET BASES
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;   /* pour que l'en-tête collant ne masque pas les ancres */
}

body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font-family: var(--texte);
  font-size: 1rem;
  line-height: 1.55;
  font-weight: 400;
  font-synthesis: none;       /* jamais de faux gras : voir section 1 */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Tout ce qui doit être gras passe par Bricolage Grotesque */
h1, h2, h3,
.bouton,
.entete__marque,
.ligne__prix,
.contact__email,
.pied__marque,
.fiche__valeur,
.section__numero,
.pied__geant,
.etiquette {
  font-family: var(--titre);
  font-weight: 700;
  letter-spacing: -0.025em;
}

h1, h2, h3 { margin: 0; }
p, dd, dl { margin: 0; }
ol, ul { margin: 0; padding: 0; list-style: none; }
img, video { display: block; max-width: 100%; }

::selection { background: var(--accent-vif); color: #FFFFFF; }

/* Le passage surligné du titre : le seul mot coloré du hero, et le fait le
   plus concret de la page. */
.surligne { color: var(--accent); }


/* ==========================================================================
   4. TEXTURES DE FOND
   --------------------------------------------------------------------------
   Deux textures, toutes deux fabriquées en CSS : zéro image, zéro requête.

     a) Le grain — un bruit fractal généré par un filtre SVG, désaturé et
        posé sur toute la fenêtre à très faible opacité. C'est ce qui donne
        à la page sa matière de papier imprimé plutôt que d'écran lisse.
        Pour l'atténuer ou l'accentuer : la variable --grain, section 2.

     b) Les aplats de couleur — le bandeau et la section vidéos sont des
        surfaces pleines de la gamme d'accent. C'est ce qui donne son rythme
        à la page : blanc, bleu vif, bleu pâle, blanc, encre, blanc, encre.
   ========================================================================== */

body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 300;
  pointer-events: none;
  opacity: var(--grain);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E");
}

.hero, .section, .pied { position: relative; }
.enveloppe { position: relative; z-index: 1; }


/* ==========================================================================
   5. ÉLÉMENTS RÉUTILISÉS
   ========================================================================== */

/* Largeur de lecture commune à toute la page */
.enveloppe {
  width: 100%;
  max-width: 78rem;
  margin-inline: auto;
  padding-inline: var(--marge-page);
}

/* Petites étiquettes techniques : capitales espacées, chiffres à chasse fixe */
.meta {
  font-family: var(--texte);
  font-size: 0.6875rem;      /* 11 px */
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--gris);
}

/* Petit carré plein, marque d'imprimeur */
.puce {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 0.55rem;
  background: var(--accent);
  vertical-align: 0.05em;
}

/* Bouton unique du site */
.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 1.75rem;
  background: var(--accent-vif);
  color: #FFFFFF;
  font-size: 0.9375rem;
  letter-spacing: -0.01em;
  text-decoration: none;
  border: 0;
  border-radius: 2px;
  cursor: pointer;
  transition: transform var(--duree) var(--courbe),
              background-color var(--duree) var(--courbe);
}
.bouton:hover { background: var(--encre); color: var(--papier); }
.bouton:active { transform: translateY(1px); }
.bouton[disabled] { opacity: 0.55; cursor: default; }

.bouton--compact { padding: 0.625rem 1rem; font-size: 0.8125rem; }
.bouton--large   { width: 100%; padding: 1.125rem 1.75rem; }

/* Lien courant : souligné fin, qui prend l'accent au survol */
.lien {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--filet-fort);
  text-underline-offset: 0.22em;
  text-decoration-thickness: 1px;
  transition: text-decoration-color var(--duree) var(--courbe);
}
.lien:hover { text-decoration-color: var(--accent); }

/* Petite étiquette pleine — « Sans engagement ». C'est l'argument qui fait
   accepter l'essai, il mérite d'être vu. */
.etiquette {
  display: inline-block;
  vertical-align: 0.18em;
  margin-left: 0.5rem;
  padding: 0.25rem 0.5rem;
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--nuit);
  background: var(--chaud);
  border-radius: 2px;
  white-space: nowrap;
}

/* Apparitions au défilement — pilotées par script.js */
.apparait {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--duree) var(--courbe),
              transform var(--duree) var(--courbe);
}
.apparait.est-visible { opacity: 1; transform: none; }

/* Lien d'évitement clavier */
.evitement {
  position: fixed;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 400;
  padding: 0.75rem 1rem;
  background: var(--encre);
  color: var(--papier);
  font-size: 0.875rem;
  text-decoration: none;
  border-radius: 2px;
  transform: translateY(-150%);
  transition: transform 160ms var(--courbe);
}
.evitement:focus { transform: none; }

/* Contenu réservé aux robots / lecteurs d'écran */
.cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* Message affiché si le JavaScript est désactivé */
.note-sans-js {
  padding: 1.25rem 0;
  border-top: 1px solid var(--filet);
  border-bottom: 1px solid var(--filet);
  font-size: 0.9375rem;
  color: var(--gris);
  max-width: 52ch;
}


/* ==========================================================================
   6. EN-TÊTE
   ========================================================================== */

.entete {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--papier);
  border-bottom: 1px solid var(--filet);
}

.entete__interieur {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  max-width: 78rem;
  margin-inline: auto;
  padding: 0.75rem var(--marge-page);
}

.entete__marque {
  display: inline-flex;
  align-items: center;
  font-size: 0.9375rem;
  color: inherit;
  text-decoration: none;
}

/* Le logotype dans l'en-tête. C'est la seule image de toute la page, elle
   pèse moins d'un kilo-octet et reste nette à n'importe quelle taille. */
.entete__logo {
  width: 26px;
  height: 26px;
  margin-right: 0.6rem;
  border-radius: 4px;
  flex: 0 0 auto;
}


/* ==========================================================================
   7. HERO ET FICHE TECHNIQUE
   Le titre, le sous-titre et le bouton doivent tenir dans un écran de
   390 × 800 sans avoir à faire défiler.
   ========================================================================== */

.hero {
  padding-top: clamp(2rem, 6vw, 4.5rem);
  padding-bottom: clamp(2.5rem, 7vw, 5rem);
}

.hero__situation { margin-bottom: clamp(1rem, 3.5vw, 1.75rem); }

.hero__titre {
  /* Le contraste d'échelle est la signature de la page : très grand titre,
     texte courant volontairement petit. */
  font-size: clamp(2rem, 7.6vw, 4.5rem);
  line-height: 0.99;
  letter-spacing: -0.04em;
  max-width: 21ch;
  text-wrap: balance;
}

.hero__bas {
  display: grid;
  gap: clamp(1.25rem, 3.5vw, 2.5rem);
  margin-top: clamp(1.25rem, 4vw, 2.5rem);
  padding-top: clamp(1.25rem, 3.5vw, 2rem);
  border-top: 1px solid var(--filet);
}

.hero__accroche {
  max-width: 46ch;
  font-size: 1rem;
  color: var(--gris);
}

.hero__action { display: flex; align-items: center; flex-wrap: wrap; gap: 0.875rem 1.5rem; }

@media (min-width: 56rem) {
  .hero__bas { grid-template-columns: 1fr auto; align-items: start; }
  .hero__action { justify-content: flex-end; }
}

/* La fiche technique : quatre faits alignés, séparés par des filets.
   Elle remplit le bas du hero avec de l'information, pas avec du décor. */
.fiche {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin-top: clamp(1.75rem, 4vw, 3rem);
  border-top: 1px solid var(--filet-fort);
}

.fiche__item { padding: 0.75rem 0; border-bottom: 1px solid var(--filet); }

.fiche__label { margin-bottom: 0.15rem; }

.fiche__valeur {
  font-size: clamp(0.9375rem, 3.2vw, 1.125rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
}

@media (max-width: 55.999rem) {
  .fiche__item:nth-child(odd)  { padding-right: 1rem; border-right: 1px solid var(--filet); }
  .fiche__item:nth-child(even) { padding-left: 1rem; }
}

@media (min-width: 56rem) {
  .fiche { grid-template-columns: repeat(4, 1fr); }
  .fiche__item {
    padding: 1rem 1.5rem;
    border-right: 1px solid var(--filet);
  }
  .fiche__item:first-child { padding-left: 0; }
  .fiche__item:last-child  { padding-right: 0; border-right: 0; }
}

/* Variante en colonne, utilisée dans la colonne de droite du contact */
.fiche--colonne { grid-template-columns: 1fr; margin-top: 2rem; }
.fiche--colonne .fiche__item {
  padding: 0.75rem 0;
  border-right: 0;
}


/* ==========================================================================
   8. BANDEAU DÉFILANT
   Une bande pleine, à contraste renversé, qui sépare le hero du travail et
   donne à la page une masse horizontale. Contenu purement décoratif : il
   répète des faits écrits ailleurs, d'où l'aria-hidden dans le HTML.
   ========================================================================== */

.bandeau {
  overflow: hidden;
  padding-block: 0.9375rem;
  background: var(--chaud);
  color: var(--nuit);
}

.bandeau__piste {
  display: flex;
  width: max-content;
  animation: defile 46s linear infinite;
}

/* Au survol, le bandeau s'arrête : on peut lire ce qui passe. */
.bandeau:hover .bandeau__piste { animation-play-state: paused; }

.bandeau__lot { display: flex; align-items: center; flex: 0 0 auto; }

.bandeau__lot li {
  display: flex;
  align-items: center;
  white-space: nowrap;
  padding-inline: 1.25rem;
  font-size: 0.8125rem;
}

/* Le séparateur est un carré plein, dessiné, pas un caractère */
.bandeau__lot li::after {
  content: '';
  flex: 0 0 auto;
  width: 5px;
  height: 5px;
  margin-left: 1.25rem;
  background: var(--nuit);
  opacity: 0.45;
}

@keyframes defile {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}


/* ==========================================================================
   9. EN-TÊTE DE SECTION
   ========================================================================== */

.section { padding-block: var(--air-section); }

/* La section des vidéos porte la classe .bloc-nuit dans le HTML : les
   écrans de téléphone sont posés sur le bleu du logo, exactement comme les
   bacs le sont dans le logotype. C'est là que les vidéos détachent le plus. */
/* Une section sur deux en léger retrait : crème, ambre, nuit, crème, creux,
   crème, creux, nuit. C'est cette alternance qui empêche la page de se lire
   comme un seul long bloc. */
.section--livraison { background: var(--papier-creux); }
.section--contact   { background: var(--papier-creux); }

.section__entete {
  display: grid;
  gap: 0.75rem;
  padding-top: 1rem;
  border-top: 1px solid var(--filet-fort);
  margin-bottom: clamp(2.5rem, 6vw, 4rem);
}

/* Le numéro de section en très grand et en aplat plein : c'est le repère
   coloré qui ponctue toute la page, de 01 à 05. */
.section__numero {
  font-size: clamp(2.25rem, 7vw, 4.75rem);
  line-height: 0.85;
  letter-spacing: -0.05em;
  color: var(--accent);
}

.section__titre {
  font-size: clamp(1.875rem, 5.5vw, 3.5rem);
  line-height: 1.02;
}

.section__chapeau {
  max-width: 48ch;
  font-size: 0.9375rem;
  color: var(--gris);
}

@media (min-width: 56rem) {
  .section__entete {
    grid-template-columns: 7rem minmax(0, 1fr) minmax(0, 22rem);
    align-items: start;
    gap: 2rem;
  }
  .section__chapeau { padding-top: 0.4rem; }
}


/* ==========================================================================
   10. LE TRAVAIL — grille de vignettes vidéo
   Le contenu est construit par script.js à partir du tableau VIDEOS.
   Mobile : une colonne, vignettes décalées alternativement à gauche et à
   droite. Desktop : trois colonnes décalées verticalement.
   ========================================================================== */

/* --- Le carrousel ---------------------------------------------------------
   La piste est un conteneur qui défile horizontalement, avec accrochage :
   une vidéo vient toujours se caler au centre, jamais à moitié coupée.
   Le défilement au doigt est natif — c'est le navigateur qui le gère, pas du
   JavaScript — donc il reste fluide même sur un téléphone modeste.
   -------------------------------------------------------------------------- */

.carrousel { position: relative; }

.piste {
  --largeur-vignette: min(74vw, 19rem);

  /* Repère de positionnement : c'est par rapport à la piste que le script
     mesure la position de chaque vidéo pour savoir laquelle est au centre. */
  position: relative;

  display: flex;
  gap: clamp(1rem, 3vw, 2rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;

  /* Pas de `scroll-behavior: smooth` ici : la propriété rend asynchrone
     toute affectation de défilement, y compris celle du filet de sécurité
     des flèches. C'est le script qui demande l'animation, au cas par cas. */

  /* La piste déborde jusqu'aux bords de l'écran, et le rembourrage latéral
     permet à la première et à la dernière vidéo d'atteindre le centre.

     Le « + var(--marge-page) » n'est pas un ajustement à vue : un pourcentage
     de rembourrage se calcule sur la largeur du conteneur PARENT, pas sur
     celle de la piste, qui est plus large de deux marges à cause du débord
     ci-dessus. Sans cette correction, la vidéo active se retrouve décalée
     d'une demi-marge vers la gauche. */
  margin-inline: calc(-1 * var(--marge-page));
  padding-inline: max(
    var(--marge-page),
    calc(50% + var(--marge-page) - var(--largeur-vignette) / 2)
  );
  padding-block: 0.5rem 0.25rem;

  /* Barre de défilement masquée : les flèches et le geste suffisent */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.piste::-webkit-scrollbar { display: none; }

.vignette {
  flex: 0 0 var(--largeur-vignette);
  scroll-snap-align: center;
  /* Les vidéos qui ne sont pas au centre s'effacent, pour que l'œil sache
     immédiatement laquelle il regarde. */
  opacity: 0.4;
  transition: opacity var(--duree) var(--courbe);
}
.vignette.est-active { opacity: 1; }

@media (min-width: 62rem) {
  .piste { --largeur-vignette: 22rem; }
}

/* --- Les commandes -------------------------------------------------------- */

.carrousel__commandes {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  margin-top: clamp(1.5rem, 4vw, 2.25rem);
}

.fleche {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  color: var(--encre);
  background: transparent;
  border: 1px solid var(--filet-fort);
  border-radius: 2px;
  cursor: pointer;
  transition: background-color var(--duree) var(--courbe),
              border-color var(--duree) var(--courbe),
              color var(--duree) var(--courbe);
}
.fleche svg { width: 1.125rem; height: 1.125rem; display: block; }
.fleche:hover { background: var(--accent); border-color: var(--accent); color: var(--sur-accent); }

/* Une flèche en bout de course ne disparaît pas, elle s'estompe :
   on comprend qu'on est au début ou à la fin de la série. */
.fleche[disabled] { opacity: 0.3; cursor: default; }
.fleche[disabled]:hover {
  background: transparent;
  border-color: var(--filet-fort);
  color: var(--encre);
}

.carrousel__rang {
  min-width: 4.5rem;
  text-align: center;
  color: var(--encre);
}

/* Le bouton de son est légèrement détaché du groupe de navigation :
   il ne fait pas le même métier que les flèches. */
.fleche--son { margin-left: 0.75rem; }

/* Son actif : le bouton se remplit, on voit d'un coup d'œil qu'il est
   enclenché — c'est aussi ce que dit aria-pressed aux lecteurs d'écran. */
.fleche--son[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--sur-accent);
}

/* --- Le curseur de volume ------------------------------------------------
   Il se colle au bouton de son : les deux forment un seul groupe « écoute »,
   distinct des flèches de navigation. Le dessin natif des navigateurs est
   remplacé, sinon on hérite d'un curseur bleu système qui jure avec la page.
   -------------------------------------------------------------------------- */

.volume {
  display: inline-flex;
  align-items: center;
  margin-left: -0.5rem;   /* rattrape une partie du gap du groupe */
}

.volume__curseur {
  -webkit-appearance: none;
  appearance: none;
  width: 5.5rem;
  /* La hauteur ne dessine rien : elle donne au doigt une zone à saisir plus
     large que le trait de 2 pixels qu'on voit. */
  height: 1.75rem;
  background: transparent;
  cursor: pointer;
}

.volume__curseur::-webkit-slider-runnable-track {
  height: 2px;
  background: var(--filet-fort);
}
.volume__curseur::-moz-range-track {
  height: 2px;
  background: var(--filet-fort);
}

/* La poignée reprend le carré d'accent du reste de la page, jamais un rond */
.volume__curseur::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 0.75rem;
  height: 0.75rem;
  /* Recentre la poignée sur une piste de 2 px : (2 - 12) / 2 */
  margin-top: -0.3125rem;
  background: var(--accent);
  border: 0;
  border-radius: 1px;
}
.volume__curseur::-moz-range-thumb {
  width: 0.75rem;
  height: 0.75rem;
  background: var(--accent);
  border: 0;
  border-radius: 1px;
}

/* L'écran de téléphone : bord net, pas d'ombre, pas de carte flottante */
.ecran {
  position: relative;
  aspect-ratio: 9 / 16;
  /* Valeur fixe et non var(--encre) : dans le bloc bleu nuit, --encre vaut
     le crème, et l'écran du téléphone deviendrait clair. */
  background: #0B1622;
  border: 1px solid var(--filet-fort);
  border-radius: 16px;
  overflow: hidden;
  transition: transform var(--duree) var(--courbe),
              border-color var(--duree) var(--courbe),
              box-shadow var(--duree) var(--courbe);
}
.vignette:hover .ecran { transform: translateY(-5px); }

/* Le trait du haut-parleur : le détail qui fait lire l'objet comme un
   téléphone et non comme une carte. */
.ecran::after {
  content: '';
  position: absolute;
  z-index: 2;
  top: 9px;
  left: 50%;
  transform: translateX(-50%);
  width: 26%;
  height: 4px;
  border-radius: 2px;
  background: rgba(250, 249, 246, 0.22);
  pointer-events: none;
}

.ecran__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Léger retrait tant que la vidéo ne joue pas : elle reprend toute sa
     présence dès la lecture. */
  filter: saturate(0.82);
  transition: filter var(--duree) var(--courbe);
}
.ecran.joue .ecran__video { filter: none; }

/* Bouton transparent couvrant l'écran : clic et navigation clavier.
   Aucune pastille dessus — l'écran reste net. C'est le liseré d'accent
   qui signale la vidéo en cours de lecture. */
.ecran__commande {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: transparent;
  border: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

/* Numéro d'ordre, calculé par le script */
.ecran__index {
  position: absolute;
  z-index: 2;
  top: 0.75rem;
  right: 0.75rem;
  color: #FFFFFF;
  background: rgba(16, 17, 24, 0.84);
  padding: 0.3rem 0.5rem;
  border-radius: 2px;
  font-size: 0.625rem;
  pointer-events: none;
}

/* Liseré d'accent sur la vignette en cours de lecture */
.ecran.joue { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }

.vignette__accroche {
  margin-top: 1rem;
  padding-left: 0.75rem;
  border-left: 2px solid var(--filet-fort);
  font-size: 1.0625rem;
  line-height: 1.3;
  letter-spacing: -0.02em;
  text-wrap: balance;
  transition: border-color var(--duree) var(--courbe);
}
.vignette:hover .vignette__accroche { border-left-color: var(--accent); }

.vignette__produit { margin-top: 0.5rem; padding-left: 0.75rem; }
.vignette__prix { color: var(--encre); }



/* ==========================================================================
   11. COMMENT JE TRAVAILLE — étapes, puis précisions
   ========================================================================== */

.etapes { counter-reset: etape; border-top: 1px solid var(--filet); }

.etape {
  counter-increment: etape;
  display: grid;
  gap: 0.4rem;
  padding: 1.5rem clamp(0.75rem, 2vw, 1.25rem);
  margin-inline: calc(-1 * clamp(0.75rem, 2vw, 1.25rem));
  border-bottom: 1px solid var(--filet);
}

/* Une ligne sur deux légèrement teintée : la texture d'un tableau imprimé */
.etape:nth-child(even) { background: color-mix(in srgb, var(--encre) 3.5%, transparent); }

/* Numéro d'étape, dans la marge */
.etape::before {
  content: counter(etape, decimal-leading-zero);
  font-family: var(--titre);
  font-weight: 700;
  font-size: 1.375rem;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--accent);
}

.etape__tag { color: var(--gris); }

.etape__titre { font-size: 1.25rem; line-height: 1.2; }

.etape__texte {
  max-width: 46ch;
  font-size: 0.9375rem;
  color: var(--gris);
}

@media (min-width: 56rem) {
  .etape {
    grid-template-columns: 4rem 12rem minmax(0, 1fr);
    align-items: baseline;
    gap: 2rem;
    padding-block: 2rem;
  }
  .etape::before  { grid-row: 1; }
  .etape__tag     { grid-row: 1; grid-column: 2; }
  .etape__titre   { grid-row: 1; grid-column: 3; }
  .etape__texte   { grid-row: 2; grid-column: 3; }
}

/* Les trois précisions : ce qui évite un aller-retour par mail */
.precisions {
  display: grid;
  gap: 2rem;
  margin-top: clamp(2.5rem, 6vw, 4rem);
}

.precision { padding-top: 1rem; border-top: 3px solid var(--chaud); }

.precision__titre { font-size: 1rem; line-height: 1.25; }

.precision__texte {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  color: var(--gris);
}

@media (min-width: 56rem) {
  .precisions { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }
}


/* ==========================================================================
   12. CE QUE VOUS RECEVEZ — bloc inversé
   ========================================================================== */

.livrables { border-top: 1px solid var(--filet); }

.livrable { padding-block: 1.75rem; border-bottom: 1px solid var(--filet); }

.livrable__rang { color: var(--accent); margin-bottom: 0.5rem; }

.livrable__titre { font-size: clamp(1.25rem, 4.2vw, 1.75rem); line-height: 1.15; }

.livrable__texte {
  margin-top: 0.6rem;
  max-width: 42ch;
  font-size: 0.9375rem;
  color: var(--gris);
}

@media (min-width: 56rem) {
  /* Deux livrables, donc deux colonnes : avec trois colonnes, la troisième
     resterait vide et la section paraîtrait amputée. Si tu ajoutes ou retires
     un livrable dans le HTML, ajuste ce chiffre. */
  .livrables { display: grid; grid-template-columns: repeat(2, 1fr); }
  .livrable {
    padding: 0 2rem 0.5rem;
    border-bottom: 0;
    border-right: 1px solid var(--filet);
  }
  .livrable:first-child { padding-left: 0; }
  .livrable:last-child  { border-right: 0; padding-right: 0; }
}


/* ==========================================================================
   13. TARIFS — bordereau à gauche, rappels à droite
   ========================================================================== */

.tarifs { display: grid; gap: clamp(2.5rem, 5vw, 3.5rem); }

.bordereau { border-top: 1px solid var(--filet); }

.ligne { padding-block: 1.5rem; border-bottom: 1px solid var(--filet); }

.ligne__tete {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
}

.ligne__libelle { flex: 0 1 auto; font-size: 1.125rem; line-height: 1.25; }

/* Les points de conduite entre le libellé et le montant, comme sur un
   bordereau. Masqués sur téléphone : il n'y a pas la place. */
.ligne__points { display: none; }

.ligne__prix {
  margin-left: auto;
  font-size: clamp(1.25rem, 4vw, 1.75rem);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

@media (min-width: 40rem) {
  .ligne__points {
    display: block;
    flex: 1 1 2rem;
    min-width: 1.5rem;
    border-bottom: 1px dotted var(--filet-fort);
    transform: translateY(-0.3em);
  }
  .ligne__prix { margin-left: 0; }
}

/* Le prix d'entrée est posé en aplat plein : c'est le seul chiffre que
   beaucoup de visiteurs retiendront. */
.ligne__prix--accent {
  padding: 0.1em 0.4em;
  color: #FFFFFF;
  background: var(--accent-vif);
  border-radius: 3px;
}

.ligne__detail {
  margin-top: 0.5rem;
  max-width: 46ch;
  font-size: 0.875rem;
  color: var(--gris);
}

.ligne--option .ligne__libelle {
  font-family: var(--texte);
  font-weight: 400;
  font-size: 1rem;
  letter-spacing: 0;
}
.ligne--option .ligne__prix { font-size: 1.125rem; color: var(--gris); }

.bordereau__intertitre { padding-top: 2rem; padding-bottom: 0.75rem; }

/* Le premier intertitre ouvre le bordereau : il n'a personne au-dessus
   de qui se détacher, donc pas de respiration à ajouter. */
.bordereau__intertitre:first-child { padding-top: 0; }

/* La colonne de droite : ce qui vaut pour toutes les formules */
.tarifs__notes-label { margin-bottom: 0.25rem; }

/* Seconde liste, propre aux abonnements : elle a besoin d'air au-dessus
   pour ne pas se confondre avec la première. */
.tarifs__notes-label--second { margin-top: 2.25rem; }

.rappels {
  display: grid;
  gap: 0.75rem;
  padding-top: 1rem;
  border-top: 1px solid var(--filet-fort);
}

.rappel {
  position: relative;
  padding-left: 1.6rem;
  font-size: 0.9375rem;
  line-height: 1.45;
}

/* Coche dessinée avec deux bordures, pas un caractère ni une image */
.rappel::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.32em;
  width: 0.55rem;
  height: 0.3rem;
  border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}

.tarifs__note-texte {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--filet);
  font-size: 0.875rem;
  color: var(--gris);
}

.mention-tva { margin-top: 1rem; }

@media (min-width: 62rem) {
  .tarifs {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: 4rem;
  }
  .tarifs__notes { position: sticky; top: 6rem; align-self: start; }
}


/* ==========================================================================
   14. CONTACT — formulaire
   ========================================================================== */

.contact { display: grid; gap: clamp(2.5rem, 6vw, 4rem); }

.formulaire { display: grid; gap: 1.25rem; }

.champ { display: grid; gap: 0.4rem; }

.champ__label {
  font-size: 0.6875rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--gris);
}

/* Champ sans cadre : un simple filet, comme une ligne de formulaire papier */
.champ__saisie {
  width: 100%;
  padding: 0.75rem 0;
  background: transparent;
  color: var(--encre);
  font-family: var(--texte);
  font-size: 1.0625rem;
  border: 0;
  border-bottom: 1px solid var(--filet-fort);
  border-radius: 0;
  transition: border-color var(--duree) var(--courbe);
}
.champ__saisie:hover { border-bottom-color: var(--encre); }
.champ__saisie:focus {
  outline: none;
  border-bottom-color: var(--accent);
  border-bottom-width: 2px;
  padding-bottom: calc(0.75rem - 1px);
}
.champ__saisie--zone { resize: vertical; min-height: 6rem; line-height: 1.5; }

.champ__saisie[aria-invalid="true"] { border-bottom-color: var(--accent); }

.formulaire__reponse {
  font-size: 0.9375rem;
  color: var(--gris);
  min-height: 1.5em;
}
.formulaire__reponse[data-etat="succes"] {
  font-family: var(--titre);
  font-weight: 700;
  color: var(--encre);
}

.contact__label { margin-bottom: 0.75rem; }

.contact__email {
  font-size: clamp(1.0625rem, 4.2vw, 1.375rem);
  letter-spacing: -0.02em;
  word-break: break-word;
}

.contact__note {
  margin-top: 1rem;
  max-width: 34ch;
  font-size: 0.875rem;
  color: var(--gris);
}

@media (min-width: 56rem) {
  .contact { grid-template-columns: minmax(0, 1fr) minmax(0, 20rem); gap: 5rem; }
  .bouton--large { width: auto; justify-self: start; }
}


/* ==========================================================================
   15. PIED DE PAGE — mentions légales et logotype géant
   ========================================================================== */

/* Le pied de page porte la classe .bloc-nuit dans le HTML : il ferme la page
   sur une masse pleine plutôt que de la laisser se déliter en crème. */
.pied {
  overflow: hidden;            /* c'est ce qui coupe le logotype géant */
  padding-block: clamp(3rem, 8vw, 5rem) 0;
  font-size: 0.875rem;
  color: var(--gris);
}

.pied__haut {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  padding-bottom: 2rem;
}

.pied__marque { font-size: 1.125rem; color: var(--encre); }

.pied__liens { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; }

.pied__grille {
  display: grid;
  gap: 2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--filet);
}

.pied__label { margin-bottom: 0.6rem; }
.pied__bloc p { line-height: 1.6; }

.pied__bas {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--filet);
  text-transform: none;
  letter-spacing: 0.04em;
}

/* Logotype géant en contour, coupé par le bas de la page. Purement
   typographique : aucune image, aucun octet supplémentaire. */
.pied__geant {
  margin-top: clamp(2rem, 5vw, 3.5rem);
  margin-bottom: clamp(-2.5rem, -3vw, -1rem);
  font-size: clamp(2.75rem, 13.2vw, 10.5rem);
  line-height: 0.78;
  letter-spacing: -0.055em;
  white-space: nowrap;
  color: var(--filet);
  -webkit-user-select: none;
  user-select: none;
}
@supports (-webkit-text-stroke: 1px black) {
  .pied__geant {
    color: transparent;
    -webkit-text-stroke: 1px var(--filet-fort);
  }
}

@media (min-width: 48rem) {
  .pied__grille { grid-template-columns: repeat(2, 1fr); gap: 2.5rem 3rem; }
}
@media (min-width: 68rem) {
  .pied__grille { grid-template-columns: repeat(4, 1fr); }
}


/* ==========================================================================
   16. ACCESSIBILITÉ ET MOUVEMENT RÉDUIT
   ========================================================================== */

/* Indicateur de focus visible et homogène sur toute la page */
:where(a, button, input, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Respect du réglage système « réduire les animations » : plus aucune
   transition, plus de défilement animé, le bandeau s'immobilise et les
   vidéos ne se lancent plus toutes seules (géré aussi dans script.js). */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .apparait { opacity: 1; transform: none; }
  .vignette:hover .ecran { transform: none; }

  /* Le carrousel saute d'une vidéo à l'autre au lieu de glisser */
  .piste { scroll-behavior: auto; }

  /* Le bandeau s'immobilise et passe à la ligne pour rester lisible en
     entier. Surtout pas de défilement horizontal ici : une zone scrollable
     devient focusable au clavier dans Chrome, et le focus se retrouverait
     dans un bloc marqué aria-hidden, donc invisible aux lecteurs d'écran. */
  .bandeau__piste { animation: none; width: auto; flex-wrap: wrap; }
  .bandeau__lot { flex-wrap: wrap; }
  .bandeau__lot:nth-child(2) { display: none; }
}