/* ==========================================================================
   L3B2R — Lydie Bourdon · Feuille de style principale
   Charte : Cornet Communication (affiche tarifs 2025) — crème, vert émeraude,
   botanique fin, bord de mer. Conception mobile-first.
   ========================================================================== */

:root{
  /* Palette */
  --teal:#12857a;
  --teal-dark:#0b6157;
  --teal-deep:#0a4a43;
  --teal-light:#7fc9bf;
  --teal-wash:#e8f4f2;

  --cream:#fbf8f2;
  --sand:#f3ece0;
  --sand-dark:#e2d3ba;

  --ink:#2f3a38;
  --grey:#6f7d7a;
  --line:#e6ded0;
  --white:#ffffff;

  /* Typo */
  --font-body:'Quicksand',"Trebuchet MS","Segoe UI",system-ui,sans-serif;
  --font-script:'Parisienne',"Brush Script MT","Segoe Script",cursive;

  /* Divers */
  --radius:18px;
  --radius-lg:26px;
  --shadow:0 4px 18px rgba(10,74,67,.07);
  --shadow-hover:0 12px 30px rgba(10,74,67,.13);
  --wrap:1120px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--white);
  line-height:1.65;
  font-size:16px;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--teal-dark)}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
.script{font-family:var(--font-script);font-weight:400}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ===== Titres ===== */
h1,h2,h3,h4{color:var(--teal-deep);line-height:1.25;font-weight:600}
h1{font-size:clamp(28px,5vw,42px)}
h2{font-size:clamp(24px,3.4vw,32px);margin-bottom:14px}
h3{font-size:19px;margin-bottom:8px}
.kicker{
  color:var(--teal);font-weight:700;letter-spacing:2.5px;
  font-size:12px;text-transform:uppercase;margin-bottom:10px;
}
.lead{color:var(--grey);max-width:680px;margin-bottom:34px;font-size:17px}
.section-head{margin-bottom:8px}

/* ===== Boutons ===== */
.btn{
  display:inline-block;background:var(--teal);color:#fff !important;
  padding:12px 26px;border-radius:999px;font-weight:700;font-size:15px;
  text-decoration:none;border:2px solid var(--teal);
  box-shadow:0 3px 12px rgba(18,133,122,.28);
  transition:transform .18s ease,background .18s ease,box-shadow .18s ease;
  cursor:pointer;
}
.btn:hover,.btn:focus-visible{background:var(--teal-dark);border-color:var(--teal-dark);transform:translateY(-2px);box-shadow:var(--shadow-hover)}
.btn.ghost{background:transparent;color:var(--teal-dark) !important;box-shadow:none}
.btn.ghost:hover{background:var(--teal-wash);transform:translateY(-2px)}
.btn.light{background:#fff;color:var(--teal-deep) !important;border-color:#fff}
.btn.light:hover{background:var(--sand);border-color:var(--sand)}
.btn.outline-light{background:transparent;color:#fff !important;border-color:rgba(255,255,255,.7);box-shadow:none}
.btn.outline-light:hover{background:rgba(255,255,255,.14);border-color:#fff}
.cta-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center}

/* ===== Header ===== */
.site-header{
  position:sticky;top:0;z-index:60;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.nav{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  max-width:var(--wrap);margin:0 auto;padding:10px 20px;
}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--teal-deep)}
.brand img{width:52px}
.brand-name{font-weight:700;letter-spacing:1px;font-size:16px;line-height:1.2}
.brand-sub{font-size:11px;color:var(--grey);letter-spacing:.6px}

.nav-toggle{
  display:flex;flex-direction:column;justify-content:center;gap:5px;
  width:44px;height:44px;padding:10px;border:1px solid var(--line);
  border-radius:12px;background:#fff;cursor:pointer;
}
.nav-toggle span{display:block;height:2px;background:var(--teal-deep);border-radius:2px;transition:.25s}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.nav-menu{list-style:none;display:none}
.nav-menu a{text-decoration:none;color:var(--ink);font-size:15px;font-weight:500;white-space:nowrap}
.nav-menu a:hover,.nav-menu a[aria-current="page"]{color:var(--teal)}
.nav-menu a[aria-current="page"]{font-weight:700}

@media(max-width:919px){
  .nav-menu{
    position:absolute;left:0;right:0;top:100%;
    background:#fff;border-bottom:1px solid var(--line);
    flex-direction:column;padding:8px 20px 20px;gap:2px;
    box-shadow:0 12px 24px rgba(10,74,67,.08);
  }
  .nav-menu.open{display:flex}
  .nav-menu li{border-top:1px solid var(--line)}
  .nav-menu li:first-child{border-top:0}
  .nav-menu a{display:block;padding:13px 4px}
  .nav-menu a.btn{margin-top:14px;text-align:center;padding:13px 26px;color:#fff !important}
}
@media(min-width:920px){
  .nav-toggle{display:none}
  .nav-menu{display:flex;align-items:center;gap:20px}
  .nav-menu a.btn{color:#fff !important;padding:11px 20px}
}
@media(min-width:920px) and (max-width:1080px){
  .brand-sub{display:none}
  .nav-menu{gap:15px}
  .nav-menu a{font-size:14px}
}

/* ===== Bandeaux / sections ===== */
section{padding:60px 0}
@media(min-width:768px){section{padding:76px 0}}
.alt{background:var(--cream)}
.sand{background:var(--sand)}

/* Séparateur « dune » */
.dune{display:block;width:100%;height:auto;margin-bottom:-1px}

/* ===== Hero accueil ===== */
.hero{
  background:linear-gradient(170deg,var(--cream) 0%,var(--sand) 100%);
  position:relative;overflow:hidden;
}
.hero-in{
  display:flex;flex-wrap:wrap;align-items:center;gap:40px;
  max-width:var(--wrap);margin:0 auto;padding:52px 20px 60px;
}
.hero-txt{flex:1 1 380px}
.hero .quote{
  font-family:var(--font-script);color:var(--teal-dark);
  font-size:clamp(34px,6.2vw,54px);line-height:1.15;margin-bottom:18px;
}
.hero h1{font-size:clamp(20px,2.6vw,25px);font-weight:600;margin-bottom:14px}
.hero p.sub{color:var(--grey);font-size:17px;max-width:520px;margin-bottom:28px}
.hero-visual{flex:0 1 320px;display:flex;justify-content:center}
.hero-visual img{width:300px;max-width:78vw}
.badges{display:flex;gap:10px;margin-top:28px;flex-wrap:wrap}
.badge{
  background:rgba(255,255,255,.75);border:1px solid var(--line);
  padding:7px 15px;border-radius:999px;font-size:13px;color:var(--teal-deep);
}

/* ===== Cartes ===== */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:22px}
.cards.two{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:28px 24px;box-shadow:var(--shadow);
  transition:transform .2s ease,box-shadow .2s ease;
}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover)}
.card .ico{
  width:52px;height:52px;border-radius:15px;background:var(--teal-wash);
  display:flex;align-items:center;justify-content:center;font-size:25px;margin-bottom:16px;
}
.card p{font-size:15px;color:var(--grey)}
.card .meta{display:inline-block;margin-top:16px;font-size:14px;color:var(--teal);font-weight:700}

/* ===== Étapes ===== */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:22px;counter-reset:step;margin-top:34px}
.step{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px 22px 24px;position:relative}
.step::before{
  counter-increment:step;content:counter(step);
  position:absolute;top:-17px;left:22px;width:36px;height:36px;border-radius:50%;
  background:var(--teal);color:#fff;display:flex;align-items:center;justify-content:center;
  font-weight:700;box-shadow:0 3px 10px rgba(18,133,122,.35);
}
.step h3{margin:6px 0 6px;font-size:17px}
.step p{font-size:14.5px;color:var(--grey)}

/* ===== Listes à coches ===== */
.check{list-style:none;margin-top:18px}
.check li{padding-left:30px;position:relative;margin-bottom:11px;font-size:15.5px}
.check li::before{content:"✓";position:absolute;left:0;top:0;color:var(--teal);font-weight:700;font-size:17px}

/* ===== Encadré ===== */
.note-box{
  background:var(--cream);border-left:4px solid var(--teal);
  border-radius:0 14px 14px 0;padding:20px 22px;margin-top:22px;
}
.note-box p{font-size:15px;margin-top:8px;color:var(--ink)}
.warn-box{
  background:#fff8ec;border:1px solid #f0d9ac;border-left:4px solid #d98b1e;
  border-radius:0 14px 14px 0;padding:16px 20px;margin-bottom:26px;font-size:14.5px;color:#7a5312;
}

/* ===== Deux colonnes ===== */
.split{display:flex;gap:44px;align-items:center;flex-wrap:wrap}
.split .col{flex:1 1 360px}
.media-ph{
  flex:1 1 300px;min-height:320px;border-radius:var(--radius-lg);
  background:linear-gradient(160deg,var(--teal-wash),var(--sand-dark));
  border:1px solid var(--line);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;color:var(--teal-deep);font-size:14.5px;padding:24px;gap:8px;
}
.media-ph .ph-ico{font-size:32px}

/* ===== Tableau tarifs ===== */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-bottom:14px}
table.tarifs{width:100%;border-collapse:separate;border-spacing:0;min-width:520px;font-size:15px}
table.tarifs th,table.tarifs td{padding:14px 16px;text-align:center;border-bottom:1px solid var(--line)}
table.tarifs thead th{background:var(--teal);color:#fff;font-weight:600;border-bottom:0}
table.tarifs thead th:first-child{background:transparent}
table.tarifs thead th:nth-child(2){border-radius:12px 0 0 0}
table.tarifs thead th:last-child{border-radius:0 12px 0 0}
table.tarifs tbody th{text-align:left;background:var(--cream);color:var(--teal-deep);font-weight:600}
table.tarifs td{background:#fff;font-weight:700;color:var(--teal-deep);font-size:17px}
table.tarifs td small{display:block;font-weight:400;font-size:12.5px;color:var(--grey)}

.price-list{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;margin-top:8px}
.price-list li{
  background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px 20px;
  display:flex;justify-content:space-between;gap:16px;align-items:baseline;
}
.price-list .lbl{font-weight:600;color:var(--teal-deep)}
.price-list .lbl small{display:block;font-weight:400;color:var(--grey);font-size:13px}
.price-list .val{font-weight:700;color:var(--teal);white-space:nowrap}

/* ===== Bandeau B2B / résa ===== */
.band{
  background:linear-gradient(135deg,var(--teal-deep) 0%,var(--teal) 100%);
  color:#fff;border-radius:var(--radius-lg);padding:44px 36px;
}
.band h2,.band h3{color:#fff}
.band p{opacity:.93;max-width:600px}
.band.center{text-align:center}
.band.center p{margin:0 auto 24px}
.band .note{font-size:13px;opacity:.8;margin-top:18px}

/* ===== Puces communes ===== */
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.chip{background:#fff;border:1px solid var(--line);border-radius:999px;padding:7px 16px;font-size:14px;color:var(--teal-deep)}

/* ===== Avis ===== */
.stars{color:#e8a628;letter-spacing:3px;margin-bottom:10px}
.card blockquote{font-style:italic;color:var(--grey);font-size:15px}
.who{margin-top:14px;font-size:13px;color:var(--teal-deep);font-weight:600}

/* ===== FAQ ===== */
.faq{max-width:820px}
.faq details{background:#fff;border:1px solid var(--line);border-radius:14px;padding:4px 20px;margin-bottom:12px}
.faq summary{cursor:pointer;padding:16px 0;font-weight:600;color:var(--teal-deep);list-style:none;position:relative;padding-right:32px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:14px;font-size:22px;color:var(--teal);font-weight:400}
.faq details[open] summary::after{content:"–"}
.faq details p{padding-bottom:18px;color:var(--grey);font-size:15px}

/* ===== Formulaire ===== */
.form{display:grid;gap:16px;max-width:620px}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:14px;font-weight:600;color:var(--teal-deep)}
.field input,.field select,.field textarea{
  font-family:inherit;font-size:16px;color:var(--ink);
  padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:#fff;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--teal-light);border-color:var(--teal)}
.field textarea{min-height:150px;resize:vertical}
.field .hint{font-size:12.5px;color:var(--grey)}
.hp{position:absolute;left:-9999px}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--grey)}
.consent input{margin-top:4px;width:18px;height:18px;flex:0 0 auto}

.contact-list{list-style:none;display:grid;gap:14px;margin-top:6px}
.contact-list li{display:flex;gap:12px;align-items:flex-start;font-size:15.5px}
.contact-list .ci{
  flex:0 0 auto;width:40px;height:40px;border-radius:12px;background:var(--teal-wash);
  display:flex;align-items:center;justify-content:center;font-size:18px;
}
.contact-list a{text-decoration:none;font-weight:600}
.contact-list a:hover{text-decoration:underline}

/* ===== Footer ===== */
.site-footer{background:var(--teal-deep);color:#cfe4e0;padding:48px 0 22px;margin-top:0}
.foot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:32px;margin-bottom:30px}
.site-footer h3{color:#fff;font-size:15px;letter-spacing:1px;margin-bottom:14px}
.site-footer p{font-size:14.5px}
.site-footer ul{list-style:none}
.site-footer li{margin-bottom:9px;font-size:14.5px}
.site-footer a{color:#cfe4e0;text-decoration:none}
.site-footer a:hover{color:#fff;text-decoration:underline}
.foot-quote{font-family:var(--font-script);font-size:22px;color:var(--teal-light);display:block;margin-top:10px}
.legal-notice{
  border-top:1px solid rgba(255,255,255,.16);padding-top:20px;
  font-size:12.5px;line-height:1.65;opacity:.78;max-width:880px;margin:0 auto;text-align:center;
}
.legal-notice + .legal-notice{border-top:0;padding-top:10px}

/* ===== Fil d'ariane ===== */
.page-head{background:var(--cream);padding:38px 0 34px;border-bottom:1px solid var(--line)}
.breadcrumb{font-size:13px;color:var(--grey);margin-bottom:10px}
.breadcrumb a{color:var(--grey);text-decoration:none}
.breadcrumb a:hover{color:var(--teal)}

/* ===== Bandeau de maquette (à retirer avant mise en ligne) ===== */
.tag-maquette{
  position:fixed;bottom:14px;right:14px;z-index:99;
  background:#b45309;color:#fff;padding:7px 15px;border-radius:999px;
  font-size:12px;font-weight:700;box-shadow:0 3px 12px rgba(0,0,0,.25);
}

/* ===== Utilitaires ===== */
.mt-0{margin-top:0}
.mt-16{margin-top:16px}
.mt-24{margin-top:24px}
.mt-32{margin-top:32px}
.center{text-align:center}
.mx-auto{margin-left:auto;margin-right:auto}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important;scroll-behavior:auto !important}
}

/* ===== Bloc avis Google ===== */
.avis-bloc{
  display:flex;gap:36px;flex-wrap:wrap;align-items:center;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:34px 32px;box-shadow:var(--shadow);
}
.avis-note{
  flex:0 0 auto;text-align:center;min-width:180px;
  padding:22px 26px;border-radius:var(--radius);background:var(--cream);
  border:1px solid var(--line);
}
.avis-note .stars{font-size:22px;margin-bottom:6px}
.note-chiffre{
  font-size:46px;font-weight:700;color:var(--teal-deep);line-height:1;
  font-variant-numeric:tabular-nums;
}
.note-chiffre span{font-size:20px;font-weight:500;color:var(--grey)}
.note-detail{font-size:14px;color:var(--grey);margin-top:8px}
.avis-txt{flex:1 1 380px}
.avis-txt p{color:var(--grey);font-size:16px}
.avis-maj{font-size:12.5px;color:var(--grey);margin-top:16px;opacity:.8}

/* ===== Actualités : grille explicite, le module Facebook ne dépasse jamais 500 px ===== */
.actus{display:grid;grid-template-columns:1fr 500px;gap:40px;align-items:center}
@media(max-width:940px){.actus{grid-template-columns:1fr}}
.actus-txt{color:var(--grey);font-size:16px;align-self:center}
.actus-txt strong{color:var(--teal-deep)}

.fb-lazy{
  width:100%;max-width:500px;margin:0 auto;
  border:1px dashed var(--sand-dark);border-radius:var(--radius-lg);
  background:#fff;overflow:hidden;
}
.fb-invite{padding:38px 24px;text-align:center}
.fb-invite .fb-ico{font-size:30px;color:var(--teal);margin-bottom:10px}
.fb-invite p{color:var(--grey);font-size:15px}
.fb-invite strong{color:var(--teal-deep)}
.fb-note{font-size:13.5px;margin-top:10px}
.fb-lazy iframe{display:block;width:100%;height:640px;border:0}
.fb-lazy.charge{border-style:solid;border-color:var(--line);box-shadow:var(--shadow)}

/* ===== Photos réelles ===== */
.photo-fig{flex:1 1 300px;margin:0}
.photo-fig img{
  width:100%;height:auto;border-radius:var(--radius-lg);border:1px solid var(--line);
  box-shadow:var(--shadow);
}
.photo-fig figcaption{
  font-size:13px;color:var(--grey);margin-top:10px;text-align:center;font-style:italic;
}
.split .photo-fig{max-width:420px}


/* ===== Encart séance découverte ===== */
.decouverte{
  display:flex;gap:26px;align-items:center;justify-content:space-between;flex-wrap:wrap;
  background:var(--teal-wash);border:1px solid #cfe6e2;border-radius:var(--radius-lg);
  padding:26px 30px;
}
.decouverte h3{font-size:20px}
.decouverte > div{flex:1 1 320px}

/* ===== Carte de la zone d'intervention ===== */
.carte-zone{max-width:460px}
.carte-zone a{display:block;border-radius:var(--radius-lg);overflow:hidden}
.carte-zone a:focus-visible{outline:3px solid var(--teal);outline-offset:3px}
.carte-zone img{transition:transform .3s ease}
.carte-zone a:hover img{transform:scale(1.02)}
.attribution{font-size:11.5px;opacity:.75;font-style:normal}
.attribution a{color:var(--grey)}

/* ===== Tableau des horaires ===== */
table.horaires th[scope="row"]{width:38%;font-size:15px}
table.horaires td{font-variant-numeric:tabular-nums}

/* ===== Renvoi vers la page Facebook ===== */
.suivre{
  margin-top:22px;text-align:center;color:var(--grey);font-size:15.5px;
  max-width:620px;margin-left:auto;margin-right:auto;
}
.suivre a{color:var(--teal-dark);font-weight:600;white-space:nowrap}
.suivre a:hover{color:var(--teal)}

/* ===== Retour après envoi du formulaire ===== */
.retour-envoi{
  border-radius:var(--radius);padding:22px 24px;margin-bottom:26px;
  border:1px solid var(--line);
}
.retour-envoi .titre{font-weight:700;font-size:17px;margin-bottom:6px}
.retour-envoi p{font-size:15.5px}
.retour-envoi a{font-weight:600}
.retour-envoi:focus{outline:none}
.retour-envoi.ok{background:var(--teal-wash);border-color:#a9d9d1}
.retour-envoi.ok .titre{color:var(--teal-deep)}
.retour-envoi.ok p{color:var(--ink)}
.retour-envoi.erreur{background:#fff8ec;border-color:#f0d9ac}
.retour-envoi.erreur .titre{color:#7a5312}
.retour-envoi.erreur p{color:#7a5312}

/* Mention sous les boutons de paiement en ligne (précâblé — voir PAIEMENT_ACTIF) */
.paiement-note{display:block;font-size:13px;color:#6f7d7a;line-height:1.45;margin-top:8px;flex-basis:100%}

/* ===== Diaporama =====
   Les photos sont EMPILÉES : une seule grille, toutes dans la même case.
   La hauteur du bloc est donc celle de la plus grande, et elle ne bouge
   plus jamais — un empilement en position absolue aurait fait s'effondrer
   le cadre, et la page aurait sauté à chaque transition.
   Toutes les vues partagent le même rapport 4:5, ce qui rend l'empilement
   parfaitement stable. */
.diapo .diapo-cadre{
  display:grid;border-radius:var(--radius-lg);overflow:hidden;
  border:1px solid var(--line);box-shadow:var(--shadow);
}
.diapo .diapo-cadre img{
  grid-area:1/1;width:100%;height:auto;display:block;
  border:0;border-radius:0;box-shadow:none;
  opacity:0;transition:opacity .9s ease-in-out;
}
.diapo .diapo-cadre img.on{opacity:1}

/* Sans JavaScript, aucune image ne porte « on » au-delà de la première :
   celle-ci reste visible, et le bloc se comporte comme une photo ordinaire. */
.diapo figcaption{display:flex;flex-direction:column;align-items:center;gap:8px}
.diapo-legende{min-height:1.3em}
.diapo-barre{display:flex;align-items:center;gap:10px}

.diapo-points{display:flex;gap:7px}
.diapo-point{
  width:9px;height:9px;padding:0;border-radius:50%;cursor:pointer;
  border:1px solid var(--teal);background:transparent;
  transition:background .25s ease, transform .25s ease;
}
.diapo-point.on{background:var(--teal)}
.diapo-point:hover{transform:scale(1.25)}
.diapo-point:focus-visible,.diapo-pause:focus-visible{
  outline:2px solid var(--teal);outline-offset:3px;
}

/* La pause n'apparaît que si le JavaScript l'a activée : un bouton qui ne
   met rien en pause est pire qu'un bouton absent. */
.diapo-pause{
  width:20px;height:20px;padding:0;border:0;background:transparent;cursor:pointer;
  color:var(--teal);line-height:1;
}
.diapo-pause::before{content:"❙❙";font-size:11px;letter-spacing:1px}
.diapo-pause[aria-pressed="true"]::before{content:"▶";font-size:12px}

/* Qui a demandé moins d'animations dans son système n'en reçoit aucune.
   Les pastilles restent : on navigue à la main, le contenu reste atteignable. */
@media (prefers-reduced-motion:reduce){
  .diapo .diapo-cadre img{transition:none}
}

/* ===== Actualités =====
   Elles arrivent après l'affichage de la page, par un petit fichier lu en
   JavaScript. Deux conséquences visibles ici :
   · le conteneur part masqué et n'apparaît qu'une fois rempli — sinon un
     titre « Actualités » resterait seul au-dessus du vide pendant que le
     fichier charge, et parfois pour toujours ;
   · le texte garde les retours à la ligne que Lydie a tapés (pre-line),
     plutôt que d'être recomposé en un pavé. Elle écrit court, en aérant. */
/* ⚠️ La classe s'appelle « fil-actus » et non « actus » : .actus existe DÉJÀ
   plus haut dans cette feuille — c'est la grille du bloc Facebook, avec sa
   colonne fixe de 500 px et son align-items:center. Nommer les deux pareil
   donnait des cartes flottantes, centrées les unes par rapport aux autres,
   sans qu'aucune règle écrite ici ne le demande. Le défaut ne se voyait pas
   dans le code : il fallait photographier la page. (Deuxième collision de
   classe de la semaine, après .pied.) */
.fil-actus{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
           gap:22px;align-items:stretch}
.fil-actus.colonne{grid-template-columns:1fr;gap:16px}
.actu{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:24px 22px;box-shadow:var(--shadow);
  border-left:4px solid var(--teal-light);
}
.actu-date{
  font-size:13px;color:var(--teal);font-weight:700;letter-spacing:.4px;
  text-transform:uppercase;margin:0 0 6px;
}
.actu h3{font-size:19px;line-height:1.3;margin:0 0 10px}
.actu-texte{font-size:15px;color:var(--grey);white-space:pre-line;margin:0}
.actu-lien{display:inline-block;margin-top:14px;font-size:14px;font-weight:700;color:var(--teal)}

/* Dans la colonne de l'accueil, les cartes s'allègent : elles y sont un
   aperçu, pas la rubrique. Le reste est sur actualites.html. */
.fil-actus.colonne .actu{padding:18px 18px;box-shadow:none}
.fil-actus.colonne .actu h3{font-size:17px}