/* ==========================================================================
   Retralot, feuille de style unique
   Poste de veille RappelConso, registre de lots et dossier de retrait rappel
   Vocabulaire de classes issu du metier : bordereau, etiquette, vitrine,
   arete, constat, tempo, poste, confrere, formule, registre.
   ========================================================================== */

:root{
  --papier:#F1F3FB;
  --papier-alt:#E6EAF6;
  --surface:#FDFDFF;
  --encre:#0D1030;
  --encre-douce:#4A5075;
  --blanc:#FDFDFF;
  --electrique:#3C48F5;
  --electrique-dense:#2A34C4;
  --electrique-pale:#98A2FF;
  --signal:#E01E37;
  --signal-dense:#B7132A;
  --bordure:#B6BFDF;

  --pas-arete:14px;
  --biseau:14px;
  --gouttiere:24px;
  --hauteur-entete:68px;
  --mesure:62ch;

  --amorti:cubic-bezier(0.22, 1.4, 0.36, 1);

  --titre:"Righteous", "Trebuchet MS", sans-serif;
  --courant:"Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --machine:"Space Mono", "Courier New", monospace;
}

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

html{
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--hauteur-entete) + 16px);
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--papier);
  color:var(--encre);
  font-family:var(--courant);
  font-size:1.0625rem;
  line-height:1.65;
  font-weight:400;
  font-variant-numeric:tabular-nums;
  overflow-x:hidden;
}

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

a{color:var(--encre);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;}
a:hover{color:var(--electrique-dense);}

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

::selection{
  background:var(--electrique);
  color:var(--blanc);
}

p{margin:0 0 1.1em;max-width:var(--mesure);}
ul{margin:0;padding:0;list-style:none;}

h1,h2,h3,h4{margin:0 0 .5em;}

h1,h2{
  font-family:var(--titre);
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:-0.02em;
  line-height:.95;
}
h1{font-size:3.4rem;}
h2{font-size:2.2rem;}
h3{
  font-family:var(--courant);
  font-weight:600;
  font-size:1.25rem;
  line-height:1.25;
  letter-spacing:0;
  text-transform:none;
}

/* --------------------------------------------------------------------------
   Utilitaires de composition
   -------------------------------------------------------------------------- */

.calage{
  width:min(1200px, 100% - 2 * var(--gouttiere));
  margin-inline:auto;
}

.evitement{
  position:absolute;
  left:-9999px;
  top:0;
  background:var(--electrique);
  color:var(--blanc);
  padding:12px 20px;
  z-index:120;
  font-weight:600;
  text-decoration:none;
}
.evitement:focus{left:12px;top:12px;}

.surtitre{
  font-family:var(--machine);
  font-weight:700;
  font-size:.75rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--encre-douce);
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 0 18px;
}
.surtitre::before{
  content:"";
  width:9px;height:9px;
  background:var(--electrique);
  clip-path:polygon(50% 0, 100% 100%, 0 100%);
  flex:0 0 auto;
}

.machine{font-family:var(--machine);font-variant-numeric:tabular-nums;}
.note-basse{font-size:.8125rem;color:var(--encre-douce);}

/* Motif signature : chevron en arete de poisson */
.arete{
  background-image:
    repeating-linear-gradient(45deg, rgba(13,16,48,.11) 0 2px, transparent 2px var(--pas-arete)),
    repeating-linear-gradient(135deg, rgba(13,16,48,.11) 0 2px, transparent 2px var(--pas-arete));
  background-size:var(--pas-arete) var(--pas-arete);
  background-position:0 0, calc(var(--pas-arete) / 2) calc(var(--pas-arete) / 2);
}
.arete-vive{
  background-image:
    repeating-linear-gradient(45deg, rgba(60,72,245,.34) 0 2px, transparent 2px var(--pas-arete)),
    repeating-linear-gradient(135deg, rgba(60,72,245,.34) 0 2px, transparent 2px var(--pas-arete));
  background-size:var(--pas-arete) var(--pas-arete);
  background-position:0 0, calc(var(--pas-arete) / 2) calc(var(--pas-arete) / 2);
}
.arete-signal{
  background-image:
    repeating-linear-gradient(45deg, rgba(224,30,55,.24) 0 2px, transparent 2px var(--pas-arete)),
    repeating-linear-gradient(135deg, rgba(224,30,55,.24) 0 2px, transparent 2px var(--pas-arete));
  background-size:var(--pas-arete) var(--pas-arete);
  background-position:0 0, calc(var(--pas-arete) / 2) calc(var(--pas-arete) / 2);
}

/* Separateur de section, 6 pixels de motif */
.filet-arete{
  height:6px;
  border-top:1px solid var(--bordure);
  border-bottom:1px solid var(--bordure);
}

/* Angle superieur gauche coupe, avec chevron loge dans la coupe */
.biseau{
  position:relative;
  clip-path:polygon(var(--biseau) 0, 100% 0, 100% 100%, 0 100%, 0 var(--biseau));
}
.chevron-coupe{position:relative;}
.chevron-coupe::before{
  content:"";
  position:absolute;
  top:5px;left:5px;
  width:8px;height:8px;
  background:var(--electrique);
  clip-path:polygon(50% 0, 100% 100%, 0 100%);
  z-index:2;
}

/* --------------------------------------------------------------------------
   Boutons
   -------------------------------------------------------------------------- */

.bouton{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--courant);
  font-weight:600;
  font-size:.9375rem;
  line-height:1.2;
  padding:14px 26px;
  border:0;
  cursor:pointer;
  text-decoration:none;
  clip-path:polygon(var(--biseau) 0, 100% 0, 100% 100%, 0 100%, 0 var(--biseau));
  transition:background-color .2s linear, color .2s linear, box-shadow .2s linear;
}
.bouton .fleche{
  width:8px;height:8px;
  background:currentColor;
  clip-path:polygon(0 0, 100% 50%, 0 100%);
  transition:transform .2s var(--amorti);
  flex:0 0 auto;
}
.bouton:hover .fleche{transform:translateX(4px);}

.bouton-principal{
  background:var(--electrique);
  color:var(--blanc);
}
.bouton-principal:hover{background:var(--electrique-dense);color:var(--blanc);}

.bouton-second{
  background:transparent;
  color:var(--encre);
  box-shadow:inset 0 0 0 1.5px var(--encre);
}
.bouton-second:hover{
  background:rgba(60,72,245,.09);
  box-shadow:inset 0 0 0 1.5px var(--electrique);
  color:var(--encre);
}

.bouton-alerte{
  background:var(--signal);
  color:var(--blanc);
}
.bouton-alerte:hover{background:var(--signal-dense);color:var(--blanc);}

.bouton-compact{padding:10px 18px;font-size:.875rem;}

/* --------------------------------------------------------------------------
   En tete fixe et navigation
   -------------------------------------------------------------------------- */

.bandeau-veille{
  position:fixed;
  inset:0 0 auto 0;
  height:var(--hauteur-entete);
  background:var(--papier);
  border-bottom:1px solid var(--bordure);
  z-index:80;
  transition:border-color .2s linear;
}
.bandeau-veille.defile{border-bottom-color:var(--electrique);}
.bandeau-veille .calage{
  height:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}

.enseigne{
  display:inline-flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  font-family:var(--titre);
  font-size:1.35rem;
  letter-spacing:-0.02em;
  text-transform:uppercase;
  color:var(--encre);
  flex:0 0 auto;
}
.enseigne:hover{color:var(--encre);}
.enseigne .vignette{width:28px;height:28px;flex:0 0 auto;}
.enseigne .lot{color:var(--electrique);}

.ancres{display:flex;align-items:center;gap:22px;}
.ancres a{
  font-weight:500;
  font-size:.9375rem;
  text-decoration:none;
  color:var(--encre-douce);
  padding-bottom:6px;
  position:relative;
}
.ancres a:hover{color:var(--encre);}
.ancres a.active{color:var(--encre);}
.ancres a.active::after{
  content:"";
  position:absolute;
  left:50%;bottom:0;
  transform:translateX(-50%);
  width:8px;height:6px;
  background:var(--electrique);
  clip-path:polygon(50% 0, 100% 100%, 0 100%);
}

.trois-filets{
  display:none;
  background:transparent;
  border:1.5px solid var(--bordure);
  width:44px;height:40px;
  cursor:pointer;
  padding:0;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:5px;
}
.trois-filets span{display:block;width:20px;height:2px;background:var(--encre);}
.trois-filets[aria-expanded="true"] span:nth-child(2){background:var(--electrique);}

.panneau-ancres{
  position:fixed;
  inset:var(--hauteur-entete) 0 0 0;
  background:var(--papier);
  z-index:79;
  padding:32px var(--gouttiere) 48px;
  overflow-y:auto;
}
.panneau-ancres[hidden]{display:none;}
.panneau-ancres ul{display:flex;flex-direction:column;gap:4px;}
.panneau-ancres a{
  display:block;
  font-size:1.25rem;
  font-weight:500;
  text-decoration:none;
  padding:14px 0;
  border-bottom:1px solid var(--bordure);
  color:var(--encre);
}
.panneau-ancres .bouton{margin-top:26px;}

/* --------------------------------------------------------------------------
   Hero en affiche
   -------------------------------------------------------------------------- */

.affiche{
  position:relative;
  padding-top:calc(var(--hauteur-entete) + 64px);
  padding-bottom:64px;
  min-height:100svh;
  display:flex;
  align-items:center;
  background:var(--papier);
  overflow:hidden;
}
.affiche::before{
  content:"";
  position:absolute;
  left:0;top:0;bottom:0;
  width:40px;
  border-right:1px solid var(--bordure);
  background-image:
    repeating-linear-gradient(45deg, rgba(60,72,245,.34) 0 2px, transparent 2px var(--pas-arete)),
    repeating-linear-gradient(135deg, rgba(60,72,245,.34) 0 2px, transparent 2px var(--pas-arete));
  background-size:var(--pas-arete) var(--pas-arete);
  background-position:0 0, calc(var(--pas-arete) / 2) calc(var(--pas-arete) / 2);
  pointer-events:none;
}

.affiche-grille{
  display:grid;
  grid-template-columns:repeat(12, 1fr);
  gap:var(--gouttiere);
  align-items:end;
  width:100%;
  padding-left:40px;
}
.affiche-texte{grid-column:1 / span 7;}
.affiche-vue{grid-column:8 / span 5;}

.affiche h1{
  font-size:clamp(2.3rem, 6.2vw, 4.4rem);
  margin:0 0 26px;
  max-width:none;
}
.affiche h1 .ligne{display:block;}
.affiche h1 .ligne-vive{color:var(--electrique);}

.reassurance{
  font-family:var(--machine);
  font-size:.9375rem;
  color:var(--encre-douce);
  border-left:3px solid var(--electrique);
  padding-left:14px;
  margin:0 0 26px;
  max-width:56ch;
}
.reassurance strong{color:var(--encre);font-weight:700;}

.paire-actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center;}

.affiche-mentions{
  margin-top:26px;
  display:flex;
  flex-wrap:wrap;
  gap:8px 22px;
  font-family:var(--machine);
  font-size:.75rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--encre-douce);
}
.affiche-mentions span{display:flex;align-items:center;gap:8px;}
.affiche-mentions span::before{
  content:"";
  width:7px;height:7px;
  background:var(--electrique);
  clip-path:polygon(50% 0, 100% 100%, 0 100%);
}

/* Cadre photographique bichromie */
.cadre-froid{
  position:relative;
  border:1px solid var(--bordure);
  clip-path:polygon(var(--biseau) 0, 100% 0, 100% 100%, 0 100%, 0 var(--biseau));
  background:var(--papier-alt);
  overflow:hidden;
}
.cadre-froid img{
  width:100%;
  filter:grayscale(1) contrast(1.06) brightness(1.04);
  mix-blend-mode:luminosity;
}
.cadre-froid::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to top, rgba(13,16,48,.88) 0%, rgba(13,16,48,.30) 34%, rgba(13,16,48,0) 62%);
  pointer-events:none;
}
.cadre-froid .legende{
  position:absolute;
  left:0;right:0;bottom:0;
  z-index:2;
  padding:14px 16px;
  font-family:var(--machine);
  font-size:.75rem;
  letter-spacing:.06em;
  color:var(--blanc);
  margin:0;
  max-width:none;
}
.cadre-froid .legende b{color:var(--electrique-pale);font-weight:700;}

/* --------------------------------------------------------------------------
   Rythme des sections
   -------------------------------------------------------------------------- */

.registre-section{padding:88px 0;}
.registre-section.fond-alt{background:var(--papier-alt);}
.entete-section{margin-bottom:46px;max-width:64ch;}
.entete-section p{color:var(--encre-douce);}

/* Constat, deux colonnes 7 et 5 */
.constat-grille{
  display:grid;
  grid-template-columns:7fr 5fr;
  gap:48px;
  align-items:start;
}
.constat-recit p{max-width:none;}
.constat-recit p strong{color:var(--encre);}

.horloge{
  border:1px solid var(--bordure);
  background:var(--surface);
  padding:26px 24px 24px;
  clip-path:polygon(var(--biseau) 0, 100% 0, 100% 100%, 0 100%, 0 var(--biseau));
  position:relative;
}
.horloge::before{
  content:"";
  position:absolute;top:5px;left:5px;
  width:8px;height:8px;
  background:var(--signal);
  clip-path:polygon(50% 0, 100% 100%, 0 100%);
}
.horloge h3{margin-bottom:18px;}
.horloge ol{margin:0;padding:0;list-style:none;}
.horloge li{
  display:grid;
  grid-template-columns:66px 1fr;
  gap:14px;
  padding:11px 0;
  border-top:1px solid var(--bordure);
  font-size:.9375rem;
}
.horloge li:first-child{border-top:0;}
.horloge .heure{
  font-family:var(--machine);
  font-weight:700;
  color:var(--electrique-dense);
  font-size:.875rem;
  padding-top:2px;
}
.horloge .cout{
  margin-top:18px;
  border-top:4px solid var(--signal);
  padding-top:14px;
  font-family:var(--machine);
  font-size:.8125rem;
  color:var(--encre);
}

.constat-chiffres{
  margin-top:34px;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1px;
  background:var(--bordure);
  border:1px solid var(--bordure);
}
.constat-chiffres li{
  background:var(--surface);
  padding:20px 18px;
}
.constat-chiffres .valeur{
  display:block;
  font-family:var(--machine);
  font-weight:700;
  font-size:1.75rem;
  color:var(--electrique-dense);
  line-height:1.1;
}
.constat-chiffres .libelle{
  display:block;
  margin-top:6px;
  font-size:.8125rem;
  color:var(--encre-douce);
}

/* Tempo, quatre etapes en bande horizontale */
.tempo{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:0;
  border-top:1px solid var(--bordure);
  border-bottom:1px solid var(--bordure);
}
.tempo-etape{
  padding:30px 26px 30px 0;
  border-left:1px solid var(--bordure);
  padding-left:26px;
  position:relative;
}
.tempo-etape:first-child{border-left:0;padding-left:0;}
.tempo-etape::after{
  content:"";
  position:absolute;
  right:-6px;top:50%;
  transform:translateY(-50%);
  width:11px;height:11px;
  background:var(--electrique);
  clip-path:polygon(0 0, 100% 50%, 0 100%);
}
.tempo-etape:last-child::after{display:none;}
.tempo-numero{
  font-family:var(--machine);
  font-weight:700;
  font-size:.75rem;
  letter-spacing:.18em;
  color:var(--electrique-dense);
  display:block;
  margin-bottom:12px;
}
.tempo-etape h3{margin-bottom:8px;}
.tempo-etape p{font-size:.9375rem;color:var(--encre-douce);margin-bottom:0;}

.tempo-appui{
  margin-top:52px;
  display:grid;
  grid-template-columns:5fr 7fr;
  gap:48px;
  align-items:center;
}
.tempo-appui p{color:var(--encre-douce);}

/* Postes de veille, grille de cartes */
.grille-postes{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:var(--gouttiere);
}
.poste{
  background:var(--surface);
  border:1px solid var(--bordure);
  padding:28px 24px 26px;
  clip-path:polygon(var(--biseau) 0, 100% 0, 100% 100%, 0 100%, 0 var(--biseau));
  position:relative;
}
.poste::before{
  content:"";
  position:absolute;top:5px;left:5px;
  width:8px;height:8px;
  background:var(--electrique);
  clip-path:polygon(50% 0, 100% 100%, 0 100%);
}
.poste .etiquette{
  font-family:var(--machine);
  font-weight:700;
  font-size:.75rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--encre-douce);
  display:block;
  margin-bottom:14px;
}
.poste h3{margin-bottom:10px;}
.poste p{font-size:.9375rem;color:var(--encre-douce);margin-bottom:0;max-width:none;}
.poste p + p{margin-top:.7em;}

.poste-alerte{border-bottom:4px solid var(--signal);}
.poste-alerte::before{background:var(--signal);}

/* Gains, quatre encadres chiffres */
.grille-gains{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:1px;
  background:var(--bordure);
  border:1px solid var(--bordure);
}
.gain{
  background:var(--papier-alt);
  padding:30px 24px;
}
.gain .mesure{
  font-family:var(--machine);
  font-weight:700;
  font-size:2.1rem;
  line-height:1;
  color:var(--electrique-dense);
  display:block;
  margin-bottom:14px;
}
.gain h3{font-size:1.0625rem;margin-bottom:8px;}
.gain p{font-size:.9375rem;color:var(--encre-douce);margin-bottom:0;max-width:none;}

.gains-appui{
  margin-top:52px;
  display:grid;
  grid-template-columns:7fr 5fr;
  gap:48px;
  align-items:center;
}

/* Confreres, temoignages */
.grille-confreres{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:var(--gouttiere);
}
.confrere{
  background:var(--surface);
  border:1px solid var(--bordure);
  padding:28px 24px;
  clip-path:polygon(var(--biseau) 0, 100% 0, 100% 100%, 0 100%, 0 var(--biseau));
  position:relative;
  margin:0;
}
.confrere::before{
  content:"";
  position:absolute;top:5px;left:5px;
  width:8px;height:8px;
  background:var(--electrique);
  clip-path:polygon(50% 0, 100% 100%, 0 100%);
}
.confrere blockquote{
  margin:0 0 20px;
  font-family:var(--machine);
  font-size:.9375rem;
  line-height:1.6;
  font-style:normal;
}
.confrere blockquote p{max-width:none;}
.confrere blockquote p:last-child{margin-bottom:0;}
.confrere figcaption{
  border-top:1px solid var(--bordure);
  padding-top:14px;
  font-size:.875rem;
  color:var(--encre-douce);
}
.confrere figcaption .nom{
  display:block;
  color:var(--encre);
  font-weight:600;
  font-size:.9375rem;
}

.bandeau-chiffres{
  margin-top:56px;
  border:1px solid var(--bordure);
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:1px;
  background:var(--bordure);
}
.bandeau-chiffres li{
  background:var(--surface);
  padding:26px 22px;
  text-align:left;
}
.bandeau-chiffres .valeur{
  display:block;
  font-family:var(--machine);
  font-weight:700;
  font-size:2rem;
  line-height:1;
  color:var(--encre);
}
.bandeau-chiffres .libelle{
  display:block;
  margin-top:10px;
  font-size:.8125rem;
  color:var(--encre-douce);
}

/* Tarifs */
.veille-gratuite{
  border:1px solid var(--bordure);
  background:var(--papier-alt);
  padding:30px 28px;
  margin-bottom:34px;
  display:grid;
  grid-template-columns:1fr auto;
  gap:28px;
  align-items:center;
  clip-path:polygon(var(--biseau) 0, 100% 0, 100% 100%, 0 100%, 0 var(--biseau));
  position:relative;
}
.veille-gratuite::before{
  content:"";
  position:absolute;top:5px;left:5px;
  width:8px;height:8px;
  background:var(--electrique);
  clip-path:polygon(50% 0, 100% 100%, 0 100%);
}
.veille-gratuite h3{margin-bottom:8px;}
.veille-gratuite p{margin-bottom:0;color:var(--encre-douce);font-size:.9375rem;}
.veille-gratuite .zero{
  font-family:var(--machine);
  font-weight:700;
  font-size:2rem;
  color:var(--electrique-dense);
  white-space:nowrap;
}

.grille-formules{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:var(--gouttiere);
  align-items:start;
}
.formule{
  background:var(--surface);
  border:1px solid var(--bordure);
  padding:30px 26px 28px;
  clip-path:polygon(var(--biseau) 0, 100% 0, 100% 100%, 0 100%, 0 var(--biseau));
  position:relative;
  display:flex;
  flex-direction:column;
  height:100%;
}
.formule::before{
  content:"";
  position:absolute;top:5px;left:5px;
  width:8px;height:8px;
  background:var(--electrique);
  clip-path:polygon(50% 0, 100% 100%, 0 100%);
  z-index:2;
}
.formule-avancee{
  transform:translateY(-16px);
  border-color:var(--electrique);
  background-color:var(--surface);
  background-image:
    repeating-linear-gradient(45deg, rgba(60,72,245,.08) 0 2px, transparent 2px var(--pas-arete)),
    repeating-linear-gradient(135deg, rgba(60,72,245,.08) 0 2px, transparent 2px var(--pas-arete));
  background-size:var(--pas-arete) var(--pas-arete);
  background-position:0 0, calc(var(--pas-arete) / 2) calc(var(--pas-arete) / 2);
}
.formule-marque{
  font-family:var(--machine);
  font-weight:700;
  font-size:.75rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--electrique-dense);
  display:block;
  margin-bottom:12px;
}
.formule h3{
  font-family:var(--titre);
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:-0.02em;
  font-size:1.6rem;
  margin-bottom:6px;
}
.formule .prix{
  font-family:var(--machine);
  font-weight:700;
  font-size:3rem;
  line-height:1;
  color:var(--encre);
  display:block;
  margin:14px 0 4px;
}
.formule .unite{
  display:block;
  font-family:var(--machine);
  font-size:.75rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--encre-douce);
  margin-bottom:18px;
}
.formule .pour-qui{
  font-size:.9375rem;
  color:var(--encre-douce);
  border-top:1px solid var(--bordure);
  border-bottom:1px solid var(--bordure);
  padding:14px 0;
  margin:0 0 20px;
  max-width:none;
}
.formule ul{display:flex;flex-direction:column;gap:11px;margin-bottom:24px;}
.formule ul li{
  position:relative;
  padding-left:20px;
  font-size:.9375rem;
  color:var(--encre-douce);
}
.formule ul li::before{
  content:"";
  position:absolute;
  left:0;top:.55em;
  width:9px;height:9px;
  background:var(--electrique);
  clip-path:polygon(0 0, 100% 50%, 0 100%);
}
.formule .bouton{margin-top:auto;justify-content:center;}

.tarifs-note{
  margin-top:32px;
  border-left:3px solid var(--electrique);
  padding-left:16px;
  color:var(--encre-douce);
  font-size:.9375rem;
}

/* FAQ */
.pile-questions{max-width:74ch;border-top:1px solid var(--bordure);}
.question{border-bottom:1px solid var(--bordure);}
.question-bouton{
  width:100%;
  background:transparent;
  border:0;
  color:var(--encre);
  font-family:var(--courant);
  font-weight:600;
  font-size:1.0625rem;
  line-height:1.4;
  text-align:left;
  padding:20px 44px 20px 0;
  cursor:pointer;
  position:relative;
}
.question-bouton:hover{color:var(--electrique-dense);}
.question-bouton::after{
  content:"";
  position:absolute;
  right:8px;top:26px;
  width:11px;height:11px;
  background:var(--electrique);
  clip-path:polygon(50% 100%, 100% 0, 0 0);
  transition:transform .25s var(--amorti);
}
.question-bouton[aria-expanded="true"]::after{transform:rotate(180deg);}
.reponse{padding:0 0 22px;}
.reponse[hidden]{display:none;}
.reponse p{color:var(--encre-douce);font-size:.9375rem;max-width:66ch;}
.reponse p:last-child{margin-bottom:0;}

/* Bordereau de contact */
.bordereau-grille{
  display:grid;
  grid-template-columns:5fr 7fr;
  gap:48px;
  align-items:start;
}
.bordereau-appui p{color:var(--encre-douce);}
.bordereau-appui .repere{
  border:1px solid var(--bordure);
  background:var(--papier-alt);
  padding:22px 20px;
  margin-top:26px;
  clip-path:polygon(var(--biseau) 0, 100% 0, 100% 100%, 0 100%, 0 var(--biseau));
}
.bordereau-appui .repere ul{display:flex;flex-direction:column;gap:10px;}
.bordereau-appui .repere li{
  font-family:var(--machine);
  font-size:.8125rem;
  color:var(--encre-douce);
  padding-left:18px;
  position:relative;
}
.bordereau-appui .repere li::before{
  content:"";
  position:absolute;left:0;top:.5em;
  width:8px;height:8px;
  background:var(--electrique);
  clip-path:polygon(0 0, 100% 50%, 0 100%);
}

.bordereau{
  background:var(--surface);
  border:1px solid var(--bordure);
  padding:30px 28px;
  clip-path:polygon(var(--biseau) 0, 100% 0, 100% 100%, 0 100%, 0 var(--biseau));
}
.ligne-champ{margin-bottom:18px;}
.ligne-champ label{
  display:block;
  font-family:var(--machine);
  font-weight:700;
  font-size:.75rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--encre-douce);
  margin-bottom:8px;
}
.bordereau input[type="text"],
.bordereau input[type="email"],
.bordereau select,
.bordereau textarea{
  width:100%;
  background:var(--papier);
  border:1px solid var(--bordure);
  color:var(--encre);
  font-family:var(--courant);
  font-size:1rem;
  padding:12px 14px;
  clip-path:polygon(var(--biseau) 0, 100% 0, 100% 100%, 0 100%, 0 var(--biseau));
}
.bordereau textarea{resize:vertical;min-height:132px;}
.bordereau input:focus-visible,
.bordereau select:focus-visible,
.bordereau textarea:focus-visible{
  outline:3px solid var(--electrique);
  outline-offset:2px;
  border-color:var(--electrique);
}
.ligne-consentement{
  display:flex;
  gap:12px;
  align-items:flex-start;
  margin:22px 0;
}
.ligne-consentement input{
  margin-top:4px;
  width:18px;height:18px;
  accent-color:var(--electrique);
  flex:0 0 auto;
}
.ligne-consentement label{
  font-family:var(--courant);
  font-size:.875rem;
  letter-spacing:0;
  text-transform:none;
  font-weight:400;
  color:var(--encre-douce);
  margin:0;
}
.bordereau .bouton{width:100%;justify-content:center;}
.suite-envoi{
  margin-top:18px;
  font-size:.8125rem;
  color:var(--encre-douce);
}
.suite-envoi a{color:var(--encre);}

/* --------------------------------------------------------------------------
   Pied de page
   -------------------------------------------------------------------------- */

.pied-registre{
  background-color:var(--papier-alt);
  border-top:1px solid var(--bordure);
  padding:64px 0 0;
  background-image:
    repeating-linear-gradient(45deg, rgba(13,16,48,.11) 0 2px, transparent 2px var(--pas-arete)),
    repeating-linear-gradient(135deg, rgba(13,16,48,.11) 0 2px, transparent 2px var(--pas-arete));
  background-size:var(--pas-arete) var(--pas-arete);
  background-position:0 0, calc(var(--pas-arete) / 2) calc(var(--pas-arete) / 2);
}
.pied-colonnes{
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr 1.4fr;
  gap:40px;
  padding-bottom:48px;
}
.pied-registre h2{
  font-family:var(--machine);
  font-weight:700;
  font-size:.75rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--encre-douce);
  margin-bottom:18px;
  line-height:1.4;
}
.pied-registre ul{display:flex;flex-direction:column;gap:10px;}
.pied-registre a{
  color:var(--encre-douce);
  text-decoration:none;
  font-size:.9375rem;
}
.pied-registre a:hover{color:var(--electrique-dense);text-decoration:underline;}
.pied-positionnement{
  color:var(--encre-douce);
  font-size:.9375rem;
  margin:16px 0 20px;
  max-width:38ch;
}
.liens-profils{display:flex;flex-wrap:wrap;gap:8px 16px;}
.liens-profils a{font-family:var(--machine);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;}
.pied-editeur{
  font-size:.8125rem;
  color:var(--encre-douce);
  line-height:1.7;
}
.pied-editeur span{display:block;}
.barre-basse{
  border-top:1px solid var(--bordure);
  padding:22px 0;
  font-size:.8125rem;
  color:var(--encre-douce);
  display:flex;
  flex-wrap:wrap;
  gap:8px 20px;
  justify-content:space-between;
}
.barre-basse a{color:var(--encre);}

/* --------------------------------------------------------------------------
   Pages internes
   -------------------------------------------------------------------------- */

.page-interne{padding-top:calc(var(--hauteur-entete) + 56px);padding-bottom:80px;}
.fil{
  font-family:var(--machine);
  font-size:.75rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--encre-douce);
  margin-bottom:22px;
}
.fil a{color:var(--encre-douce);text-decoration:none;}
.fil a:hover{color:var(--electrique-dense);}

.corps-texte{max-width:76ch;}
.corps-texte h2{
  font-size:1.7rem;
  margin-top:52px;
  padding-top:22px;
  border-top:1px solid var(--bordure);
}
.corps-texte h3{margin-top:30px;font-size:1.125rem;}
.corps-texte p,.corps-texte li{color:var(--encre-douce);}
.corps-texte p{max-width:none;}
.corps-texte strong{color:var(--encre);}
.corps-texte ul{margin:0 0 1.2em;display:flex;flex-direction:column;gap:9px;}
.corps-texte ul li{
  position:relative;
  padding-left:20px;
  font-size:.9375rem;
}
.corps-texte ul li::before{
  content:"";
  position:absolute;left:0;top:.55em;
  width:9px;height:9px;
  background:var(--electrique);
  clip-path:polygon(0 0, 100% 50%, 0 100%);
}
.corps-texte ol{margin:0 0 1.2em;padding-left:22px;color:var(--encre-douce);}
.corps-texte ol li{margin-bottom:9px;font-size:.9375rem;}

.chapeau{
  font-size:1.1875rem;
  color:var(--encre);
  border-left:3px solid var(--electrique);
  padding-left:18px;
  max-width:70ch;
  margin-bottom:38px;
}

.fiche-auteur{
  display:grid;
  grid-template-columns:300px 1fr;
  gap:40px;
  align-items:start;
  margin-bottom:46px;
}
.portrait{
  border:1px solid var(--bordure);
  clip-path:polygon(var(--biseau) 0, 100% 0, 100% 100%, 0 100%, 0 var(--biseau));
}
.portrait img{width:100%;filter:grayscale(1) contrast(1.04) brightness(1.02);}

.encart-profils{
  border:1px solid var(--bordure);
  background:var(--surface);
  padding:24px 22px;
  margin:38px 0;
  clip-path:polygon(var(--biseau) 0, 100% 0, 100% 100%, 0 100%, 0 var(--biseau));
}
.encart-profils ul{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:14px;}
.encart-profils a{font-family:var(--machine);font-size:.8125rem;}

.grille-plan{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:var(--gouttiere);
  margin-top:12px;
}
.carte-plan{
  border:1px solid var(--bordure);
  background:var(--surface);
  padding:22px 20px;
  clip-path:polygon(var(--biseau) 0, 100% 0, 100% 100%, 0 100%, 0 var(--biseau));
  position:relative;
}
.carte-plan::before{
  content:"";
  position:absolute;top:5px;left:5px;
  width:8px;height:8px;
  background:var(--electrique);
  clip-path:polygon(50% 0, 100% 100%, 0 100%);
}
.carte-plan h3{margin-bottom:7px;font-size:1.0625rem;}
.carte-plan h3 a{text-decoration:none;}
.carte-plan p{font-size:.875rem;color:var(--encre-douce);margin:0;max-width:none;}

.bloc-etat{
  text-align:left;
  max-width:64ch;
  padding:40px 0 20px;
}
.bloc-etat .code{
  font-family:var(--machine);
  font-weight:700;
  font-size:.75rem;
  letter-spacing:.2em;
  color:var(--electrique-dense);
  display:block;
  margin-bottom:18px;
}
.bloc-etat h1{font-size:clamp(2.1rem, 5vw, 3.2rem);margin-bottom:22px;}
.bloc-etat .paire-actions{margin-top:28px;}

.pistes{
  margin-top:44px;
  border-top:1px solid var(--bordure);
  padding-top:26px;
}
.pistes ul{display:flex;flex-wrap:wrap;gap:12px 26px;}
.pistes a{font-family:var(--machine);font-size:.8125rem;}

/* --------------------------------------------------------------------------
   Signature d animation : chute avec amortissement
   -------------------------------------------------------------------------- */

.chute{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .48s linear, transform .48s var(--amorti);
}
.chute-laterale{transform:translateX(-28px);}
.chute.posee{opacity:1;transform:none;}
.formule-avancee.chute{transform:translateY(28px);}
.formule-avancee.chute.posee{transform:translateY(-16px);}

/* --------------------------------------------------------------------------
   Adaptations
   -------------------------------------------------------------------------- */

@media (max-width:1080px){
  .grille-postes{grid-template-columns:repeat(2, 1fr);}
  .grille-gains{grid-template-columns:repeat(2, 1fr);}
  .bandeau-chiffres{grid-template-columns:repeat(2, 1fr);}
  .tempo{grid-template-columns:repeat(2, 1fr);}
  .tempo-etape:nth-child(2)::after{display:none;}
  .tempo-etape:nth-child(3){border-left:0;padding-left:0;border-top:1px solid var(--bordure);}
  .tempo-etape:nth-child(4){border-top:1px solid var(--bordure);}
  .pied-colonnes{grid-template-columns:repeat(2, 1fr);}
}

@media (max-width:960px){
  .affiche-grille{grid-template-columns:1fr;}
  .affiche-texte,.affiche-vue{grid-column:1 / -1;}
  .affiche-vue{margin-top:38px;}
  .affiche{min-height:0;padding-bottom:72px;}
  .constat-grille,.tempo-appui,.gains-appui,.bordereau-grille{grid-template-columns:1fr;gap:34px;}
  .grille-formules{grid-template-columns:1fr;}
  .formule-avancee{transform:none;}
  .formule-avancee.chute.posee{transform:none;}
  .fiche-auteur{grid-template-columns:1fr;}
  .portrait{max-width:280px;}
}

@media (max-width:900px){
  .ancres{display:none;}
  .bandeau-veille .bouton-compact{display:none;}
  .trois-filets{display:flex;}
}

@media (max-width:780px){
  :root{--gouttiere:18px;}
  h1{font-size:2.3rem;}
  h2{font-size:1.7rem;}
  .registre-section{padding:60px 0;}
  .affiche-grille{padding-left:26px;}
  .affiche::before{width:26px;}
  .grille-postes{grid-template-columns:1fr;}
  .grille-gains{grid-template-columns:1fr;}
  .grille-confreres{grid-template-columns:1fr;}
  .constat-chiffres{grid-template-columns:1fr;}
  .tempo{grid-template-columns:1fr;}
  .tempo-etape{border-left:0;padding-left:0;border-top:1px solid var(--bordure);}
  .tempo-etape:first-child{border-top:0;}
  .tempo-etape::after{display:none;}
  .veille-gratuite{grid-template-columns:1fr;}
  .grille-plan{grid-template-columns:1fr;}
  .pied-colonnes{grid-template-columns:1fr;gap:34px;}
  .horloge li{grid-template-columns:60px 1fr;gap:10px;}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .chute{
    opacity:0;
    transform:none;
    transition:opacity .16s linear;
    transition-delay:0s !important;
  }
  .chute.posee{opacity:1;transform:none;}
  .formule-avancee.chute{transform:translateY(-16px);}
  .formule-avancee.chute.posee{transform:translateY(-16px);}
  .bouton .fleche{transition:none;}
  .question-bouton::after{transition:none;}
}

@media print{
  .bandeau-veille,.panneau-ancres,.affiche::before{display:none;}
  body{background:#FFFFFF;color:#0D1030;}
}

/* ==========================================================================
   Le Carnet des Lots, section magazine
   Meme palette, meme forme signature (angle superieur gauche coupe et chevron
   loge dans la coupe), meme motif en arete de poisson et meme chute amortie
   que le reste du site. Aucune regle ci dessus n est modifiee.
   Le corps des articles est du HTML nu : toutes ses balises sont mises en
   forme comme descendantes de .corps-article, sans aucun attribut de classe.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Entete de la page d index du magazine
   -------------------------------------------------------------------------- */

.entete-carnet{
  max-width:72ch;
  margin-bottom:52px;
}
.entete-carnet h1{
  font-size:clamp(2.3rem, 5vw, 3.4rem);
  margin-bottom:24px;
  max-width:none;
}
.chapeau-carnet{
  font-size:1.1875rem;
  color:var(--encre);
  border-left:3px solid var(--electrique);
  padding-left:18px;
  margin:0;
  max-width:68ch;
}
.compte-carnet{
  margin-top:26px;
  display:flex;
  flex-wrap:wrap;
  gap:8px 22px;
  font-family:var(--machine);
  font-size:.75rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--encre-douce);
  max-width:none;
}
.compte-carnet span{display:flex;align-items:center;gap:8px;}
.compte-carnet span::before{
  content:"";
  width:7px;height:7px;
  background:var(--electrique);
  clip-path:polygon(50% 0, 100% 100%, 0 100%);
  flex:0 0 auto;
}

/* --------------------------------------------------------------------------
   Grille de cartes d article et carte d article
   -------------------------------------------------------------------------- */

.grille-carnet{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:var(--gouttiere);
  align-items:stretch;
}

.carte-carnet{
  position:relative;
  display:flex;
  flex-direction:column;
  background:var(--surface);
  border:1px solid var(--bordure);
  clip-path:polygon(var(--biseau) 0, 100% 0, 100% 100%, 0 100%, 0 var(--biseau));
  transition:border-color .2s linear;
}
.carte-carnet::before{
  content:"";
  position:absolute;
  top:5px;left:5px;
  width:8px;height:8px;
  background:var(--electrique);
  clip-path:polygon(50% 0, 100% 100%, 0 100%);
  z-index:3;
}
.carte-carnet:hover{border-color:var(--electrique);}

.carte-carnet-vue{
  position:relative;
  border-bottom:1px solid var(--bordure);
  background:var(--papier-alt);
  overflow:hidden;
}
.carte-carnet-vue img{
  width:100%;
  aspect-ratio:3 / 2;
  object-fit:cover;
  filter:grayscale(1) contrast(1.06) brightness(1.04);
  mix-blend-mode:luminosity;
  transition:filter .25s linear;
}
.carte-carnet-vue::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to top, rgba(13,16,48,.20) 0%, rgba(13,16,48,.04) 46%, rgba(13,16,48,0) 100%);
  pointer-events:none;
}
.carte-carnet:hover .carte-carnet-vue img{filter:grayscale(1) contrast(1.08) brightness(1.1);}

.carte-carnet-corps{
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
  padding:22px 22px 20px;
}
.carte-carnet-angle{
  font-family:var(--machine);
  font-weight:700;
  font-size:.75rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--encre-douce);
  display:block;
  margin-bottom:12px;
}
.carte-carnet h3{
  font-size:1.0625rem;
  line-height:1.3;
  margin-bottom:10px;
}
.carte-carnet h3 a{
  text-decoration:none;
  color:var(--encre);
}
.carte-carnet h3 a::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
}
.carte-carnet:hover h3 a{color:var(--electrique-dense);}
.carte-carnet-extrait{
  font-size:.9375rem;
  color:var(--encre-douce);
  margin:0 0 18px;
  max-width:none;
}
.carte-carnet-pied{
  margin-top:auto;
  border-top:1px solid var(--bordure);
  padding-top:12px;
  display:flex;
  flex-wrap:wrap;
  gap:6px 16px;
  font-family:var(--machine);
  font-size:.75rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--encre-douce);
}
.carte-carnet-pied span,
.carte-carnet-pied time{display:flex;align-items:center;gap:8px;}
.carte-carnet-pied time::before,
.carte-carnet-pied span::before{
  content:"";
  width:7px;height:7px;
  background:var(--electrique);
  clip-path:polygon(0 0, 100% 50%, 0 100%);
  flex:0 0 auto;
}

/* Premiere carte du sommaire, posee en tete comme une affichette */
.carte-carnet-tete{
  grid-column:1 / -1;
  display:grid;
  grid-template-columns:7fr 5fr;
  align-items:stretch;
}
.carte-carnet-tete .carte-carnet-vue{
  border-bottom:0;
  border-right:1px solid var(--bordure);
  height:100%;
  min-height:280px;
}
.carte-carnet-tete .carte-carnet-vue img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  aspect-ratio:auto;
  object-fit:cover;
}
.carte-carnet-tete .carte-carnet-corps{padding:30px 28px 28px;justify-content:center;}
.carte-carnet-tete h3{font-size:1.4rem;}
.carte-carnet-tete .carte-carnet-extrait{font-size:1rem;}

/* --------------------------------------------------------------------------
   Entete d un article, fil d Ariane, angle, dates et temps de lecture
   -------------------------------------------------------------------------- */

.entete-article{
  border-bottom:1px solid var(--bordure);
  padding-bottom:30px;
  margin-bottom:34px;
}
.entete-article h1{
  font-size:clamp(2.1rem, 4.6vw, 3.1rem);
  margin:0 0 22px;
  max-width:22ch;
}
.reperes-article{
  display:flex;
  flex-wrap:wrap;
  gap:8px 22px;
  margin:0 0 20px;
  font-family:var(--machine);
  font-size:.75rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--encre-douce);
  max-width:none;
}
.reperes-article span{display:flex;align-items:center;gap:8px;}
.reperes-article span::before{
  content:"";
  width:7px;height:7px;
  background:var(--electrique);
  clip-path:polygon(50% 0, 100% 100%, 0 100%);
  flex:0 0 auto;
}
.reperes-article .repere-angle{color:var(--encre);}

.chapo-article{
  font-size:1.1875rem;
  line-height:1.55;
  color:var(--encre);
  border-left:3px solid var(--electrique);
  padding-left:18px;
  margin:0;
  max-width:68ch;
}

.vue-article{
  position:relative;
  margin:0 0 42px;
  border:1px solid var(--bordure);
  background:var(--papier-alt);
  clip-path:polygon(var(--biseau) 0, 100% 0, 100% 100%, 0 100%, 0 var(--biseau));
  overflow:hidden;
}
.vue-article::before{
  content:"";
  position:absolute;
  top:5px;left:5px;
  width:8px;height:8px;
  background:var(--electrique);
  clip-path:polygon(50% 0, 100% 100%, 0 100%);
  z-index:2;
}
.vue-article img{
  width:100%;
  filter:grayscale(1) contrast(1.06) brightness(1.03);
  mix-blend-mode:luminosity;
}

/* --------------------------------------------------------------------------
   Corps redactionnel, balises nues sans aucun attribut de classe
   -------------------------------------------------------------------------- */

.corps-article{
  max-width:66ch;
  font-size:1.0625rem;
  line-height:1.65;
  color:var(--encre-douce);
}

.corps-article h2{
  position:relative;
  font-family:var(--titre);
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:-0.02em;
  line-height:.98;
  font-size:1.7rem;
  color:var(--encre);
  margin:56px 0 18px;
  padding-top:26px;
  border-top:1px solid var(--bordure);
  max-width:none;
}
.corps-article h2::before{
  content:"";
  position:absolute;
  top:-6px;left:0;
  width:11px;height:11px;
  background:var(--electrique);
  clip-path:polygon(50% 0, 100% 100%, 0 100%);
}
.corps-article > h2:first-child{margin-top:0;padding-top:0;border-top:0;}
.corps-article > h2:first-child::before{display:none;}

.corps-article h3{
  position:relative;
  font-family:var(--courant);
  font-weight:600;
  font-size:1.125rem;
  line-height:1.3;
  letter-spacing:0;
  text-transform:none;
  color:var(--encre);
  margin:32px 0 12px;
  padding-left:18px;
  max-width:none;
}
.corps-article h3::before{
  content:"";
  position:absolute;
  left:0;top:.42em;
  width:9px;height:9px;
  background:var(--electrique);
  clip-path:polygon(0 0, 100% 50%, 0 100%);
}

.corps-article p{
  margin:0 0 1.15em;
  max-width:none;
}
.corps-article strong{color:var(--encre);font-weight:600;}
.corps-article em{font-style:normal;color:var(--encre);font-weight:500;}
.corps-article a{
  color:var(--encre);
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:1px;
}
.corps-article a:hover{color:var(--electrique-dense);}

.corps-article ul{
  margin:0 0 1.4em;
  padding:0;
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.corps-article ul li{
  position:relative;
  padding-left:22px;
  font-size:.9375rem;
}
.corps-article ul li::before{
  content:"";
  position:absolute;
  left:0;top:.55em;
  width:9px;height:9px;
  background:var(--electrique);
  clip-path:polygon(0 0, 100% 50%, 0 100%);
}

.corps-article ol{
  margin:0 0 1.4em;
  padding:0;
  list-style:none;
  counter-reset:etape-article;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.corps-article ol li{
  position:relative;
  padding-left:38px;
  font-size:.9375rem;
  counter-increment:etape-article;
}
.corps-article ol li::before{
  content:counter(etape-article, decimal-leading-zero);
  position:absolute;
  left:0;top:0;
  font-family:var(--machine);
  font-weight:700;
  font-size:.8125rem;
  color:var(--electrique-dense);
  letter-spacing:.06em;
}
.corps-article li strong{color:var(--encre);}
.corps-article li > ul,
.corps-article li > ol{margin:10px 0 0;}

.corps-article table{
  display:block;
  overflow-x:auto;
  width:100%;
  margin:0 0 1.6em;
  border-collapse:collapse;
  border:1px solid var(--bordure);
  font-size:.875rem;
}
.corps-article thead{background:var(--papier-alt);}
.corps-article th{
  font-family:var(--machine);
  font-weight:700;
  font-size:.75rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--encre);
  text-align:left;
  padding:13px 14px;
  border-bottom:1px solid var(--bordure);
  vertical-align:bottom;
}
.corps-article td{
  padding:13px 14px;
  border-top:1px solid var(--bordure);
  color:var(--encre-douce);
  vertical-align:top;
}
.corps-article tbody tr:nth-child(odd){background:rgba(13,16,48,.035);}
.corps-article td strong{color:var(--encre);}

.corps-article blockquote{
  margin:0 0 1.6em;
  padding:4px 0 4px 20px;
  border-left:3px solid var(--electrique);
  font-family:var(--machine);
  font-style:normal;
  font-size:.9375rem;
  line-height:1.6;
  color:var(--encre);
}
.corps-article blockquote p{margin-bottom:.8em;}
.corps-article blockquote p:last-child{margin-bottom:0;}

.corps-article aside{
  position:relative;
  margin:0 0 1.8em;
  padding:24px 22px 20px;
  background:var(--surface);
  border:1px solid var(--bordure);
  clip-path:polygon(var(--biseau) 0, 100% 0, 100% 100%, 0 100%, 0 var(--biseau));
}
.corps-article aside::before{
  content:"";
  position:absolute;
  top:5px;left:5px;
  width:8px;height:8px;
  background:var(--electrique);
  clip-path:polygon(50% 0, 100% 100%, 0 100%);
}
.corps-article aside p{font-size:.9375rem;}
.corps-article aside p:last-child{margin-bottom:0;}
.corps-article aside ul,
.corps-article aside ol{margin-bottom:0;}

.corps-article figure{
  margin:0 0 1.8em;
  border:1px solid var(--bordure);
  background:var(--papier-alt);
  clip-path:polygon(var(--biseau) 0, 100% 0, 100% 100%, 0 100%, 0 var(--biseau));
  overflow:hidden;
}
.corps-article figure img{width:100%;filter:grayscale(1) contrast(1.06) brightness(1.03);}
.corps-article figcaption{
  padding:12px 16px;
  font-family:var(--machine);
  font-size:.75rem;
  letter-spacing:.06em;
  color:var(--encre-douce);
  border-top:1px solid var(--bordure);
}

/* --------------------------------------------------------------------------
   Appel a l action de fin d article
   -------------------------------------------------------------------------- */

.appel-article{
  position:relative;
  max-width:66ch;
  margin:46px 0 0;
  padding:28px 26px 26px;
  background-color:var(--papier-alt);
  border:1px solid var(--electrique);
  clip-path:polygon(var(--biseau) 0, 100% 0, 100% 100%, 0 100%, 0 var(--biseau));
  background-image:
    repeating-linear-gradient(45deg, rgba(60,72,245,.08) 0 2px, transparent 2px var(--pas-arete)),
    repeating-linear-gradient(135deg, rgba(60,72,245,.08) 0 2px, transparent 2px var(--pas-arete));
  background-size:var(--pas-arete) var(--pas-arete);
  background-position:0 0, calc(var(--pas-arete) / 2) calc(var(--pas-arete) / 2);
}
.appel-article::before{
  content:"";
  position:absolute;
  top:5px;left:5px;
  width:8px;height:8px;
  background:var(--electrique);
  clip-path:polygon(50% 0, 100% 100%, 0 100%);
}
.titre-appel{
  font-family:var(--titre);
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:-0.02em;
  line-height:1;
  font-size:1.4rem;
  color:var(--encre);
  margin:0 0 12px;
  max-width:none;
}
.appel-article p{color:var(--encre-douce);font-size:.9375rem;max-width:none;}
.appel-article .bouton{margin-top:6px;}

/* --------------------------------------------------------------------------
   Encart auteur
   -------------------------------------------------------------------------- */

.encart-auteur{
  position:relative;
  max-width:66ch;
  margin:44px 0 0;
  padding:24px 22px;
  background:var(--surface);
  border:1px solid var(--bordure);
  clip-path:polygon(var(--biseau) 0, 100% 0, 100% 100%, 0 100%, 0 var(--biseau));
  display:grid;
  grid-template-columns:96px 1fr;
  gap:22px;
  align-items:start;
}
.encart-auteur::before{
  content:"";
  position:absolute;
  top:5px;left:5px;
  width:8px;height:8px;
  background:var(--electrique);
  clip-path:polygon(50% 0, 100% 100%, 0 100%);
}
.encart-auteur img{
  width:96px;height:96px;
  border:1px solid var(--bordure);
  filter:grayscale(1) contrast(1.04) brightness(1.02);
}
.signature-auteur{
  font-family:var(--machine);
  font-weight:700;
  font-size:.75rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--encre-douce);
  margin:0 0 6px;
  max-width:none;
}
.nom-auteur{
  font-family:var(--courant);
  font-weight:600;
  font-size:1.0625rem;
  color:var(--encre);
  margin:0 0 10px;
  max-width:none;
}
.bio-auteur{
  font-size:.9375rem;
  color:var(--encre-douce);
  margin:0 0 12px;
  max-width:none;
}
.lien-auteur{
  font-family:var(--machine);
  font-size:.8125rem;
  letter-spacing:.08em;
}

/* --------------------------------------------------------------------------
   Bloc A lire aussi
   -------------------------------------------------------------------------- */

.lire-aussi{
  margin-top:64px;
  border-top:1px solid var(--bordure);
  padding-top:34px;
}
.titre-lire{
  font-family:var(--machine);
  font-weight:700;
  font-size:.75rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--encre-douce);
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 0 22px;
  max-width:none;
}
.titre-lire::before{
  content:"";
  width:9px;height:9px;
  background:var(--electrique);
  clip-path:polygon(50% 0, 100% 100%, 0 100%);
  flex:0 0 auto;
}
.grille-lire{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:var(--gouttiere);
  align-items:stretch;
}
.carte-lire{
  position:relative;
  display:flex;
  flex-direction:column;
  background:var(--surface);
  border:1px solid var(--bordure);
  clip-path:polygon(var(--biseau) 0, 100% 0, 100% 100%, 0 100%, 0 var(--biseau));
  transition:border-color .2s linear;
}
.carte-lire::before{
  content:"";
  position:absolute;
  top:5px;left:5px;
  width:8px;height:8px;
  background:var(--electrique);
  clip-path:polygon(50% 0, 100% 100%, 0 100%);
  z-index:3;
}
.carte-lire:hover{border-color:var(--electrique);}
.vue-lire{
  border-bottom:1px solid var(--bordure);
  background:var(--papier-alt);
  overflow:hidden;
}
.vue-lire img{
  width:100%;
  aspect-ratio:3 / 2;
  object-fit:cover;
  filter:grayscale(1) contrast(1.06) brightness(1.04);
  mix-blend-mode:luminosity;
  transition:filter .25s linear;
}
.carte-lire:hover .vue-lire img{filter:grayscale(1) contrast(1.08) brightness(1.1);}
.corps-lire{padding:18px 20px;display:flex;flex-direction:column;flex:1 1 auto;}
.carte-lire-titre{
  font-family:var(--courant);
  font-weight:600;
  font-size:1rem;
  line-height:1.3;
  color:var(--encre);
  margin:0 0 8px;
  max-width:none;
}
.carte-lire-titre a{text-decoration:none;color:var(--encre);}
.carte-lire-titre a::after{content:"";position:absolute;inset:0;z-index:2;}
.carte-lire:hover .carte-lire-titre a{color:var(--electrique-dense);}
.accroche-lire{
  font-size:.875rem;
  color:var(--encre-douce);
  margin:0;
  max-width:none;
}

/* --------------------------------------------------------------------------
   Section Derniers articles de la page d accueil
   -------------------------------------------------------------------------- */

.derniers-carnet .entete-section{margin-bottom:40px;}
.suite-carnet{
  margin-top:38px;
  display:flex;
  flex-wrap:wrap;
  gap:16px 26px;
  align-items:center;
}
.mention-carnet{
  font-family:var(--machine);
  font-size:.75rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--encre-douce);
  margin:0;
  max-width:none;
}

/* --------------------------------------------------------------------------
   Liste des parutions, employee sur la page auteur
   -------------------------------------------------------------------------- */

.liste-parutions a{color:var(--encre);}
.liste-parutions li{padding-bottom:2px;}
.date-parution{
  display:block;
  margin-top:4px;
  font-family:var(--machine);
  font-size:.75rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--encre-douce);
}

/* --------------------------------------------------------------------------
   Intitules de colonnes du pied de page dans le magazine
   Les pages d article ne portent qu une seule balise de titre, le h1 : les
   intitules du pied de page y sont donc des paragraphes, mis en forme ici a
   l identique de ceux du reste du site.
   -------------------------------------------------------------------------- */

.pied-registre .titre-colonne{
  font-family:var(--machine);
  font-weight:700;
  font-size:.75rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--encre-douce);
  margin:0 0 18px;
  line-height:1.4;
  max-width:none;
}

/* --------------------------------------------------------------------------
   Adaptations du magazine
   -------------------------------------------------------------------------- */

@media (max-width:1080px){
  .grille-carnet{grid-template-columns:repeat(2, 1fr);}
  .grille-lire{grid-template-columns:repeat(2, 1fr);}
}

@media (max-width:960px){
  .carte-carnet-tete{grid-template-columns:1fr;}
  .carte-carnet-tete .carte-carnet-vue{border-right:0;border-bottom:1px solid var(--bordure);height:auto;min-height:0;}
  .carte-carnet-tete .carte-carnet-vue img{position:static;aspect-ratio:3 / 2;height:auto;}
}

@media (max-width:780px){
  .grille-carnet{grid-template-columns:1fr;}
  .grille-lire{grid-template-columns:1fr;}
  .entete-article h1{max-width:none;}
  .corps-article h2{font-size:1.5rem;}
  .encart-auteur{grid-template-columns:1fr;gap:16px;}
  .encart-auteur img{width:88px;height:88px;}
}