:root{
  --papier:#FCFAF6; --carte:#FFFFFF; --encre:#1D1B18; --encre-douce:#6E675C;
  --trait:#E7DFD2; --trait-clair:#F1EBE1;
  --accent:#A8452A; --accent-clair:#F6E8E1; --or:#B98A3C;
  --ombre-fine:0 1px 2px rgba(29,27,24,.05);
  --ombre:0 2px 4px rgba(29,27,24,.05), 0 12px 28px rgba(29,27,24,.08);
  --ombre-livre:0 1px 1px rgba(29,27,24,.10), 0 10px 22px rgba(29,27,24,.16);
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --gris-outil-a:#6E675C; --gris-outil-b:#8E8578;
  --rayon:12px; --large:1140px;
}
@media (prefers-color-scheme:dark){
  :root{
    --papier:#141311; --carte:#1D1C19; --encre:#EDE8DF; --encre-douce:#A69D8E;
    --trait:#302C26; --trait-clair:#252220;
    --accent:#E4906A; --accent-clair:#2B211C; --or:#D2A65C;
    --ombre-fine:0 1px 2px rgba(0,0,0,.4);
    --ombre:0 2px 4px rgba(0,0,0,.4), 0 12px 28px rgba(0,0,0,.35);
    --ombre-livre:0 1px 1px rgba(0,0,0,.5), 0 10px 22px rgba(0,0,0,.45);
    --gris-outil-a:#4C463D; --gris-outil-b:#6E6559;
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--papier);color:var(--encre);font-family:var(--sans);
     font-size:15.5px;line-height:1.5;-webkit-font-smoothing:antialiased;
     text-rendering:optimizeLegibility}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto}
h1,h2,h3{font-family:var(--serif);font-weight:600;letter-spacing:-.01em}
.contenant{max-width:var(--large);margin:0 auto;padding:0 20px}
.etroit{max-width:720px;margin:0 auto}

/* ---------- Outils : applications hébergées ---------- */
/* LES CARTES D'OUTILS. Le titre de famille porte son propre filet, tiré
   jusqu'au bord : il range la grille sans ajouter de trait de séparation entre
   les cartes, qui alourdirait une page qui en compte déjà huit. */
.famille{margin:34px 0 0;font-family:var(--sans);font-size:11.5px;font-weight:600;
         letter-spacing:.09em;text-transform:uppercase;color:var(--encre-douce);
         display:flex;align-items:center;gap:14px}
.famille::after{content:"";flex:1;height:1px;background:var(--trait)}
.famille:first-of-type{margin-top:14px}
.famille + .outils{margin-top:12px}
.famille-dit{font-size:13px;color:var(--encre-douce);margin:7px 0 0;max-width:62ch;
             text-transform:none;letter-spacing:0}

.outils{display:grid;gap:12px;margin-top:6px;
        grid-template-columns:repeat(auto-fill,minmax(min(318px,100%),1fr))}
.outils.grands{gap:14px;
        grid-template-columns:repeat(auto-fill,minmax(min(430px,100%),1fr))}
.outil-carte{display:flex;gap:15px;align-items:flex-start;padding:16px 18px;
             background:var(--carte);border:1px solid var(--trait);border-radius:15px;
             box-shadow:var(--ombre-fine);color:inherit;
             transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
.outil-carte:hover{text-decoration:none;transform:translateY(-2px);
                   box-shadow:var(--ombre);border-color:var(--accent)}
.outil-carte:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* La tuile s'emplit d'accent au survol : c'est la seule couleur franche de la
   page, elle dit où l'on est sans avoir à souligner le titre. */
.outil-carte .tuile{flex:none;width:52px;height:52px;border-radius:15px;
                    background:var(--accent-clair);color:var(--accent);
                    display:flex;align-items:center;justify-content:center;
                    transition:background .16s ease,color .16s ease}
.outil-carte:hover .tuile{background:var(--accent);color:var(--papier)}
.outil-carte .ic{width:26px;height:26px;display:block}
.outil-carte .porte-image{overflow:hidden;background:var(--trait-clair)}
.outil-carte .porte-image img{width:100%;height:100%;object-fit:cover}
.outil-carte .bas{min-width:0;flex:1}
.outil-carte h3::after{content:"→";display:inline-block;margin-left:8px;
                       color:var(--accent);opacity:0;transform:translateX(-4px);
                       transition:opacity .16s ease,transform .16s ease}
.outil-carte:hover h3::after,.outil-carte:focus-visible h3::after{opacity:1;
                       transform:translateX(0)}
.outil-carte h3{font-size:16.5px;margin:2px 0 5px;font-family:var(--sans);
                font-weight:600;line-height:1.25}
/* Deux lignes, coupées proprement : un résumé tronqué au caractère près, en
   plein milieu d'un mot, se lisait comme une erreur. */
.outil-carte p{margin:0;font-size:13px;color:var(--encre-douce);line-height:1.5;
               display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
               overflow:hidden}
.outil-carte.vedette{padding:19px 21px;gap:17px}
.outil-carte.vedette .tuile{width:62px;height:62px;border-radius:17px;
    background:linear-gradient(150deg,var(--accent-clair),var(--carte) 130%)}
.outil-carte.vedette:hover .tuile{background:var(--accent)}
.outil-carte.vedette .ic{width:30px;height:30px}
.outil-carte.vedette h3{font-size:19px;font-family:var(--serif);font-weight:600}
.outil-carte.vedette p{-webkit-line-clamp:3;font-size:13.5px}
@media (max-width:520px){
  .outil-carte{padding:14px 15px;gap:13px}
  .outil-carte .tuile,.outil-carte.vedette .tuile{width:46px;height:46px;border-radius:13px}
  .outil-carte .ic,.outil-carte.vedette .ic{width:23px;height:23px}
  .outil-carte.vedette h3{font-size:17px}
}

/* L'EN-TÊTE D'UN OUTIL tient sur UNE ligne : le titre, le résumé et la
   signature occupaient trois blocs au-dessus du cadre, si bien qu'il fallait
   faire défiler la page avant de voir l'éditeur — et qu'il n'en restait qu'une
   bande. Le récit de l'outil est descendu SOUS le cadre : on vient ici pour
   s'en servir, pas pour le lire. */
.tete-outil{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
            margin:0 0 10px}
.tete-outil h1{margin:0;font-size:23px}
.tete-outil .sous{margin:0;font-size:13.5px;color:var(--encre-douce);flex:1;
                  min-width:200px}
.tete-outil .retour{font-size:13px;white-space:nowrap}

.cadre-outil{position:relative;border:1px solid var(--trait);border-radius:var(--rayon);
             overflow:hidden;background:var(--carte);box-shadow:var(--ombre-fine)}
/* Le cadre prend la HAUTEUR QUI RESTE sous la barre du site et l'en-tête de
   l'outil. « dvh » d'abord : sur un téléphone, « vh » compte la barre d'adresse
   qui se rétracte, et le bas de l'éditeur passait sous elle. Un plancher, pour
   qu'une fenêtre très basse ne réduise pas l'outil à un bandeau. */
.cadre-outil iframe{display:block;width:100%;border:0;background:#fff;
                    height:calc(100vh - 138px);min-height:520px}
@supports (height: 100dvh){
  .cadre-outil iframe{height:calc(100dvh - 138px)}
}
#plein-ecran:checked ~ .cadre-outil{position:fixed;inset:0;z-index:200;border-radius:0;
                                    border:0;background:var(--papier)}
/* « !important » est ici justifié : un outil qui déclare sa propre hauteur la
   pose en attribut de style, et un attribut l'emporte sur une feuille. Sans
   cela, le plein écran ne grandirait pas ces outils-là. */
#plein-ecran:checked ~ .cadre-outil iframe{height:100vh !important;min-height:0}
@supports (height: 100dvh){
  #plein-ecran:checked ~ .cadre-outil iframe{height:100dvh !important}
}
#plein-ecran:checked ~ .barre-outil{position:fixed;right:16px;top:16px;z-index:201;margin:0}
.barre-outil{display:flex;gap:10px;align-items:center;margin-top:10px;flex-wrap:wrap}
/* ⚠ « .reduire » seul ne suffit PAS : la règle « .bouton{display:inline-block} »
   est déclarée plus bas dans cette feuille, à spécificité égale, et l'emportait.
   Le bouton « Réduire » restait donc visible sous le cadre en permanence, hors
   de tout plein écran. On qualifie par le parent plutôt que de crier
   « important » : la spécificité est la bonne réponse à un conflit d'ordre. */
.barre-outil .reduire{display:none}
#plein-ecran:checked ~ .barre-outil .reduire{display:inline-block}
#plein-ecran:checked ~ .tete-outil .agrandir{display:none}
/* Le bouton d'agrandissement est la commande la plus utile de cette page :
   il cesse d'être « discret ». */
.tete-outil .agrandir{font-size:13px;padding:7px 13px}
/* ---------- L'OUTIL SUR UN TÉLÉPHONE ----------
   Mesuré sur un écran de 375 × 812 : l'en-tête du site, le titre, le résumé et
   le bouton occupaient 247 points avant que l'outil ne commence, et le cadre
   dépassait ensuite le bas de l'écran. La page défilait DONC en plus de
   l'outil : à chaque geste, on ne savait pas lequel des deux allait bouger.
   Sur un téléphone on vient se servir de l'application, pas lire sa
   présentation — qui reste écrite en entier sous le cadre. */
@media (max-width:760px){
  .tete-outil{gap:9px;margin:0 0 8px;align-items:center}
  .tete-outil h1{font-size:19px;flex:1;min-width:0}
  .tete-outil .sous{display:none}
  .tete-outil .retour{font-size:12.5px}
  /* Le plein écran est LA façon d'employer ces outils sur un téléphone : le
     bouton cesse d'être discret et devient la commande principale. */
  .tete-outil .agrandir{background:var(--accent);border-color:var(--accent);
                        color:var(--papier);font-size:12.5px;padding:11px 15px;
                        min-height:44px;display:inline-flex;align-items:center}
  .cadre-outil iframe{height:calc(100vh - 136px);min-height:0}
}
@media (max-width:760px) and (min-height:0px){
  @supports (height: 100dvh){
    .cadre-outil iframe{height:calc(100dvh - 136px)}
  }
}

/* LES REPLIS. Sous le cadre, l'avis d'isolement et la description occupaient un
   écran entier sur un téléphone : on faisait défiler longtemps pour trouver la
   fin de la page. On les replie — avec « details », natif : il s'ouvre au
   clavier, s'annonce aux lecteurs d'écran, et le site n'a pas le droit
   d'exécuter une ligne de JavaScript.
   ⚠ Le TITRE reste toujours visible : c'est lui qui porte la promesse
   d'isolement. On replie le détail, jamais l'essentiel. */
.repli{margin-top:14px;border:1px solid var(--trait);border-radius:var(--rayon);
       background:var(--trait-clair);overflow:hidden}
.repli > summary{cursor:pointer;list-style:none;padding:12px 14px;
                 font-size:13.5px;color:var(--encre);font-weight:600;
                 display:flex;gap:10px;align-items:center;min-height:44px}
.repli > summary::-webkit-details-marker{display:none}
.repli > summary::marker{content:""}
.repli > summary::before{content:"›";color:var(--accent);font-size:19px;
                         line-height:1;flex:none;width:12px;text-align:center;
                         transition:transform .15s ease}
.repli[open] > summary::before{transform:rotate(90deg)}
.repli > summary:hover{background:var(--carte)}
.repli > summary:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.repli .dedans{padding:0 14px 14px;font-size:13px;color:var(--encre-douce);
               line-height:1.6}
.repli .dedans.texte{font-size:14.5px;color:var(--encre)}
.repli .dedans.texte p:first-child{margin-top:0}

/* ---------- En-tête ---------- */
header.site{background:var(--carte);border-bottom:1px solid var(--trait);
  position:sticky;top:0;z-index:30}
header.site .contenant{display:flex;align-items:center;gap:22px;min-height:56px;
  flex-wrap:wrap;padding-top:6px;padding-bottom:6px}
.logo{font-family:var(--serif);font-size:22px;font-weight:700;letter-spacing:.10em;
  color:var(--encre);text-decoration:none;white-space:nowrap}
.logo:hover{text-decoration:none}
.logo span{color:var(--accent)}
/* Le carre des Outils, contre le titre. Au survol, un filigrane passe dessus :
   une bande claire en diagonale, animee par une seule regle. Elle disparait
   pour qui a demande moins d'animation dans son systeme. */
.marque{display:flex;align-items:center;gap:11px;flex:0 0 auto}
.carre-outils{position:relative;overflow:hidden;flex:0 0 auto;
  width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:10px;color:#fff;text-decoration:none;
  background:linear-gradient(135deg,var(--gris-outil-a) 0%,var(--gris-outil-b) 100%);
  box-shadow:0 1px 2px rgba(29,27,24,.20);
  transition:transform .18s ease,box-shadow .18s ease}
.carre-outils:hover,.carre-outils:focus-visible{text-decoration:none;
  transform:translateY(-1px);box-shadow:0 5px 14px rgba(29,27,24,.28)}
.carre-outils svg{position:relative;z-index:1;display:block}
.carre-outils.actif{box-shadow:0 0 0 2px var(--papier),0 0 0 4px var(--encre-douce)}
.carre-outils::after{content:"";position:absolute;top:-60%;bottom:-60%;left:0;right:0;
  background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.60) 50%,
             transparent 62%);
  transform:translateX(-130%);opacity:0;pointer-events:none}
.carre-outils:hover::after,.carre-outils:focus-visible::after{opacity:1;
  animation:filigrane 1.15s ease-in-out infinite}
@keyframes filigrane{from{transform:translateX(-130%)}to{transform:translateX(130%)}}
@media (prefers-reduced-motion:reduce){
  .carre-outils:hover,.carre-outils:focus-visible{transform:none}
  .carre-outils:hover::after,.carre-outils:focus-visible::after{animation:none;opacity:0}
}
nav.principale{display:flex;gap:18px;flex:1}
nav.principale a{color:var(--encre-douce);font-size:14.5px}
nav.principale a.actif{color:var(--encre);font-weight:600}
.compte{display:flex;gap:14px;align-items:center;font-size:14.5px}
.compte a:not(.bouton){color:var(--encre-douce)}
.bascule .court{display:none}
.attente{background:var(--accent);color:#fff;border-radius:100px;padding:2px 10px;
  font-size:13px;font-weight:700;text-decoration:none}
.attente:hover{text-decoration:none;filter:brightness(.93)}

/* Menu : sur grand écran, le panneau se fond dans la barre ; sur mobile, un
   bouton ☰ le déplie. Aucune ligne de JavaScript : une case à cocher cachée
   tient l'état ouvert/fermé. */
.interrupteur{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.burger{display:none}
.menu{display:contents}
.action{display:flex;align-items:center}
nav.principale{order:1}
.compte{order:2}
.action{order:3}
@media (max-width:860px){
  header.site .contenant{flex-wrap:nowrap;gap:10px;justify-content:space-between}
  /* Le carre des Outils prend de la place : on resserre la premiere ligne pour
     que le bouton de menu y reste, au lieu de tomber sur une ligne a lui. */
  header.site .contenant{padding-left:16px;padding-right:16px}
  .marque{gap:8px}
  .carre-outils{width:29px;height:29px;border-radius:9px}
  .carre-outils svg{width:15px;height:15px}
  .compte{gap:11px;font-size:14px}
  .bascule .long{display:none}
  .bascule .court{display:inline;font-weight:600;letter-spacing:.04em}
  .burger{order:6;display:flex;align-items:center;justify-content:center;
    width:40px;height:40px;border:1px solid var(--trait);border-radius:10px;
    cursor:pointer;background:var(--carte);margin-left:0;font-size:21px;
    color:var(--encre);line-height:1;user-select:none}
  .burger .ferme{display:none;font-size:19px}
  .interrupteur:checked ~ .burger .ouvre{display:none}
  .interrupteur:checked ~ .burger .ferme{display:inline}
  .menu{display:none;flex-basis:100%;width:100%;order:20;border-top:1px solid var(--trait);
    margin-top:4px;padding:4px 0 6px}
  .interrupteur:checked ~ .menu{display:block}
  header.site .contenant{flex-wrap:wrap}
  nav.principale{flex-direction:column;gap:0;margin:0}
  nav.principale a{display:block;padding:11px 4px;border-bottom:1px solid var(--trait-clair);
    font-size:16px;color:var(--encre)}
  nav.principale a.actif{color:var(--accent)}
  /* Sur mobile : la langue et la connexion restent sur la ligne du logo ;
     tout le reste, rubriques et bouton d'action, se plie dans l'accordéon. */
  .compte{order:5;display:flex;flex-wrap:nowrap;gap:14px;align-items:center;
    margin-left:auto;padding:0}
  .compte a:not(.bouton){font-size:14px;white-space:nowrap}
  .action{order:1;display:block;padding:12px 4px 4px}
  .action .bouton{display:block;text-align:center;padding:11px 18px;font-size:15px}
}

/* ---------- Boutons ---------- */
.bouton{display:inline-block;background:var(--accent);color:#fff;border:0;
  padding:10px 18px;border-radius:var(--rayon);font-size:14.5px;font-weight:600;
  cursor:pointer;font-family:inherit;box-shadow:var(--ombre-fine);
  transition:filter .15s ease, transform .15s ease}
.bouton:hover{text-decoration:none;filter:brightness(.93);transform:translateY(-1px)}
.bouton.discret{background:transparent;color:var(--encre);border:1px solid var(--trait);
  box-shadow:none}
.bouton.discret:hover{border-color:var(--encre-douce);filter:none}
.bouton.petit{padding:8px 15px;font-size:14.5px}

/* ---------- Accueil ---------- */
.hero{padding:34px 0 30px;border-bottom:1px solid var(--trait);
  background:linear-gradient(180deg,var(--carte),var(--papier))}
.hero h1{font-size:clamp(28px,3.4vw,38px);line-height:1.12;margin:0 0 10px;max-width:18ch}
.hero .accroche{font-size:16px;color:var(--encre-douce);max-width:54ch;margin:0 0 16px}
.hero .contenant{display:grid;grid-template-columns:1.15fr .85fr;gap:32px;align-items:center}
.hero .actions{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.hero-couvertures{display:flex;gap:16px;justify-content:center;align-items:center}
.hero-couvertures img{width:30%;aspect-ratio:10/14.3;object-fit:cover;
  border-radius:3px 7px 7px 3px;box-shadow:var(--ombre-livre)}
.hero-couvertures img:first-child{transform:rotate(-5deg) translateY(10px)}
.hero-couvertures img:last-child{transform:rotate(5deg) translateY(10px)}
.hero .precision{font-size:14px;color:var(--encre-douce);margin:14px 0 0}

.etapes{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:0}
.etape{background:var(--carte);border:1px solid var(--trait);border-radius:var(--rayon);
  padding:16px 16px}
.etape .rang{display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:50%;background:var(--accent-clair);
  color:var(--accent);font-weight:700;font-size:15px;margin-bottom:14px}
.etape h3{font-size:17px;margin:0 0 5px}
.etape p{margin:0;color:var(--encre-douce);font-size:14.5px}

.section{padding:30px 0}
.section.bordee{border-top:1px solid var(--trait)}
.section.posee{background:var(--carte);border-top:1px solid var(--trait);
  border-bottom:1px solid var(--trait)}
.titre-section{display:flex;align-items:baseline;justify-content:space-between;
  gap:14px;flex-wrap:wrap;margin:0 0 14px}
.titre-section h2{font-size:23px;margin:0}
.titre-section p{margin:2px 0 0;color:var(--encre-douce);font-size:14.5px}
.titre-section a{font-size:15px;white-space:nowrap}
/* Plusieurs raccourcis a droite d'un titre de section : ils restent
   groupes et passent a la ligne ensemble sur petit ecran. */
.raccourcis{display:flex;gap:18px;flex-wrap:wrap;align-items:baseline}

/* ---------- Avis des lecteurs ---------- */
.avis-liste{list-style:none;margin:0 0 26px;padding:0;display:grid;gap:14px}
.avis{background:var(--carte);border:1px solid var(--trait);border-radius:var(--rayon);
  padding:15px 17px 12px;box-shadow:var(--ombre-fine)}
.avis .tete{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.avis .tete b{font-family:var(--serif);font-size:17px;font-weight:600}
.avis .quand{color:var(--encre-douce);font-size:12.5px}
.avis p{margin:7px 0 0;line-height:1.6}
.avis .pied{margin-top:10px;display:flex;justify-content:flex-end}
.avis .pied form{margin:0}
button.signaler{background:none;border:0;padding:2px 0;cursor:pointer;
  font:inherit;font-size:12.5px;color:var(--encre-douce);text-decoration:underline;
  text-underline-offset:2px}
button.signaler:hover{color:var(--accent)}
.signale-fait{font-size:12.5px;color:var(--encre-douce);font-style:italic}
.avis-form{margin-top:6px}
.avis-form h3{margin:0 0 4px;font-size:19px}

/* ---------- Aussi d'occasion, sous le bouton d'achat de la fiche ---------- */
.aussi-occasion{margin-top:16px;padding:14px 16px 15px;background:var(--carte);
  border:1px solid var(--trait);border-radius:var(--rayon);box-shadow:var(--ombre-fine)}
.aussi-occasion h2{margin:0;font-size:15px;font-family:var(--sans);font-weight:600;
  letter-spacing:.02em}
.aussi-occasion .depuis{margin:2px 0 10px;font-size:13px;color:var(--encre-douce)}
.aussi-occasion ul{list-style:none;margin:0;padding:0;display:grid;gap:1px;
  background:var(--trait-clair);border-radius:8px;overflow:hidden}
.aussi-occasion li a{display:flex;align-items:baseline;justify-content:space-between;
  gap:10px;padding:9px 11px;background:var(--carte);color:var(--encre);font-size:13.5px}
.aussi-occasion li a:hover{text-decoration:none;background:var(--trait-clair)}
.aussi-occasion li b{font-family:var(--serif);font-size:16px;white-space:nowrap}
.aussi-occasion li span{color:var(--encre-douce);font-size:12.5px;text-align:right}
.aussi-occasion .tous{margin:10px 0 0;font-size:13px}
.aussi-occasion .entre-nous{margin:10px 0 0;font-size:11.5px;line-height:1.45;
  color:var(--encre-douce)}

/* ---------- Grille de livres ---------- */
.grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));
  gap:18px 14px}
.livre{display:block;color:inherit}
.livre:hover{text-decoration:none}
.porte-couv{position:relative;display:block}
.pastille{position:absolute;right:7px;bottom:7px;background:rgba(255,255,255,.94);
  color:#1D1B18;font-size:12.5px;font-weight:600;padding:3px 8px;border-radius:100px;
  box-shadow:0 1px 3px rgba(0,0,0,.25);line-height:1.5}
@media (prefers-color-scheme:dark){
  .pastille{background:rgba(30,28,25,.92);color:#EDE8DF}
}
.reactions{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 14px}
.reactions form{margin:0}
.reactions button{background:var(--carte);border:1px solid var(--trait);
  border-radius:100px;padding:6px 12px;font-family:inherit;font-size:13.5px;
  color:var(--encre);cursor:pointer;display:flex;gap:7px;align-items:center}
.reactions button:hover{border-color:var(--accent);color:var(--accent)}
.reactions button.choisi{border-color:var(--accent);background:var(--accent-clair);
  color:var(--accent);font-weight:600}
.reactions .nombre{color:var(--encre-douce);font-variant-numeric:tabular-nums}
.livre .couv{position:relative;aspect-ratio:10/14.3;width:100%;border-radius:3px 6px 6px 3px;
  box-shadow:var(--ombre-livre);object-fit:cover;display:block;background:var(--accent-clair);
  transition:transform .18s ease, box-shadow .18s ease}
.livre:hover .couv{transform:translateY(-4px)}
.livre .sans-couv{display:flex;align-items:center;justify-content:center;padding:14px;
  font-family:var(--serif);font-size:15px;text-align:center;color:var(--encre-douce);
  border:1px solid var(--trait)}
.livre h3{font-size:14px;margin:8px 0 2px;line-height:1.3;font-family:var(--sans);
  font-weight:600}
.livre .par{font-size:12.5px;color:var(--encre-douce);margin:0}

/* ---------- Fiche livre ---------- */
.fiche{display:grid;grid-template-columns:240px 1fr;gap:32px;padding:26px 0 10px}
.fiche .colonne-couv{position:sticky;top:96px;align-self:start}
.fiche .couv{width:100%;aspect-ratio:10/14.3;object-fit:cover;border-radius:3px 8px 8px 3px;
  box-shadow:var(--ombre-livre)}
.fiche .couv.sans-couv{display:flex;align-items:center;justify-content:center;
  background:var(--accent-clair);font-family:var(--serif);padding:20px;text-align:center}
.fiche h1{font-size:clamp(24px,3vw,32px);margin:0 0 6px;line-height:1.16}
.fiche .sous-titre{font-size:16px;color:var(--encre-douce);margin:0 0 12px;font-weight:400}
.fiche .signature{font-size:15.5px;margin:0 0 14px}
.etiquettes{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 16px}
.etiquette{background:var(--accent-clair);color:var(--accent);font-size:12.5px;
  padding:4px 10px;border-radius:100px}
a.etiquette:hover{text-decoration:none;filter:brightness(.96)}
.resume{white-space:pre-wrap;margin:0 0 16px;font-size:15.5px}
.detail{border-top:1px solid var(--trait);margin-top:16px;padding-top:12px;
  display:grid;grid-template-columns:auto 1fr;gap:5px 18px;font-size:13.5px}
.detail dt{color:var(--encre-douce)}
.detail dd{margin:0}

/* ---------- Articles ---------- */
.articles{display:grid}
.article-ligne{display:block;padding:14px 0;border-bottom:1px solid var(--trait);
  color:inherit}
a.article-ligne:hover{text-decoration:none}
a.article-ligne:hover h3{color:var(--accent)}
.article-ligne h3{font-size:18px;margin:0 0 4px}
.article-ligne p{margin:0;color:var(--encre-douce);font-size:14.5px}
.meta{font-size:13.5px;color:var(--encre-douce)}
article.texte{max-width:70ch;margin:0 auto;padding:26px 0}
article.texte h1{font-size:clamp(24px,3.2vw,32px);line-height:1.14;margin:0 0 8px}
article.texte h2{font-size:20px;margin:22px 0 6px}
article.texte .corps{white-space:pre-wrap;font-size:16px;line-height:1.65;margin-top:18px}
article.texte p{font-size:15.5px}

/* ---------- Formulaires ---------- */
form.pave{max-width:600px;margin:24px auto;background:var(--carte);
  border:1px solid var(--trait);border-radius:var(--rayon);padding:22px 24px;
  box-shadow:var(--ombre-fine)}
form.pave.large{max-width:820px}
form.pave h1{font-size:24px;margin:0 0 6px}
form.pave .sous{color:var(--encre-douce);margin:0 0 12px;font-size:15.5px}
label{display:block;font-size:14px;font-weight:600;margin:14px 0 5px}
label .aide{display:block;font-weight:400;color:var(--encre-douce);font-size:13.5px;
  margin-top:3px;line-height:1.5}
input[type=text],input[type=email],input[type=password],input[type=url],select,textarea{
  width:100%;padding:9px 11px;border:1px solid var(--trait);border-radius:8px;
  background:var(--papier);color:var(--encre);font-family:inherit;font-size:14.5px}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:1px}
textarea{min-height:120px;resize:vertical;line-height:1.5}
input[type=file]{font-size:14px}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.actions{margin-top:18px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.recherche{display:flex;gap:8px;max-width:520px;margin:0 0 14px}
.recherche-hero{margin:0 0 8px;max-width:500px}
.astuce{font-size:13px;color:var(--encre-douce);margin:0 0 12px;max-width:58ch}
.astuce code{background:var(--accent-clair);color:var(--accent);padding:2px 7px;
  border-radius:5px;font-size:13px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.recherche-hero input{padding:11px 13px;font-size:15px}

/* ---------- Filtres, tri, pagination ---------- */
/* Le site n'exécute aucun script : un filtre est un formulaire GET, donc une
   adresse. Elle se partage, se met en favori, et le retour arrière la défait. */
.chercher-filtrer{margin:0 0 18px}
.chercher-filtrer .recherche{margin:0 0 8px}
.chercher-filtrer .astuce{margin:0 0 12px}
.filtres{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px;
  margin:0;padding:12px 14px;border:1px solid var(--trait);
  border-radius:var(--rayon);background:var(--carte)}
.filtre{display:flex;flex-direction:column;gap:4px;min-width:132px}
.filtre > span{font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--encre-douce)}
.filtre select{border:1px solid var(--trait);border-radius:8px;padding:8px 10px;
  font:inherit;font-size:13.5px;background:var(--papier);color:var(--encre);
  min-height:40px;max-width:240px}
.filtres .bouton{min-height:40px}
.filtres .effacer{font-size:13px;color:var(--encre-douce);align-self:center;
  padding:8px 2px}
.filtres .effacer:hover{color:var(--accent)}
.compte-resultats{font-size:13px;color:var(--encre-douce);margin:0 0 14px}
/* ---------- Partage d'une fiche ---------- */
.partage{margin-top:20px;padding-top:16px;border-top:1px solid var(--trait)}
.partage h2{font-size:15px;margin:0 0 8px}
/* « user-select: all » : un clic sélectionne l'adresse entière. C'est le
   « copier » d'un site qui n'exécute aucun script. */
.champ-lien{width:100%;border:1px solid var(--trait);border-radius:8px;
  padding:9px 11px;font:inherit;font-size:13px;background:var(--trait-clair);
  color:var(--encre);min-height:42px;user-select:all;-webkit-user-select:all}
.champ-lien:focus{outline:2px solid var(--accent);outline-offset:2px}
.aide-partage{font-size:12.5px;color:var(--encre-douce);margin:7px 0 10px}
/* Un libellé que seuls les lecteurs d'écran entendent : le champ a besoin d'un
   nom, la page n'a pas besoin de le répéter à l'œil. */
.visuellement-cache{position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap}
.etiquette.actif{background:var(--accent);color:#fff;font-weight:600}
.pagination{display:flex;align-items:center;justify-content:center;gap:14px;
  margin:26px 0 0;flex-wrap:wrap}
.pagination span{font-size:13.5px;color:var(--encre-douce)}
/* Un état vide DIT quoi faire : une grille blanche sans un mot laisse croire
   que le site est cassé. */
.vide{text-align:center;padding:40px 16px;border:1px dashed var(--trait);
  border-radius:var(--rayon);background:var(--carte)}
.vide .vide-titre{font-family:var(--serif);font-size:20px;margin:0 0 6px}
.vide p{margin:0 0 12px;color:var(--encre-douce)}
@media (max-width:640px){
  .filtre{min-width:calc(50% - 5px)}
  .filtre select{max-width:none;width:100%}
}

/* ---------- Fil d'actualité ---------- */
.fil{display:grid;gap:12px}
.publication{background:var(--carte);border:1px solid var(--trait);
  border-radius:var(--rayon);padding:14px 16px}
.publication h3{font-size:18px;margin:0 0 3px;line-height:1.25}
.publication h3 a{color:var(--encre)}
.publication h3 a:hover{color:var(--accent);text-decoration:none}
.publication .corps-fil{white-space:pre-wrap;margin:8px 0 0;font-size:15px;line-height:1.5}
.publication .illustration{display:block;margin:12px 0 0;max-width:100%;
  border-radius:8px;max-height:420px;object-fit:cover}
.livre-lie{display:flex;gap:10px;align-items:center;margin-top:12px;padding:8px;
  border:1px solid var(--trait);border-radius:8px;color:inherit;background:var(--papier)}
.livre-lie:hover{text-decoration:none;border-color:var(--accent)}
.livre-lie img{width:38px;aspect-ratio:10/14.3;object-fit:cover;border-radius:3px;
  box-shadow:var(--ombre-fine)}
.livre-lie span{font-size:14px;line-height:1.3;font-weight:600}
.livre-lie small{font-weight:400;color:var(--encre-douce);font-size:12.5px}

/* ---------- Vidéos du mur ---------- */
.video{display:block;position:relative;max-width:560px;margin:14px 0 4px;
  aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:#000}
.video img{width:100%;height:100%;object-fit:cover;display:block;opacity:.92}
.video iframe{width:100%;height:100%;border:0;display:block}
.video .lire{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  background:rgba(0,0,0,.72);color:#fff;padding:12px 20px;border-radius:100px;
  font-weight:600;font-size:15px;white-space:nowrap}
.video.apercu:hover .lire{background:var(--accent)}

/* ---------- Avertissements ---------- */
.avertissement{border:1px solid var(--trait);border-left:3px solid var(--or);
  background:var(--carte);border-radius:8px;padding:12px 14px;margin:14px 0;
  font-size:14px}
.avertissement h2{font-family:var(--sans);font-size:15.5px;margin:0 0 6px;
  letter-spacing:0}
.avertissement p{margin:0;color:var(--encre-douce)}
.avertissement ul{margin:12px 0 0;padding-left:20px;color:var(--encre-douce)}
.avertissement li{margin-bottom:8px}
.avertissement.grave{border-left-color:var(--accent)}
.avertissement.leger{border-left-color:var(--or);color:var(--encre-douce);
  max-width:none;margin:0 0 24px}

/* ---------- Messages ---------- */
.message{padding:10px 14px;border-radius:var(--rayon);margin:14px 0;font-size:14.5px}
.message.ok{background:var(--accent-clair);color:var(--accent)}
.message.erreur{background:#FBE3E0;color:#93291B}
@media (prefers-color-scheme:dark){.message.erreur{background:#3A211E;color:#F0A398}}
.vide{color:var(--encre-douce);padding:20px 0;font-style:italic}

/* ---------- Pied ---------- */
footer.site{border-top:1px solid var(--trait);margin-top:0;padding:26px 0 30px;
  color:var(--encre-douce);font-size:13.5px;background:var(--carte)}
footer.site .colonnes{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:24px;
  margin-bottom:20px}
footer.site h4{font-family:var(--sans);font-size:12px;text-transform:uppercase;
  letter-spacing:.08em;color:var(--encre);margin:0 0 8px}
footer.site ul{list-style:none;margin:0;padding:0;display:grid;gap:3px;line-height:1.45}
footer.site a{color:var(--encre-douce)}
/* Au doigt, un lien de pied de page mesurait QUINZE points de haut : mesuré
   sur un téléphone, dix des douze liens du pied étaient sous le seuil. On
   n'écarte pas les lignes à la souris, où viser ne coûte rien. */
@media (pointer: coarse){
  footer.site ul{gap:0}
  footer.site ul a{display:inline-block;padding:11px 0;min-height:22px}
  header.site a{padding:8px 0;display:inline-block}
  .tete-outil .retour{display:inline-flex;align-items:center;min-height:44px}
}
footer.site .mention{border-top:1px solid var(--trait);padding-top:12px;max-width:80ch;
  line-height:1.45}
footer.site .logo{font-size:21px}

@media (max-width:980px){
  .hero .contenant{grid-template-columns:1fr;gap:28px}
  .hero-couvertures{display:none}
}
@media (max-width:860px){
  .etapes{grid-template-columns:1fr}
  .fiche{grid-template-columns:1fr;gap:28px;padding-top:34px}
  .fiche .colonne-couv{position:static;max-width:230px}
  footer.site .colonnes{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  body{line-height:1.45}
  .resume, article.texte .corps{line-height:1.55}
  .duo{grid-template-columns:1fr}
  .section{padding:26px 0}
  .hero{padding:28px 0 24px}
  /* Le pied reste sur deux colonnes de liens même sur téléphone : en une seule,
     il s'étirait sur trois écrans. */
  footer.site .colonnes{grid-template-columns:1fr 1fr;gap:16px}
  footer.site .colonnes > div:first-child{grid-column:1 / -1}
  footer.site .colonnes > div:first-child p{max-width:none;margin-top:8px}
  footer.site{padding:20px 0 24px;font-size:13px}
  .grille{grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:16px 12px}
}