/* Corselia, feuille unique.
   Notice technique de corseterie: colonne centrale etroite, cotes en marge,
   veines de bois en fil continu, contour de patron qui se trace au survol. */

:root {
  --nacre: #FFFBF7;
  --peche: #FBEFE6;
  --planche: #FFFFFF;
  --graphite: #2A1F2B;
  --doux: #6A5566;
  --prune: #812186;
  --prune-fonce: #6D1C72;
  --sur-prune: #FFF6FB;
  --peche-fort: #E39B78;
  --bordure: #E8D8CF;

  --axe: 660px;
  --gouttiere: 190px;
  --ecart-cote: 40px;
  --large: 1040px;
  --marge-page: 1.3rem;

  --rayon-bonnet: 26px;
  --rayon-coupe: 2px;

  --titre: "Sora", "Trebuchet MS", sans-serif;
  --courant: "Assistant", "Segoe UI", sans-serif;
  --grave: "Sorts Mill Goudy", Georgia, serif;

  --veine: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 220' width='1200' height='220'%3E%3Cg fill='none' stroke='%23E8D8CF' stroke-width='0.75'%3E%3Cpath d='M0,40 C100,10 200,70 300,40 C400,10 500,70 600,40 C700,10 800,70 900,40 C1000,10 1100,70 1200,40'/%3E%3Cpath d='M0,58 C100,85 200,31 300,58 C400,85 500,31 600,58 C700,85 800,31 900,58 C1000,85 1100,31 1200,58'/%3E%3Cpath d='M0,76 C100,43 200,109 300,76 C400,43 500,109 600,76 C700,43 800,109 900,76 C1000,43 1100,109 1200,76'/%3E%3Cpath d='M0,94 C100,119 200,69 300,94 C400,119 500,69 600,94 C700,119 800,69 900,94 C1000,119 1100,69 1200,94'/%3E%3Cpath d='M0,112 C100,83 200,141 300,112 C400,83 500,141 600,112 C700,83 800,141 900,112 C1000,83 1100,141 1200,112'/%3E%3C/g%3E%3C/svg%3E");

  --veine-claire: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 220' width='1200' height='220'%3E%3Cg fill='none' stroke='%23FFF6FB' stroke-width='0.75'%3E%3Cpath d='M0,40 C100,10 200,70 300,40 C400,10 500,70 600,40 C700,10 800,70 900,40 C1000,10 1100,70 1200,40'/%3E%3Cpath d='M0,58 C100,85 200,31 300,58 C400,85 500,31 600,58 C700,85 800,31 900,58 C1000,85 1100,31 1200,58'/%3E%3Cpath d='M0,76 C100,43 200,109 300,76 C400,43 500,109 600,76 C700,43 800,109 900,76 C1000,43 1100,109 1200,76'/%3E%3Cpath d='M0,94 C100,119 200,69 300,94 C400,119 500,69 600,94 C700,119 800,69 900,94 C1000,119 1100,69 1200,94'/%3E%3Cpath d='M0,112 C100,83 200,141 300,112 C400,83 500,141 600,112 C700,83 800,141 900,112 C1000,83 1100,141 1200,112'/%3E%3C/g%3E%3C/svg%3E");

  --filet-serre: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 12' width='60' height='12'%3E%3Cg fill='none' stroke='%23E39B78' stroke-width='0.6'%3E%3Cpath d='M0,2 C7.5,0.8 22.5,3.2 30,2 C37.5,0.8 52.5,3.2 60,2'/%3E%3Cpath d='M0,5 C7.5,6.2 22.5,3.8 30,5 C37.5,6.2 52.5,3.8 60,5'/%3E%3Cpath d='M0,8 C7.5,6.8 22.5,9.2 30,8 C37.5,6.8 52.5,9.2 60,8'/%3E%3Cpath d='M0,11 C7.5,12.2 22.5,9.8 30,11 C37.5,12.2 52.5,9.8 60,11'/%3E%3C/g%3E%3C/svg%3E");
}

/* Remise a plat */
*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--nacre);
  color: var(--graphite);
  font-family: var(--courant);
  font-size: 1.06rem;
  font-weight: 400;
  line-height: 1.68;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

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

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

h1, h2, h3, h4 {
  font-family: var(--titre);
  letter-spacing: -0.022em;
  line-height: 1.12;
  margin: 0 0 0.7rem;
  text-wrap: balance;
}

h1 { font-size: 3.05rem; font-weight: 700; }
h2 { font-size: 2.05rem; font-weight: 600; }
h3 { font-size: 1.32rem; font-weight: 600; }
h4 { font-size: 1.06rem; font-weight: 600; }

p { margin: 0 0 1.05rem; }
ul, ol { margin: 0 0 1.05rem; padding-left: 1.15rem; }
li { margin-bottom: 0.35rem; }

@media (max-width: 640px) {
  h1 { font-size: 2.15rem; }
  h2 { font-size: 1.62rem; }
  body { font-size: 1.02rem; }
}

:focus-visible {
  outline: 2px solid var(--prune);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection { background: var(--peche); color: var(--graphite); }

/* Colonne de notice */
.cs-axe {
  width: min(100% - (2 * var(--marge-page)), var(--axe));
  margin-inline: auto;
}

.cs-axe-large {
  width: min(100% - (2 * var(--marge-page)), var(--large));
  margin-inline: auto;
}

.cs-releve { position: relative; }

.cs-cote {
  display: block;
  font-family: var(--grave);
  font-size: 0.9rem;
  line-height: 1.35;
  color: var(--doux);
  letter-spacing: 0.02em;
  margin: 0 0 0.45rem;
}

.cs-cote b {
  display: block;
  font-family: var(--courant);
  font-weight: 500;
  font-size: 0.84rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--prune);
}

@media (min-width: 1180px) {
  .cs-cote {
    position: absolute;
    top: 0.4rem;
    left: calc(-1 * (var(--gouttiere) + var(--ecart-cote)));
    width: var(--gouttiere);
    text-align: right;
    margin: 0;
    border-right: 1px solid var(--bordure);
    padding-right: 0.9rem;
  }
}

/* Surtitres de section */
.cs-surtitre {
  font-family: var(--grave);
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--doux);
  margin: 0 0 0.55rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.cs-surtitre::before {
  content: "";
  width: 18px;
  height: 1px;
  background: var(--prune);
  flex: none;
}

.cs-filet {
  width: 120px;
  height: 12px;
  background-image: var(--filet-serre);
  background-repeat: repeat-x;
  margin: 0 0 1.5rem;
  opacity: 0.85;
}

/* Rythme vertical des sections */
.cs-section { padding: 5.2rem 0; position: relative; }
.cs-section-serree { padding: 3.4rem 0; }
.cs-section-peche { background: var(--peche); }
.cs-chapeau { font-size: 1.16rem; color: var(--doux); margin-bottom: 2rem; }

/* En tete collant */
.cs-entete {
  position: sticky;
  top: 0;
  z-index: 60;
  height: 72px;
  display: flex;
  align-items: center;
  background: rgba(255, 251, 247, 0.96);
  backdrop-filter: saturate(140%) blur(6px);
  border-bottom: 1px solid var(--bordure);
  transition: height 0.24s ease;
}

.cs-entete::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 0;
  height: 1px;
  background: var(--prune);
  transition: width 0.4s ease;
}

.cs-entete.est-glissee { height: 62px; }
.cs-entete.est-glissee::after { width: 66%; }

.cs-barre {
  width: min(100% - (2 * var(--marge-page)), 1180px);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.cs-monogramme {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  text-decoration: none;
  color: var(--graphite);
  font-family: var(--titre);
  font-weight: 600;
  font-size: 1.16rem;
  letter-spacing: -0.02em;
}

.cs-monogramme svg { display: block; flex: none; }

.cs-cintre {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.cs-cintre a {
  font-family: var(--courant);
  font-weight: 500;
  font-size: 0.94rem;
  color: var(--graphite);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
}

.cs-cintre a:hover,
.cs-cintre a:focus-visible { border-bottom-color: var(--prune); color: var(--prune); }

.cs-bascule {
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--bordure);
  background: var(--planche);
  border-radius: var(--rayon-bonnet) var(--rayon-coupe) var(--rayon-coupe) var(--rayon-coupe);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.cs-bascule span {
  display: block;
  width: 18px;
  height: 1px;
  background: var(--graphite);
  position: relative;
}

.cs-bascule span::before,
.cs-bascule span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 18px;
  height: 1px;
  background: var(--graphite);
}

.cs-bascule span::before { top: -6px; }
.cs-bascule span::after { top: 6px; }

.cs-bascule[aria-expanded="true"] span { background: transparent; }
.cs-bascule[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.cs-bascule[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }

/* Panneau plein ecran sous 900 pixels */
.cs-panneau {
  position: fixed;
  inset: 0;
  background: var(--nacre);
  z-index: 90;
  transform: translateY(-100%);
  transition: transform 0.28s ease;
  overflow-y: auto;
  padding: 6rem var(--marge-page) 3rem;
}

.cs-panneau.est-ouverte { transform: translateY(0); }

.cs-panneau ul {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 420px;
  text-align: center;
}

.cs-panneau li { border-bottom: 1px solid var(--bordure); }

.cs-panneau a {
  display: block;
  padding: 1rem 0;
  font-family: var(--titre);
  font-weight: 600;
  font-size: 1.22rem;
  color: var(--graphite);
  text-decoration: none;
}

.cs-fermer {
  position: absolute;
  top: 1.1rem;
  right: var(--marge-page);
  width: 44px;
  height: 44px;
  border: 1px solid var(--bordure);
  background: var(--planche);
  cursor: pointer;
  font-size: 1.3rem;
  line-height: 1;
  color: var(--graphite);
  border-radius: var(--rayon-bonnet) var(--rayon-coupe) var(--rayon-coupe) var(--rayon-coupe);
}

@media (max-width: 900px) {
  .cs-cintre, .cs-entete .cs-bouton { display: none; }
  .cs-bascule { display: inline-flex; }
}

@media (min-width: 901px) {
  .cs-panneau { display: none; }
}

/* Boutons */
.cs-bouton,
.cs-bouton-second {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  padding: 0 30px;
  font-family: var(--courant);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  cursor: pointer;
  border-radius: var(--rayon-bonnet) var(--rayon-coupe) var(--rayon-coupe) var(--rayon-coupe);
  transition: background-color 0.2s ease, color 0.2s ease;
}

.cs-bouton {
  background: var(--prune);
  color: var(--sur-prune);
  border: 1px solid var(--prune);
}

.cs-bouton:hover { background: var(--prune-fonce); border-color: var(--prune-fonce); color: var(--sur-prune); }

.cs-bouton-second {
  background: transparent;
  color: var(--prune);
  border: 1px solid var(--bordure);
}

.cs-bouton-second:hover { background: var(--peche); border-color: var(--prune); }

.cs-bouton::after,
.cs-bouton-second::after {
  content: "";
  position: absolute;
  inset: -4px;
  border: 1.5px solid var(--prune);
  border-radius: calc(var(--rayon-bonnet) + 4px) var(--rayon-coupe) var(--rayon-coupe) var(--rayon-coupe);
  opacity: 0;
  transition: opacity 0.28s ease;
  pointer-events: none;
}

.cs-bouton:hover::after,
.cs-bouton-second:hover::after { opacity: 1; }

.cs-duo { display: flex; flex-wrap: wrap; gap: 0.9rem; margin: 1.9rem 0 1.4rem; }

/* Contour de patron qui se trace */
.cs-trace {
  position: absolute;
  inset: 7px;
  overflow: visible;
  pointer-events: none;
}

.cs-trace rect {
  fill: none;
  stroke: var(--prune);
  stroke-width: 1.5;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 0.52s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.cs-carte:hover .cs-trace rect,
.cs-carte:focus-within .cs-trace rect { stroke-dashoffset: 0; }

.cs-carte {
  position: relative;
  background: var(--planche);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-bonnet) var(--rayon-coupe) var(--rayon-coupe) var(--rayon-coupe);
  padding: 1.6rem 1.5rem 1.5rem;
}

.cs-carte h3 { margin-bottom: 0.45rem; }
.cs-carte p { margin-bottom: 0; color: var(--doux); font-size: 0.98rem; }

/* Planches photographiques */
.cs-planche {
  background: var(--planche);
  padding: 10px;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-bonnet) var(--rayon-coupe) var(--rayon-coupe) var(--rayon-coupe);
}

.cs-planche img {
  border-radius: calc(var(--rayon-bonnet) - 8px) var(--rayon-coupe) var(--rayon-coupe) var(--rayon-coupe);
  filter: saturate(0.88);
}

.cs-planche { position: relative; }

.cs-planche::after {
  content: "";
  position: absolute;
  inset: 10px;
  background: var(--peche-fort);
  opacity: 0.08;
  mix-blend-mode: multiply;
  pointer-events: none;
  border-radius: calc(var(--rayon-bonnet) - 8px) var(--rayon-coupe) var(--rayon-coupe) var(--rayon-coupe);
}

.cs-legende {
  font-family: var(--courant);
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--doux);
  margin: 0.7rem 0 0;
  letter-spacing: 0.01em;
}

/* Hero */
.cs-cabine { position: relative; padding: 3.6rem 0 0; overflow: hidden; }

.cs-cabine::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 220px;
  background-image: var(--veine);
  background-repeat: repeat-x;
  opacity: 0.12;
  pointer-events: none;
}

.cs-cabine .cs-axe { position: relative; }

.cs-cabine h1 { margin-bottom: 1rem; }

.cs-accroche { font-size: 1.2rem; color: var(--doux); }

.cs-appui {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  border-top: 1px solid var(--bordure);
  border-bottom: 1px solid var(--bordure);
  padding: 0.95rem 0;
  font-size: 0.95rem;
  color: var(--graphite);
}

.cs-appui strong { font-family: var(--grave); font-weight: 400; font-size: 1.5rem; line-height: 1; color: var(--prune); }

.cs-bandeau-photo { margin-top: 3.2rem; width: min(100% - (2 * var(--marge-page)), 1240px); margin-inline: auto; }
.cs-bandeau-photo img { aspect-ratio: 1500 / 1000; object-fit: cover; max-height: 460px; width: 100%; }

/* Constats numerotes */
.cs-constat { margin-bottom: 2.4rem; }
.cs-constat h3 { margin-bottom: 0.35rem; }
.cs-constat p { margin-bottom: 0; }

/* Etapes de methode */
.cs-etape { margin-bottom: 2.6rem; position: relative; padding-left: 0; }

.cs-numero {
  font-family: var(--grave);
  font-size: 2.4rem;
  line-height: 1;
  color: var(--prune);
  display: block;
  margin-bottom: 0.3rem;
}

@media (min-width: 1180px) {
  .cs-numero {
    position: absolute;
    left: calc(-1 * (var(--gouttiere) + var(--ecart-cote)));
    width: var(--gouttiere);
    text-align: right;
    top: -0.35rem;
    margin: 0;
    padding-right: 0.9rem;
  }
}

/* Separateur de veines */
.cs-separateur {
  height: 220px;
  background-image: var(--veine);
  background-repeat: repeat-x;
  opacity: 0.18;
  margin: 0;
}

/* Tiroir de fonctionnalites */
.cs-tiroir {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}

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

@media (max-width: 860px) {
  .cs-tiroir, .cs-tiroir-trois { grid-template-columns: 1fr; }
}

/* Avantages en colonne, chiffres en marge */
.cs-gain { margin-bottom: 2.3rem; }
.cs-gain p { margin-bottom: 0; }

.cs-valeur {
  font-family: var(--grave);
  font-size: 1.9rem;
  line-height: 1;
  color: var(--prune);
  display: block;
}

/* Bandeau de chiffres cles */
.cs-releve-chiffre {
  background: var(--prune);
  color: var(--sur-prune);
  position: relative;
  overflow: hidden;
  padding: 2.6rem 0;
}

.cs-releve-chiffre::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--veine-claire);
  background-repeat: repeat;
  opacity: 0.08;
  pointer-events: none;
}

.cs-grille-chiffre {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.6rem;
}

.cs-chiffre strong {
  display: block;
  font-family: var(--grave);
  font-size: 2.6rem;
  line-height: 1;
  font-weight: 400;
  margin-bottom: 0.35rem;
}

.cs-chiffre span { font-size: 0.92rem; color: var(--sur-prune); opacity: 0.92; }

@media (max-width: 860px) {
  .cs-grille-chiffre { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Temoignages */
.cs-temoin { margin: 0 0 1rem; }

.cs-temoin blockquote {
  margin: 0 0 0.9rem;
  font-family: var(--grave);
  font-style: italic;
  font-size: 1.12rem;
  line-height: 1.55;
  color: var(--graphite);
}

.cs-temoin figcaption {
  font-size: 0.88rem;
  color: var(--doux);
  border-top: 1px solid var(--bordure);
  padding-top: 0.6rem;
}

.cs-temoin figcaption b { color: var(--graphite); font-weight: 600; display: block; font-size: 0.95rem; }

.cs-trio {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

@media (max-width: 900px) { .cs-trio { grid-template-columns: 1fr; } }

/* Tarifs */
.cs-taillants {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.1rem;
  align-items: start;
}

@media (max-width: 900px) { .cs-taillants { grid-template-columns: 1fr; } }

.cs-formule { display: flex; flex-direction: column; height: 100%; }
.cs-formule.est-avancee { margin-top: -12px; border-color: var(--prune); }

.cs-etiquette {
  font-family: var(--courant);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--prune);
  margin-bottom: 0.5rem;
  display: block;
}

.cs-prix {
  font-family: var(--grave);
  font-size: 3.4rem;
  line-height: 1;
  color: var(--graphite);
  display: block;
  margin: 0.4rem 0 0.15rem;
}

.cs-prix-unite { font-size: 0.88rem; color: var(--doux); display: block; margin-bottom: 0.9rem; }

.cs-formule ul {
  list-style: none;
  padding: 0;
  margin: 1rem 0 1.4rem;
  flex: 1;
}

.cs-formule li {
  position: relative;
  padding-left: 1.3rem;
  font-size: 0.94rem;
  color: var(--doux);
  margin-bottom: 0.55rem;
}

.cs-formule li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 9px;
  height: 1px;
  background: var(--peche-fort);
}

.cs-formule .cs-bouton,
.cs-formule .cs-bouton-second { width: 100%; }

.cs-note-tarif { font-size: 0.92rem; color: var(--doux); margin-top: 1.8rem; }

/* Questions */
.cs-question {
  border-bottom: 1px solid var(--bordure);
  padding: 0.2rem 0;
}

.cs-question summary {
  cursor: pointer;
  list-style: none;
  padding: 1.05rem 2.2rem 1.05rem 0;
  font-family: var(--titre);
  font-weight: 600;
  font-size: 1.06rem;
  position: relative;
}

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

.cs-question summary::after {
  content: "";
  position: absolute;
  right: 4px;
  top: 50%;
  width: 11px;
  height: 1px;
  background: var(--prune);
}

.cs-question summary::before {
  content: "";
  position: absolute;
  right: 9px;
  top: 50%;
  width: 1px;
  height: 11px;
  margin-top: -5px;
  background: var(--prune);
  transition: opacity 0.2s ease;
}

.cs-question[open] summary::before { opacity: 0; }
.cs-question p { color: var(--doux); margin: 0 0 1.1rem; font-size: 0.99rem; }

/* Formulaire */
.cs-formulaire {
  background: var(--planche);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-bonnet) var(--rayon-coupe) var(--rayon-coupe) var(--rayon-coupe);
  padding: 1.9rem 1.7rem;
}

.cs-champ { margin-bottom: 1.05rem; }

.cs-champ label {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 0.32rem;
}

.cs-champ input[type="text"],
.cs-champ input[type="email"],
.cs-champ select,
.cs-champ textarea {
  width: 100%;
  font-family: var(--courant);
  font-size: 1rem;
  color: var(--graphite);
  background: var(--nacre);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-bonnet) var(--rayon-coupe) var(--rayon-coupe) var(--rayon-coupe);
  padding: 0.72rem 0.85rem;
}

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

.cs-champ input:focus,
.cs-champ select:focus,
.cs-champ textarea:focus { border-color: var(--prune); outline: none; }

.cs-champ input:focus-visible,
.cs-champ select:focus-visible,
.cs-champ textarea:focus-visible { outline: 2px solid var(--prune); outline-offset: 2px; }

.cs-aide { font-size: 0.86rem; color: var(--doux); margin: 0.3rem 0 0; }

.cs-consentement {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
  font-size: 0.9rem;
  color: var(--doux);
  margin-bottom: 1.3rem;
}

.cs-consentement input { margin-top: 0.32rem; accent-color: var(--prune); flex: none; }

.cs-suite { font-size: 0.92rem; color: var(--doux); margin-top: 1.3rem; }

/* Pied de page */
.cs-pied {
  background: var(--peche);
  border-top: 1px solid var(--bordure);
  position: relative;
  padding: 4rem 0 0;
}

.cs-pied::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 220px;
  background-image: var(--veine);
  background-repeat: repeat-x;
  opacity: 0.15;
  pointer-events: none;
}

.cs-colonnes-pied {
  position: relative;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.3fr;
  gap: 2.2rem;
}

@media (max-width: 900px) { .cs-colonnes-pied { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .cs-colonnes-pied { grid-template-columns: 1fr; } }

.cs-colonnes-pied h4 {
  font-size: 0.82rem;
  font-family: var(--grave);
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--doux);
  margin-bottom: 0.9rem;
}

.cs-colonnes-pied ul { list-style: none; padding: 0; margin: 0; }
.cs-colonnes-pied li { margin-bottom: 0.5rem; font-size: 0.94rem; }
.cs-colonnes-pied a { color: var(--graphite); text-decoration: none; }
.cs-colonnes-pied a:hover { color: var(--prune); text-decoration: underline; }
.cs-position { font-size: 0.94rem; color: var(--doux); margin: 0.9rem 0 1rem; max-width: 30ch; }
.cs-profils { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; font-size: 0.9rem; }
.cs-mentions-editeur { font-size: 0.88rem; color: var(--doux); margin: 0.8rem 0 0; }

.cs-ourlet {
  position: relative;
  margin-top: 3rem;
  border-top: 1px solid var(--bordure);
  padding: 1.3rem 0;
  font-size: 0.86rem;
  color: var(--doux);
}

.cs-ourlet p { margin: 0; }

/* Pages interieures */
.cs-fil-ariane { font-size: 0.86rem; color: var(--doux); padding: 1.6rem 0 0; }
.cs-fil-ariane a { color: var(--doux); }

.cs-page { padding: 2.4rem 0 4.6rem; }
.cs-page h2 { font-size: 1.5rem; margin-top: 2.6rem; }
.cs-page h3 { font-size: 1.12rem; margin-top: 1.7rem; }
.cs-page table { width: 100%; border-collapse: collapse; margin-bottom: 1.4rem; font-size: 0.95rem; }
.cs-page th, .cs-page td { border: 1px solid var(--bordure); padding: 0.6rem 0.7rem; text-align: left; vertical-align: top; }
.cs-page th { background: var(--peche); font-weight: 600; }

.cs-portrait {
  float: right;
  margin: 0 0 1.2rem 1.6rem;
  max-width: 220px;
  background: var(--planche);
  padding: 10px;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-bonnet) var(--rayon-coupe) var(--rayon-coupe) var(--rayon-coupe);
  filter: saturate(0.9);
}

@media (max-width: 620px) { .cs-portrait { float: none; margin: 0 0 1.4rem; } }

.cs-encart {
  background: var(--planche);
  border: 1px solid var(--bordure);
  border-left: 3px solid var(--peche-fort);
  border-radius: var(--rayon-bonnet) var(--rayon-coupe) var(--rayon-coupe) var(--rayon-coupe);
  padding: 1.3rem 1.4rem;
  margin: 1.8rem 0;
}

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

.cs-plan-liste { list-style: none; padding: 0; }
.cs-plan-liste > li { border-bottom: 1px solid var(--bordure); padding: 1rem 0; }
.cs-plan-liste b { display: block; font-family: var(--titre); font-weight: 600; font-size: 1.04rem; }
.cs-plan-liste span { color: var(--doux); font-size: 0.95rem; }

.cs-evitement {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--prune);
  color: var(--sur-prune);
  padding: 0.7rem 1.1rem;
  z-index: 200;
}

.cs-evitement:focus { left: 0; }

.cs-centre-page { text-align: center; padding: 6rem 0; }
.cs-centre-page h1 { font-size: 2.4rem; }

/* Apparition au defilement */
.cs-monte {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.cs-monte.est-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
  .cs-monte { opacity: 1; transform: none; }
  .cs-trace rect { stroke-dashoffset: 100; transition: none; }
  .cs-carte:hover .cs-trace rect,
  .cs-carte:focus-within .cs-trace rect { stroke-dashoffset: 0; }
}
/* ------------------------------------------------------------------
   Magazine, La Fiche d ajustement.
   Meme notice technique que le reste du site: colonne centrale etroite,
   cotes en marge, coin superieur gauche adouci a 26 pixels, veines de bois
   en fil continu, contour de patron qui se trace au survol.
   Section ajoutee a la fin de la feuille, aucune regle precedente n est touchee.
   ------------------------------------------------------------------ */

/* Ouverture du magazine et des pages d article */
.cs-mag-tete {
  position: relative;
  padding: 3.4rem 0 2.6rem;
  overflow: hidden;
}

.cs-mag-tete::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 220px;
  background-image: var(--veine);
  background-repeat: repeat-x;
  opacity: 0.12;
  pointer-events: none;
}

.cs-mag-tete .cs-axe { position: relative; }
.cs-mag-tete h1 { margin-bottom: 1rem; }

.cs-mag-chapo {
  font-size: 1.18rem;
  color: var(--doux);
  margin-bottom: 1.4rem;
}

/* Ligne de cotes: angle, date, temps de lecture */
.cs-mag-cotes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.1rem;
  font-family: var(--courant);
  font-size: 0.84rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--doux);
  border-top: 1px solid var(--bordure);
  border-bottom: 1px solid var(--bordure);
  padding: 0.7rem 0;
  margin: 0 0 1.4rem;
}

.cs-mag-cotes time { font-family: var(--grave); font-size: 0.98rem; letter-spacing: 0.02em; }

.cs-mag-angle {
  font-family: var(--courant);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--prune);
}

/* Fil d Ariane du magazine, pose sur le meme filet que les pages interieures */
.cs-fil-ariane ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.cs-fil-ariane li { margin: 0; }

.cs-fil-ariane li + li::before {
  content: "\203A";
  margin-right: 0.4rem;
  color: var(--bordure);
}

/* Grille de cartes d article */
.cs-mag-grille {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.1rem;
}

.cs-mag-grille > li { margin: 0; display: flex; }

@media (max-width: 980px) { .cs-mag-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .cs-mag-grille { grid-template-columns: 1fr; } }

/* Carte d article: la carte du site, ouverte en haut par une planche photographique */
.cs-fiche {
  padding: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
}

.cs-fiche .cs-fiche-vue {
  margin: 0;
  border-bottom: 1px solid var(--bordure);
  position: relative;
  background: var(--planche);
}

.cs-fiche .cs-fiche-vue img {
  width: 100%;
  aspect-ratio: 1536 / 1024;
  object-fit: cover;
  filter: saturate(0.88);
  border-radius: calc(var(--rayon-bonnet) - 2px) var(--rayon-coupe) 0 0;
}

.cs-fiche .cs-fiche-vue::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--peche-fort);
  opacity: 0.08;
  mix-blend-mode: multiply;
  pointer-events: none;
  border-radius: calc(var(--rayon-bonnet) - 2px) var(--rayon-coupe) 0 0;
}

.cs-fiche .cs-fiche-texte {
  padding: 1.25rem 1.3rem 1.35rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.cs-fiche .cs-fiche-titre {
  font-family: var(--titre);
  font-weight: 600;
  font-size: 1.14rem;
  line-height: 1.24;
  letter-spacing: -0.022em;
  margin: 0.45rem 0 0.55rem;
  text-wrap: balance;
}

.cs-fiche .cs-fiche-titre a { color: var(--graphite); text-decoration: none; }
.cs-fiche .cs-fiche-titre a:hover { color: var(--prune); text-decoration: underline; text-underline-offset: 3px; }

.cs-fiche .cs-fiche-extrait {
  font-size: 0.96rem;
  color: var(--doux);
  margin: 0 0 1rem;
  flex: 1;
}

.cs-fiche .cs-fiche-cotes {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3rem 0.8rem;
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--doux);
  border-top: 1px solid var(--bordure);
  padding-top: 0.6rem;
  margin: 0;
}

.cs-fiche .cs-fiche-cotes time { font-family: var(--grave); font-size: 0.96rem; }

/* Entete d une page d article */
.cs-article-tete { padding: 1.8rem 0 0; }

.cs-photo-une { margin: 0 0 2.2rem; }
.cs-photo-une img { aspect-ratio: 1536 / 1024; object-fit: cover; width: 100%; }

.cs-signature-article {
  font-size: 0.9rem;
  color: var(--doux);
  margin: 0 0 1.8rem;
}

/* Exergue de chapeau */
.cs-chapo-article {
  font-family: var(--grave);
  font-size: 1.24rem;
  line-height: 1.55;
  color: var(--graphite);
  border-left: 3px solid var(--peche-fort);
  padding: 0.2rem 0 0.2rem 1.1rem;
  margin: 0 0 1.9rem;
}

/* Corps redactionnel: balises nues, mesure de lecture de 68 signes */
.cs-corps {
  max-width: 68ch;
  margin-inline: auto;
  font-size: 1.06rem;
  line-height: 1.68;
}

.cs-corps > :first-child { margin-top: 0; }

.cs-corps h2 {
  font-family: var(--titre);
  font-size: 1.72rem;
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: -0.022em;
  color: var(--graphite);
  margin: 2.9rem 0 0.5rem;
  padding-top: 1.1rem;
  position: relative;
}

.cs-corps h2::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 120px;
  height: 12px;
  background-image: var(--filet-serre);
  background-repeat: repeat-x;
  opacity: 0.85;
}

.cs-corps h3 {
  font-family: var(--titre);
  font-size: 1.18rem;
  font-weight: 600;
  line-height: 1.24;
  letter-spacing: -0.022em;
  color: var(--graphite);
  margin: 1.9rem 0 0.45rem;
  padding-left: 0.85rem;
  border-left: 2px solid var(--prune);
}

.cs-corps p { margin: 0 0 1.15rem; }

.cs-corps a { color: var(--prune); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.cs-corps a:hover { color: var(--prune-fonce); background: var(--peche); }

.cs-corps strong { font-weight: 600; color: var(--graphite); }
.cs-corps em { font-family: var(--grave); font-style: italic; font-size: 1.06em; }

.cs-corps ul,
.cs-corps ol { margin: 0 0 1.35rem; padding-left: 0; list-style: none; }

.cs-corps ul > li {
  position: relative;
  padding-left: 1.35rem;
  margin-bottom: 0.55rem;
}

.cs-corps ul > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.85em;
  width: 11px;
  height: 1px;
  background: var(--peche-fort);
}

.cs-corps ol { counter-reset: cote-corps; }

.cs-corps ol > li {
  position: relative;
  padding-left: 2rem;
  margin-bottom: 0.55rem;
  counter-increment: cote-corps;
}

.cs-corps ol > li::before {
  content: counter(cote-corps);
  position: absolute;
  left: 0;
  top: -0.1em;
  font-family: var(--grave);
  font-size: 1.16rem;
  line-height: 1.5;
  color: var(--prune);
}

.cs-corps li > ul,
.cs-corps li > ol { margin: 0.5rem 0 0.2rem; }

/* Tableau recapitulatif */
.cs-corps table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.7rem;
  font-size: 0.95rem;
  background: var(--planche);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-bonnet) var(--rayon-coupe) var(--rayon-coupe) var(--rayon-coupe);
  overflow: hidden;
}

.cs-corps thead th {
  background: var(--peche);
  font-family: var(--courant);
  font-weight: 600;
  font-size: 0.86rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--graphite);
}

.cs-corps th,
.cs-corps td {
  border-bottom: 1px solid var(--bordure);
  padding: 0.65rem 0.8rem;
  text-align: left;
  vertical-align: top;
}

.cs-corps tbody tr:last-child th,
.cs-corps tbody tr:last-child td { border-bottom: 0; }
.cs-corps tbody th { background: var(--planche); font-weight: 600; color: var(--graphite); }
.cs-corps td { color: var(--doux); }

/* Encadre et citation */
.cs-corps aside {
  background: var(--planche);
  border: 1px solid var(--bordure);
  border-left: 3px solid var(--peche-fort);
  border-radius: var(--rayon-bonnet) var(--rayon-coupe) var(--rayon-coupe) var(--rayon-coupe);
  padding: 1.25rem 1.35rem;
  margin: 1.9rem 0;
  font-size: 0.99rem;
}

.cs-corps aside > :last-child { margin-bottom: 0; }
.cs-corps aside p { color: var(--doux); }
.cs-corps aside strong { color: var(--graphite); }

.cs-corps blockquote {
  margin: 1.9rem 0;
  padding: 0 0 0 1.2rem;
  border-left: 1px solid var(--bordure);
  font-family: var(--grave);
  font-style: italic;
  font-size: 1.14rem;
  line-height: 1.55;
  color: var(--graphite);
}

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

.cs-corps figure {
  margin: 1.9rem 0;
  background: var(--planche);
  padding: 10px;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-bonnet) var(--rayon-coupe) var(--rayon-coupe) var(--rayon-coupe);
}

.cs-corps figure img { border-radius: calc(var(--rayon-bonnet) - 8px) var(--rayon-coupe) var(--rayon-coupe) var(--rayon-coupe); }

.cs-corps figcaption {
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--doux);
  margin-top: 0.6rem;
}

/* Appel a l action de fin d article */
.cs-appel-article {
  background: var(--peche);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-bonnet) var(--rayon-coupe) var(--rayon-coupe) var(--rayon-coupe);
  padding: 1.7rem 1.6rem 1.5rem;
  margin: 2.6rem 0 0;
}

.cs-appel-article .cs-mot {
  font-family: var(--titre);
  font-weight: 600;
  font-size: 1.24rem;
  letter-spacing: -0.022em;
  line-height: 1.18;
  margin: 0 0 0.6rem;
}

.cs-appel-article p { color: var(--graphite); }
.cs-appel-article .cs-duo { margin: 1.3rem 0 0; }

/* Encart auteur */
.cs-encart-auteur {
  display: flex;
  gap: 1.2rem;
  align-items: flex-start;
  background: var(--planche);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-bonnet) var(--rayon-coupe) var(--rayon-coupe) var(--rayon-coupe);
  padding: 1.5rem 1.5rem 1.3rem;
  margin: 2rem 0 0;
}

.cs-encart-auteur img {
  width: 96px;
  height: 96px;
  flex: none;
  object-fit: cover;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-bonnet) var(--rayon-coupe) var(--rayon-coupe) var(--rayon-coupe);
  filter: saturate(0.9);
}

.cs-encart-auteur .cs-role {
  font-family: var(--grave);
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--doux);
  margin: 0 0 0.2rem;
}

.cs-encart-auteur .cs-nom {
  font-family: var(--titre);
  font-weight: 600;
  font-size: 1.12rem;
  letter-spacing: -0.022em;
  margin: 0 0 0.5rem;
}

.cs-encart-auteur p { font-size: 0.96rem; color: var(--doux); margin-bottom: 0.7rem; }
.cs-encart-auteur p:last-child { margin-bottom: 0; }

@media (max-width: 560px) {
  .cs-encart-auteur { flex-direction: column; gap: 0.9rem; }
}

/* Bloc A lire aussi */
.cs-lire-aussi { background: var(--peche); padding: 3.6rem 0; margin-top: 3.4rem; }

.cs-lire-aussi .cs-titre-bloc {
  font-family: var(--titre);
  font-weight: 600;
  font-size: 1.62rem;
  letter-spacing: -0.022em;
  line-height: 1.14;
  margin: 0 0 1.6rem;
}

.cs-carte-liee { padding: 0; display: flex; flex-direction: column; width: 100%; overflow: hidden; }

.cs-carte-liee figure {
  margin: 0;
  position: relative;
  border-bottom: 1px solid var(--bordure);
  background: var(--planche);
}

.cs-carte-liee img {
  width: 100%;
  aspect-ratio: 1536 / 1024;
  object-fit: cover;
  filter: saturate(0.88);
  border-radius: calc(var(--rayon-bonnet) - 2px) var(--rayon-coupe) 0 0;
}

.cs-carte-liee .cs-titre-liee {
  font-family: var(--titre);
  font-weight: 600;
  font-size: 1.06rem;
  line-height: 1.24;
  letter-spacing: -0.022em;
  margin: 0 0 0.45rem;
  padding: 1.2rem 1.25rem 0;
}

.cs-carte-liee .cs-titre-liee a { color: var(--graphite); text-decoration: none; }
.cs-carte-liee .cs-titre-liee a:hover { color: var(--prune); text-decoration: underline; text-underline-offset: 3px; }

.cs-carte-liee .cs-mot-liee {
  font-size: 0.93rem;
  color: var(--doux);
  margin: 0;
  padding: 0 1.25rem 1.3rem;
}

/* Section Derniers articles de la page d accueil */
.cs-derniers-tete {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.8rem;
}

.cs-derniers-tete p { margin-bottom: 0; }
.cs-derniers-lien { margin-top: 2rem; }

/* Liste des articles publies, page auteur et plan du site */
.cs-mag-sommaire { list-style: none; padding: 0; margin: 0; }

.cs-mag-sommaire > li {
  border-bottom: 1px solid var(--bordure);
  padding: 0.95rem 0;
}

.cs-mag-sommaire a {
  font-family: var(--titre);
  font-weight: 600;
  font-size: 1.04rem;
  letter-spacing: -0.022em;
  color: var(--graphite);
  text-decoration: none;
}

.cs-mag-sommaire a:hover { color: var(--prune); text-decoration: underline; text-underline-offset: 3px; }

.cs-mag-sommaire span {
  display: block;
  font-size: 0.88rem;
  color: var(--doux);
  margin-top: 0.2rem;
}

.cs-mag-sommaire time { font-family: var(--grave); font-size: 0.95rem; }

/* Maillage du reseau, bandeau de pied de page. Mise en page seulement:
   les couleurs, la police et le survol restent ceux du site.
   grid-column et flex-basis font tenir le bandeau sur toute la largeur,
   que le pied de page soit une grille ou une boite flexible.
   Les raccourcis margin et padding sont evites: ils ecraseraient le retrait
   interieur d une colonne dont le bandeau herite la classe. */
[data-reseau-bloc]{grid-column:1/-1;flex-basis:100%;width:100%;margin-top:26px;padding-top:18px}
[data-reseau-titre]{font-size:.8rem;line-height:1.3;letter-spacing:.09em;text-transform:uppercase;
  font-weight:600;margin:0 0 12px}
ul[data-reseau]{list-style:none;display:flex;flex-wrap:wrap;gap:10px 26px;margin:0;padding:0}
ul[data-reseau] li{margin:0;padding:0}