/* charte.css — feuille commune aux pages de emiledescamps.fr
   ------------------------------------------------------------------
   Extraite des pages du site, qui en portaient chacune une copie.
   Toute règle présente à l'identique dans toutes les pages est ici :
   variables de couleur, typographie, sections en intercalaires, quadrillage,
   bascule clair/sombre, pied de page.

   Chaque page garde un petit bloc <style> pour ce qui lui est propre, chargé
   APRÈS ce fichier : à spécificité égale, une règle de page passe donc devant
   une règle d'ici. Modifier une valeur de la charte se fait désormais ici,
   une seule fois. */

*{box-sizing:border-box}

html{scroll-behavior:smooth}

:root{
    --bg-page:#f5efe4; --bg-white:#fdf7ec; --bg-card:#f7f0e2;
    --border:#e6e0d8; --border-soft:#eee2d4;
    --text-main:#2a2420; --text-secondary:#6b6560;
    --amber:#d9a441; --accent:#b4644a; --accent2:#8a6a8f; --accent3:#c9713f;
    --grad-hero:linear-gradient(160deg,#d9a441 0%,#c9713f 35%,#b4644a 65%,#8a6a8f 100%);
    --grad-contact:linear-gradient(160deg,#8a6a8f 0%,#b4644a 60%,#c9713f 100%);
    --btn-bg:#ffffff; --btn-text:#8a4a34;
    --note-bg:#f2e9d8; --note-text:#8a7a6a;
    --dot:#d8cfc2;
  }

body.dark{
    --bg-page:#12100d; --bg-white:#1c1712; --bg-card:#1c1712;
    --border:#332a20; --border-soft:#3d3122;
    --text-main:#f2e9dd; --text-secondary:#a89a8a;
    --amber:#c98a35; --accent:#e0895f; --accent2:#e0895f; --accent3:#e0895f;
    --grad-hero:linear-gradient(160deg,#c98a35 0%,#b25f34 35%,#9c5540 65%,#6f5477 100%);
    --grad-contact:linear-gradient(160deg,#6f5477 0%,#9c5540 60%,#b25f34 100%);
    --btn-bg:#12100d; --btn-text:#f2c9a8;
    --note-bg:#241d15; --note-text:#c9b9a6;
    --dot:#4a3f30;
  }

main > section:last-of-type{flex:1 0 auto}

body{margin:0;font-family:Manrope,Arial,sans-serif;background:var(--bg-page);color:var(--text-main);transition:background-color .5s ease,color .5s ease}

h1,h2,h3{font-family:Fraunces,Georgia,serif;font-weight:500;margin:0}

.section-inner{max-width:880px;margin:0 auto;position:relative;z-index:1}

.eyebrow{font-weight:700;font-size:12px;letter-spacing:.2em;text-transform:uppercase;margin-bottom:18px}

.eyebrow.pill{display:inline-block;padding:5px 14px;border-radius:100px;margin-bottom:20px}

.title-bar{width:46px;height:4px;border-radius:100px;margin:14px 0 20px}

a.eyebrow-link:hover{opacity:.72}

a.eyebrow-link .arrow{font-size:18px;line-height:1;transform:translateX(0);transition:transform .25s ease}

body{background:transparent}

body::before{
    content:"";position:fixed;inset:0;z-index:-1;
    background:linear-gradient(160deg,#d9a441 0%,#c9713f 32%,#b4644a 58%,#8a6a8f 100%);
  }

footer{padding:26px 24px calc(26px + env(safe-area-inset-bottom));font-size:12px;color:var(--text-secondary);text-align:center;background:var(--bg-page);transition:background-color .5s ease,color .5s ease}

footer a{color:var(--text-secondary)}

body.dark{ --grid-line:rgba(242,233,221,.13) }

/* --- Menu latéral ------------------------------------------------------
     Les libellés sont toujours visibles : on sait ce que contient le site sans
     rien survoler. Le menu est fixe, il traverse donc des sections claires et
     des sections colorées — d'où la classe « clair », posée par le script,
     qui fait passer une entrée en crème quand ce qui défile derrière elle est
     coloré. Sans elle, le texte sombre disparaît sur le bandeau. */
  .menu-lat{position:fixed;right:24px;top:50%;transform:translateY(-50%);z-index:50;
    display:flex;flex-direction:column;align-items:flex-end;gap:11px}

.menu-lat a{display:flex;align-items:center;justify-content:flex-end;gap:8px;
    text-decoration:none;font-size:13px;font-weight:700;letter-spacing:.1em;
    text-transform:uppercase;color:var(--text-secondary);transition:color .3s ease;
    /* Un halo très léger de la couleur opposée : au moment précis où une entrée
       chevauche la jointure entre deux sections, elle a du crème d'un côté et du
       coloré de l'autre, et resterait à moitié illisible sans lui. Invisible le
       reste du temps. */
    text-shadow:0 1px 3px rgba(245,239,228,.5)}

.menu-lat a .tr{display:block;height:2.5px;width:0;background:var(--accent);border-radius:2px;
    transition:width .3s cubic-bezier(.2,.8,.2,1),background-color .3s ease}

.menu-lat a:hover{color:var(--text-main)}

.menu-lat a:hover .tr{width:14px;background:var(--text-secondary)}

.menu-lat a.on{color:var(--text-main)}

.menu-lat a.on .tr{width:22px;background:var(--accent)}

.menu-lat a.on:hover .tr{width:22px;background:var(--accent)}

/* La teinte se décide entrée par entrée, pas pour le menu entier : quand il
     est à cheval sur une jointure, ses premières entrées sont sur du crème et
     les dernières sur du coloré. Une classe globale en aurait rendu la moitié
     invisible. */
  .menu-lat a.clair{color:rgba(246,239,230,.70);text-shadow:0 1px 3px rgba(40,26,20,.5)}

.menu-lat a.clair:hover,.menu-lat a.clair.on{color:#f6efe6}

.menu-lat a.clair.on .tr,.menu-lat a.clair:hover .tr{background:#f6efe6}

/* --- Sous-menu de la page lue ------------------------------------------
     Sur une page intérieure, l'entrée de cette page se déplie et montre ses
     sections. Elles sont en bas de casse et plus petites : la différence de
     graisse suffit à dire lesquelles sont les rubriques du site et lesquelles
     sont les morceaux d'une page. Elles rentrent aussi de quelques pixels ;
     le menu étant aligné à droite, ce retrait se fait vers l'intérieur de la
     page et non vers le bord. */
  .menu-groupe{display:flex;flex-direction:column;align-items:flex-end;gap:11px}

.sous-menu{display:flex;flex-direction:column;align-items:flex-end;gap:8px;
    margin:-1px 17px 1px 0;padding-top:2px}

.menu-lat .sous-menu a{font-size:11.5px;font-weight:600;letter-spacing:.02em;
    text-transform:none;opacity:.78;gap:8px}

.menu-lat .sous-menu a:hover,.menu-lat .sous-menu a.on{opacity:1}

.menu-lat .sous-menu a .tr{height:2px}

.menu-lat .sous-menu a.on .tr{width:15px}

.menu-lat .sous-menu a:hover .tr{width:11px}

/* --- Sous 860 px : la feuille qui monte ---------------------------------
     Les libellés du menu latéral mangeraient la page. À la place, une pastille
     en bas à droite et un panneau qui glisse depuis le bas.
     Pourquoi le bas : le pouce d'une main tient le bas de l'écran, pas le haut.
     Un menu en haut à droite est le plus courant et le moins accessible.
     Fermé, la pastille ne coûte rien ; ouvert, le panneau garde les cinq
     entrées ET le sous-menu de la page lue, ce qu'une barre fixe n'aurait pas
     la place de faire. */
  .menu-ouvre,.menu-voile,.menu-poignee{display:none}

@media (max-width:860px){
    /* Fermé, le panneau attend sous l'écran. Deux sécurités plutôt qu'une,
       parce que la première seule s'est révélée insuffisante sur un vrai
       iPhone : translateY(102%) ne dégageait que 6 px sur un panneau de
       300 px, et Safari fait varier la hauteur d'affichage quand sa barre
       d'adresse se rétracte — le haut du panneau réapparaissait par le bas.
       On descend donc d'une hauteur pleine PLUS 56 px fixes, et surtout on
       masque l'élément : visibility ne se négocie pas avec la hauteur de la
       fenêtre. Transitionnée, elle ne bascule qu'à la fin de la fermeture,
       ce qui laisse l'animation se jouer entièrement. */
    .menu-lat{position:fixed;left:0;right:0;bottom:0;top:auto;
      transform:translateY(calc(100% + 56px));visibility:hidden;
      z-index:60;display:block;align-items:stretch;gap:0;
      background:var(--bg-white);border-radius:24px 24px 0 0;
      padding:12px 22px calc(26px + env(safe-area-inset-bottom));
      box-shadow:0 -10px 34px rgba(42,36,32,.3);
      transition:transform .35s cubic-bezier(.2,.8,.2,1),visibility .35s;
      max-height:82vh;overflow-y:auto}
    body.dark .menu-lat{box-shadow:0 -10px 34px rgba(0,0,0,.75)}
    body.menu-ouvert .menu-lat{transform:none;visibility:visible}
    /* La poignée : elle dit que le panneau vient du bas et peut y retourner —
       et depuis qu'on peut l'attraper, elle ne fait plus que le dire. C'est un
       vrai élément et non plus un ::before : un pseudo-élément ne reçoit aucun
       événement de pointeur. touch-action:none empêche le navigateur de lire
       le glissement comme un défilement du panneau. */
    .menu-poignee{display:block;margin:-12px -22px 2px;padding:14px 0 16px;
      touch-action:none;cursor:grab;-webkit-tap-highlight-color:transparent}
    .menu-poignee span{display:block;width:42px;height:4px;border-radius:3px;
      background:var(--border);margin:0 auto;
      transition:background-color .2s ease,width .2s ease}
    .menu-poignee.tient{cursor:grabbing}
    .menu-poignee.tient span{background:var(--accent);width:56px}
    /* Pendant le glissement, aucune transition : le panneau doit coller au
       doigt, pas le rattraper avec 350 ms de retard. */
    .menu-lat.glisse,.menu-voile.glisse{transition:none}

    .menu-lat a{justify-content:space-between;font-size:15px;font-weight:700;
      letter-spacing:0;text-transform:none;color:var(--text-main);text-shadow:none;
      padding:13px 0;border-bottom:1px solid var(--border-soft)}
    /* La classe « clair », posée par le script d'après le fond qui défile
       derrière, n'a plus de sens dans un panneau opaque : on la neutralise. */
    .menu-lat a.clair{color:var(--text-main);text-shadow:none}
    .menu-lat a.on,.menu-lat a.clair.on{color:var(--accent)}
    .menu-lat a .tr{display:none}
    .menu-groupe{gap:0;align-items:stretch}
    .menu-groupe > a{border-bottom:none}
    .sous-menu{align-items:stretch;gap:0;margin:0 0 0 14px;padding:0;
      border-bottom:1px solid var(--border-soft)}
    .menu-lat .sous-menu a{font-size:13.5px;font-weight:600;opacity:1;
      color:var(--text-secondary);border-bottom:none;padding:9px 0}
    .menu-lat .sous-menu a.on{color:var(--accent)}
    .menu-lat a:last-child{border-bottom:none}

    /* La pastille qui ouvre. Elle s'efface quand le panneau est ouvert :
       sinon elle flotte par-dessus les dernières entrées. */
    .menu-ouvre{display:flex;position:fixed;right:16px;bottom:18px;z-index:61;
      align-items:center;gap:9px;border:none;cursor:pointer;font:inherit;
      font-size:13px;font-weight:800;border-radius:100px;padding:12px 20px;
      background:var(--amber);color:#2e2008;
      box-shadow:0 5px 18px rgba(42,36,32,.3);
      transition:opacity .2s ease,visibility .2s,background-color .5s ease,color .5s ease}
    body.dark .menu-ouvre{background:#e3b45f;color:#241a0e}
    .menu-ouvre .tr3{display:flex;flex-direction:column;gap:3px}
    .menu-ouvre .tr3 i{display:block;width:14px;height:2px;border-radius:2px;background:currentColor}
    body.menu-ouvert .menu-ouvre{opacity:0;visibility:hidden}

    .menu-voile{display:block;position:fixed;inset:0;z-index:59;
      background:rgba(30,22,18,.5);opacity:0;visibility:hidden;
      transition:opacity .3s ease,visibility .3s}
    body.menu-ouvert .menu-voile{opacity:1;visibility:visible}
    /* La page ne défile plus derrière le panneau ouvert. */
    body.menu-ouvert{overflow:hidden}
  }