:root {
    --fond: #1e1e1e;
    --surface: #2c2c2c;
    --creuse: #252525;
    --encre: #ffffff;
    --encre-douce: #b7b7b7;
    --encre-tenue: #888888;
    --trait: #3e3e3e;
    /* Le bord des champs de saisie : 3:1 contre leur propre
       interieur, comme l'exige WCAG 1.4.11. */
    --bord-champ: #6e6e6e;
    --accent: #00ff00;
    /* L'encre qui se lit sur l'accent, choisie par mesure. */
    --sur-accent: #1e1e1e;
    --vers-survol: #000000;
    --alerte: #a32a1f;
    --rayon: 10px;
    --transition: 220ms cubic-bezier(.2, .7, .3, 1);
  }
  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body {
    margin: 0; background: var(--fond); color: var(--encre);
    font-family: "Segoe UI", Inter, -apple-system, Helvetica, sans-serif;
    font-size: 17px; line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    /* Deux halos tres etales dans la couleur d'accent. Ils donnent de la
       profondeur sans qu'on puisse les nommer — on ne doit pas les
       remarquer, seulement trouver la page moins plate. */
    background-image:
      radial-gradient(70rem 40rem at 12% -8%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 60%),
      radial-gradient(50rem 30rem at 100% 8%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 55%);
    background-repeat: no-repeat;
  }
  /* LA PAGE PREND L'ECRAN, LE TEXTE GARDE SA MESURE.
     Deux choses differentes, et les confondre donne soit une colonne
     etriquee au milieu d'un ecran vide, soit des lignes de texte si longues
     que l'oeil perd la suivante en revenant a la ligne.
     Le CADRE s'elargit donc avec l'ecran ; les paragraphes, eux, restent
     bornes en NOMBRE DE CARACTERES (unite `ch`), la seule qui corresponde a
     ce que l'oeil supporte — environ 65 signes. */
  .cadre {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 40px;
  }
  @media (min-width: 1600px) {
    .cadre { max-width: 1440px; }
  }

  .evitement {
    position: absolute; left: -9999px; top: 0;
    background: var(--encre); color: var(--fond); padding: 12px 18px;
    z-index: 20; border-radius: 0 0 var(--rayon) 0;
  }
  .evitement:focus { left: 0; }

  /* --- Entete ------------------------------------------------------- */
  header {
    position: sticky; top: 0; z-index: 10;
    background: color-mix(in srgb, var(--fond) 82%, transparent);
    backdrop-filter: blur(14px) saturate(140%);
    border-bottom: 1px solid var(--trait);
  }
  header .cadre {
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px; flex-wrap: wrap; padding-top: 16px; padding-bottom: 16px;
  }
  .marque {
    font-size: 21px; font-weight: 700; letter-spacing: -0.4px;
    text-decoration: none; color: var(--encre); position: relative;
  }
  .marque span { color: var(--accent); }
  .marque::after {
    content: ""; position: absolute; left: 0; bottom: -5px;
    height: 2px; width: 0; background: var(--accent);
    transition: width var(--transition);
  }
  .marque:hover::after, .marque:focus-visible::after { width: 100%; }

  nav { display: flex; flex-wrap: wrap; gap: 4px; }
  nav a {
    color: var(--encre-douce); text-decoration: none; font-size: 15px;
    padding: 8px 12px; border-radius: 6px;
    transition: color var(--transition), background var(--transition);
  }
  nav a:hover, nav a:focus-visible {
    color: var(--encre); background: var(--surface);
  }

  /* --- Accroche ----------------------------------------------------- */
  .hero { padding: 112px 0 92px; position: relative; }
  /* Deux colonnes des qu'il y a la place ET quelque chose a montrer. Sans
     capture, le texte reprend toute la largeur plutot que de laisser un vide
     a droite — un demi-ecran vide se remarque plus qu'une colonne pleine. */
  .hero .cadre { display: grid; gap: 56px; align-items: center; }
  @media (min-width: 1080px) {
    .hero.avec-image .cadre { grid-template-columns: 1.05fr 0.95fr; }
  }
  .hero-illustration {
    margin: 0; border: 1px solid var(--trait); border-radius: 14px;
    overflow: hidden; background: var(--surface);
    box-shadow: 0 30px 70px color-mix(in srgb, var(--accent) 16%, transparent);
  }
  .hero-illustration img { display: block; width: 100%; height: auto; }
  .hero::after {
    /* Un filet qui s'eteint sur les bords plutot que de s'arreter net. */
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
    background: linear-gradient(90deg, transparent, var(--trait) 18%,
                                var(--trait) 82%, transparent);
  }
  h1 {
    font-size: clamp(36px, 4.6vw, 66px); line-height: 1.06;
    margin: 0 0 26px; letter-spacing: -1.8px; font-weight: 700;
    max-width: 16ch;
  }
  .chapo { font-size: clamp(18px, 1.35vw, 21px); color: var(--encre-douce);
           max-width: 58ch; margin: 0; }
  .marqueur {
    display: inline-flex; align-items: center; gap: 9px;
    font-size: 13px; letter-spacing: 0.6px; text-transform: uppercase;
    font-weight: 700; color: var(--encre-douce); margin: 0 0 22px;
    border: 1px solid var(--trait); border-radius: 999px;
    padding: 7px 15px; background: var(--surface);
  }
  .marqueur::before {
    content: ""; width: 7px; height: 7px; border-radius: 50%;
    background: var(--accent);
  }

  /* --- Titres de section -------------------------------------------- */
  h2 {
    font-size: 14px; text-transform: uppercase; letter-spacing: 1.4px;
    color: var(--encre-tenue); margin: 88px 0 28px; font-weight: 700;
    display: flex; align-items: center; gap: 12px;
  }
  h2::before {
    content: ""; width: 22px; height: 2px; background: var(--accent);
    flex: none;
  }
  h3 { font-size: 19px; margin: 0 0 10px; letter-spacing: -0.2px; }

  /* --- Cartes -------------------------------------------------------- */
  .grille { display: grid; gap: 20px;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
  .carte {
    background: var(--surface); border: 1px solid var(--trait);
    border-radius: var(--rayon); padding: 26px; position: relative;
    transition: transform var(--transition), border-color var(--transition),
                background var(--transition);
  }
  .carte::before {
    /* Un liseré d'accent qui pousse depuis la gauche au survol. */
    content: ""; position: absolute; left: 0; top: 18px; bottom: 18px;
    width: 2px; background: var(--accent); border-radius: 2px;
    transform: scaleY(0); transform-origin: top;
    transition: transform var(--transition);
  }
  .carte:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--accent) 45%, var(--trait));
    background: color-mix(in srgb, var(--accent) 5%, var(--surface));
  }
  .carte:hover::before { transform: scaleY(1); }
  .carte p { margin: 0; color: var(--encre-douce); font-size: 16px; }

  /* --- Tarifs -------------------------------------------------------- */
  /* Deux formules cote a cote, jamais etirees sur toute la largeur d'un
     grand ecran : un bloc de 700 px de large pour six lignes de texte a
     l'air d'une erreur. */
  .formules { display: grid; gap: 20px;
              grid-template-columns: repeat(auto-fit, minmax(320px, 460px));
              justify-content: center; }
  .formule {
    background: var(--surface); border: 1px solid var(--trait);
    border-radius: var(--rayon); padding: 30px; position: relative;
    transition: transform var(--transition), border-color var(--transition);
  }
  .formule:hover { transform: translateY(-3px); }
  .formule .prix {
    font-size: 40px; font-weight: 700; letter-spacing: -1.6px;
    margin: 10px 0 2px; line-height: 1.1;
  }
  /* `encre-douce`, PAS `encre-tenue`. Le gris tenu est derive pour tenir
     3:1 contre le FOND ; pose sur une carte, plus claire, il retombe a 4,34 —
     sous le seuil de 4,5 exige pour du petit texte. Mesure faite, pas
     supposee. */
  .formule .prix small {
    font-size: 15px; font-weight: 500; color: var(--encre-douce);
    letter-spacing: 0;
  }
  .formule .detail { color: var(--encre-douce); font-size: 14px; margin: 0; }
  .formule ul { margin: 22px 0 0; padding: 0; list-style: none;
                color: var(--encre-douce); font-size: 16px; }
  .formule li {
    margin-bottom: 11px; padding-left: 26px; position: relative;
  }
  .formule li::before {
    /* Une coche dessinee en CSS : pas d'image, pas de police d'icones. */
    content: ""; position: absolute; left: 4px; top: 8px;
    width: 6px; height: 11px; border: solid var(--accent);
    border-width: 0 2px 2px 0; transform: rotate(45deg);
  }
  .formule.mise-en-avant {
    border-color: color-mix(in srgb, var(--accent) 55%, var(--trait));
    background: color-mix(in srgb, var(--accent) 7%, var(--surface));
  }
  .etiquette {
    position: absolute; top: -11px; left: 26px;
    background: var(--accent); color: var(--sur-accent);
    font-size: 11px; font-weight: 700; letter-spacing: 1px;
    text-transform: uppercase; padding: 4px 11px; border-radius: 999px;
  }

  /* --- Galerie de captures --------------------------------------------- */
  .galerie {
    display: grid; gap: 22px;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  }
  .apercu { margin: 0; }
  .apercu a {
    display: block; border: 1px solid var(--trait); border-radius: var(--rayon);
    overflow: hidden; background: var(--surface);
    transition: transform var(--transition), border-color var(--transition),
                box-shadow var(--transition);
  }
  .apercu a:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--accent) 50%, var(--trait));
    box-shadow: 0 14px 34px color-mix(in srgb, var(--accent) 20%, transparent);
  }
  /* `height: auto` avec les attributs width/height de la balise : le
     navigateur connait le RAPPORT avant de telecharger, reserve la place
     exacte, et la page ne tressaute pas quand l'image arrive. */
  .apercu img { display: block; width: 100%; height: auto; }
  .apercu figcaption {
    color: var(--encre-douce); font-size: 15px; margin-top: 10px;
  }

  /* L'agrandissement, SANS UNE LIGNE DE SCRIPT. `:target` s'active quand
     l'adresse pointe sur le bloc ; on le cache le reste du temps. */
  .loupe {
    display: none; position: fixed; inset: 0; z-index: 50;
    background: color-mix(in srgb, var(--fond) 92%, transparent);
    backdrop-filter: blur(6px);
    padding: 32px; overflow: auto;
  }
  .loupe:target { display: flex; align-items: center; justify-content: center; }
  .loupe img {
    max-width: 100%; max-height: 88vh; height: auto;
    border: 1px solid var(--trait); border-radius: var(--rayon);
  }
  .loupe .fermer {
    position: fixed; top: 22px; right: 26px;
    color: var(--encre); text-decoration: none; font-weight: 700;
    background: var(--surface); border: 1px solid var(--trait);
    border-radius: 8px; padding: 10px 18px;
  }
  .loupe .fermer:hover { border-color: var(--accent); }

  /* --- Bande sombre --------------------------------------------------- */
  .bande {
    background: var(--surface); margin-top: 96px; padding: 72px 0;
    border-top: 1px solid var(--trait); border-bottom: 1px solid var(--trait);
  }
  /* Meme regle que pour le formulaire : on centre le BLOC, pas les lignes.
     Le titre est court, il est centre. Les paragraphes forment une colonne
     centree mais restent alignes a gauche : un texte de plusieurs lignes
     centre a deux bords irreguliers, et l'oeil doit chercher le debut de
     chaque ligne au lieu de le retrouver au meme endroit. */
  /* `justify-content`, PAS `text-align`. Les h2 sont des conteneurs flex —
     c'est ce qui pose le tiret rouge a leur gauche. Sur un conteneur flex,
     `text-align` ne s'applique qu'au texte A L'INTERIEUR de chaque enfant :
     il ne deplace pas les enfants eux-memes. La declaration s'ecrit sans
     erreur, le navigateur l'accepte, et rien ne bouge. */
  .bande h2 { margin-top: 0; justify-content: center; }
  .bande p { color: var(--encre-douce); max-width: 68ch; font-size: 17px;
             margin-left: auto; margin-right: auto; }

  /* --- Boutons -------------------------------------------------------- */
  a.bouton, button.bouton {
    display: inline-block; background: var(--accent);
    color: var(--sur-accent);
    text-decoration: none; padding: 15px 30px; border-radius: 8px;
    font-weight: 700; margin-top: 32px; border: 1px solid var(--accent);
    font-size: 17px; font-family: inherit; cursor: pointer;
    transition: transform var(--transition), box-shadow var(--transition),
                filter var(--transition);
  }
  a.bouton:hover, button.bouton:hover {
    transform: translateY(-2px);
    background: color-mix(in srgb, var(--accent) 88%, var(--vers-survol));
    color: var(--sur-accent);
    box-shadow: 0 10px 30px color-mix(in srgb, var(--accent) 34%, transparent);
  }
  a.bouton:active, button.bouton:active { transform: translateY(0); }

  /* Deux actions cote a cote, l'une principale, l'autre secondaire. La
     hierarchie se lit au REMPLISSAGE — plein contre contour — et non a la
     couleur : deux nuances d'accent se ressembleraient trop pour dire
     laquelle est l'action attendue. */
  .deux-boutons {
    display: flex; flex-wrap: wrap; gap: 14px; justify-content: center;
    margin: 0;
  }
  a.bouton.discret {
    background: transparent; color: var(--encre);
    border-color: var(--trait);
  }
  a.bouton.discret:hover {
    border-color: var(--encre); filter: none;
    box-shadow: none;
  }

  /* Le contour de focus est VISIBLE et ne depend pas de la couleur
     d'accent : sur un fond accentue, un contour accentue disparait. */
  a:focus-visible, button:focus-visible, input:focus-visible,
  textarea:focus-visible, summary:focus-visible {
    outline: 2px solid var(--encre); outline-offset: 3px; border-radius: 4px;
  }

  /* --- Questions ------------------------------------------------------ */
  /* Les questions restent dans une colonne lisible, centree : etalees sur
     1400 px, une reponse de trois lignes devient une ligne unique qu'on ne
     suit plus. */
  .questions { border-top: 1px solid var(--trait); max-width: 860px; }
  .questions details {
    border-bottom: 1px solid var(--trait); padding: 4px 0;
  }
  .questions summary {
    cursor: pointer; padding: 20px 0; font-weight: 600; list-style: none;
    display: flex; align-items: center; justify-content: space-between;
    gap: 18px; transition: color var(--transition);
  }
  .questions summary::-webkit-details-marker { display: none; }
  .questions summary:hover { color: var(--accent); }
  .questions summary::after {
    content: ""; flex: none; width: 9px; height: 9px;
    border: solid var(--encre-tenue); border-width: 0 2px 2px 0;
    transform: rotate(45deg) translateY(-3px);
    transition: transform var(--transition);
  }
  .questions details[open] summary::after {
    transform: rotate(225deg) translateY(-3px);
  }
  .questions p { margin: 0 0 22px; color: var(--encre-douce); max-width: 72ch; }

  /* --- Formulaire ----------------------------------------------------- */
  /* LE BLOC EST CENTRE, LES ETIQUETTES NE LE SONT PAS.
     Un formulaire etroit colle a gauche d'une page large parait abandonne :
     l'oeil, arrive au bas d'une page centree, ne sait plus ou aller. On centre
     donc le BLOC.
     Mais on ne centre pas les etiquettes : on remplit un formulaire en
     descendant le regard le long de leur bord gauche. Des etiquettes centrees
     donnent un bord en dents de scie, et chaque ligne demande de rechercher ou
     elle commence. */
  .demande { max-width: 660px; margin: 0 auto; }
  .demande h2 { justify-content: center; }   /* flex : voir la bande sombre */
  .demande > p { text-align: center; max-width: 52ch; margin-left: auto;
                 margin-right: auto; }
  form { max-width: 660px; margin: 0 auto; }
  .champ { margin-bottom: 20px; }
  label { display: block; font-size: 15px; font-weight: 600; margin-bottom: 7px; }
  .aide { color: var(--encre-douce); font-size: 14px; font-weight: 400;
          margin: 0 0 7px; }
  input[type=text], input[type=email], input[type=tel],
  input[type=password], textarea {
    width: 100%; padding: 13px 14px; font-size: 16px; font-family: inherit;
    background: var(--creuse); color: var(--encre);
    border: 1px solid var(--bord-champ); border-radius: 8px;
    transition: border-color var(--transition), background var(--transition);
  }
  input::placeholder, textarea::placeholder { color: var(--encre-tenue); }
  input:focus, textarea:focus {
    border-color: var(--accent); background: var(--surface);
  }
  textarea { min-height: 140px; resize: vertical; }
  .abeille { position: absolute; left: -9999px; }

  /* --- Pied ------------------------------------------------------------ */
  footer { padding: 44px 0 56px; color: var(--encre-tenue); font-size: 14px;
           border-top: 1px solid var(--trait); margin-top: 96px; }
  footer a { color: var(--encre-douce); }
  footer a:hover { color: var(--encre); }

  .mentions h2 { margin-top: 52px; }
  .mentions p { color: var(--encre-douce); max-width: 74ch; }

  /* --- Apparition au defilement ---------------------------------------- */
  /* `animation-timeline` n'existe pas partout. Sous `@supports`, les
     navigateurs qui ne le connaissent pas affichent simplement le contenu,
     sans animation et sans rien de casse. On n'anime jamais l'opacite d'un
     bloc sans cette precaution : un bloc reste invisible chez qui ne sait pas
     l'animer. */
  @supports (animation-timeline: view()) {
    .paraitre {
      animation: monter linear both;
      animation-timeline: view();
      animation-range: entry 5% cover 26%;
    }
    @keyframes monter {
      from { opacity: 0; transform: translateY(22px); }
      to   { opacity: 1; transform: none; }
    }
  }

  @media (max-width: 900px) {
    .cadre { padding: 0 24px; }
  }
  @media (max-width: 640px) {
    body { font-size: 16px; }
    .cadre { padding: 0 20px; }
    .hero { padding: 64px 0 52px; }
    .hero .cadre { gap: 34px; }
    h2 { margin-top: 64px; }
    nav a { padding: 6px 9px; font-size: 14px; }
  }

  /* TOUT MOUVEMENT SE COUPE. Ce reglage existe pour des personnes que le
     mouvement rend malades. */
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
      animation-duration: 0.001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.001ms !important;
    }
    .carte:hover, .formule:hover, a.bouton:hover, button.bouton:hover {
      transform: none;
    }
    .paraitre { opacity: 1 !important; transform: none !important; }
  }