/* ==========================================================================
   Mareyon, feuille de style unique
   Vocabulaire des classes emprunte au rayon maree :
   criee (en tete), amarre (navigation), etal (hero), pique (boutons),
   etiquette (cartes), bandeau (chiffres de pied de section), marche (etapes),
   controle (fonctionnalites), gain (avantages), gabarit (formules),
   registre (foire aux questions), bordereau (formulaire), halle (pied de page).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Variables
   -------------------------------------------------------------------------- */

:root {
  --fond: #eaf4f6;
  --fond-alt: #d9ebef;
  --surface: #f8fcfd;
  --texte: #07272f;
  --texte-doux: #3e6570;
  --accent: #087082;
  --accent-texte: #f2fbfc;
  --rouge: #c3122b;
  --bordure: #a3c6cf;
  /* filet renforce, reserve aux commandes : boutons a filet, champs, bascules.
     Sur fond clair une hairline de carte ne suffit pas a cerner une commande. */
  --bordure-forte: #57848f;
  --rouge-fonce: #9d0e22;

  --titre: "Cormorant Garamond", "Times New Roman", serif;
  --courant: "Plus Jakarta Sans", "Segoe UI", Arial, sans-serif;
  --ardoise: "Noticia Text", Georgia, serif;

  --cale: 1200px;
  --gouttiere: 32px;
  --encoche: 16px;
  --entete-haut: 72px;
  --entete-bas: 60px;
}

/* --------------------------------------------------------------------------
   2. Reinitialisation courte
   -------------------------------------------------------------------------- */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--courant);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.68;
  overflow-x: hidden;
}

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

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--texte); }

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

h1, h2 {
  font-family: var(--titre);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: 0;
}

h1 { font-size: clamp(2.9rem, 6.2vw, 4.6rem); }
h2 { font-size: clamp(2rem, 3.6vw, 2.4rem); }

h3 {
  font-family: var(--courant);
  font-weight: 700;
  font-size: 1.3rem;
  line-height: 1.3;
}

h4 {
  font-family: var(--courant);
  font-weight: 700;
  font-size: 1.0625rem;
}

p { margin: 0 0 1.1em; max-width: 68ch; }

ul, ol { margin: 0 0 1.1em; padding-left: 1.15em; }
li { margin-bottom: 0.45em; }

strong { font-weight: 700; color: var(--texte); }

em.latin { font-family: var(--ardoise); font-style: italic; color: var(--texte-doux); }

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

/* Sur les aplats d accent, un contour de la meme couleur se perdrait :
   le contour passe a l encre profonde, qui tranche sur le fond clair
   comme sur l aplat. */
.pique--glace:focus-visible,
.filet-evite:focus { outline-color: var(--texte); }

/* Le lien d evitement n est pas decoupe : il peut porter en plus un lisere
   clair qui le decolle nettement de la couleur qu il entoure. */
.filet-evite:focus { box-shadow: 0 0 0 3px var(--surface); }

::selection { background: var(--accent); color: var(--accent-texte); }

/* Barre de defilement : filet glacier sur rail de fond_alt, sans relief */
html {
  scrollbar-width: thin;
  scrollbar-color: var(--accent) var(--fond-alt);
}

::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--fond-alt); }
::-webkit-scrollbar-thumb {
  background: var(--accent);
  border: 3px solid var(--fond-alt);
}
::-webkit-scrollbar-thumb:hover { background: var(--texte); }

/* --------------------------------------------------------------------------
   3. Motif signature : trame de points serigraphique a densite variable
   -------------------------------------------------------------------------- */

.trame {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(8, 112, 130, 0.72) 1px, transparent 1.1px),
    radial-gradient(circle at 1px 1px, rgba(8, 112, 130, 0.48) 1px, transparent 1.1px);
  background-size: 6px 6px, 11px 11px;
  background-position: 0 0, 3px 5px;
  opacity: 0.14;
}

/* couronne : dense sur les bords, nulle au centre */
.trame--couronne {
  -webkit-mask-image: radial-gradient(ellipse 62% 58% at 50% 48%, transparent 0%, #000 100%);
  mask-image: radial-gradient(ellipse 62% 58% at 50% 48%, transparent 0%, #000 100%);
}

/* bande de 60 pixels dont la densite decroit vers le bas */
.trame--bande {
  top: auto;
  height: 60px;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, transparent 100%);
}

/* angle superieur droit des cartes */
.trame--angle {
  -webkit-mask-image: radial-gradient(circle 150px at 100% 0%, #000 0%, transparent 100%);
  mask-image: radial-gradient(circle 150px at 100% 0%, #000 0%, transparent 100%);
}

/* version rouge pour l encadre de blocage de saisie */
.trame--rouge {
  background-image:
    radial-gradient(circle at 1px 1px, rgba(195, 18, 43, 0.85) 1px, transparent 1.1px),
    radial-gradient(circle at 1px 1px, rgba(195, 18, 43, 0.55) 1px, transparent 1.1px);
  opacity: 0.18;
  -webkit-mask-image: linear-gradient(115deg, #000 0%, transparent 78%);
  mask-image: linear-gradient(115deg, #000 0%, transparent 78%);
}

.separateur {
  display: block;
  width: 100%;
  height: 34px;
  color: var(--accent);
  opacity: 0.42;
}

/* --------------------------------------------------------------------------
   4. Forme signature : encoche a 45 degres plus filet vertical
   -------------------------------------------------------------------------- */

.encoche {
  position: relative;
  clip-path: polygon(var(--encoche) 0, 100% 0, 100% 100%, 0 100%, 0 var(--encoche));
}

.encoche::before {
  content: "";
  position: absolute;
  left: 0;
  top: var(--encoche);
  bottom: 0;
  width: 3px;
  background: var(--accent);
}

.encoche--rouge {
  --encoche: 24px;
}

.encoche--rouge::before { background: var(--rouge); }

/* --------------------------------------------------------------------------
   5. Ossature
   -------------------------------------------------------------------------- */

.cale {
  width: 100%;
  max-width: var(--cale);
  margin: 0 auto;
  padding: 0 24px;
}

.cale--etroite { max-width: 880px; }

.poste {
  position: relative;
  padding: 96px 0 0;
}

.poste--alt { background: var(--fond-alt); }

.poste__tete { margin-bottom: 48px; }

.poste__tete p { color: var(--texte-doux); font-size: 1.125rem; }

.surtitre {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
  font-family: var(--ardoise);
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}

.surtitre::before {
  content: "";
  flex: none;
  width: 24px;
  height: 2px;
  background: var(--accent);
}

.surtitre--centre { justify-content: center; }

.rang {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gouttiere);
}

.col-3 { grid-column: span 3; }
.col-4 { grid-column: span 4; }
.col-5 { grid-column: span 5; }
.col-6 { grid-column: span 6; }
.col-7 { grid-column: span 7; }
.col-12 { grid-column: span 12; }

.filet-evite {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--accent);
  color: var(--accent-texte);
  font-weight: 700;
  padding: 12px 20px;
}

.filet-evite:focus {
  left: 12px;
  top: 12px;
}

/* --------------------------------------------------------------------------
   6. En tete
   -------------------------------------------------------------------------- */

.criee {
  position: fixed;
  inset: 0 0 auto;
  z-index: 90;
  height: var(--entete-haut);
  display: flex;
  align-items: center;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: height 220ms ease, background-color 220ms ease, border-color 220ms ease;
}

.criee--posee {
  height: var(--entete-bas);
  background: rgba(234, 244, 246, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom-color: var(--bordure);
}

.criee__cale {
  width: 100%;
  max-width: var(--cale);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 24px;
}

.marque {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--texte);
  text-decoration: none;
  font-family: var(--titre);
  font-variant: small-caps;
  font-weight: 600;
  font-size: 1.5rem;
  letter-spacing: 0.08em;
  line-height: 1;
}

.marque:hover { color: var(--accent); }

.pavillon { width: 30px; height: 30px; flex: none; }

.amarre {
  margin: 0 0 0 auto;
  padding: 0;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 26px;
}

.amarre li { margin: 0; }

.amarre__lien {
  position: relative;
  color: var(--texte);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.875rem;
}

.amarre__lien::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -7px;
  height: 2px;
  width: 0;
  background: var(--accent);
  transition: width 200ms ease;
}

.amarre__lien:hover::after,
.amarre__lien:focus-visible::after { width: 100%; }

.criee__action { margin-left: 8px; }

.trois-barres {
  display: none;
  margin-left: auto;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: 2px solid var(--bordure-forte);
  color: var(--texte);
  cursor: pointer;
}

.trois-barres:hover { border-color: var(--accent); color: var(--accent); }

.trois-barres span {
  display: block;
  width: 20px;
  height: 2px;
  margin: 4px auto;
  background: currentColor;
}

.panneau {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: none;
  background: var(--fond);
  padding: 96px 24px 40px;
  overflow-y: auto;
}

.panneau[data-ouvert="oui"] { display: block; }

.panneau__liste {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.panneau__liste a {
  display: block;
  padding: 12px 0;
  font-family: var(--titre);
  font-size: 1.8rem;
  color: var(--texte);
  text-decoration: none;
  border-bottom: 1px solid var(--bordure);
}

.panneau__liste a:hover { color: var(--accent); }

.panneau__fermer {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 48px;
  height: 48px;
  background: transparent;
  border: 2px solid var(--bordure-forte);
  color: var(--texte);
  font-size: 1.4rem;
  cursor: pointer;
}

.panneau__fermer:hover { border-color: var(--accent); color: var(--accent); }

.panneau__pique { margin-top: 32px; }

/* --------------------------------------------------------------------------
   7. Boutons
   -------------------------------------------------------------------------- */

.pique {
  --encoche: 16px;
  position: relative;
  display: inline-block;
  padding: 16px 30px;
  font-family: var(--courant);
  font-weight: 700;
  font-size: 0.9375rem;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  clip-path: polygon(var(--encoche) 0, 100% 0, 100% 100%, 0 100%, 0 var(--encoche));
  transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease;
}

.pique--glace {
  background: var(--accent);
  color: var(--accent-texte);
}

.pique--glace::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(242, 251, 252, 0.9) 1px, transparent 1.1px),
    radial-gradient(circle at 1px 1px, rgba(242, 251, 252, 0.6) 1px, transparent 1.1px);
  background-size: 6px 6px, 11px 11px;
  background-position: 0 0, 3px 5px;
  transition: opacity 180ms ease;
}

.pique--glace:hover,
.pique--glace:focus-visible {
  background: var(--texte);
  color: var(--accent-texte);
}

.pique--glace:hover::after { opacity: 0.12; }

.pique--filet {
  background: transparent;
  color: var(--texte);
  box-shadow: inset 0 0 0 2px var(--bordure-forte);
  overflow: hidden;
}

.pique--filet::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0;
  background: var(--surface);
  z-index: -1;
  transition: height 200ms ease;
}

.pique--filet:hover,
.pique--filet:focus-visible {
  box-shadow: inset 0 0 0 2px var(--accent);
  color: var(--accent);
  background: var(--fond-alt);
}

.pique--rouge {
  --encoche: 24px;
  background: var(--rouge);
  color: var(--accent-texte);
}

.pique--rouge:hover { background: var(--rouge-fonce); color: var(--accent-texte); }

.pique--large { width: 100%; }

.duo-piques {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
}

/* --------------------------------------------------------------------------
   8. Hero centre plein ecran
   -------------------------------------------------------------------------- */

.etal {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  padding: calc(var(--entete-haut) + 40px) 0 40px;
}

.etal__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.8) brightness(1.14) contrast(0.94);
}

.etal__voile {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(234, 244, 246, 0.94) 0%, rgba(234, 244, 246, 0.91) 42%, rgba(234, 244, 246, 0.98) 100%),
    linear-gradient(90deg, rgba(8, 112, 130, 0.1) 0%, transparent 55%);
}

.etal__bloc {
  position: relative;
  z-index: 2;
  max-width: 940px;
  margin: 0 auto;
  padding: 0 24px;
}

.etal__bloc p { margin-left: auto; margin-right: auto; }

.etal__sous {
  font-size: 1.1875rem;
  color: var(--texte-doux);
  max-width: 60ch;
}

.etal__reassurance {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 34px;
  padding: 12px 20px 12px 22px;
  background: rgba(248, 252, 253, 0.86);
  border: 1px solid var(--bordure);
  font-family: var(--ardoise);
  font-size: 0.9375rem;
  color: var(--texte-doux);
  --encoche: 14px;
}

.etal__reassurance b { color: var(--accent); font-weight: 700; }

/* --------------------------------------------------------------------------
   9. Bandeau de chiffres en pied de section
   -------------------------------------------------------------------------- */

.bandeau {
  position: relative;
  margin-top: 88px;
  padding: 44px 0 64px;
  background: var(--fond-alt);
  border-top: 1px solid var(--accent);
  overflow: hidden;
}

.poste--alt .bandeau { background: var(--fond); }

.bandeau__grille {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gouttiere);
  width: 100%;
  max-width: var(--cale);
  margin: 0 auto;
  padding: 0 24px;
}

.bandeau__grille--trois { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.chiffre { text-align: left; }

.chiffre__valeur {
  display: block;
  font-family: var(--ardoise);
  font-weight: 700;
  font-size: 2.6rem;
  line-height: 1.05;
  color: var(--texte);
}

.chiffre__valeur span { color: var(--accent); }

.chiffre__libelle {
  display: block;
  margin-top: 8px;
  font-size: 0.875rem;
  color: var(--texte-doux);
}

/* --------------------------------------------------------------------------
   10. Cartes etiquette
   -------------------------------------------------------------------------- */

.etiquette {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--bordure);
  padding: 30px 28px 28px;
  overflow: hidden;
  --encoche: 16px;
  clip-path: polygon(var(--encoche) 0, 100% 0, 100% 100%, 0 100%, 0 var(--encoche));
}

.etiquette::before {
  content: "";
  position: absolute;
  left: 0;
  top: var(--encoche);
  bottom: 0;
  width: 3px;
  background: var(--accent);
}

.etiquette p:last-child { margin-bottom: 0; }

.etiquette h3 { margin-bottom: 10px; }

.etiquette--danger {
  --encoche: 24px;
  border-color: var(--rouge);
}

.etiquette--danger::before { background: var(--rouge); }

.mention {
  position: relative;
  margin: 0 0 22px;
  padding: 18px 22px 18px 24px;
  background: var(--surface);
  border: 1px solid var(--bordure);
  font-family: var(--ardoise);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--texte-doux);
  --encoche: 14px;
  clip-path: polygon(var(--encoche) 0, 100% 0, 100% 100%, 0 100%, 0 var(--encoche));
}

.mention::before {
  content: "";
  position: absolute;
  left: 0;
  top: var(--encoche);
  bottom: 0;
  width: 3px;
  background: var(--accent);
}

.mention b { color: var(--texte); }

/* vignette photographique */
.vignette {
  position: relative;
  --encoche: 16px;
  clip-path: polygon(var(--encoche) 0, 100% 0, 100% 100%, 0 100%, 0 var(--encoche));
  overflow: hidden;
}

.vignette img {
  width: 100%;
  filter: saturate(0.8) brightness(1.05);
}

.vignette::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(8, 112, 130, 0.12);
  mix-blend-mode: soft-light;
  pointer-events: none;
}

/* lisere interieur : separe l image du fond clair sans ombre portee */
.vignette::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  box-shadow: inset 0 0 0 1px var(--bordure);
  pointer-events: none;
}

.vignette__legende {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  padding: 46px 22px 18px;
  background: linear-gradient(180deg, rgba(234, 244, 246, 0) 0%, rgba(234, 244, 246, 0.96) 68%);
  font-family: var(--ardoise);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  color: var(--texte-doux);
}

/* --------------------------------------------------------------------------
   11. Probleme
   -------------------------------------------------------------------------- */

.pertes {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 14px;
}

.pertes li {
  position: relative;
  padding-left: 26px;
  margin: 0;
  color: var(--texte-doux);
}

.pertes li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 12px;
  height: 3px;
  background: var(--rouge);
}

.pertes b { color: var(--texte); }

/* --------------------------------------------------------------------------
   12. Solution : quatre marches numerotees
   -------------------------------------------------------------------------- */

.marches {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gouttiere);
}

.marche {
  position: relative;
  margin: 0;
  padding: 26px 22px 24px;
  background: var(--fond-alt);
  border: 1px solid var(--bordure);
  --encoche: 16px;
  clip-path: polygon(var(--encoche) 0, 100% 0, 100% 100%, 0 100%, 0 var(--encoche));
}

.poste--alt .marche { background: var(--fond); }

.marche::before {
  content: "";
  position: absolute;
  left: 0;
  top: var(--encoche);
  bottom: 0;
  width: 3px;
  background: var(--accent);
}

.marche__numero {
  display: block;
  margin-bottom: 12px;
  font-family: var(--ardoise);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--accent);
}

.marche h3 { font-size: 1.125rem; }

.marche p {
  margin-bottom: 0;
  font-size: 0.9375rem;
  color: var(--texte-doux);
}

/* --------------------------------------------------------------------------
   13. Fonctionnalites et avantages
   -------------------------------------------------------------------------- */

.controles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gouttiere);
}

.controle p { color: var(--texte-doux); font-size: 0.9688rem; }

.controle__marqueur {
  display: inline-block;
  margin-bottom: 14px;
  padding: 4px 10px;
  background: rgba(8, 112, 130, 0.1);
  box-shadow: inset 0 0 0 1px rgba(8, 112, 130, 0.24);
  font-family: var(--ardoise);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

.gains {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gouttiere);
}

.gain {
  position: relative;
  padding: 28px 22px 26px;
  background: var(--surface);
  border: 1px solid var(--bordure);
  --encoche: 16px;
  clip-path: polygon(var(--encoche) 0, 100% 0, 100% 100%, 0 100%, 0 var(--encoche));
}

.gain::before {
  content: "";
  position: absolute;
  left: 0;
  top: var(--encoche);
  bottom: 0;
  width: 3px;
  background: var(--accent);
}

.gain__mesure {
  display: block;
  font-family: var(--ardoise);
  font-weight: 700;
  font-size: 1.75rem;
  line-height: 1.1;
  color: var(--accent);
  margin-bottom: 10px;
}

.gain h3 { font-size: 1.0625rem; }

.gain p {
  margin-bottom: 0;
  font-size: 0.9375rem;
  color: var(--texte-doux);
}

/* maquette d etiquette dessinee en CSS */
.maquette {
  background: var(--surface);
  color: var(--texte);
  box-shadow: inset 0 0 0 1px var(--bordure);
  padding: 20px 22px 22px;
  --encoche: 16px;
  clip-path: polygon(var(--encoche) 0, calc(100% - var(--encoche)) 0, 100% var(--encoche), 100% 100%, 0 100%, 0 var(--encoche));
  font-family: var(--ardoise);
}

.maquette__ligne {
  display: block;
  padding: 5px 0;
  border-bottom: 1px solid rgba(7, 39, 47, 0.16);
  font-size: 0.9375rem;
}

.maquette__ligne:last-child { border-bottom: 0; }

.maquette__cle {
  display: block;
  font-family: var(--courant);
  font-weight: 700;
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texte-doux);
}

.maquette__ligne--oubliee { color: var(--accent); font-weight: 700; }

/* --------------------------------------------------------------------------
   14. Preuve sociale
   -------------------------------------------------------------------------- */

.notes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gouttiere);
}

.note {
  position: relative;
  margin: 0;
  padding: 30px 26px 26px;
  background: var(--surface);
  border: 1px solid var(--bordure);
  --encoche: 16px;
  clip-path: polygon(var(--encoche) 0, 100% 0, 100% 100%, 0 100%, 0 var(--encoche));
}

.note::before {
  content: "";
  position: absolute;
  left: 0;
  top: var(--encoche);
  bottom: 0;
  width: 3px;
  background: var(--accent);
}

.note blockquote {
  margin: 0 0 20px;
  font-family: var(--ardoise);
  font-size: 1rem;
  line-height: 1.66;
  color: var(--texte);
}

.note blockquote p:last-child { margin-bottom: 0; }

.note figcaption {
  border-top: 1px solid var(--bordure);
  padding-top: 16px;
  font-size: 0.875rem;
  color: var(--texte-doux);
}

.note figcaption b {
  display: block;
  font-family: var(--courant);
  font-weight: 700;
  color: var(--texte);
}

.expertise {
  margin-top: var(--gouttiere);
  padding: 32px 30px;
  background: var(--fond);
  border: 1px solid var(--bordure);
  --encoche: 16px;
  position: relative;
  clip-path: polygon(var(--encoche) 0, 100% 0, 100% 100%, 0 100%, 0 var(--encoche));
}

.poste--alt .expertise { background: var(--fond-alt); }

.expertise::before {
  content: "";
  position: absolute;
  left: 0;
  top: var(--encoche);
  bottom: 0;
  width: 3px;
  background: var(--accent);
}

.expertise p { color: var(--texte-doux); }

/* --------------------------------------------------------------------------
   15. Tarifs
   -------------------------------------------------------------------------- */

.gabarits {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gouttiere);
  align-items: start;
}

.gabarit {
  position: relative;
  padding: 32px 26px 30px;
  background: var(--surface);
  border: 1px solid var(--bordure);
  --encoche: 16px;
  clip-path: polygon(var(--encoche) 0, 100% 0, 100% 100%, 0 100%, 0 var(--encoche));
  display: flex;
  flex-direction: column;
  height: 100%;
}

.gabarit::before {
  content: "";
  position: absolute;
  left: 0;
  top: var(--encoche);
  bottom: 0;
  width: 3px;
  background: var(--accent);
}

.gabarit--retenu {
  margin-top: -24px;
  border-color: var(--accent);
  box-shadow: inset 0 0 0 2px var(--accent);
}

.gabarit__fanion {
  display: inline-block;
  margin-bottom: 14px;
  padding: 5px 12px;
  background: var(--accent);
  color: var(--accent-texte);
  font-family: var(--ardoise);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.gabarit__nom {
  font-family: var(--titre);
  font-weight: 600;
  font-size: 2rem;
  line-height: 1;
  margin: 0 0 10px;
}

.gabarit__prix {
  font-family: var(--ardoise);
  font-weight: 700;
  font-size: 2.6rem;
  line-height: 1;
  color: var(--accent);
}

.gabarit__unite {
  display: block;
  margin: 6px 0 16px;
  font-size: 0.8125rem;
  color: var(--texte-doux);
}

.gabarit__cible {
  font-size: 0.9375rem;
  color: var(--texte-doux);
  border-bottom: 1px solid var(--bordure);
  padding-bottom: 18px;
}

.gabarit__inclus {
  list-style: none;
  padding: 0;
  margin: 18px 0 26px;
  display: grid;
  gap: 11px;
  flex: 1;
}

.gabarit__inclus li {
  position: relative;
  margin: 0;
  padding-left: 24px;
  font-size: 0.9375rem;
  color: var(--texte-doux);
}

.gabarit__inclus li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 12px;
  height: 3px;
  background: var(--accent);
}

.tarifs__note {
  margin: 34px auto 0;
  text-align: center;
  font-size: 0.9375rem;
  color: var(--texte-doux);
}

/* --------------------------------------------------------------------------
   16. Foire aux questions
   -------------------------------------------------------------------------- */

.registre { max-width: 880px; margin: 0 auto; }

.registre__entree {
  border-bottom: 1px solid var(--bordure);
}

.registre__entree summary {
  list-style: none;
  cursor: pointer;
  padding: 22px 44px 22px 0;
  position: relative;
  font-family: var(--courant);
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--texte);
}

.registre__entree summary::-webkit-details-marker { display: none; }

.registre__entree summary::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 50%;
  width: 14px;
  height: 2px;
  background: var(--accent);
  transform: translateY(-50%);
}

.registre__entree summary::before {
  content: "";
  position: absolute;
  right: 14px;
  top: 50%;
  width: 2px;
  height: 14px;
  background: var(--accent);
  transform: translateY(-50%);
  transition: opacity 180ms ease;
}

.registre__entree[open] summary::before { opacity: 0; }

.registre__entree summary:hover { color: var(--accent); }

.registre__reponse {
  padding: 0 40px 24px 0;
  color: var(--texte-doux);
}

.registre__reponse p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   17. Formulaire
   -------------------------------------------------------------------------- */

.bordereau {
  display: grid;
  gap: 18px;
}

.champ { display: grid; gap: 7px; }

.champ label {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--texte);
}

.champ input,
.champ select,
.champ textarea {
  width: 100%;
  padding: 13px 15px;
  background: var(--surface);
  border: 1px solid var(--bordure-forte);
  color: var(--texte);
  font-family: var(--courant);
  font-size: 1rem;
  border-radius: 0;
}

.poste--alt .champ input,
.poste--alt .champ select,
.poste--alt .champ textarea { background: var(--surface); }

.champ input:focus,
.champ select:focus,
.champ textarea:focus {
  border-color: var(--accent);
  outline: 3px solid rgba(8, 112, 130, 0.45);
  outline-offset: 0;
}

.champ textarea { resize: vertical; min-height: 132px; }

.champ__aide { font-size: 0.8125rem; color: var(--texte-doux); }

.champ--paire {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.consentement {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.875rem;
  color: var(--texte-doux);
  line-height: 1.5;
}

.consentement input {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  accent-color: var(--accent);
}

.bordereau__suite {
  font-size: 0.875rem;
  color: var(--texte-doux);
}

.contact__accroche .mention { margin-top: 26px; }

/* --------------------------------------------------------------------------
   18. Pied de page
   -------------------------------------------------------------------------- */

.halle {
  position: relative;
  background: var(--fond-alt);
  border-top: 1px solid var(--bordure);
  padding: 72px 0 0;
  margin-top: 0;
  overflow: hidden;
}

.halle__grille {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.3fr;
  gap: var(--gouttiere);
}

.halle h4 {
  font-family: var(--ardoise);
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 18px;
}

.halle p { font-size: 0.9375rem; color: var(--texte-doux); }

.halle ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.halle ul li { margin: 0; }

.halle ul a {
  color: var(--texte-doux);
  text-decoration: none;
  font-size: 0.9375rem;
}

.halle ul a:hover { color: var(--accent); text-decoration: underline; }

/* Sur fond clair, un survol qui eclaircit disparait : il assombrit. */
.arrivage:hover,
.arrivage:focus-within,
.aussi__carte:hover,
.aussi__carte:focus-visible { background: var(--fond); }

.halle__profils {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-top: 16px;
  padding: 0;
  list-style: none;
}

.halle__profils a { font-size: 0.8125rem; }

.halle__barre {
  position: relative;
  z-index: 2;
  margin-top: 56px;
  border-top: 1px solid var(--bordure);
  padding: 22px 0 26px;
  font-size: 0.8125rem;
  color: var(--texte-doux);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  justify-content: space-between;
}

.halle__barre p { margin: 0; font-size: 0.8125rem; max-width: none; }

/* --------------------------------------------------------------------------
   19. Pages interieures
   -------------------------------------------------------------------------- */

.entete-page {
  position: relative;
  padding: calc(var(--entete-haut) + 72px) 0 56px;
  background: var(--fond-alt);
  border-bottom: 1px solid var(--bordure);
  overflow: hidden;
}

.entete-page .cale { position: relative; z-index: 2; }

.entete-page h1 { font-size: clamp(2.4rem, 4.6vw, 3.4rem); }

.entete-page p { color: var(--texte-doux); font-size: 1.0625rem; }

.fil {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 22px;
  padding: 0;
  font-size: 0.8125rem;
  color: var(--texte-doux);
}

.fil li { margin: 0; }

.fil a { color: var(--texte-doux); }

.texte-long { padding: 72px 0 88px; }

.texte-long h2 {
  margin-top: 48px;
  padding-top: 12px;
  border-top: 1px solid var(--bordure);
}

.texte-long h2:first-of-type { margin-top: 0; border-top: 0; padding-top: 0; }

.texte-long h3 { margin-top: 30px; }

.texte-long p,
.texte-long li { color: var(--texte-doux); }

.texte-long p strong,
.texte-long li strong { color: var(--texte); }

.fiche-auteur {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 40px;
  align-items: start;
  margin-bottom: 48px;
}

.fiche-auteur img {
  width: 100%;
  --encoche: 16px;
  clip-path: polygon(var(--encoche) 0, 100% 0, 100% 100%, 0 100%, 0 var(--encoche));
  filter: saturate(0.9) brightness(1.03);
}

.tableau-simple {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 26px;
  font-size: 0.9375rem;
}

.tableau-simple th,
.tableau-simple td {
  text-align: left;
  padding: 12px 14px;
  border: 1px solid var(--bordure);
  color: var(--texte-doux);
  vertical-align: top;
}

.tableau-simple th {
  background: var(--surface);
  color: var(--texte);
  font-weight: 700;
  width: 34%;
}

.plan-liste {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 18px;
}

.plan-liste li { margin: 0; }

.plan-liste a { font-weight: 700; }

.plan-liste span { display: block; color: var(--texte-doux); font-size: 0.9375rem; }

.page-courte {
  min-height: 68vh;
  display: flex;
  align-items: center;
  padding: calc(var(--entete-haut) + 80px) 0 96px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.page-courte .cale { position: relative; z-index: 2; }

.page-courte p { margin-left: auto; margin-right: auto; }

/* --------------------------------------------------------------------------
   20. Signature d animation : texte qui se defloute a l entree
   -------------------------------------------------------------------------- */

.flou {
  filter: blur(10px);
  opacity: 0;
  transform: translateY(12px);
  transition:
    filter 620ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 620ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 620ms cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--retard, 0ms);
  will-change: filter, opacity, transform;
}

.flou.net {
  filter: blur(0);
  opacity: 1;
  transform: none;
}

.js-absent .flou {
  filter: none;
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .flou {
    filter: none;
    transform: none;
    transition: opacity 200ms linear;
  }
  .flou.net { filter: none; transform: none; }
  * { transition-duration: 1ms !important; animation-duration: 1ms !important; }
}

/* --------------------------------------------------------------------------
   21. Adaptations
   -------------------------------------------------------------------------- */

@media (max-width: 1080px) {
  .controles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gains { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .marches { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gabarits { grid-template-columns: 1fr; }
  .gabarit--retenu { margin-top: 0; }
  .notes { grid-template-columns: 1fr; }
  .halle__grille { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .amarre, .criee__action { display: none; }
  .trois-barres { display: block; }
  .col-3, .col-4, .col-5, .col-6, .col-7 { grid-column: span 12; }
  .fiche-auteur { grid-template-columns: 1fr; }
  .fiche-auteur img { max-width: 300px; }
}

@media (max-width: 720px) {
  :root { --gouttiere: 20px; }
  .poste { padding-top: 68px; }
  .bandeau { margin-top: 60px; padding: 34px 0 46px; }
  .bandeau__grille,
  .bandeau__grille--trois { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .controles, .gains, .marches { grid-template-columns: 1fr; }
  .halle__grille { grid-template-columns: 1fr; }
  .champ--paire { grid-template-columns: 1fr; }
  .chiffre__valeur { font-size: 2.1rem; }
  .duo-piques { flex-direction: column; align-items: stretch; }
  .etal { min-height: 92vh; }
  body { font-size: 1rem; }
}

@media print {
  .criee, .panneau, .trame, .pique { display: none !important; }
  body { background: #ffffff; color: #000000; }
}

/* --------------------------------------------------------------------------
   22. Magazine : Le Carnet d Arrivage
   Section ajoutee en fin de feuille, aucune regle precedente n est modifiee.
   Vocabulaire, dans la continuite du reste du site :
   carnet (grille de cartes), arrivage (carte d article), reperes (angle, dates,
   temps de lecture), chapo (exergue), une (image a la une), corps-article
   (corps redactionnel en HTML nu), appel (rappel vers le contact),
   encart-auteur, aussi (bloc A lire aussi).
   Forme signature identique au reste du site : encoche de 16 pixels a 45 degres
   sur le coin superieur gauche, filet vertical de 3 pixels en bleu glacier.
   -------------------------------------------------------------------------- */

/* 22.1 Grille de cartes d article ----------------------------------------- */

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

.carnet__suite {
  margin: 40px 0 0;
  text-align: center;
}

.carnet__suite p { max-width: none; }

/* 22.2 Carte d article ---------------------------------------------------- */

.arrivage {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--surface);
  border: 1px solid var(--bordure);
  overflow: hidden;
  --encoche: 16px;
  clip-path: polygon(var(--encoche) 0, 100% 0, 100% 100%, 0 100%, 0 var(--encoche));
  transition: border-color 180ms ease;
}

.arrivage::before {
  content: "";
  position: absolute;
  left: 0;
  top: var(--encoche);
  bottom: 0;
  z-index: 3;
  width: 3px;
  background: var(--accent);
}

.arrivage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(8, 112, 130, 0.72) 1px, transparent 1.1px),
    radial-gradient(circle at 1px 1px, rgba(8, 112, 130, 0.48) 1px, transparent 1.1px);
  background-size: 6px 6px, 11px 11px;
  background-position: 0 0, 3px 5px;
  -webkit-mask-image: radial-gradient(circle 160px at 100% 0%, #000 0%, transparent 100%);
  mask-image: radial-gradient(circle 160px at 100% 0%, #000 0%, transparent 100%);
  transition: opacity 180ms ease;
}

.arrivage:hover,
.arrivage:focus-within { border-color: var(--accent); }

.arrivage:hover::after,
.arrivage:focus-within::after { opacity: 0.16; }

.arrivage__cadre {
  position: relative;
  display: block;
  overflow: hidden;
  border-bottom: 1px solid var(--bordure);
}

.arrivage__cadre img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  filter: saturate(0.8) brightness(1.03);
  transition: filter 180ms ease;
}

.arrivage__cadre::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(8, 112, 130, 0.12);
  mix-blend-mode: soft-light;
  pointer-events: none;
}

.arrivage:hover .arrivage__cadre img { filter: saturate(0.95) brightness(1.07); }

.arrivage__texte {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 24px 24px 22px;
}

.arrivage__angle {
  display: inline-block;
  align-self: flex-start;
  margin-bottom: 14px;
  padding: 4px 10px;
  background: rgba(8, 112, 130, 0.1);
  box-shadow: inset 0 0 0 1px rgba(8, 112, 130, 0.24);
  font-family: var(--ardoise);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

.arrivage__titre {
  margin: 0 0 12px;
  font-family: var(--titre);
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1.12;
  color: var(--texte);
}

.arrivage__titre a {
  color: inherit;
  text-decoration: none;
}

.arrivage__titre a:hover,
.arrivage__titre a:focus-visible { color: var(--accent); }

.arrivage__extrait {
  flex: 1;
  margin: 0 0 18px;
  font-size: 0.9375rem;
  color: var(--texte-doux);
}

.arrivage__pied {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  justify-content: space-between;
  margin: 0;
  padding-top: 14px;
  border-top: 1px solid var(--bordure);
  font-family: var(--ardoise);
  font-size: 0.8125rem;
  color: var(--texte-doux);
  max-width: none;
}

.arrivage__pied span { display: inline-block; }

/* 22.3 Entete d article --------------------------------------------------- */

.entete-article {
  position: relative;
  padding: calc(var(--entete-haut) + 64px) 0 52px;
  background: var(--fond-alt);
  border-bottom: 1px solid var(--bordure);
  overflow: hidden;
}

.entete-article .cale { position: relative; z-index: 2; }

.entete-article h1 {
  margin: 0 0 26px;
  font-size: clamp(2.3rem, 4.4vw, 3.5rem);
}

.reperes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
  font-family: var(--ardoise);
  font-size: 0.8125rem;
  color: var(--texte-doux);
}

.reperes li {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
}

.reperes li::before {
  content: "";
  flex: none;
  width: 12px;
  height: 2px;
  background: var(--accent);
}

.reperes b {
  color: var(--accent);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* 22.4 Exergue de chapeau ------------------------------------------------- */

.chapo {
  position: relative;
  margin: 0;
  padding: 22px 26px 22px 28px;
  max-width: 72ch;
  background: var(--surface);
  border: 1px solid var(--bordure);
  font-family: var(--ardoise);
  font-size: 1.0625rem;
  line-height: 1.62;
  color: var(--texte);
  --encoche: 16px;
  clip-path: polygon(var(--encoche) 0, 100% 0, 100% 100%, 0 100%, 0 var(--encoche));
}

.chapo::before {
  content: "";
  position: absolute;
  left: 0;
  top: var(--encoche);
  bottom: 0;
  width: 3px;
  background: var(--accent);
}

/* 22.5 Image a la une et corps de l article ------------------------------- */

.article__corps { padding: 56px 0 0; }

.une {
  position: relative;
  margin: 0 0 48px;
  overflow: hidden;
  --encoche: 16px;
  clip-path: polygon(var(--encoche) 0, 100% 0, 100% 100%, 0 100%, 0 var(--encoche));
}

.une img {
  width: 100%;
  filter: saturate(0.8) brightness(1.05);
}

.une::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(8, 112, 130, 0.12);
  mix-blend-mode: soft-light;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px var(--bordure);
}

/* Le corps redactionnel ne porte aucun attribut class : toutes les balises nues
   sont mises en forme ici, en tant que descendantes du conteneur de corps. */

.corps-article {
  max-width: 68ch;
  font-size: 1.0625rem;
}

.corps-article h2 {
  margin: 54px 0 18px;
  padding-top: 18px;
  border-top: 1px solid var(--bordure);
  font-family: var(--titre);
  font-weight: 600;
  font-size: clamp(1.9rem, 3.4vw, 2.4rem);
  line-height: 1.05;
  color: var(--texte);
}

.corps-article h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.corps-article h3 {
  position: relative;
  margin: 34px 0 12px;
  padding-left: 24px;
  font-family: var(--courant);
  font-weight: 700;
  font-size: 1.3rem;
  line-height: 1.3;
  color: var(--texte);
}

.corps-article h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 12px;
  height: 3px;
  background: var(--accent);
}

.corps-article p {
  margin: 0 0 1.15em;
  color: var(--texte-doux);
}

.corps-article strong { color: var(--texte); font-weight: 700; }

.corps-article em {
  font-family: var(--ardoise);
  font-style: italic;
  color: var(--texte);
}

.corps-article a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.corps-article a:hover { color: var(--texte); }

.corps-article ul,
.corps-article ol {
  margin: 0 0 1.4em;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}

.corps-article li {
  position: relative;
  margin: 0;
  padding-left: 28px;
  color: var(--texte-doux);
}

.corps-article ul > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 12px;
  height: 3px;
  background: var(--accent);
}

.corps-article ol { counter-reset: rang-corps; }

.corps-article ol > li { counter-increment: rang-corps; padding-left: 34px; }

.corps-article ol > li::before {
  content: counter(rang-corps);
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--ardoise);
  font-weight: 700;
  font-size: 0.9375rem;
  line-height: 1.68;
  color: var(--accent);
}

/* Tableau recapitulatif */

.corps-article table {
  width: 100%;
  border-collapse: collapse;
  margin: 30px 0 34px;
  font-size: 0.9375rem;
}

.corps-article th,
.corps-article td {
  padding: 12px 14px;
  text-align: left;
  vertical-align: top;
  border: 1px solid var(--bordure);
  color: var(--texte-doux);
}

.corps-article thead th {
  background: var(--surface);
  color: var(--texte);
  font-family: var(--courant);
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.corps-article tbody th {
  background: rgba(8, 112, 130, 0.08);
  color: var(--texte);
  font-weight: 700;
}

/* Encadre */

.corps-article aside {
  position: relative;
  margin: 34px 0;
  padding: 26px 28px 24px 30px;
  background: var(--surface);
  border: 1px solid var(--bordure);
  overflow: hidden;
  --encoche: 16px;
  clip-path: polygon(var(--encoche) 0, 100% 0, 100% 100%, 0 100%, 0 var(--encoche));
}

.corps-article aside::before {
  content: "";
  position: absolute;
  left: 0;
  top: var(--encoche);
  bottom: 0;
  z-index: 2;
  width: 3px;
  background: var(--accent);
}

.corps-article aside::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.14;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(8, 112, 130, 0.72) 1px, transparent 1.1px),
    radial-gradient(circle at 1px 1px, rgba(8, 112, 130, 0.48) 1px, transparent 1.1px);
  background-size: 6px 6px, 11px 11px;
  background-position: 0 0, 3px 5px;
  -webkit-mask-image: radial-gradient(circle 170px at 100% 0%, #000 0%, transparent 100%);
  mask-image: radial-gradient(circle 170px at 100% 0%, #000 0%, transparent 100%);
}

.corps-article aside p,
.corps-article aside ul,
.corps-article aside ol { position: relative; z-index: 2; }

.corps-article aside > *:last-child { margin-bottom: 0; }

/* Citation */

.corps-article blockquote {
  position: relative;
  margin: 32px 0;
  padding: 24px 28px 24px 30px;
  background: var(--fond-alt);
  border: 1px solid var(--bordure);
  font-family: var(--ardoise);
  font-size: 1.0625rem;
  line-height: 1.62;
  color: var(--texte);
  --encoche: 16px;
  clip-path: polygon(var(--encoche) 0, 100% 0, 100% 100%, 0 100%, 0 var(--encoche));
}

.corps-article blockquote::before {
  content: "";
  position: absolute;
  left: 0;
  top: var(--encoche);
  bottom: 0;
  width: 3px;
  background: var(--accent);
}

.corps-article blockquote p { color: var(--texte); }

.corps-article blockquote > *:last-child { margin-bottom: 0; }

/* Figure */

.corps-article figure { margin: 30px 0; }

.corps-article figcaption {
  padding-top: 10px;
  font-family: var(--ardoise);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  color: var(--texte-doux);
}

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

.appel {
  position: relative;
  margin: 52px 0 0;
  padding: 30px 32px 28px 34px;
  background: var(--surface);
  border: 1px solid var(--accent);
  --encoche: 16px;
  clip-path: polygon(var(--encoche) 0, 100% 0, 100% 100%, 0 100%, 0 var(--encoche));
}

.appel::before {
  content: "";
  position: absolute;
  left: 0;
  top: var(--encoche);
  bottom: 0;
  width: 3px;
  background: var(--accent);
}

.appel__intitule {
  margin: 0 0 10px;
  font-family: var(--titre);
  font-weight: 600;
  font-size: 1.75rem;
  line-height: 1.1;
  color: var(--texte);
}

.appel p { color: var(--texte-doux); }

.appel p:last-child { margin-bottom: 0; }

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

.encart-auteur {
  position: relative;
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  margin: 48px 0 0;
  padding: 28px 30px 26px 32px;
  background: var(--fond-alt);
  border: 1px solid var(--bordure);
  --encoche: 16px;
  clip-path: polygon(var(--encoche) 0, 100% 0, 100% 100%, 0 100%, 0 var(--encoche));
}

.encart-auteur::before {
  content: "";
  position: absolute;
  left: 0;
  top: var(--encoche);
  bottom: 0;
  width: 3px;
  background: var(--accent);
}

.encart-auteur img {
  width: 96px;
  --encoche: 12px;
  clip-path: polygon(var(--encoche) 0, 100% 0, 100% 100%, 0 100%, 0 var(--encoche));
  filter: saturate(0.9) brightness(1.03);
}

.encart-auteur__role {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 8px;
  font-family: var(--ardoise);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}

.encart-auteur__role::before {
  content: "";
  flex: none;
  width: 24px;
  height: 2px;
  background: var(--accent);
}

.encart-auteur__nom {
  margin: 0 0 10px;
  font-family: var(--titre);
  font-weight: 600;
  font-size: 1.6rem;
  line-height: 1.1;
  color: var(--texte);
}

.encart-auteur p {
  font-size: 0.9375rem;
  color: var(--texte-doux);
}

.encart-auteur p:last-child { margin-bottom: 0; }

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

.aussi {
  position: relative;
  margin-top: 88px;
  padding: 64px 0 88px;
  background: var(--fond-alt);
  border-top: 1px solid var(--accent);
  overflow: hidden;
}

.aussi .cale { position: relative; z-index: 2; }

.aussi__intitule {
  margin: 0 0 34px;
  font-family: var(--titre);
  font-weight: 600;
  font-size: clamp(1.9rem, 3.4vw, 2.4rem);
  line-height: 1.05;
  color: var(--texte);
  max-width: none;
}

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

.aussi__carte {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--surface);
  border: 1px solid var(--bordure);
  color: var(--texte);
  text-decoration: none;
  overflow: hidden;
  --encoche: 16px;
  clip-path: polygon(var(--encoche) 0, 100% 0, 100% 100%, 0 100%, 0 var(--encoche));
  transition: border-color 180ms ease;
}

.aussi__carte::before {
  content: "";
  position: absolute;
  left: 0;
  top: var(--encoche);
  bottom: 0;
  z-index: 3;
  width: 3px;
  background: var(--accent);
}

.aussi__carte:hover,
.aussi__carte:focus-visible { border-color: var(--accent); }

.aussi__cadre {
  position: relative;
  display: block;
  overflow: hidden;
  border-bottom: 1px solid var(--bordure);
}

.aussi__cadre img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  filter: saturate(0.8) brightness(1.03);
  transition: filter 180ms ease;
}

.aussi__cadre::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(8, 112, 130, 0.12);
  mix-blend-mode: soft-light;
  pointer-events: none;
}

.aussi__carte:hover .aussi__cadre img { filter: saturate(0.95) brightness(1.07); }

.aussi__texte {
  display: block;
  padding: 22px 22px 24px;
}

.aussi__nom {
  display: block;
  margin-bottom: 10px;
  font-family: var(--titre);
  font-weight: 600;
  font-size: 1.35rem;
  line-height: 1.14;
  color: var(--texte);
  transition: color 180ms ease;
}

.aussi__carte:hover .aussi__nom { color: var(--accent); }

.aussi__accroche {
  display: block;
  font-size: 0.9063rem;
  line-height: 1.6;
  color: var(--texte-doux);
}

/* 22.9 Mise en avant du magazine sur la page d accueil --------------------- */

.poste--carnet {
  margin-top: 88px;
  padding-top: 72px;
  border-top: 1px solid var(--bordure);
}

/* 22.10 Sommaire du magazine sur la page auteur ---------------------------- */

.sommaire-auteur {
  list-style: none;
  margin: 0 0 26px;
  padding: 0;
  display: grid;
  gap: 16px;
}

.sommaire-auteur li {
  position: relative;
  margin: 0;
  padding-left: 26px;
}

.sommaire-auteur li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 12px;
  height: 3px;
  background: var(--accent);
}

.sommaire-auteur a { font-weight: 700; }

.sommaire-auteur time {
  display: block;
  font-family: var(--ardoise);
  font-size: 0.8125rem;
  color: var(--texte-doux);
}

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

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

@media (max-width: 720px) {
  .carnet { grid-template-columns: 1fr; }
  .aussi__grille { grid-template-columns: 1fr; }
  .article__corps { padding-top: 40px; }
  .une { margin-bottom: 34px; }
  .corps-article h2 { margin-top: 42px; }
  .corps-article table { display: block; overflow-x: auto; }
  .encart-auteur { grid-template-columns: 1fr; }
  .appel { padding: 26px 22px 24px 24px; }
  .aussi { margin-top: 60px; padding: 48px 0 64px; }
}