/* ==========================================================================
   Poteline, feuille de style unique.
   Vocabulaire des classes emprunte au rempotage: rebord, panoramique, planche,
   bac, godet, cordeau, semis, cliche, remise. Mode clair integral.
   ========================================================================== */

:root {
  --lin: #F6EFE3;
  --lin-cuit: #EFE4D3;
  --surface: #FDF9F2;
  --terre: #2E1D10;
  --terre-douce: #6A4B31;
  --geranium: #BF176E;
  --geranium-clair: #FFF6FA;
  --cannelle: #9C5A2B;
  --bordure: #DCCBB3;
  /* Deux teintes de lecture, tirees des memes bruns, pour tenir le contraste
     du texte courant sans toucher aux aplats de la palette. */
  --cannelle-lisible: #7F4620;
  --geranium-lisible: #8E0F51;

  --utile: 1180px;
  --gouttiere: 28px;
  --bande: 18px;
  --encoche: 10px;

  --titre: "Righteous", "Trebuchet MS", sans-serif;
  --courant: "Chivo", "Helvetica Neue", Arial, sans-serif;
  --mesure: "DM Mono", "SFMono-Regular", Consolas, monospace;

  --pousse: cubic-bezier(0.18, 0.86, 0.32, 1.12);
}

/* Silhouette de jardiniere: base rentree de dix pixels de chaque cote. */
.bac,
.godet,
.parole,
.cliche-cadre,
.tableau-saison,
.bouton {
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--encoche)) 100%, var(--encoche) 100%);
}

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

html { scroll-behavior: smooth; scroll-padding-top: 92px; }

body {
  margin: 0;
  background: var(--lin);
  color: var(--terre);
  font-family: var(--courant);
  font-size: 1.0625rem;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--geranium-lisible); }
a:hover { color: var(--terre); }

h1, h2, h3, h4 {
  font-family: var(--titre);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.08;
  text-transform: lowercase;
  margin: 0 0 0.6em;
  color: var(--terre);
}
h1 { font-size: 3.25rem; }
h2 { font-size: 2.15rem; }
h3 { font-size: 1.35rem; }
h4 { font-size: 1.0625rem; }

p { margin: 0 0 1.1em; max-width: 68ch; }
strong { font-weight: 700; }

/* Surtitres et mesures en DM Mono, jamais dans un paragraphe courant. */
.surtitre {
  font-family: var(--mesure);
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cannelle-lisible);
  margin: 0 0 1.1rem;
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.surtitre::before {
  content: "";
  width: 22px;
  height: 4px;
  flex: none;
  background-image: radial-gradient(circle, var(--geranium) 2px, transparent 2px);
  background-size: 8px 4px;
}

.etiquette {
  font-family: var(--mesure);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  color: var(--cannelle-lisible);
}

.mesure { font-family: var(--mesure); font-weight: 500; }

.doux { color: var(--terre-douce); }

/* --------------------------------------------------------------------------
   Trame de points serigraphique a densite variable, trois calques superposes.
   -------------------------------------------------------------------------- */
.trame { position: relative; }
.trame::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle, var(--cannelle) 0.75px, transparent 0.76px),
    radial-gradient(circle, var(--cannelle) 1.25px, transparent 1.26px),
    radial-gradient(circle, var(--cannelle) 2px, transparent 2.01px);
  background-size: 8px 8px, 14px 14px, 22px 22px;
  background-position: 0 0, 3px 5px, 7px 11px;
  opacity: 0.18;
  -webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0.35) 45%, transparent 82%);
  mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0.35) 45%, transparent 82%);
}
.trame--gauche::after {
  -webkit-mask-image: linear-gradient(to right, #000 0%, rgba(0, 0, 0, 0.3) 40%, transparent 72%);
  mask-image: linear-gradient(to right, #000 0%, rgba(0, 0, 0, 0.3) 40%, transparent 72%);
}
.trame--dense::after { opacity: 0.26; }
.trame > * { position: relative; z-index: 1; }

/* Bandeau de transition entre une section lin et une section lin cuit. */
.sillon {
  height: 40px;
  border: 0;
  margin: 0;
  background-image:
    radial-gradient(circle, var(--cannelle) 0.75px, transparent 0.76px),
    radial-gradient(circle, var(--cannelle) 1.25px, transparent 1.26px),
    radial-gradient(circle, var(--cannelle) 2px, transparent 2.01px);
  background-size: 8px 8px, 14px 14px, 22px 22px;
  background-position: 0 0, 3px 5px, 7px 11px;
  opacity: 0.2;
}

/* --------------------------------------------------------------------------
   Largeur utile et grille de douze colonnes.
   -------------------------------------------------------------------------- */
.rang {
  width: min(100% - 2.4rem, var(--utile));
  margin-inline: auto;
}
.douze {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gouttiere);
}

/* --------------------------------------------------------------------------
   Boutons: silhouette de bac, aplat geranium ou contour cannelle.
   -------------------------------------------------------------------------- */
.bouton {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 18px 30px;
  font-family: var(--courant);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.15;
  text-align: center;
  text-decoration: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  transition: transform 160ms var(--pousse), color 160ms linear;
}
.bouton::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--encoche)) 100%, var(--encoche) 100%);
  transition: background-color 160ms linear, border-color 160ms linear;
}
.bouton--plein { color: var(--geranium-clair); }
.bouton--plein::before { background-color: var(--geranium); }
.bouton--plein:hover { color: var(--geranium-clair); transform: scale(1.03); }
.bouton--plein:hover::before { background-color: #A5115E; }

.bouton--creux { color: var(--terre); }
.bouton--creux::before {
  background-color: transparent;
  box-shadow: inset 0 0 0 2px var(--cannelle);
}
.bouton--creux:hover { color: var(--terre); transform: scale(1.03); }
.bouton--creux:hover::before {
  background-color: var(--lin-cuit);
  box-shadow: inset 0 0 0 2px var(--terre);
}
.bouton--large { width: 100%; }

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

.evitement {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--geranium);
  color: var(--geranium-clair);
  padding: 12px 20px;
  z-index: 60;
  font-weight: 700;
}
.evitement:focus {
  left: 12px;
  top: 12px;
  color: var(--geranium-clair);
}

/* --------------------------------------------------------------------------
   En tete collant, hauteur 72 pixels, 60 au defilement.
   -------------------------------------------------------------------------- */
.rebord {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--lin);
  transition: background-color 200ms linear, box-shadow 200ms linear;
}
.rebord::after {
  content: "";
  display: block;
  height: 0;
  background-image: radial-gradient(circle, var(--cannelle) 1px, transparent 1.01px);
  background-size: 9px 3px;
  opacity: 0;
  transition: opacity 200ms linear;
}
.rebord.pose {
  background: var(--surface);
  box-shadow: 0 1px 0 0 var(--bordure);
}
.rebord.pose::after { height: 3px; opacity: 0.55; }

.rebord-barre {
  height: 72px;
  display: flex;
  align-items: center;
  gap: 1.4rem;
  transition: height 200ms linear;
}
.rebord.pose .rebord-barre { height: 60px; }

.marque {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
  color: var(--terre);
  font-family: var(--titre);
  font-size: 1.4rem;
  letter-spacing: -0.01em;
  margin-right: auto;
}
.marque:hover { color: var(--cannelle-lisible); }
.marque svg { width: 34px; height: 34px; flex: none; }

.ancres {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.ancres a {
  color: var(--terre);
  text-decoration: none;
  font-size: 0.9375rem;
  padding-bottom: 3px;
  border-bottom: 2px solid transparent;
}
.ancres a:hover { color: var(--cannelle-lisible); border-bottom-color: var(--geranium); }

.rebord-bouton { padding: 12px 22px; min-height: 44px; font-size: 0.9375rem; }

.ouvrir-panneau,
.fermer-panneau {
  display: none;
  align-items: center;
  gap: 0.5rem;
  background: transparent;
  border: 2px solid var(--cannelle);
  color: var(--terre);
  font-family: var(--mesure);
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 10px 14px;
  cursor: pointer;
}

.panneau {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(100%, 420px);
  background: var(--lin);
  z-index: 50;
  padding: 1.6rem 1.6rem 3rem;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 240ms var(--pousse);
  border-left: 3px solid var(--terre);
}
.panneau[data-ouvert="oui"] { transform: translateX(0); }
.panneau ul { list-style: none; margin: 2rem 0 0; padding: 0; }
.panneau li { border-bottom: 1px solid var(--bordure); }
.panneau li a {
  display: block;
  padding: 1rem 0;
  color: var(--terre);
  text-decoration: none;
  font-family: var(--titre);
  font-size: 1.5rem;
  text-transform: lowercase;
}
.panneau li a:hover { color: var(--geranium); }
.panneau .bouton { margin-top: 2rem; }
.panneau-entete { display: flex; justify-content: space-between; align-items: center; }

/* --------------------------------------------------------------------------
   Hero panoramique: photographie pleine largeur fermee par deux bandes.
   -------------------------------------------------------------------------- */
.panoramique { padding: 0 0 2.6rem; }
.panoramique-cadre {
  position: relative;
  width: 100%;
  border-top: var(--bande) solid var(--terre);
  border-bottom: var(--bande) solid var(--terre);
  background: var(--lin-cuit);
}
.panoramique-photo {
  width: 100%;
  height: clamp(320px, 46vw, 620px);
  object-fit: cover;
  object-position: 62% 38%;
  transform: scale(1.02);
  transition: transform 520ms var(--pousse);
}
.panoramique-cadre.leve .panoramique-photo { transform: scale(1); }

.voile {
  background: rgba(246, 239, 227, 0.88);
  padding: 2.2rem 2rem 2.4rem;
  border-bottom: 3px solid var(--terre);
}
.voile h1 { margin-bottom: 0.5rem; }
.voile .chapo {
  font-size: 1.125rem;
  color: var(--terre-douce);
  margin-bottom: 1.6rem;
}
.voile-actions { display: flex; flex-wrap: wrap; gap: 0.9rem; }
.voile-actions .bouton { min-width: 220px; }
.voile-preuve {
  margin: 1.7rem 0 0;
  padding-top: 1.2rem;
  border-top: 1px solid var(--bordure);
  font-family: var(--mesure);
  font-size: 0.8125rem;
  line-height: 1.7;
  color: var(--terre-douce);
  max-width: none;
}
.voile-preuve b { color: var(--terre); font-weight: 500; }

/* --------------------------------------------------------------------------
   Sections generales, alternance lin et lin cuit.
   -------------------------------------------------------------------------- */
.planche { padding: 4.4rem 0; }
.planche--cuite { background: var(--lin-cuit); }
.planche--serree { padding: 3.2rem 0; }
.planche-titre { max-width: 22ch; }
.planche-chapo { font-size: 1.0625rem; color: var(--terre-douce); max-width: 62ch; }

/* Photographies: bandes hautes et basses, trame dans l angle, legende dessous. */
.cliche { margin: 0; }
.cliche-cadre {
  position: relative;
  border-top: 7px solid var(--terre);
  border-bottom: 7px solid var(--terre);
  overflow: hidden;
}
.cliche-cadre img {
  width: 100%;
  height: clamp(220px, 30vw, 400px);
  object-fit: cover;
}
.cliche-cadre::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 200px;
  height: 120px;
  pointer-events: none;
  background-image:
    radial-gradient(circle, var(--cannelle) 1px, transparent 1.01px),
    radial-gradient(circle, var(--cannelle) 2px, transparent 2.01px);
  background-size: 8px 8px, 18px 18px;
  opacity: 0.12;
  -webkit-mask-image: linear-gradient(to right, #000, transparent);
  mask-image: linear-gradient(to right, #000, transparent);
}
.cliche-legende {
  font-family: var(--mesure);
  font-size: 0.8125rem;
  color: var(--terre-douce);
  text-align: left;
  margin: 0.7rem 0 0;
  max-width: 70ch;
}

/* --------------------------------------------------------------------------
   Probleme: deux colonnes de texte, releve de couts en dessous.
   -------------------------------------------------------------------------- */
.terreau-texte { grid-column: span 7; }
.terreau-releve { grid-column: span 5; }
.releve {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 2px solid var(--terre);
}
.releve li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: baseline;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--bordure);
}
.releve span:first-child { font-size: 0.9375rem; }
.releve span:last-child {
  font-family: var(--mesure);
  font-weight: 500;
  color: var(--cannelle-lisible);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Solution: quatre temps numerotes sur quatre colonnes de trois.
   -------------------------------------------------------------------------- */
.semis { grid-column: span 3; }
.semis-numero {
  font-family: var(--mesure);
  font-size: 2rem;
  color: var(--geranium);
  line-height: 1;
  display: block;
  margin-bottom: 0.6rem;
}
.semis h3 { margin-bottom: 0.4rem; }
.semis p { font-size: 0.9375rem; }
.semis::before {
  content: "";
  display: block;
  height: 3px;
  width: 100%;
  background: var(--terre);
  margin-bottom: 1.1rem;
}

/* --------------------------------------------------------------------------
   Fonctionnalites: bacs en trois colonnes.
   -------------------------------------------------------------------------- */
.godet {
  grid-column: span 4;
  background: var(--surface);
  border: 1px solid var(--bordure);
  padding: 1.7rem 1.6rem 1.9rem;
}
.godet h3 { margin-bottom: 0.35rem; }
.godet .pointille {
  display: block;
  width: 26px;
  height: 5px;
  margin: 0 0 0.9rem;
  background-image: radial-gradient(circle, var(--geranium) 2.5px, transparent 2.6px);
  background-size: 9px 5px;
}
.godet p { font-size: 0.9375rem; margin-bottom: 0; }
.godet .etiquette { display: block; margin-top: 0.9rem; }

/* --------------------------------------------------------------------------
   Avantages: bande de quatre chiffres et texte de resultat.
   -------------------------------------------------------------------------- */
.recolte { grid-column: span 3; }
.recolte b {
  display: block;
  font-family: var(--mesure);
  font-weight: 400;
  font-size: 2.6rem;
  line-height: 1;
  color: var(--terre);
  margin-bottom: 0.5rem;
}
.recolte span { display: block; font-size: 0.9375rem; color: var(--terre-douce); }

.bandeau-chiffres {
  background: var(--surface);
  border-top: 3px solid var(--terre);
  border-bottom: 3px solid var(--terre);
  padding: 2.4rem 0;
}

/* --------------------------------------------------------------------------
   Preuve sociale: trois paroles de balcon.
   -------------------------------------------------------------------------- */
.parole {
  grid-column: span 4;
  background: var(--surface);
  border: 1px solid var(--bordure);
  padding: 1.8rem 1.6rem;
  margin: 0;
  display: flex;
  flex-direction: column;
}
.parole blockquote { margin: 0 0 1.2rem; }
.parole blockquote p { font-size: 0.9375rem; }
.parole blockquote p:last-child { margin-bottom: 0; }
.parole figcaption {
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid var(--bordure);
  font-size: 0.875rem;
  color: var(--terre-douce);
}
.parole figcaption b { display: block; color: var(--terre); font-weight: 700; }
.parole figcaption .etiquette { display: block; margin-top: 0.3rem; }

/* --------------------------------------------------------------------------
   Tarifs: trois bacs, celui du centre depasse de vingt pixels.
   -------------------------------------------------------------------------- */
.bac {
  grid-column: span 4;
  background: var(--surface);
  border: 1px solid var(--bordure);
  padding: 2rem 1.7rem 2.2rem;
  display: flex;
  flex-direction: column;
}
.bac--vedette {
  margin-top: -20px;
  border: 3px solid var(--terre);
  background: var(--lin);
}
.bac-fanion {
  display: inline-block;
  font-family: var(--mesure);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--geranium);
  color: var(--geranium-clair);
  padding: 5px 12px;
  margin-bottom: 0.9rem;
}
.bac h3 { margin-bottom: 0.3rem; }
.bac-prix {
  font-family: var(--mesure);
  font-weight: 400;
  font-size: 2.6rem;
  line-height: 1;
  color: var(--terre);
  margin: 0.8rem 0 0.2rem;
}
.bac-unite {
  font-family: var(--mesure);
  font-size: 0.8125rem;
  color: var(--cannelle-lisible);
  margin-bottom: 1rem;
}
.bac-cible { font-size: 0.9375rem; color: var(--terre-douce); }
.bac-inclus {
  list-style: none;
  margin: 1.2rem 0 1.8rem;
  padding: 1.2rem 0 0;
  border-top: 1px solid var(--bordure);
  font-size: 0.9375rem;
  line-height: 1.6;
}
.bac-inclus li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.7rem;
}
.bac-inclus li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 9px;
  height: 9px;
  background: var(--geranium);
  border-radius: 50%;
}
.bac .bouton { margin-top: auto; }
.tarifs-note { font-size: 0.9375rem; color: var(--terre-douce); margin-top: 2rem; }

/* --------------------------------------------------------------------------
   Foire aux questions sur huit colonnes centrees.
   -------------------------------------------------------------------------- */
.cordeau { grid-column: 3 / span 8; }
.question {
  border-bottom: 1px solid var(--bordure);
  background: transparent;
}
.question:first-of-type { border-top: 2px solid var(--terre); }
.question summary {
  cursor: pointer;
  list-style: none;
  padding: 1.15rem 2.6rem 1.15rem 0;
  position: relative;
  font-family: var(--titre);
  font-size: 1.2rem;
  line-height: 1.25;
  text-transform: lowercase;
  color: var(--terre);
}
.question summary::-webkit-details-marker { display: none; }
.question summary::after {
  content: "+";
  position: absolute;
  right: 0.4rem;
  top: 1rem;
  font-family: var(--mesure);
  font-size: 1.5rem;
  color: var(--geranium);
  line-height: 1;
  transform-origin: 50% 50%;
  transition: transform 180ms var(--pousse);
}
.question[open] summary::after { transform: rotate(45deg); }
.question summary:hover { color: var(--cannelle-lisible); }
.question-reponse { padding: 0 2.6rem 1.4rem 0; }
.question-reponse p { font-size: 0.9375rem; margin-bottom: 0.9rem; }
.question-reponse p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Formulaire sur sept colonnes, encadre de reassurance sur quatre.
   -------------------------------------------------------------------------- */
.arrosoir { grid-column: span 7; }
.reassurance { grid-column: 9 / span 4; }
.reassurance-bloc {
  background: var(--surface);
  border: 1px solid var(--bordure);
  padding: 1.6rem;
}
.reassurance-bloc h3 { font-size: 1.15rem; }
.reassurance-bloc ul {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
}
.reassurance-bloc li { padding: 0.7rem 0; border-bottom: 1px solid var(--bordure); }
.reassurance-bloc li:last-child { border-bottom: 0; padding-bottom: 0; }

.champ { margin-bottom: 1.2rem; }
.champ label {
  display: block;
  font-family: var(--mesure);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  color: var(--cannelle-lisible);
  margin-bottom: 0.4rem;
}
.champ input[type="text"],
.champ input[type="email"],
.champ select,
.champ textarea {
  width: 100%;
  font-family: var(--courant);
  font-size: 1rem;
  color: var(--terre);
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-bottom: 2px solid var(--cannelle);
  padding: 0.75rem 0.85rem;
}
.champ textarea { resize: vertical; }
.champ input:hover,
.champ select:hover,
.champ textarea:hover { border-color: var(--terre); }
.champ-aide { font-size: 0.875rem; color: var(--terre-douce); margin: 0.4rem 0 0; }

.consentement {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  font-size: 0.875rem;
  line-height: 1.55;
  margin-bottom: 1.4rem;
}
.consentement input { margin-top: 0.35rem; width: 18px; height: 18px; flex: none; }

.suite-formulaire {
  font-size: 0.875rem;
  color: var(--terre-douce);
  margin-top: 1.2rem;
}

/* --------------------------------------------------------------------------
   Pied de page: la remise, quatre colonnes.
   -------------------------------------------------------------------------- */
.remise {
  background: var(--lin-cuit);
  border-top: 3px solid var(--terre);
  padding: 3.4rem 0 1.6rem;
}
.remise-colonnes {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.3fr;
  gap: var(--gouttiere);
}
.remise h3 {
  font-family: var(--mesure);
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cannelle-lisible);
  margin-bottom: 1rem;
}
.remise ul { list-style: none; margin: 0 0 1.4rem; padding: 0; font-size: 0.9375rem; }
.remise li { margin-bottom: 0.5rem; }
.remise a { color: var(--terre); text-decoration: none; }
.remise a:hover { color: var(--geranium-lisible); text-decoration: underline; }
.remise-position { font-size: 0.9375rem; color: var(--terre-douce); max-width: 34ch; }
.remise-editeur { font-size: 0.875rem; color: var(--terre-douce); line-height: 1.6; }
.reglette {
  margin-top: 2.4rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--bordure);
  font-size: 0.8125rem;
  color: var(--terre-douce);
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.2rem;
  justify-content: space-between;
}
.reglette a { color: var(--terre); }

/* --------------------------------------------------------------------------
   Pages interieures: colonne de lecture.
   -------------------------------------------------------------------------- */
.entete-page {
  background: var(--lin-cuit);
  border-bottom: 3px solid var(--terre);
  padding: 3.2rem 0 2.8rem;
}
.fil {
  font-family: var(--mesure);
  font-size: 0.8125rem;
  color: var(--terre-douce);
  margin-bottom: 1rem;
}
.fil a { color: var(--cannelle-lisible); }
.lecture { max-width: 76ch; padding: 3.2rem 0 4rem; }
.lecture h2 { font-size: 1.75rem; margin-top: 2.4rem; }
.lecture h3 { margin-top: 1.8rem; }
.lecture ul, .lecture ol { padding-left: 1.2rem; }
.lecture li { margin-bottom: 0.55rem; }
.lecture table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
  margin: 1.4rem 0 2rem;
}
.lecture th, .lecture td {
  text-align: left;
  padding: 0.7rem 0.8rem;
  border-bottom: 1px solid var(--bordure);
  vertical-align: top;
}
.lecture th { font-family: var(--mesure); font-weight: 500; font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--cannelle-lisible); }
.lecture thead tr { border-bottom: 2px solid var(--terre); }

.portrait {
  float: none;
  margin: 0 0 1.6rem;
  max-width: 260px;
}
.portrait img { border-top: 5px solid var(--terre); border-bottom: 5px solid var(--terre); }
.profils { list-style: none; padding: 0; margin: 1.4rem 0 0; display: flex; flex-wrap: wrap; gap: 0.8rem; }
.profils a {
  display: inline-block;
  font-family: var(--mesure);
  font-size: 0.8125rem;
  text-decoration: none;
  color: var(--terre);
  border: 1px solid var(--cannelle);
  padding: 6px 12px;
}
.profils a:hover { background: var(--lin-cuit); color: var(--terre); }

.encadre {
  background: var(--surface);
  border-left: 5px solid var(--geranium);
  padding: 1.4rem 1.6rem;
  margin: 2rem 0;
}
.encadre p:last-child { margin-bottom: 0; }

.plan-liste { list-style: none; padding: 0; }
.plan-liste > li {
  border-top: 1px solid var(--bordure);
  padding: 1.1rem 0;
}
.plan-liste > li:first-child { border-top: 2px solid var(--terre); }
.plan-liste a { font-family: var(--titre); font-size: 1.2rem; text-transform: lowercase; text-decoration: none; color: var(--terre); }
.plan-liste a:hover { color: var(--geranium-lisible); }
.plan-liste p { font-size: 0.9375rem; margin: 0.3rem 0 0; color: var(--terre-douce); }

.centre-page { text-align: left; padding: 4.4rem 0 5rem; }
.centre-page .bouton { margin-top: 1rem; }

/* --------------------------------------------------------------------------
   Signature d animation: agrandissement bref a l apparition.
   -------------------------------------------------------------------------- */
.leve-toi {
  opacity: 0;
  transform: scale(0.955);
}
.leve-toi.leve {
  opacity: 1;
  transform: scale(1);
  transition: opacity 260ms linear, transform 260ms var(--pousse);
}
/* Sans script, rien ne se cache: les blocs restent lisibles en l etat. */
@media (scripting: none) {
  .leve-toi { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   Adaptations.
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  h1 { font-size: 3.9rem; }
  .panoramique-cadre { display: block; }
  .voile {
    position: absolute;
    left: 0;
    bottom: 0;
    top: 0;
    width: 41%;
    max-width: 560px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-bottom: 0;
    border-right: 3px solid var(--terre);
    padding: 2.4rem 2.6rem;
  }
  .voile h1 { max-width: 14ch; }
}

@media (max-width: 1023px) {
  .terreau-texte,
  .terreau-releve,
  .semis,
  .godet,
  .recolte,
  .parole,
  .bac,
  .cordeau,
  .arrosoir,
  .reassurance { grid-column: 1 / -1; }
  .bac--vedette { margin-top: 0; }
  .remise-colonnes { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .ancres, .rebord-bouton { display: none; }
  .ouvrir-panneau, .fermer-panneau { display: inline-flex; }
  .marque { font-size: 1.25rem; }
}

@media (max-width: 720px) {
  :root { --bande: 10px; --gouttiere: 20px; }
  h1 { font-size: 2.4rem; }
  h2 { font-size: 1.72rem; }
  .planche { padding: 3.2rem 0; }
  .remise-colonnes { grid-template-columns: 1fr; }
  .reglette { justify-content: flex-start; }
}

@media (max-width: 600px) {
  .voile-actions .bouton { width: 100%; min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .leve-toi { transform: none; }
  .leve-toi.leve { transition: opacity 120ms linear; transform: none; }
  .bouton, .panneau, .panoramique-photo, .rebord, .rebord-barre { transition: none; }
  .bouton--plein:hover, .bouton--creux:hover { transform: none; }
  .panoramique-photo { transform: none; }
  .panneau { transition: none; }
}

@media print {
  .rebord, .panneau, .voile-actions, .arrosoir { display: none; }
  body { background: #fff; }
}
/* ==========================================================================
   Le Carnet de Rebord, section magazine.
   Rien n est modifie au dessus: ce bloc n ajoute que des classes nouvelles et
   la mise en forme des balises nues du corps redactionnel. Meme palette, meme
   silhouette de jardiniere, meme trame de points, meme agrandissement bref.
   Vocabulaire des classes: carnet, sommaire, fiche, exergue, corps, liee.
   ========================================================================== */

/* Silhouette de jardiniere, identique a celle des bacs et des godets:
   la base est rentree de dix pixels de chaque cote. */
.fiche,
.liee,
.encart-auteur,
.relance,
.exergue,
.corps aside,
.corps blockquote,
.carnet-vignette {
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--encoche)) 100%, var(--encoche) 100%);
}

/* --------------------------------------------------------------------------
   Entete du magazine et entete d article: bande lin cuit fermee par un filet,
   fil d Ariane en DM Mono, trame de points montant du bas.
   -------------------------------------------------------------------------- */
.carnet-entete,
.entete-article {
  position: relative;
  background: var(--lin-cuit);
  border-bottom: 3px solid var(--terre);
  padding: 3rem 0 2.8rem;
  overflow: hidden;
}
.carnet-entete::after,
.entete-article::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle, var(--cannelle) 0.75px, transparent 0.76px),
    radial-gradient(circle, var(--cannelle) 1.25px, transparent 1.26px),
    radial-gradient(circle, var(--cannelle) 2px, transparent 2.01px);
  background-size: 8px 8px, 14px 14px, 22px 22px;
  background-position: 0 0, 3px 5px, 7px 11px;
  opacity: 0.2;
  -webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0.3) 45%, transparent 84%);
  mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0.3) 45%, transparent 84%);
}
.carnet-entete > *,
.entete-article > * { position: relative; z-index: 1; }

.carnet-entete h1 { max-width: 16ch; margin-bottom: 0.7rem; }
.carnet-chapo {
  font-size: 1.125rem;
  line-height: 1.68;
  color: var(--terre-douce);
  max-width: 64ch;
  margin-bottom: 1.6rem;
}
.carnet-reperes {
  list-style: none;
  margin: 0;
  padding: 1.1rem 0 0;
  border-top: 1px solid var(--bordure);
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.6rem;
  font-family: var(--mesure);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  color: var(--cannelle-lisible);
}
.carnet-reperes li { display: flex; align-items: center; gap: 0.6rem; }
.carnet-reperes li::before {
  content: "";
  width: 14px;
  height: 4px;
  flex: none;
  background-image: radial-gradient(circle, var(--geranium) 2px, transparent 2.1px);
  background-size: 7px 4px;
}

/* --------------------------------------------------------------------------
   Grille de cartes d article: trois colonnes, deux puis une en dessous.
   -------------------------------------------------------------------------- */
.sommaire {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gouttiere);
}
.sommaire > li { display: flex; }

/* --------------------------------------------------------------------------
   Carte d article: silhouette de bac, photographie fermee par deux filets,
   angle en DM Mono, titre en Righteous, date et duree en pied de carte.
   -------------------------------------------------------------------------- */
.fiche {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--bordure);
  transition: transform 160ms var(--pousse), border-color 160ms linear;
}
.fiche:hover { transform: scale(1.02); border-color: var(--terre); }
.fiche:focus-within { border-color: var(--terre); }

.fiche-cadre {
  display: block;
  position: relative;
  overflow: hidden;
  border-bottom: 7px solid var(--terre);
}
.fiche-cadre img {
  width: 100%;
  height: clamp(170px, 20vw, 220px);
  object-fit: cover;
}
.fiche-cadre::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 180px;
  height: 100px;
  pointer-events: none;
  background-image:
    radial-gradient(circle, var(--cannelle) 1px, transparent 1.01px),
    radial-gradient(circle, var(--cannelle) 2px, transparent 2.01px);
  background-size: 8px 8px, 18px 18px;
  opacity: 0.14;
  -webkit-mask-image: linear-gradient(to right, #000, transparent);
  mask-image: linear-gradient(to right, #000, transparent);
}

.fiche-texte {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 1.4rem 1.5rem 1.6rem;
}
.fiche-angle {
  font-family: var(--mesure);
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cannelle-lisible);
  margin: 0 0 0.8rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.fiche-angle::before {
  content: "";
  width: 18px;
  height: 4px;
  flex: none;
  background-image: radial-gradient(circle, var(--geranium) 2px, transparent 2.1px);
  background-size: 8px 4px;
}
.fiche-titre {
  font-size: 1.28rem;
  line-height: 1.14;
  margin: 0 0 0.7rem;
}
.fiche-titre a {
  color: var(--terre);
  text-decoration: none;
}
.fiche-titre a:hover { color: var(--geranium-lisible); }
.fiche-extrait {
  font-size: 0.9375rem;
  color: var(--terre-douce);
  margin-bottom: 1.2rem;
  max-width: none;
}
.fiche-pied {
  margin: auto 0 0;
  padding-top: 0.9rem;
  border-top: 1px solid var(--bordure);
  font-family: var(--mesure);
  font-size: 0.8125rem;
  color: var(--cannelle-lisible);
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1rem;
  justify-content: space-between;
  max-width: none;
}

/* --------------------------------------------------------------------------
   Entete d article: fil d Ariane, releve de publication, titre.
   -------------------------------------------------------------------------- */
.entete-article h1 { margin-bottom: 0; max-width: 24ch; }
.releve-article {
  list-style: none;
  margin: 0 0 1.4rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.4rem;
  font-family: var(--mesure);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  color: var(--cannelle-lisible);
}
.releve-article li { display: flex; align-items: center; gap: 0.55rem; }
.releve-article li + li::before {
  content: "";
  width: 5px;
  height: 5px;
  flex: none;
  border-radius: 50%;
  background: var(--geranium);
}
.releve-article a { color: var(--cannelle-lisible); }
.releve-article a:hover { color: var(--terre); }
.releve-article .est-angle {
  text-transform: uppercase;
  font-weight: 500;
  color: var(--terre);
}

/* --------------------------------------------------------------------------
   Colonne de lecture de l article et photographie a la une.
   -------------------------------------------------------------------------- */
.article-carnet { padding: 2.6rem 0 4rem; }
.article-photo { margin: 0 0 2.4rem; }
.article-photo img {
  width: 100%;
  height: clamp(240px, 33vw, 440px);
  object-fit: cover;
  border-top: var(--bande) solid var(--terre);
  border-bottom: var(--bande) solid var(--terre);
}

/* Exergue de chapeau: aplat de surface, filet geranium a gauche, texte plus grand. */
.exergue {
  background: var(--surface);
  border-left: 5px solid var(--geranium);
  border-top: 1px solid var(--bordure);
  border-bottom: 1px solid var(--bordure);
  padding: 1.5rem 1.7rem;
  margin: 0 0 2.4rem;
  max-width: 70ch;
}
.exergue p {
  font-size: 1.125rem;
  line-height: 1.62;
  color: var(--terre);
  margin: 0;
  max-width: none;
}

/* --------------------------------------------------------------------------
   Corps redactionnel: balises nues, aucune classe. La mesure de lecture ne
   depasse jamais soixante huit caracteres.
   -------------------------------------------------------------------------- */
.corps {
  max-width: 68ch;
  font-size: 1.0625rem;
  line-height: 1.72;
}
.corps > :first-child { margin-top: 0; }

.corps h2 {
  font-size: 1.9rem;
  line-height: 1.1;
  margin: 2.8rem 0 0.9rem;
  padding-top: 1.1rem;
  border-top: 3px solid var(--terre);
}
.corps h3 {
  font-size: 1.3rem;
  margin: 2rem 0 0.7rem;
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
}
.corps h3::before {
  content: "";
  width: 20px;
  height: 5px;
  flex: none;
  background-image: radial-gradient(circle, var(--geranium) 2.5px, transparent 2.6px);
  background-size: 9px 5px;
}
.corps p { margin: 0 0 1.15em; max-width: none; }
.corps strong { font-weight: 700; color: var(--terre); }
.corps em { font-style: italic; }

.corps a { color: var(--geranium-lisible); text-decoration: underline; text-underline-offset: 3px; }
.corps a:hover { color: var(--terre); text-decoration-color: var(--geranium); }

.corps ul,
.corps ol {
  margin: 0 0 1.5rem;
  padding: 0 0 0 1.5rem;
}
.corps ul { list-style: none; padding-left: 0; }
.corps ul li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.6rem;
}
.corps ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 9px;
  height: 9px;
  background: var(--geranium);
  border-radius: 50%;
}
.corps ol { list-style: none; counter-reset: rebord; padding-left: 0; }
.corps ol li {
  position: relative;
  padding-left: 2.2rem;
  margin-bottom: 0.6rem;
  counter-increment: rebord;
}
.corps ol li::before {
  content: counter(rebord);
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--mesure);
  font-weight: 500;
  font-size: 0.9375rem;
  color: var(--geranium-lisible);
}
.corps li ul,
.corps li ol { margin: 0.6rem 0 0; }

/* Tableau recapitulatif: en tete en DM Mono, filets de terre en haut et en bas. */
.corps table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
  line-height: 1.55;
  margin: 1.8rem 0 2.2rem;
  background: var(--surface);
  border-top: 3px solid var(--terre);
  border-bottom: 3px solid var(--terre);
}
.corps caption {
  font-family: var(--mesure);
  font-size: 0.8125rem;
  color: var(--terre-douce);
  text-align: left;
  padding-bottom: 0.6rem;
}
.corps th,
.corps td {
  text-align: left;
  vertical-align: top;
  padding: 0.72rem 0.9rem;
  border-bottom: 1px solid var(--bordure);
}
.corps thead th {
  font-family: var(--mesure);
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--cannelle-lisible);
  background: var(--lin-cuit);
}
.corps thead tr { border-bottom: 2px solid var(--terre); }
.corps tbody tr:last-child th,
.corps tbody tr:last-child td { border-bottom: 0; }
.corps tbody th {
  font-family: var(--courant);
  font-weight: 700;
  color: var(--terre);
}

/* Encadre: aplat de surface, silhouette de bac, filet cannelle au dessus. */
.corps aside {
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-top: 3px solid var(--cannelle);
  padding: 1.4rem 1.6rem 1.5rem;
  margin: 2.2rem 0;
  font-size: 0.9375rem;
}
.corps aside p { margin-bottom: 0.8rem; }
.corps aside p:last-child { margin-bottom: 0; }
.corps aside ul,
.corps aside ol { margin-bottom: 0; }

/* Citation: filet geranium a gauche, texte en Chivo un peu plus grand. */
.corps blockquote {
  margin: 2.2rem 0;
  padding: 1.2rem 1.5rem;
  background: var(--lin-cuit);
  border-left: 5px solid var(--geranium);
}
.corps blockquote p {
  font-size: 1.0625rem;
  line-height: 1.62;
  color: var(--terre);
  margin-bottom: 0.7rem;
}
.corps blockquote p:last-child { margin-bottom: 0; }

.corps figure { margin: 2rem 0; }
.corps figure img {
  border-top: 7px solid var(--terre);
  border-bottom: 7px solid var(--terre);
}
.corps figcaption {
  font-family: var(--mesure);
  font-size: 0.8125rem;
  color: var(--terre-douce);
  margin-top: 0.7rem;
}

/* --------------------------------------------------------------------------
   Relance vers le produit, encart auteur, bloc A lire aussi.
   -------------------------------------------------------------------------- */
.relance {
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-top: 3px solid var(--terre);
  padding: 1.9rem 1.8rem 2rem;
  margin: 2.8rem 0 0;
  max-width: 70ch;
}
.relance p { margin-bottom: 1.2rem; }
.relance p:last-of-type { margin-bottom: 1.5rem; }

.encart-auteur {
  display: flex;
  gap: 1.3rem;
  align-items: flex-start;
  background: var(--lin-cuit);
  border: 1px solid var(--bordure);
  padding: 1.6rem 1.7rem;
  margin: 2.4rem 0 0;
  max-width: 70ch;
}
.encart-auteur img {
  width: 96px;
  height: 96px;
  flex: none;
  object-fit: cover;
  border-top: 5px solid var(--terre);
  border-bottom: 5px solid var(--terre);
}
.encart-auteur p { font-size: 0.9375rem; margin-bottom: 0.7rem; max-width: none; }
.encart-auteur p:last-child { margin-bottom: 0; }
.encart-auteur .encart-auteur-nom {
  font-family: var(--titre);
  font-size: 1.2rem;
  line-height: 1.1;
  text-transform: lowercase;
  color: var(--terre);
  margin-bottom: 0.5rem;
}

.lire-aussi {
  margin-top: 3.4rem;
  padding-top: 2rem;
  border-top: 3px solid var(--terre);
}
.lire-aussi-grille {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gouttiere);
}
.liee {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--bordure);
  transition: transform 160ms var(--pousse), border-color 160ms linear;
}
.liee:hover { transform: scale(1.02); border-color: var(--terre); }
.liee:focus-within { border-color: var(--terre); }
.liee-cadre {
  display: block;
  border-bottom: 5px solid var(--terre);
  overflow: hidden;
}
.liee-cadre img {
  width: 100%;
  height: clamp(130px, 15vw, 165px);
  object-fit: cover;
}
.liee-texte { padding: 1.1rem 1.2rem 1.3rem; }
.liee-titre {
  font-family: var(--titre);
  font-size: 1.06rem;
  line-height: 1.16;
  text-transform: lowercase;
  margin: 0 0 0.5rem;
  max-width: none;
}
.liee-titre a { color: var(--terre); text-decoration: none; }
.liee-titre a:hover { color: var(--geranium-lisible); }
.liee-accroche {
  font-size: 0.875rem;
  color: var(--terre-douce);
  margin: 0;
  max-width: none;
}

/* --------------------------------------------------------------------------
   Derniers articles sur la page d accueil: meme grille, trois cartes,
   et un lien de bas de section vers le sommaire complet.
   -------------------------------------------------------------------------- */
.derniers-actions {
  margin-top: 2.4rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.6rem;
}
.derniers-note {
  font-family: var(--mesure);
  font-size: 0.8125rem;
  color: var(--terre-douce);
  margin: 0;
  max-width: 46ch;
}

/* Vignette de rappel du magazine, employee sur auteur.html et le plan du site. */
.carnet-vignette {
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-top: 3px solid var(--cannelle);
  padding: 1.5rem 1.6rem;
  margin: 0 0 2rem;
  max-width: 70ch;
}
.carnet-vignette p:last-child { margin-bottom: 0; }

/* Liste datee des articles, employee sur auteur.html et plan-du-site.html. */
.carnet-liste { list-style: none; margin: 0; padding: 0; }
.carnet-liste > li {
  border-top: 1px solid var(--bordure);
  padding: 1rem 0;
}
.carnet-liste > li:first-child { border-top: 2px solid var(--terre); }
.carnet-liste a {
  font-family: var(--titre);
  font-size: 1.15rem;
  line-height: 1.18;
  text-transform: lowercase;
  text-decoration: none;
  color: var(--terre);
}
.carnet-liste a:hover { color: var(--geranium-lisible); }
.carnet-liste .etiquette {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 1rem;
  margin: 0.35rem 0 0;
}

/* Titre de colonne du pied de page sur les pages du magazine: la structure des
   titres y est reservee au corps redactionnel, donc le meme rendu est porte par
   un paragraphe. Aucune regle existante n est touchee. */
.remise .remise-titre {
  font-family: var(--mesure);
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cannelle-lisible);
  margin: 0 0 1rem;
}

/* --------------------------------------------------------------------------
   Adaptations du magazine.
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .sommaire { grid-template-columns: repeat(2, 1fr); }
  .lire-aussi-grille { grid-template-columns: repeat(2, 1fr); }
  .carnet-entete h1 { max-width: none; }
}

@media (max-width: 720px) {
  .sommaire { grid-template-columns: 1fr; }
  .lire-aussi-grille { grid-template-columns: 1fr; }
  .corps h2 { font-size: 1.6rem; }
  .corps table { display: block; overflow-x: auto; }
  .encart-auteur { flex-direction: column; }
  .article-carnet { padding: 2rem 0 3rem; }
}

@media (prefers-reduced-motion: reduce) {
  .fiche, .liee { transition: none; }
  .fiche:hover, .liee:hover { transform: none; }
}

@media print {
  .lire-aussi, .relance, .derniers-actions { display: none; }
  .corps { max-width: none; }
}

/* 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}