/* Polices hébergées sur notre domaine, jamais depuis les serveurs de
     Google : un appel à fonts.googleapis.com transmettrait l'adresse IP
     du visiteur avant tout consentement.
     Montserrat porte les titres et les chiffres, Manrope le texte courant.
     Les deux fichiers sont des polices variables : un seul fichier couvre
     les graisses 400 à 800.
     font-display: swap affiche le texte immédiatement dans la police
     système, puis bascule dès que la police est chargée. */
  @font-face {
    font-family: "Manrope";
    src: url("manrope-latin.woff2") format("woff2");
    font-weight: 400 800;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: "Montserrat";
    src: url("montserrat-latin.woff2") format("woff2");
    font-weight: 400 800;
    font-style: normal;
    font-display: swap;
  }

  /* ---------- Charte Essor Local ---------- */
  :root {
    /* ---- Marque ---- */
    --brand-navy: #0a2b54;        /* logotype et bandes sombres */
    --brand-navy-deep: #071e3d;   /* un cran plus sombre : pied de page */
    --brand-navy-soft: #14355f;   /* surface élevée sur fond sombre */
    --brand-blue: #0098e0;        /* barres du logo — LA couleur d'action */
    --brand-blue-active: #007bb8; /* fond des boutons : 4,64:1 en blanc */
    --brand-blue-deep: #00618f;   /* survol, un cran plus sombre */
    --brand-blue-soft: #e6f5fc;   /* voile bleu très clair */

    /* ---- Neutres, tirant vers le marine ---- */
    --gray-50:  #f6f8fb;
    --gray-100: #eef2f7;
    --gray-200: #e2e7ee;
    --gray-300: #cbd2dc;
    --gray-500: #6b7688;
    --gray-700: #3d4a5c;
    --gray-900: #0f1e33;
    --text-on-dark-soft: #a9b6cc;

    /* ---- Ombres ---- */
    --shadow-sm: 0 2px 6px rgba(10, 43, 84, .07);
    --shadow-md: 0 6px 20px rgba(10, 43, 84, .09);
    --shadow-lg: 0 18px 44px rgba(10, 43, 84, .13);
    --shadow-blue: 0 8px 24px rgba(0, 152, 224, .28);

    /* ---- Alias : les noms utilisés partout dans ce fichier pointent
           désormais sur les jetons du design system ci-dessus. ---- */
    --marine: var(--brand-navy);
    --marine-fonce: var(--brand-navy-deep);
    --marine-clair: var(--brand-navy-soft);
    --bleu-vif: var(--brand-blue);
    --bleu-bouton: var(--brand-blue);
    --bleu-bouton-survol: var(--brand-blue-active);
    --bleu-clair: var(--brand-blue-soft);
    --encre: var(--brand-navy);   /* titres et traits */
    --texte: var(--gray-700);     /* texte courant */
    --gris: var(--gray-500);
    --trait: var(--gray-200);
    --fond: var(--gray-50);
    --vert: #1a9d5a;
  }

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

  html { -webkit-text-size-adjust: 100%; }

  body {
    margin: 0;
    font-family: "Manrope", "Segoe UI", system-ui, -apple-system,
                 Helvetica, Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--texte);
    background: #ffffff;
  }

  img { max-width: 100%; display: block; }

  /* Titres en Montserrat : c'est la police du logotype. Le texte courant
     reste en Manrope. */
  h1, h2, h3 {
    font-family: "Montserrat", "Segoe UI", system-ui, -apple-system,
                 Helvetica, Arial, sans-serif;
    color: var(--encre);
  }
  h1, h2 { line-height: 1.25; margin: 0 0 16px; }
  h1 { font-size: 1.75rem; line-height: 1.18; letter-spacing: -0.02em; }
  h2 { font-size: 1.625rem; letter-spacing: -0.01em; }
  h1, h2 { font-weight: 700; }

  /* strong et b valent 700 par défaut. Cette graisse n'est pas chargée :
     sans cette règle, le navigateur fabriquerait un faux gras, plus épais
     et plus flou que le vrai. Manrope est une police variable : la
     graisse 600 est disponible sans fichier supplémentaire. */
  strong, b { font-weight: 600; }

  .carte h3 { font-weight: 700; }
  p  { margin: 0 0 16px; font-size: 1rem; }

  /* Largeur de lecture. Au-delà d'environ 70 caractères, l'œil perd la
     ligne suivante en revenant à la marge. Ne s'applique qu'au texte
     suivi : les grilles de cartes et les points-clés gardent leur largeur. */
  section p, section h1, section h2, section li { max-width: 680px; }
  .carte p, .carte h3, .points-cles li { max-width: none; }

  /* Le titre du bandeau est un titre d'affichage, pas du texte de
     lecture : la mesure de 680 px ne s'y applique pas. */
  #bandeau h1 { max-width: 900px; }

  /* ---------- Conteneur ---------- */
  .conteneur {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
  }

  /* Padding dissymétrique : le filet du repère ouvre la section, il n'a
     pas besoin d'autant d'air au-dessus que la section n'en laisse en
     dessous. Le bas garde le rythme, le haut se resserre. */
  section { padding: 32px 0 56px; }

  /* Repère de section. Le filet est un arrêt : l'œil bute et comprend
     qu'une autre idée commence. Le numéro transforme un déroulé en
     sommaire — le lecteur sait où il est. C'est ce qui remplace les
     bandes de couleur alternées, qui séparaient mal et dataient le site.
     max-width: none est nécessaire : la mesure de lecture de 680 px
     s'applique aux p, or le filet doit tenir toute la largeur. */
  .repere {
    max-width: none;
    display: flex;
    align-items: baseline;
    gap: 14px;
    margin: 0 0 22px;
    padding-top: 14px;
    border-top: 2px solid var(--encre);
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--gris);
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }
  .repere-num {
    font-weight: 600;
    color: var(--encre);
  }

  /* ---------- Fonds des sections ---------- */
  /* Deux teintes claires en alternance : le gris très clair du design
     system marque le passage d'un bloc au suivant. Sans lui, les sections
     s'enchaînaient sans rupture et la page se lisait comme un document
     texte. Le bandeau et le rendez-vous gardent le marine : ce sont les
     deux moments où on demande quelque chose au visiteur. */
  #systeme, #temps, #qui    { background: #ffffff; }
  #preuve, #prix, #limite   { background: var(--gray-50); }
  #bandeau, #rendez-vous            { background: var(--marine); color: #ffffff; }
  #bandeau h1, #rendez-vous h2      { color: #ffffff; }
  #bandeau .bandeau-sous-titre,
  #rendez-vous p                    { color: var(--text-on-dark-soft); }
  #bandeau .points-cles li          { color: var(--text-on-dark-soft); }

  /* ---------- Bouton principal ---------- */
  /* La pastille bleue est la signature du design system : c'est la
     couleur des barres du logo, et la seule couleur d'action du site.
     L'ombre bleue la décolle du fond marine.
     Le bleu retenu est --brand-blue-active et non --brand-blue : sur ce
     dernier, le texte blanc ne donne que 3,2:1, sous le seuil de 4,5:1.
     Le halo, lui, garde le bleu vif de la marque. */
  .bouton-principal {
    display: inline-block;
    background: var(--brand-blue-active);
    color: #ffffff;
    text-decoration: none;
    font-size: 1rem;
    line-height: 1.1;
    font-weight: 700;
    letter-spacing: -0.005em;
    min-height: 54px;
    padding: 18px 30px;
    border-radius: 999px;
    box-shadow: var(--shadow-blue);
  }
  .bouton-principal:hover {
    background: var(--brand-blue-deep);
    box-shadow: var(--shadow-blue);
  }

  /* Action secondaire : même forme que le bouton principal, mais
     creuse. Elle remplace le lien souligné en bleu, qui était le
     dernier vestige daté du site. */
  .bouton-secondaire {
    display: inline-block;
    background: transparent;
    color: #ffffff;
    text-decoration: none;
    font-size: 0.9375rem;
    line-height: 1.1;
    font-weight: 700;
    letter-spacing: -0.005em;
    min-height: 46px;
    padding: 13px 22px;
    border: 2.5px solid rgba(255, 255, 255, 0.7);
    border-radius: 999px;
  }
  .bouton-secondaire:hover { background: rgba(255, 255, 255, 0.12); border-color: #ffffff; }

  /* Variante du bouton secondaire pour les sections claires. */
  .bouton-secondaire-clair { color: var(--brand-navy); border-color: var(--brand-navy); }
  .bouton-secondaire-clair:hover { background: var(--gray-50); border-color: var(--brand-navy); }
  .ligne-secondaire { margin: 16px 0 0; }

  /* ---------- 1. Bandeau ---------- */
  /* Pas de hauteur imposée : le bandeau prend la place de son contenu.
     90vh réservait 1300 px pour cinq lignes de texte. */
  #bandeau { padding: 64px 0; }
  .bandeau-contenu { width: 100%; }

  /* Le design system fournit deux logotypes : logo-blanc.png pour les
     fonds marine, logo-marine.png pour les fonds clairs. Chaque page
     appelle le bon fichier, il n'y a plus de filtre à appliquer. */
  .logo {
    height: 34px;
    width: auto;
    margin-bottom: 28px;
  }
  .bandeau-sous-titre { font-size: 1.125rem; max-width: 640px; }

  /* Un chiffre s'imprime, une phrase se lit. Le filet du haut sépare
     la promesse des preuves sans changer le fond. */
  .points-cles {
    list-style: none;
    margin: 48px 0 0;
    padding: 26px 0 0;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
    display: grid;
    grid-template-columns: 1fr;
    gap: 26px;
  }
  .points-cles li { font-size: 0.9375rem; line-height: 1.45; }
  .points-cles .chiffre {
    display: block;
    font-family: "Montserrat", "Segoe UI", system-ui, -apple-system,
                 Helvetica, Arial, sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: -0.02em;
    margin-bottom: 6px;
  }

  /* ---------- 2. Système ---------- */
  .grille-cartes {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
  }

  /* Cinq cartes dans une grille de deux laissent un orphelin :
     la dernière occupe toute la largeur. Elle parle du tableau de bord :
     elle prend la variante « dark » du design system. */
  .grille-cartes .carte:last-child {
    grid-column: 1 / -1;
    background: var(--brand-navy);
    border-color: transparent;
    box-shadow: var(--shadow-md);
  }
  .grille-cartes .carte:last-child h3 { color: #ffffff; }
  .grille-cartes .carte:last-child p { color: var(--text-on-dark-soft); }

  /* Encadré « plain » du design system : surface blanche, filet fin,
     ombre douce teintée marine, rayon 16 px. */
  .carte {
    background: #ffffff;
    border: 1px solid var(--gray-200);
    border-radius: 16px;
    padding: 28px;
    box-shadow: var(--shadow-sm);
  }
  .carte h3 { font-size: 1.25rem; line-height: 1.4; letter-spacing: -0.01em; margin: 0 0 8px; }
  .carte p:last-child { margin-bottom: 0; }

  /* ---------- 3. Preuve ---------- */
  .image-pleine-largeur {
    width: 100%;
    height: auto;
    border-radius: 16px;
    background: var(--gray-100);
    box-shadow: var(--shadow-lg);
  }
  .legende {
    font-size: 0.875rem;
    color: var(--gris);
    margin: 12px 0 24px;
  }
  .lien-image { display: block; text-decoration: none; border: 0; }

  /* ---------- 5. Prix ---------- */
  .grille-prix {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
  }

  /* Les deux encadrés sont empilés en colonne pour pouvoir remonter le
     libellé au-dessus du montant sans toucher à l'ordre du HTML. */
  .offre {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid var(--gray-200);
    border-radius: 16px;
    padding: 28px;
    box-shadow: var(--shadow-sm);
  }

  /* Le libellé de l'offre devient un exergue : petit, en capitales,
     posé au-dessus du chiffre. order: -1 le remonte visuellement. */
  .offre h3 {
    order: -1;
    font-size: 0.75rem;
    line-height: 1.4;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--gris);
    margin: 0 0 14px;
  }

  .offre .montant {
    font-family: "Montserrat", "Segoe UI", system-ui, -apple-system,
                 Helvetica, Arial, sans-serif;
    font-size: 2.75rem;
    line-height: 1.05;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--brand-navy);
    margin: 0 0 10px;
  }
  .montant-unite {
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--gris);
  }

  /* L'accroche tient sur une ligne, puis un filet sépare le chiffre
     du détail de la prestation. */
  .offre-accroche {
    color: var(--texte);
    margin: 0 0 22px;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--gray-200);
  }
  .offre p { color: var(--texte); }
  .offre p:last-child { margin-bottom: 0; }

  /* Second encadré en marine : même gabarit, valeurs inversées. */
  .grille-prix .offre:last-child {
    background: var(--brand-navy);
    border-color: transparent;
  }
  .grille-prix .offre:last-child h3 { color: var(--brand-blue); }
  .grille-prix .offre:last-child .montant { color: #ffffff; }
  .grille-prix .offre:last-child .montant-unite { color: var(--text-on-dark-soft); }
  .grille-prix .offre:last-child p { color: #ffffff; }
  .grille-prix .offre:last-child .offre-accroche { border-bottom-color: rgba(255, 255, 255, 0.22); }

  /* La commission est une réponse à une inquiétude, pas une note de bas
     de page : elle sort du fil du texte et prend sa propre bande. */
  #prix .note-prix {
    max-width: none;
    margin: 28px 0 16px;
    padding: 20px 24px;
    background: #ffffff;
    border: 1px solid var(--gray-200);
    border-radius: 16px;
    color: var(--texte);
  }
  #prix .legende { color: var(--gris); }

  /* Clôture centrée : le regard se resserre sur l'action finale. */
  #rendez-vous .conteneur { text-align: center; }
  #rendez-vous h2, #rendez-vous p { margin-left: auto; margin-right: auto; }

  /* ---------- 6. Qui ---------- */
  .portrait {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--gray-200);
  }

  /* ---------- 7. Limite ---------- */
  .liste-limite { margin: 0; padding-left: 22px; }
  .liste-limite li { margin-bottom: 8px; }
  .conclusion-limite { margin-top: 24px; font-weight: 600; }

  /* ---------- 8. Rendez-vous ---------- */
  #rendez-vous .retrait-risque { color: #ffffff; font-weight: 600; }

  /* ---------- Pied de page ---------- */
  #pied {
    background: var(--marine-fonce);
    color: var(--text-on-dark-soft);
    font-size: 0.875rem;
    padding: 28px 0;
  }
  #pied p { font-size: 0.875rem; margin: 0 0 6px; }
  #pied p:last-child { margin-bottom: 0; }
  /* Plus de bleu souligné : blanc, avec un soulignement discret
     décollé du texte. */
  #pied a {
    display: inline-block;
    padding: 4px 0;
    color: #ffffff;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: rgba(255, 255, 255, 0.4);
  }

  /* ---------- Pages secondaires sur fond clair ---------- */
  .page-claire { background: #ffffff; }

  /* Même largeur de lecture que le sous-titre du bandeau. */
  .page-claire .texte-page { max-width: 640px; }

  /* Sur les pages de texte suivi, les H2 doivent se détacher de ce qui
     précède. Règle volontairement limitée à .texte-page : sur l'accueil,
     les H2 sont des titres de section et ont déjà le padding de section. */
  .texte-page h2 { margin-top: 40px; }

  /* Le retour à l'accueil est une action, pas une note de bas de page :
     il prend la pastille creuse du design system, comme « Écrivez-moi ».
     Mêmes valeurs que .bouton-secondaire-clair, en une seule règle pour
     ne pas avoir à toucher au HTML des pages secondaires. */
  .lien-retour {
    display: inline-block;
    margin-top: 16px;
    padding: 13px 22px;
    min-height: 46px;
    background: transparent;
    color: var(--brand-navy);
    font-size: 0.9375rem;
    line-height: 1.1;
    font-weight: 700;
    letter-spacing: -0.005em;
    text-decoration: none;
    border: 2.5px solid var(--brand-navy);
    border-radius: 999px;
  }
  .lien-retour:hover { background: var(--gray-50); border-color: var(--brand-navy); }

  /* ---------- Ordinateur ---------- */
  @media (min-width: 768px) {
    h2 { font-size: 2.125rem; }

    body { font-size: 1.0625rem; }
    p { font-size: 1.0625rem; }
    .carte h3 { font-size: 1.3125rem; }
    /* Le bandeau occupe l'écran d'entrée. Il ne paraît vide que si
       le contenu est petit : le titre à 64 px l'occupe réellement. */
    #bandeau {
      min-height: 100vh;
      padding: 0;
      display: flex;
      align-items: center;
    }
    h1 { font-size: 4rem; }

    section { padding: 48px 0 88px; }

    .bandeau-sous-titre { font-size: 1.25rem; }

    .points-cles { grid-template-columns: repeat(3, 1fr); gap: 44px; }
    .points-cles .chiffre { font-size: 2.375rem; }

    .carte { padding: 32px; }

    .offre .montant { font-size: 4rem; }

    .grille-cartes { grid-template-columns: repeat(2, 1fr); }
    .grille-prix   { grid-template-columns: repeat(2, 1fr); }
    .grille-prix   { gap: 24px; }
  }