/* =========================================================================
   LES ÉCRINS — feuille unique, partagée par les quatre pages.
   Externe et non en ligne dans chaque page : avec plusieurs pages, le
   navigateur la garde en cache une fois pour toutes au lieu de retelecharger
   le meme CSS a chaque navigation.

   PARTI PRIS : la retenue. Noir sur blanc, aucun arrondi, aucune ombre,
   aucun degrade, aucune icone. Une maison qui doit prouver quelque chose
   decore ; une maison qui n'a rien a prouver enleve.
   ========================================================================= */

/* ---- Polices auto-hebergees -------------------------------------------
   Aucun appel a fonts.googleapis.com : pas de transfert d'IP du visiteur
   vers un tiers (RGPD), et un aller-retour reseau en moins avant le premier
   texte peint. Sous-ensemble latin : le francais y tient entierement. */
@font-face{
  font-family:'Spectral';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/spectral-400-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Spectral';font-style:italic;font-weight:400;font-display:swap;
  src:url('fonts/spectral-400-italic.woff2') format('woff2');
}
/* Fichier variable : un seul telechargement couvre 400 a 500. */
@font-face{
  font-family:'Hanken Grotesk';font-style:normal;font-weight:400 500;font-display:swap;
  src:url('fonts/hankengrotesk-400-normal.woff2') format('woff2');
}

:root{
  color-scheme: light;

  --surface:      #ffffff;
  --surface-2:    #f4f3f1;   /* un vrai papier n'est pas #fff */

  --ink:          #15171b;   /* jamais #000 : le noir pur vibre a l'ecran */
  --ink-2:        #3c4147;
  --ink-muted:    #6a7078;

  --rule:         rgba(21,23,27,.13);
  --rule-strong:  rgba(21,23,27,.30);

  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:64px; --s7:96px;

  --t--1: clamp(.8125rem, .795rem + .09vw, .875rem);
  --t-0:  clamp(1.0625rem, 1.03rem + .17vw, 1.1875rem);
  --t-1:  clamp(1.1875rem, 1.12rem + .32vw, 1.4375rem);
  --t-2:  clamp(1.4375rem, 1.26rem + .78vw, 2rem);
  --t-3:  clamp(1.75rem, 1.4rem + 1.55vw, 2.75rem);
  --t-4:  clamp(2.1rem, 1.45rem + 2.9vw, 3.9rem);

  --mesure: 65ch;
  --rythme: clamp(56px, 8.5vw, 112px);

  --serif: 'Spectral', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --sans:  'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  --sortie: cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--surface);
  color:var(--ink);
  font-family:var(--sans);
  font-size:var(--t-0);
  line-height:1.62;
  font-weight:400;
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* 1040 px : la largeur exacte de la colonne de marge + la gouttiere + la
   mesure de 65 signes. Au-dela, l'en-tete finissait loin a droite pendant
   que le texte s'arretait au milieu, et la page semblait pencher. */
.page{ max-width:1040px; margin-inline:auto; padding-inline:clamp(20px,5vw,56px); }

.saut{ position:absolute; left:-9999px; top:0; background:var(--ink); color:#fff;
       padding:var(--s2) var(--s3); font-size:var(--t--1); z-index:50; }
.saut:focus{ left:0; }

/* ---- En-tete ---------------------------------------------------------- */
.entete{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--s3);
         padding-block:var(--s4) var(--s3); border-bottom:1px solid var(--rule); }
.marque{ display:flex; align-items:center; gap:14px; text-decoration:none; color:inherit; }
.marque img{ display:block; height:22px; width:auto; opacity:.92; }
.marque span{ font-family:var(--serif); font-size:var(--t-1); letter-spacing:-.012em;
              line-height:1; white-space:nowrap; }
.entete nav{ display:flex; gap:var(--s3); font-size:var(--t--1); letter-spacing:.02em; }
.entete nav a{ color:var(--ink-2); white-space:nowrap; }

a{ color:var(--ink); text-decoration-line:underline; text-decoration-thickness:1px;
   text-underline-offset:.18em; text-decoration-color:var(--rule-strong);
   transition:text-decoration-color 160ms var(--sortie); }
a:hover{ text-decoration-color:var(--ink); }
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:2px solid var(--ink); outline-offset:3px; border-radius:0; }

/* ---- Hero ------------------------------------------------------------- */
.hero{ padding-block:clamp(48px,9vw,104px) var(--rythme); }
.hero h1{ font-family:var(--serif); font-weight:400; font-size:var(--t-4);
          line-height:1.055; letter-spacing:-.026em; margin:0; max-width:24ch;
          text-wrap:balance; }
.chapeau{ margin:var(--s5) 0 0; max-width:62ch; font-size:var(--t-1); line-height:1.52;
          color:var(--ink-2); text-wrap:pretty; }

/* ---- Bouton : un rectangle --------------------------------------------- */
.bouton{ display:inline-block; background:var(--ink); color:#fff; font-family:var(--sans);
         font-size:var(--t-0); font-weight:500; letter-spacing:.01em; padding:15px 28px;
         border:1px solid var(--ink); text-decoration:none; min-height:44px;
         transition:background 160ms var(--sortie), color 160ms var(--sortie),
                    transform 110ms ease-out; }
.bouton:hover{ background:#fff; color:var(--ink); }
.bouton:active{ transform:scale(.985); }  /* retour des l'appui, pas au relachement */

/* ---- Sections ---------------------------------------------------------- */
.section{ border-top:1px solid var(--rule); padding-block:var(--rythme); }
.section.fond{ background:var(--surface-2); }
.section > .page > h2{ font-family:var(--serif); font-weight:400; font-size:var(--t-3);
                       line-height:1.12; letter-spacing:-.02em; margin:0 0 var(--s5);
                       max-width:24ch; text-wrap:balance; }
.corps{ max-width:var(--mesure); }
.corps p{ margin:0 0 var(--s3); text-wrap:pretty; }
.corps p:last-child{ margin-bottom:0; }

/* Colonne de marge : le fait et sa source vivent a cote du texte, comme les
   notes d'un livre. Sous 1040 px elle passe au-dessus, bordee d'un filet. */
.avec-marge{ display:grid; gap:var(--s4); }
.marge{ font-size:var(--t--1); line-height:1.52; color:var(--ink-muted); letter-spacing:.015em;
        border-left:1px solid var(--rule-strong); padding-left:var(--s2); }
.marge p{ margin:0 0 var(--s1); } .marge p:last-child{ margin:0; }
@media (min-width:1040px){
  .avec-marge{ grid-template-columns:184px minmax(0,var(--mesure)); column-gap:var(--s7); }
  .avec-marge .marge{ order:-1; border-left:0; border-right:1px solid var(--rule-strong);
                      padding-left:0; padding-right:var(--s3); text-align:right; }
}

/* ---- Le seul moment editorial de la page ------------------------------- */
.appui{ margin:var(--s6) 0 0; max-width:46ch; font-family:var(--serif); font-style:italic;
        font-weight:400; font-size:var(--t-2); line-height:1.34; letter-spacing:-.012em;
        color:var(--ink); text-indent:-.38em; }  /* la guillemet pend hors marge */

/* ---- Formulaire -------------------------------------------------------- */
.formulaire{ max-width:34rem; margin-top:var(--s5); }
.champ{ margin-bottom:var(--s4); }
.champ label{ display:block; font-size:var(--t--1); font-weight:500; letter-spacing:.02em;
              margin-bottom:var(--s1); }
.champ .aide{ display:block; font-weight:400; color:var(--ink-muted); margin-top:2px; }
input[type=text],input[type=email],textarea{
  width:100%; font-family:var(--sans); font-size:16px;  /* <16px : iOS zoome la page */
  line-height:1.5; color:var(--ink); background:var(--surface);
  border:1px solid var(--rule-strong); border-radius:0; padding:12px 14px; min-height:46px;
  transition:border-color 160ms var(--sortie); }
input:hover,textarea:hover{ border-color:var(--ink-2); }
textarea{ min-height:140px; resize:vertical; }
/* Piege a robots : lisible par un script, hors champ pour un humain et pour un
   lecteur d'ecran. display:none serait ignore par certains robots. */
.piege{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%);
        white-space:nowrap; }

/* ---- Page de reponses -------------------------------------------------- */
.famille{ border-top:1px solid var(--rule); padding-block:var(--rythme); }
.famille.fond{ background:var(--surface-2); }
.famille > .page > h2{ font-family:var(--serif); font-weight:400; font-size:var(--t-2);
                       line-height:1.15; letter-spacing:-.018em; margin:0 0 var(--s5);
                       max-width:26ch; }
.qr{ max-width:var(--mesure); border-top:1px solid var(--rule); padding-block:var(--s4); }
.qr:last-of-type{ border-bottom:1px solid var(--rule); }
.qr h3{ font-family:var(--serif); font-style:italic; font-weight:400; font-size:var(--t-1);
        line-height:1.35; letter-spacing:-.01em; margin:0 0 var(--s2); }
.qr p{ margin:0; color:var(--ink-2); text-wrap:pretty; }
.sommaire{ max-width:var(--mesure); margin:var(--s5) 0 0; padding:0; list-style:none;
           font-size:var(--t-0); }
.sommaire li{ border-top:1px solid var(--rule); padding-block:var(--s2); }
.sommaire li:last-child{ border-bottom:1px solid var(--rule); }

/* ---- Pied -------------------------------------------------------------- */
.pied{ border-top:1px solid var(--rule); padding-block:var(--s6) var(--s7);
       font-size:var(--t--1); color:var(--ink-muted); letter-spacing:.015em; }
.pied .page{ display:flex; flex-wrap:wrap; gap:var(--s2) var(--s5);
             justify-content:space-between; }
.pied a{ color:var(--ink-2); }

/* =========================================================================
   MOUVEMENT — un seul moment, a l'ouverture. Rien au survol des blocs.
   ========================================================================= */
@media (prefers-reduced-motion: no-preference){
  @keyframes arrivee{ from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:none} }
  /* 'backwards' et non 'both' : l'etat final de l'animation est deja l'etat
     naturel de l'element. Avec 'both', un element dont l'animation ne
     demarre jamais reste fige a opacity:0 — autrement dit une page blanche.
     Le contenu ne doit jamais dependre d'une animation pour etre visible. */
  .beat{ animation:arrivee 620ms var(--sortie) backwards; }
  .beat-1{ animation-delay:40ms; }
  .beat-2{ animation-delay:160ms; }
  .beat-3{ animation-delay:280ms; }
  .beat-4{ animation-delay:400ms; }

  /* Le filet se trace au defilement, pilote par la position de defilement
     elle-meme donc hors du fil principal. Sans le support du navigateur,
     l'etat par defaut est l'etat FINAL : jamais un bloc invisible. */
  @supports (animation-timeline: view()){
    @keyframes trait{ from{transform:scaleX(0)} to{transform:scaleX(1)} }
    .section,.famille{ border-top-color:transparent; position:relative; }
    .section::before,.famille::before{
      content:""; position:absolute; inset:0 0 auto 0; height:1px; background:var(--rule);
      transform-origin:left center; animation:trait linear both;
      animation-timeline:view(); animation-range:entry 0% entry 55%; }
  }
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important;
                        transition-duration:.01ms !important; scroll-behavior:auto !important; }
}

@media print{
  .entete nav,.formulaire,.pied{ display:none; }
  .section,.famille{ page-break-inside:avoid; }
  body{ font-size:11pt; }
}

/* =========================================================================
   LE MOT — la page d'accueil.
   Mesure etroite, composition centree, beaucoup de blanc autour. Le centrage
   n'est defendable que la : texte court, aucune direction de lecture imposee,
   et une mesure de 46 signes qui empeche les rivieres blanches qu'on obtient
   en centrant un long paragraphe.
   ========================================================================= */
.mot{ padding-block:clamp(72px,13vw,172px) clamp(72px,13vw,164px); }
.mot-corps{
  max-width:54ch; margin-inline:auto; text-align:center;
  font-family:var(--serif); color:var(--ink);
  text-wrap:pretty;
}
.mot-corps h1{
  font-family:var(--serif); font-weight:400; font-size:var(--t-2);
  line-height:1.4; letter-spacing:-.015em; margin:0 0 var(--s4);
  text-wrap:balance;
}
.mot-corps p{
  font-size:var(--t-1); line-height:1.58; letter-spacing:-.004em;
  margin:0 0 var(--s3); color:var(--ink-2);
}
.mot-corps p:last-child{ margin-bottom:0; }

/* La signature est servie detouree, sur fond transparent : elle est ecrite
   sur le papier du site, pas collee dans un rectangle d'un autre blanc. */
.signature{ margin:var(--s6) 0 0; text-align:center; }
.signature img{
  display:inline-block; height:clamp(52px,6.5vw,66px); width:auto;
  opacity:.88;   /* une encre posee sur du papier n'est jamais a 100 % */
}

/* Titre centre + colonne centree dont le texte reste aligne a gauche :
   un paragraphe de quatre lignes centre devient illisible. */
.section > .page > h2.centre{ margin-inline:auto; text-align:center; max-width:28ch; }
.corps.colonne-centree,
.formulaire.colonne-centree{ margin-inline:auto; }

/* L'unique demande de la page d'accueil. Detachee du dernier paragraphe pour
   qu'elle se lise comme une signature de fin de lettre, pas comme une suite
   du raisonnement. Sans elle, le visiteur venu d'une recherche lisait le
   texte et repartait sans voir le formulaire. */
.mot-corps .appel{
  margin-top:var(--s5); font-size:var(--t-1); color:var(--ink);
}
.mot-corps .appel a{ text-decoration-color:var(--rule-strong); }
.mot-corps .appel a:hover{ text-decoration-color:var(--ink); }