/* ==========================================================================
   Charte du site julienravaudet
   --------------------------------------------------------------------------
   Feuille unique, partagée par index.html, presentation.html et estimation.html.
   C'est la SEULE source de la charte : une couleur, un espacement ou une taille
   de titre ne se modifie qu'ici. Aucun attribut style= ne doit réapparaître
   dans les pages, sinon on retombe sur le problème d'origine.

   Direction artistique arrêtée le 9 août 2026, après comparaison de deux
   maquettes : fond crème chaud, titres en serif navy, une seule couleur
   d'action. Reprise de la page beacons.ai/julien.ravaudet, qui est la
   référence choisie. Le détail est dans ../cahier-des-charges-site.md,
   partie 4.

   Toutes les paires de couleurs ci-dessous ont été vérifiées au calcul WCAG.
   Les ratios mesurés sont en commentaire. Deux valeurs ont dû être corrigées
   à cette occasion : le gris de mention, qui tombait à 3,7:1, et la bordure
   des composants, qui tombait à 2,3:1.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Les jetons
   -------------------------------------------------------------------------- */

:root {
  /* Fonds. Crème chaud, jamais de blanc pur. */
  --creme:     #F5EFE3;   /* fond de page */
  --creme-bas: #EDE3D0;   /* bandes alternées, pied de la fiche */
  --surface:   #FFFBF3;   /* cartes et blocs posés sur le fond */

  /* Une seule couleur d'action et d'identité : le navy. Il porte les titres,
     les boutons, les icônes. Le cuivre et le bleu vif du logo ont disparu :
     deux accents sur une page en crème, c'est déjà un de trop. */
  --navy:        #1B2A5E;   /* 11,9:1 sur le crème */
  --navy-survol: #132048;
  --sur-navy:    #FBF7EF;   /* texte posé sur un aplat navy, 12,8:1 */

  /* Encres */
  --encre:      var(--navy);
  --texte:      #4A4636;    /*  8,3:1 sur le crème */
  --texte-doux: #68614F;    /*  4,8:1 sur le crème-bas, le fond le plus sombre */

  /* Filets. --trait-fort est à .55 et pas moins : c'est la valeur minimale
     qui donne 3,1:1 sur le crème, seuil AA des composants d'interface. */
  --trait:      rgba(27, 42, 94, .16);
  --trait-fort: rgba(27, 42, 94, .55);

  --erreur: #A3341F;

  /* Rayons. Ceux de la page de référence : arrondis nets, sans excès. */
  --r:       12px;
  --r-petit: 8px;

  /* Ombres, très douces. Sur fond clair elles ne servent qu'à décoller
     un bouton, jamais à créer du relief. */
  --ombre:       0 1px 3px rgba(27, 42, 94, .07);
  --ombre-haute: 0 2px 10px rgba(27, 42, 94, .14);

  /* Deux familles. Le serif porte l'identité, il ne sert qu'aux titres et
     au nom. La pile couvre iOS, Windows, Android et Linux avant le générique :
     sans cela, un visiteur Android perd toute l'identité typographique. */
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Charter,
           "Bitstream Charter", "Noto Serif", Georgia, serif;
  --sans:  system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
           Arial, sans-serif;

  --t-h1:      clamp(2rem, 6vw, 3.1rem);
  --t-h2:      clamp(1.5rem, 4.4vw, 2.2rem);
  --t-h3:      19px;
  --t-corps:   17px;
  --t-large:   18px;
  --t-petit:   15px;
  --t-mention: 14px;
  --t-sur:     12px;
  --t-chiffre: clamp(28px, 5vw, 34px);
  --lh:        1.65;

  --e1: 8px;  --e2: 16px; --e3: 24px; --e4: 32px;
  --e5: 40px; --e6: 56px; --e7: 72px; --e8: 96px;

  --section-y:        clamp(48px, 8vw, 96px);
  --section-y-large:  clamp(64px, 10vw, 120px);
  --section-y-courte: clamp(40px, 7vw, 64px);
  --bord-x:           clamp(20px, 5vw, 40px);

  --large:   1120px;
  --lecture: 720px;
  --fiche:   560px;
  --mesure:  64ch;
  --mesure-courte: 56ch;
  --mesure-courte-breve: 36ch;

  --transition: .15s ease;
}


/* --------------------------------------------------------------------------
   2. Bases
   -------------------------------------------------------------------------- */

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  background: var(--creme);
}

body {
  margin: 0;
  background: var(--creme);
  color: var(--texte);
  font-family: var(--sans);
  font-size: var(--t-corps);
  line-height: var(--lh);
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--navy);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--transition);
}
a:hover { color: var(--navy-survol); }

:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }

img { max-width: 100%; }

input, select, button, textarea { font: inherit; }


/* --------------------------------------------------------------------------
   3. Titres. Le serif ne sert qu'ici.
   -------------------------------------------------------------------------- */

h1, h2, h3, h4 {
  font-family: var(--serif);
  color: var(--encre);
  text-wrap: pretty;
  margin: 0;
}

h1 { font-size: var(--t-h1); font-weight: 700; line-height: 1.08;
     letter-spacing: -.015em; }
h2 { font-size: var(--t-h2); font-weight: 700; line-height: 1.15;
     letter-spacing: -.012em; }
h3 { font-size: var(--t-h3); font-weight: 700; line-height: 1.35; }
h4 { font-size: var(--t-large); font-weight: 700; line-height: 1.4; }

.surtitre {
  margin: 0 0 var(--e2);
  font-family: var(--sans);
  font-size: var(--t-sur);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--texte-doux);
  font-weight: 700;
  line-height: 1.5;
  text-wrap: balance;
}


/* --------------------------------------------------------------------------
   4. Texte courant
   -------------------------------------------------------------------------- */

p { margin: 0 0 var(--e3); }
p:last-child { margin-bottom: 0; }

.chapo   { max-width: var(--mesure); font-size: var(--t-large); color: var(--texte); }
.mention { font-size: var(--t-mention); color: var(--texte-doux); }
.petit   { font-size: var(--t-petit); }
strong   { color: var(--navy); font-weight: 700; }


/* --------------------------------------------------------------------------
   5. Mise en page
   -------------------------------------------------------------------------- */

.bande        { padding: var(--section-y) var(--bord-x); }
.bande--large { padding: var(--section-y-large) var(--bord-x); }

/* Bande alternée claire */
.bande--alt {
  background: var(--creme-bas);
  border-top: 1px solid var(--trait);
  border-bottom: 1px solid var(--trait);
}

/* Bande navy, texte inversé. Elle redéclare les jetons dans son sous-arbre :
   tout ce qui est écrit avec var(--encre) ou var(--trait) s'adapte seul,
   ce qui évite d'écrire une variante sombre de chaque composant. */
/* Attention, piège : à l'intérieur de ce bloc, `var(--sur-navy)` ne renvoie
   PAS la valeur héritée mais celle redéclarée ici même. Toutes les valeurs
   sont donc écrites en dur. Une première version utilisait var() et rendait
   le texte navy sur fond navy, donc invisible. */
.sombre {
  background: #1B2A5E;
  --encre:      #FBF7EF;
  --texte:      rgba(251, 247, 239, .84);
  --texte-doux: rgba(251, 247, 239, .70);
  --navy:       #FBF7EF;   /* ce qui portait le navy passe en ivoire */
  --sur-navy:   #1B2A5E;   /* et le texte posé dessus redevient navy */
  --surface:    rgba(251, 247, 239, .08);
  --trait:      rgba(251, 247, 239, .20);
  --trait-fort: rgba(251, 247, 239, .48);
  color: var(--texte);
}
.sombre--pied { background: #142149; border-bottom: 0; }

.contenu        { max-width: var(--large); margin: 0 auto; }
.contenu--fiche { max-width: var(--fiche); margin: 0 auto; }

/* Colonne de lecture. Elle garde la même gouttière que les sections larges
   et contraint son contenu à l'intérieur, au lieu d'être centrée sur une
   largeur plus étroite : sinon le bord gauche du texte saute d'une section
   à l'autre au défilement, et c'est très visible sur grand écran. */
.contenu--lecture     { max-width: var(--large); margin: 0 auto; }
.contenu--lecture > * { max-width: var(--lecture); }

.grille         { display: grid; gap: clamp(28px, 5vw, 48px); }
.grille--serree { gap: 12px; }

.section { margin-bottom: var(--section-y-courte); }
.section:last-child { margin-bottom: 0; }

.filet-haut { border-top: 1px solid var(--trait); padding-top: 28px; }


/* --------------------------------------------------------------------------
   6. Boutons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 58px;
  padding: 16px 26px;
  border-radius: var(--r);
  font-weight: 600;
  font-size: var(--t-corps);
  text-decoration: none;
  cursor: pointer;
  text-align: center;
  transition: background var(--transition), border-color var(--transition),
              color var(--transition), transform .08s ease;
}
.btn:active { transform: translateY(1px); }

.btn--principal {
  background: var(--navy);
  border: 1px solid var(--navy);
  color: var(--sur-navy);
  box-shadow: var(--ombre-haute);
}
.btn--principal:hover {
  background: var(--navy-survol);
  border-color: var(--navy-survol);
  color: var(--sur-navy);
}
/* Dans une bande navy, le bouton s'inverse : aplat ivoire, texte navy. */
.sombre .btn--principal:hover { background: #FFFFFF; border-color: #FFFFFF; }

.btn--ligne {
  background: var(--surface);
  border: 1px solid var(--trait-fort);
  color: var(--navy);
  box-shadow: var(--ombre);
}
.btn--ligne:hover { border-color: var(--navy); color: var(--navy); }

.btn--pleine { display: flex; width: 100%; }

/* L'action principale de la fiche : deux lignes, en serif, comme la
   référence. Plus haute que les autres, c'est le seul geste de la page. */
.btn--fiche {
  min-height: 72px;
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.25;
}


/* --------------------------------------------------------------------------
   7. Icônes
   Jeu fermé, défini une fois en <symbol> dans la page, réutilisé par <use>.
   Aucun fichier, aucun service externe, aucun logo de marque tierce.
   -------------------------------------------------------------------------- */

.ico {
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }


/* --------------------------------------------------------------------------
   8. Cartes
   -------------------------------------------------------------------------- */

.carte {
  display: block;
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: var(--r);
  padding: 18px 20px;
  text-decoration: none;
  color: var(--encre);
  box-shadow: var(--ombre);
  transition: border-color var(--transition), transform .08s ease;
}
.carte:hover { border-color: var(--trait-fort); color: var(--encre); }
.carte:active { transform: translateY(1px); }

.carte__corps { display: flex; align-items: flex-start; gap: 14px; }
.carte__corps .ico { margin-top: 4px; color: var(--navy); }
.carte h3 { margin: 0 0 3px; font-size: var(--t-large); }
.carte p  { margin: 0; font-family: var(--sans); font-size: var(--t-mention);
            color: var(--texte-doux); line-height: 1.5; }

.encadre {
  padding: 20px;
  border: 1px solid var(--trait);
  border-radius: var(--r);
  background: var(--surface);
  color: var(--texte);
}


/* --------------------------------------------------------------------------
   9. Barres d'action
   -------------------------------------------------------------------------- */

.barre-haut {
  display: none;
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(245, 239, 227, .92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--trait);
  /* Aligne le contenu de la barre sur la gouttière des sections. */
  padding: 12px max(var(--bord-x), calc((100% - var(--large)) / 2));
  align-items: center;
  justify-content: space-between;
  gap: var(--e3);
}
.barre-haut__nom {
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 700;
  color: var(--navy);
  text-decoration: none;
}
.barre-haut__nom:hover { color: var(--navy-survol); }
.barre-haut .btn { min-height: 44px; padding: 10px 18px;
                   font-size: var(--t-petit); white-space: nowrap; flex: none; }

.barre-action {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 30;
  padding: 10px var(--bord-x) calc(10px + env(safe-area-inset-bottom));
  background: rgba(245, 239, 227, .94);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--trait-fort);
}
.barre-action a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  border-radius: var(--r-petit);
  font-weight: 600;
  text-decoration: none;
  transition: background var(--transition);
}
.barre-action .action-1 { background: var(--navy); color: var(--sur-navy); }
.barre-action .action-1:hover { background: var(--navy-survol); color: var(--sur-navy); }
.barre-action .action-2 { background: var(--surface);
                          border: 1px solid var(--trait-fort);
                          color: var(--navy); }
.barre-action .action-2:hover { background: #FFFFFF; color: var(--navy); }

.page { padding-bottom: calc(92px + env(safe-area-inset-bottom)); }


/* --------------------------------------------------------------------------
   10. Listes
   -------------------------------------------------------------------------- */

.liste-filets {
  list-style: none;
  margin: 0 0 var(--e5);
  padding: 0;
  border-top: 1px solid var(--trait);
}
.liste-filets li {
  padding: 16px 0;
  border-bottom: 1px solid var(--trait);
  font-size: var(--t-large);
  color: var(--texte);
}

.liste-bleue { list-style: none; margin: 0; padding: 0; display: grid;
               gap: 10px; max-width: var(--mesure-courte); }
.liste-bleue li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: var(--r-petit);
  color: var(--texte);
}
.liste-bleue .ico { color: var(--navy); }

.frise {
  list-style: none;
  margin: 0;
  padding: 0 0 0 var(--e3);
  border-left: 1px solid var(--trait-fort);
  display: grid;
  gap: 28px;
}
.frise__repere {
  margin: 0 0 6px;
  font-size: var(--t-mention);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--texte-doux);
  font-weight: 700;
}

.etape {
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: var(--r);
  padding: 24px;
}
.etape__num {
  margin: 0 0 10px;
  font-family: var(--serif);
  font-size: var(--t-chiffre);
  font-weight: 700;
  line-height: 1;
  color: var(--encre);
}

.sortie {
  margin: 0;
  max-width: var(--mesure);
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--encre);
}

.liste-contact { list-style: none; margin: 0; padding: 0; }
.liste-contact li { font-size: var(--t-petit); color: var(--texte-doux); }
.liste-contact a { display: inline-flex; align-items: center; min-height: 44px; }


/* --------------------------------------------------------------------------
   11. Accordéon
   -------------------------------------------------------------------------- */

.accordeon details {
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: var(--r);
  margin-bottom: 10px;
  padding: 0 20px;
}
.accordeon details[open] { border-color: var(--trait-fort); }

.accordeon summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e2);
  min-height: 56px;
  padding: 16px 0;
  font-family: var(--serif);
  font-size: var(--t-large);
  font-weight: 700;
  color: var(--encre);
  transition: color var(--transition);
}
.accordeon summary::-webkit-details-marker { display: none; }
.accordeon summary:hover { color: var(--navy-survol); }

/* Le signe change à l'ouverture. Sans cette règle il reste « + » une fois
   ouvert, et c'est le détail que tout le monde remarque sans le nommer. */
.accordeon summary::after {
  content: "+";
  flex: none;
  margin-left: auto;
  font-family: var(--sans);
  font-size: 24px;
  font-weight: 400;
  line-height: 1;
  color: var(--navy);
}
.accordeon details[open] summary::after { content: "\2212"; }

.accordeon details > p { margin: 0 0 20px; max-width: var(--mesure);
                         color: var(--texte); }


/* --------------------------------------------------------------------------
   12. Formulaire
   -------------------------------------------------------------------------- */

.formulaire {
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: var(--r);
  padding: clamp(20px, 4vw, 32px);
  box-shadow: var(--ombre);
}

.champ { display: block; margin-bottom: 20px; }
.champ > label {
  display: block;
  margin-bottom: var(--e1);
  font-size: var(--t-petit);
  font-weight: 600;
  color: var(--encre);
}

.champ input,
.champ select {
  width: 100%;
  min-height: 54px;
  padding: 14px 16px;
  border-radius: var(--r-petit);
  background: #FFFFFF;
  border: 1px solid var(--trait-fort);
  color: #2B2A22;
  transition: border-color var(--transition);
}
.champ input::placeholder { color: var(--texte-doux); }
.champ input:focus,
.champ select:focus { border-color: var(--navy); }

/* Le menu déroulant natif garde son chrome gris sans ceci */
.champ select {
  appearance: none;
  -webkit-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, #2B2A22 50%),
    linear-gradient(135deg, #2B2A22 50%, transparent 50%);
  background-position: right 20px center, right 14px center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 44px;
}

.champ input[aria-invalid="true"],
.champ select[aria-invalid="true"] { border-color: var(--erreur); }

.erreur {
  display: none;
  margin: var(--e1) 0 0;
  font-size: var(--t-mention);
  color: var(--erreur);
}
.erreur.visible { display: block; }
.sombre .erreur { color: #F3B79C; }

.case {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: var(--e3);
  font-size: var(--t-mention);
  color: var(--texte);
  line-height: 1.5;
}
.case input { flex: none; width: 22px; height: 22px; margin-top: 2px;
              accent-color: var(--navy); }

.piege { position: absolute; left: -9999px; width: 1px; height: 1px;
         overflow: hidden; }


/* --------------------------------------------------------------------------
   13. Images
   -------------------------------------------------------------------------- */

.portrait {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r);
  background: var(--creme-bas);
  object-fit: cover;
}
.portrait--hero { aspect-ratio: 7 / 8; object-position: center 18%;
                  box-shadow: var(--ombre-haute); }
.portrait--menu { width: 64px; height: 74px; flex: none;
                  border-radius: var(--r-petit); object-position: center 16%; }

/* Le logo de l'agence, uniquement dans le pied de page. */
.logo-agence { display: block; width: 92px; height: auto; }


/* --------------------------------------------------------------------------
   14. La fiche contact (index.html)
   Cible du QR code de ma carte de visite. Photo en plein cadre qui se fond
   dans le crème, puis le nom, une ligne, et une seule action.
   -------------------------------------------------------------------------- */

.fiche { max-width: var(--fiche); margin: 0 auto; background: var(--creme); }

.fiche__photo { position: relative; }
.fiche__photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 8 / 9;
  object-fit: cover;
  object-position: center 12%;
}
/* Le fondu de la photo vers le crème. C'est lui qui fait que la photo
   n'a l'air ni collée ni encadrée : elle appartient à la page. */
.fiche__photo::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 38%;
  background: linear-gradient(to bottom,
    rgba(245, 239, 227, 0) 0%,
    rgba(245, 239, 227, .85) 62%,
    var(--creme) 100%);
}

.fiche__identite { position: relative; z-index: 1; margin-top: -64px;
                   padding: 0 var(--bord-x); text-align: center; }
.fiche__nom { margin: 0 0 10px; font-size: clamp(34px, 9vw, 46px);
              line-height: 1.05; }
.fiche__ligne { margin: 0 auto var(--e4); max-width: 26ch;
                font-family: var(--serif); font-size: clamp(17px, 4.4vw, 20px);
                line-height: 1.35; color: var(--navy); }

.fiche__sociaux { display: flex; justify-content: center; gap: 12px;
                  margin: calc(var(--e4) * -0.5) 0 var(--e4); }
.fiche__sociaux a { display: inline-flex; align-items: center; justify-content: center;
                    width: 42px; height: 42px; border-radius: 50%;
                    background: var(--surface); border: 1px solid var(--trait-fort);
                    color: var(--navy); box-shadow: var(--ombre); }
.fiche__sociaux a:hover { border-color: var(--navy); }

.fiche__corps { padding: 0 var(--bord-x) var(--e5); }
.fiche__promesse { margin: 12px auto 0; max-width: 34ch; text-align: center; }
.fiche__pied { background: var(--creme-bas); border-top: 1px solid var(--trait);
               padding: var(--e4) var(--bord-x) var(--e5); }

.bloc-apporteur {
  border-radius: var(--r);
  padding: var(--e3);
}
.citation { margin: 0 0 var(--e2); font-family: var(--serif); font-size: 19px;
            line-height: 1.45; color: var(--encre); }

.entete-identite { padding: clamp(24px, 5vw, 36px) var(--bord-x);
                   border-bottom: 1px solid var(--trait); }
.entete-identite__corps { display: flex; align-items: center; gap: 16px; }
.entete-identite__nom { margin: 0 0 2px; font-family: var(--serif);
                        font-size: clamp(20px, 5vw, 26px); font-weight: 700;
                        color: var(--navy); line-height: 1.2; }

.pied__nom { margin: 0 0 var(--e1); font-family: var(--serif);
             font-size: 21px; font-weight: 700; }
.pied__nom a { color: var(--encre); text-decoration: none; }
.pied__nom a:hover { color: var(--encre); opacity: .8; }

.lien-retour { display: inline-flex; align-items: center; gap: 8px;
               min-height: 44px; margin-right: var(--e3); }


/* --------------------------------------------------------------------------
   15. Utilitaires
   -------------------------------------------------------------------------- */

.centre          { text-align: center; }
.rangee          { display: flex; flex-wrap: wrap; gap: 12px; }
.rangee--centree { align-items: center; gap: var(--e2); }
.mesure          { max-width: var(--mesure); }
.mesure-courte   { max-width: var(--mesure-courte); }
.mesure-breve    { max-width: var(--mesure-courte-breve); }
.mesure-titre    { max-width: 20ch; }
.espace-haut     { margin-top: var(--e4); }
.espace-petit    { margin-top: var(--e3); }
.encadre--large  { margin-top: var(--e5); max-width: var(--mesure); }
.pile-1 { margin-bottom: var(--e1); }
.pile-2 { margin-bottom: var(--e2); }
.pile-3 { margin-bottom: var(--e3); }
.pile-4 { margin-bottom: var(--e4); }
.pile-5 { margin-bottom: var(--e5); }
.sans-marge { margin: 0; }
.g-deux-toujours { grid-template-columns: 1fr 1fr; }


/* --------------------------------------------------------------------------
   16. Animation
   -------------------------------------------------------------------------- */

@keyframes montee {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
/* Les titres ne sont masqués QUE si le script a pris la main : la classe est
   posée sur <html> par le script lui-même. Si le JS échoue ou est bloqué, la
   page reste entièrement lisible au lieu d'afficher des titres invisibles. */
.anim-prete [data-anim] { opacity: 0; }
.anim-prete [data-anim].vu { animation: montee .5s ease both; }


/* --------------------------------------------------------------------------
   17. Points de rupture : 640, 900, 1200
   -------------------------------------------------------------------------- */

@media (min-width: 640px) {
  .g-trois { grid-template-columns: repeat(3, 1fr); }
  .g-deux  { grid-template-columns: 1fr 1fr; }
  .g-pied  { grid-template-columns: 1.4fr 1fr; }
}

@media (min-width: 900px) {
  .g-hero       { grid-template-columns: 1.1fr .9fr; align-items: center; }
  .g-secteur    { grid-template-columns: 1fr 1fr; align-items: center; }
  .g-bio        { grid-template-columns: .85fr 1.15fr; align-items: start; }
  .g-formulaire { grid-template-columns: 1fr 1fr; align-items: start; }
  .g-apercu     { grid-template-columns: 1.1fr .9fr; align-items: center; }

  .barre-haut   { display: flex; }
  .barre-action { display: none; }
  .page         { padding-bottom: 0; }
}

@media (min-width: 1200px) {
  .contenu--lecture { max-width: 780px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-anim] { animation: none !important; opacity: 1 !important; }
  * { transition: none !important; }
}


/* --------------------------------------------------------------------------
   18. La fiche contact sur grand écran
   Elle reste une colonne étroite, mais devient une carte posée sur un fond
   plus sombre, pour que l'étroitesse se lise comme un choix.
   -------------------------------------------------------------------------- */

@media (min-width: 900px) {
  .corps-fiche { background: var(--creme-bas); }
  .fiche {
    margin: clamp(32px, 6vh, 72px) auto;
    border: 1px solid var(--trait);
    border-radius: var(--r);
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(27, 42, 94, .10);
  }
  .fiche .barre-action { display: none; }
}