/* =============================================================================
   Les jardins de Longpré — VERSION CLAIRE
   Fond papier aquarelle, illustrations de l'illustratrice en premier rôle,
   photographies en appui.

   Feuille INDÉPENDANTE de celle de la version sombre : les deux versions
   coexistent, on ne veut pas qu'une retouche ici casse l'autre.
   ========================================================================== */

:root{
  --papier:     #faf5ea;   /* le fond : le blanc cassé chaud du papier aquarelle */
  --papier-2:   #f2e9d8;   /* encarts, aplats */
  --encre:      #2b2a24;   /* texte courant */
  --encre-vif:  #1d2114;   /* titres */
  --sauge:      #56633f;   /* le vert des dessins */
  --sauge-clair:#8fa073;
  --terre:      #b2622d;   /* le terracotta, en accent rare */
  --filet:      rgba(43,42,36,.16);

  --serif: 'Prata', Georgia, serif;
  --sans:  'Jost', system-ui, -apple-system, sans-serif;

  --large:   1240px;
  --lisible: 720px;
  --marge:   clamp(20px, 5vw, 64px);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}

body{
  margin:0;
  background:var(--papier);
  color:var(--encre);
  font-family:var(--sans);
  font-weight:300;
  font-size:16.5px;
  line-height:1.75;
  text-wrap:pretty;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}

img{display:block;max-width:100%}
a{color:var(--sauge);transition:color .2s ease}
a:hover{color:var(--terre)}
::selection{background:#dce6c8;color:var(--encre-vif)}
:focus-visible{outline:2px solid var(--sauge);outline-offset:3px}

h1,h2,h3{font-family:var(--serif);font-weight:400;margin:0;color:var(--encre-vif)}

/* =============================================================================
   LE POINT CLÉ — les aquarelles
   Les sept dessins de 2020 ont été détourés et réenregistrés en WebP RGBA :
   le fond blanc du scan est devenu transparent, les pigments se posent donc
   directement sur le papier crème sans rectangle visible. Aucun blend-mode
   n'est nécessaire — mais le fond DOIT rester clair : ces aquarelles sont
   peintes en transparence et disparaîtraient sur du sombre.
   Toute aquarelle ajoutée ici doit être détourée de la même façon.
   ========================================================================== */

.aqua{margin:0 auto}
.aqua--large{width:min(100%,900px)}
.aqua--moyen{width:min(100%,420px)}
.aqua--petit{width:min(100%,190px)}

/* Impression manuscrite pour les intertitres, comme la signature du logo. */
.manuscrit{
  font-family:var(--serif);font-style:italic;
  color:var(--sauge);font-size:clamp(15px,1.5vw,18px);
  letter-spacing:.01em;
}

.kicker{
  font-size:11px;letter-spacing:.42em;text-transform:uppercase;
  color:var(--terre);margin-bottom:20px;
}

.section{max-width:var(--large);margin:0 auto;padding:0 var(--marge)}
.section-aeree{padding-top:clamp(72px,8vw,120px);padding-bottom:clamp(72px,8vw,120px)}

.lien-file{
  display:inline-block;text-decoration:none;color:var(--sauge);
  font-size:11px;letter-spacing:.3em;text-transform:uppercase;
  border-bottom:1px solid var(--sauge-clair);padding-bottom:5px;
  transition:border-color .25s ease,color .2s ease;
}
.lien-file:hover{color:var(--terre);border-color:var(--terre)}

.bouton{
  display:inline-block;text-decoration:none;
  background:var(--sauge);color:var(--papier);
  padding:16px 38px;font-size:11px;letter-spacing:.3em;text-transform:uppercase;
  border:1px solid var(--sauge);
  transition:background .25s ease,color .25s ease;
}
.bouton:hover{background:transparent;color:var(--sauge)}
.bouton--creux{background:transparent;color:var(--sauge)}
.bouton--creux:hover{background:var(--sauge);color:var(--papier)}

/* =============================================================================
   EN-TÊTE — clair, posé, le logo aquarelle au centre
   ========================================================================== */

.entete{background:var(--papier);border-bottom:1px solid var(--filet);
  position:sticky;top:0;z-index:150}
.entete__grille{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:14px var(--marge);gap:16px;
}
.burger{
  display:flex;align-items:center;gap:12px;background:none;border:none;
  cursor:pointer;color:var(--encre-vif);padding:0;font-family:var(--sans);
  font-size:11px;letter-spacing:.3em;text-transform:uppercase;
  transition:opacity .2s ease;
}
.burger:hover{opacity:.55}
.burger__traits{display:flex;flex-direction:column;gap:5px}
.burger__traits span{width:28px;height:1.5px;background:var(--encre-vif);display:block}
.burger__traits span:last-child{width:18px}

.marque{text-decoration:none;display:block;text-align:center}
.marque img{width:74px;height:auto;margin:0 auto}

.entete__contact{text-align:right}
.entete__contact a{
  text-decoration:none;color:var(--sauge);border:1px solid var(--sauge-clair);
  padding:10px 20px;font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  display:inline-block;transition:background .25s ease,color .25s ease;
}
.entete__contact a:hover{background:var(--sauge);color:var(--papier);border-color:var(--sauge)}

/* =============================================================================
   MENU PLEIN ÉCRAN — version claire
   Même comportement JS que la version sombre, habillage inversé.
   ========================================================================== */

.menu{
  position:fixed;inset:0;z-index:200;background:var(--papier);
  opacity:0;pointer-events:none;transition:opacity .45s ease;
}
.menu.est-ouvert{opacity:1;pointer-events:auto}
.menu__grille{display:grid;grid-template-columns:1fr 1fr;height:100%}
.menu__visuel{position:relative;overflow:hidden;background:var(--papier-2);
  display:grid;place-items:center;padding:clamp(24px,4vw,64px)}
.menu__visuel img{
  position:absolute;max-width:min(78%,520px);height:auto;
  opacity:0;transition:opacity .6s ease;
}
.menu__visuel img.est-active{opacity:1}
.menu__lieu{
  position:absolute;left:clamp(20px,3vw,44px);bottom:clamp(20px,3vw,36px);
  font-size:10px;letter-spacing:.4em;text-transform:uppercase;color:rgba(43,42,36,.5);
}
.menu__panneau{display:flex;flex-direction:column;justify-content:space-between;
  padding:clamp(24px,4vh,44px) clamp(24px,4vw,64px);overflow-y:auto}
.menu__fermer{
  align-self:flex-end;background:none;cursor:pointer;
  border:1px solid var(--filet);color:var(--encre);
  width:48px;height:48px;border-radius:50%;font-size:17px;
  transition:border-color .25s ease,color .25s ease;
}
.menu__fermer:hover{border-color:var(--sauge);color:var(--sauge)}
.menu__liens{display:flex;flex-direction:column;padding:16px 0}
.menu__lien{
  display:flex;align-items:baseline;gap:16px;text-decoration:none;
  color:var(--encre);padding:clamp(6px,.9vh,12px) 0;
  transition:color .25s ease,padding-left .3s ease;
}
.menu__lien:hover{color:var(--terre);padding-left:12px}
.menu__lien[aria-current="page"]{color:var(--sauge)}
.menu__num{font-size:11px;letter-spacing:.28em;color:var(--sauge-clair)}
.menu__titre{font-family:var(--serif);font-size:clamp(20px,2.8vh,30px);line-height:1.15}
.menu__lien-hote{opacity:0;transform:translateY(20px);
  transition:opacity .45s ease,transform .45s ease}
.menu.est-ouvert .menu__lien-hote{opacity:1;transform:none}
.menu.est-ouvert .menu__lien-hote:nth-child(1){transition-delay:.08s}
.menu.est-ouvert .menu__lien-hote:nth-child(2){transition-delay:.12s}
.menu.est-ouvert .menu__lien-hote:nth-child(3){transition-delay:.16s}
.menu.est-ouvert .menu__lien-hote:nth-child(4){transition-delay:.20s}
.menu.est-ouvert .menu__lien-hote:nth-child(5){transition-delay:.24s}
.menu.est-ouvert .menu__lien-hote:nth-child(6){transition-delay:.28s}
.menu.est-ouvert .menu__lien-hote:nth-child(7){transition-delay:.32s}
.menu.est-ouvert .menu__lien-hote:nth-child(8){transition-delay:.36s}
.menu.est-ouvert .menu__lien-hote:nth-child(9){transition-delay:.40s}
.menu.est-ouvert .menu__lien-hote:nth-child(10){transition-delay:.44s}
.menu.est-ouvert .menu__lien-hote:nth-child(11){transition-delay:.48s}
.menu__pied{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
  font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:rgba(43,42,36,.5)}
.menu__pied a{text-decoration:none;color:inherit}
.menu__reseaux{display:flex;gap:20px}

/* =============================================================================
   HERO — le plan aquarellé du domaine tient la page, sans photo derrière
   ========================================================================== */

.hero{text-align:center;padding:clamp(46px,6vw,86px) var(--marge) 0;
  max-width:var(--large);margin:0 auto}
.hero h1{font-size:clamp(38px,5.4vw,72px);line-height:1.08;margin:0 0 18px}
.hero__accroche{font-size:clamp(16px,1.5vw,19px);line-height:1.75;
  max-width:52ch;margin:0 auto 30px;color:rgba(43,42,36,.82)}
.hero__plan{margin-top:clamp(30px,4vw,52px)}

/* =============================================================================
   BLOCS
   ========================================================================== */

.manifeste{max-width:var(--lisible);margin:0 auto;
  padding:clamp(64px,8vw,120px) var(--marge);text-align:center}
.manifeste p{font-family:var(--serif);font-size:clamp(21px,2.4vw,31px);
  line-height:1.5;margin:0;color:var(--encre-vif)}

.duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,72px);align-items:center}
.duo--inverse .duo__texte{order:-1}
.duo h2{font-size:clamp(24px,2.6vw,36px);line-height:1.2;margin-bottom:16px}
.duo p{margin:0 0 22px;color:rgba(43,42,36,.82)}

/* Cartes des rubriques : photo réelle en haut, dessin en médaillon. */
.rubriques{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,28px)}
.rubrique{
  display:block;text-decoration:none;color:inherit;background:var(--papier);
  border:1px solid var(--filet);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.rubrique:hover{transform:translateY(-4px);border-color:var(--sauge-clair);
  box-shadow:0 14px 34px rgba(43,42,36,.10)}
.rubrique__img{overflow:hidden}
.rubrique__img img{width:100%;aspect-ratio:4/3;object-fit:cover;
  transition:transform 1.2s cubic-bezier(.2,.6,.2,1)}
.rubrique:hover .rubrique__img img{transform:scale(1.04)}
.rubrique__corps{padding:22px 24px 26px}
.rubrique__titre{font-family:var(--serif);font-size:21px;color:var(--encre-vif);
  margin-bottom:7px;display:block}
.rubrique__texte{font-size:14.5px;line-height:1.6;color:rgba(43,42,36,.7);display:block}

/* Bandeau crème avec une aquarelle en vedette. */
.bandeau{background:var(--papier-2)}
.bandeau__contenu{max-width:var(--large);margin:0 auto;
  padding:clamp(64px,8vw,110px) var(--marge)}

/* Revue de presse. */
.revues{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,22px)}
.revue{display:flex;flex-direction:column;gap:12px;text-decoration:none;
  background:var(--papier);border:1px solid var(--filet);
  padding:clamp(22px,2.4vw,30px);transition:border-color .25s ease,transform .2s ease}
.revue:hover{border-color:var(--sauge-clair);transform:translateY(-3px)}
.revue__media{font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--terre)}
.revue__cite{margin:0;font-family:var(--serif);font-size:clamp(15px,1.2vw,17.5px);
  line-height:1.55;color:var(--encre-vif);flex:1}
.revue__lire{font-size:11px;letter-spacing:.26em;text-transform:uppercase;
  color:rgba(43,42,36,.55)}
.revue:hover .revue__lire{color:var(--sauge)}

/* =============================================================================
   PIED DE PAGE
   ========================================================================== */

.pied{background:var(--papier-2);border-top:1px solid var(--filet);
  margin-top:clamp(72px,8vw,120px)}
.pied__haut{max-width:var(--large);margin:0 auto;
  padding:clamp(44px,5vw,68px) var(--marge) 28px;
  display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap;align-items:flex-start}
.pied__marque{font-family:var(--serif);font-size:19px;color:var(--encre-vif);margin-bottom:12px}
.pied__adresse{font-size:14px;line-height:1.9;color:rgba(43,42,36,.72)}
.pied__adresse a{text-decoration:none}
.pied__listes{display:flex;gap:clamp(26px,4vw,56px);flex-wrap:wrap}
.pied__titre{font-size:10px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--terre);margin-bottom:12px}
.pied__liens{display:flex;flex-direction:column;gap:8px;font-size:14px}
.pied__liens a{text-decoration:none;color:rgba(43,42,36,.78)}
.pied__liens a:hover{color:var(--terre)}
.pied__bas{max-width:var(--large);margin:0 auto;padding:0 var(--marge) 26px;
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:rgba(43,42,36,.42)}

/* =============================================================================
   ANIMATIONS
   ========================================================================== */

/* Les apparitions passent par assets/js/apparitions.js : IntersectionObserver
   pose .est-vu quand l'élément entre à l'écran. On n'utilise plus
   `animation-timeline: view()`, que seul Chrome comprend — Safari et Firefox
   n'animaient rien du tout.

   Rien n'est masqué tant que .js-anim n'est pas posée sur <html> : si le
   script ne se charge pas, la page reste entièrement lisible. */

.js-anim .rv,
.js-anim .rv-serie > *{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .75s cubic-bezier(.2,.6,.2,1),
             transform .75s cubic-bezier(.2,.6,.2,1);
  will-change:opacity,transform;
}
.js-anim .rv.est-vu,
.js-anim .rv-serie > *.est-vu{
  opacity:1;transform:none;will-change:auto;
}

/* Variantes — le mouvement suit le sens de lecture du bloc. */
.js-anim .rv--gauche{transform:translateX(-34px)}
.js-anim .rv--droite{transform:translateX(34px)}
.js-anim .rv--zoom{transform:scale(.94)}
.js-anim .rv--voile{transform:none}          /* fondu seul, sans déplacement */
.js-anim .rv--bas{transform:translateY(46px)} /* montée plus ample */

/* Une aquarelle apparaît autrement qu'un bloc de texte : elle se pose, comme
   un pinceau qu'on repose sur le papier. */
.js-anim .aqua.rv,
.js-anim .aqua-hero{
  transform:translateY(20px) scale(.97);
  transition-duration:1.05s;
}
.js-anim .aqua.rv.est-vu,
.js-anim .aqua-hero.est-vu{transform:none}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
  html{scroll-behavior:auto}
}

/* =============================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width:900px){
  .menu__grille{grid-template-columns:1fr}
  .menu__visuel{display:none}
  .duo{grid-template-columns:1fr}
  .duo--inverse .duo__texte{order:0}
  .rubriques{grid-template-columns:1fr}
  .revues{grid-template-columns:1fr}
  .burger__mot{display:none}
  .marque img{width:58px}
  .entete__contact a{padding:9px 14px;font-size:10px;letter-spacing:.16em}
  .pied__haut{flex-direction:column}
}

/* La ligne manuscrite heritait de la taille du paragraphe qui l'entoure
   (manifeste, hero) : on la rend independante partout. */
.manifeste .manuscrit,
.hero .manuscrit{font-size:clamp(15px,1.4vw,18px);line-height:1.6}

/* =============================================================================
   PAGES INTÉRIEURES — ajouté le 28/08/2026
   -----------------------------------------------------------------------------
   Parti pris : les onze pages intérieures gardent EXACTEMENT le markup de la
   version sombre. Rien à réécrire dans le HTML, seule cette feuille change le
   rendu. Concrètement, trois inversions à faire ici :

     1. le hero passe de « photo plein cadre + voile noir + texte blanc » à
        « titre sur papier, puis une bande photo dessous » (flex + order) ;
     2. tout ce qui écrivait en blanc sur une surimpression sombre (panneaux,
        bandeaux) repasse en texte encre sur fond papier ;
     3. les champs de formulaire quittent le bloc nuit pour le papier crème.

   On ne touche jamais aux noms de classes : un agent qui copie une page sombre
   obtient une page claire correcte sans y penser.
   ========================================================================== */

/* --- Hero des pages intérieures -------------------------------------------
   Le markup pose l'image AVANT le contenu. On remet l'ordre visuel à l'endroit
   avec `order` plutôt que de demander à chaque page de déplacer sa balise. */

.hero--court{
  display:flex;flex-direction:column;
  min-height:0;padding:clamp(40px,5vw,70px) 0 0;
  text-align:left;max-width:none;
}
.hero--court .hero__contenu{
  order:1;position:relative;width:100%;
  max-width:var(--large);margin:0 auto;
  padding:0 var(--marge) clamp(30px,4vw,48px);
}
.hero--court h1{font-size:clamp(32px,4.4vw,58px);line-height:1.1;margin:0 0 16px}
.hero--court .hero__accroche{margin:0;max-width:56ch;text-align:left}

/* La photo devient une bande large sous le titre : elle illustre, elle
   n'écrase plus. Le voile n'a plus lieu d'être, le texte n'est plus dessus. */
.hero--court .hero__image{
  order:2;position:static;width:100%;height:auto;
  aspect-ratio:21/9;object-fit:cover;
}
.hero--court .hero__voile{display:none}

/* Certaines pages posent un lien de rappel sous l'accroche. La version sombre
   l'envoyait à l'opposé du texte ; ici la place à droite est prise par
   l'aquarelle, alors le lien se range simplement sous l'accroche. */
.hero__bas{
  display:flex;flex-direction:column;align-items:flex-start;
  gap:22px;margin-top:0;
}

/* --- Image qui zoome au survol -------------------------------------------- */

.cadre{overflow:hidden;display:block;position:relative}
.cadre img{transition:transform 1.4s cubic-bezier(.2,.6,.2,1)}
.cadre:hover img{transform:scale(1.04)}

/* --- Duo : la moitié texte ------------------------------------------------ */

.duo__texte h2{font-size:clamp(24px,2.6vw,36px);line-height:1.2;margin-bottom:16px}
.duo__texte p{margin:0 0 22px;color:rgba(43,42,36,.82)}

/* --- Bandeau illustré -----------------------------------------------------
   En version sombre, l'image passait sous un voile noir et le texte s'écrivait
   en blanc par-dessus. Ici le voile est crème et le texte reste à l'encre :
   la photo devient un fond de page, pas un décor à contre-jour. */

.bandeau{position:relative;overflow:hidden}
.bandeau__image{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
.bandeau__voile{
  position:absolute;inset:0;
  background:linear-gradient(90deg,
    rgba(250,245,234,.96) 0%,
    rgba(250,245,234,.88) 55%,
    rgba(250,245,234,.72) 100%);
}
.bandeau__contenu{position:relative}

/* --- Panneaux numérotés ---------------------------------------------------
   Le sombre écrivait dans la photo. Le clair écrit dessous, sur le papier :
   même grille, même markup, lecture plus douce et titres toujours lisibles
   quelle que soit la photo. */

.panneaux{display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(16px,2vw,28px);align-items:start}
.panneau{
  display:block;text-decoration:none;color:inherit;position:relative;
  overflow:hidden;background:var(--papier);border:1px solid var(--filet);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.panneau:hover{transform:translateY(-4px);border-color:var(--sauge-clair);
  box-shadow:0 14px 34px rgba(43,42,36,.10)}
.panneau img{
  width:100%;aspect-ratio:4/3;object-fit:cover;filter:none;
  transition:transform 1.2s cubic-bezier(.2,.6,.2,1);
}
.panneau:hover img{transform:scale(1.04)}
.panneau__texte{
  position:static;background:none;
  display:flex;flex-direction:column;
  padding:20px 24px 26px;
}
.panneau__num{font-size:10px;letter-spacing:.4em;text-transform:uppercase;
  color:var(--terre);margin-bottom:10px}
.panneau__titre{font-family:var(--serif);font-size:clamp(19px,1.8vw,24px);
  color:var(--encre-vif);margin-bottom:8px;line-height:1.2}
.panneau__sous{font-size:14px;line-height:1.6;color:rgba(43,42,36,.7)}

/* --- Fiches de contact — gîte, élevage, contact ---------------------------- */

.fiches{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
.fiche{background:var(--papier-2);border:1px solid var(--filet);padding:26px 28px}
.fiche__nom{font-family:var(--serif);font-size:19px;color:var(--encre-vif);margin-bottom:6px}
.fiche__role{font-size:10px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--terre);margin-bottom:14px}
.fiche a{font-size:15px;text-decoration:none;letter-spacing:.02em}

/* --- Liste de caractéristiques — page gîte -------------------------------- */

.specs{list-style:none;padding:0;margin:0 0 30px;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px}
.specs li{
  display:flex;align-items:baseline;gap:10px;font-size:15px;
  color:rgba(43,42,36,.86);border-top:1px solid var(--filet);padding-top:12px;
}
.specs li::before{content:"—";color:var(--terre)}

/* --- Encart : un bloc posé sur le papier crème ---------------------------- */

.encart{background:var(--papier-2);border:1px solid var(--filet);
  padding:clamp(28px,4vw,52px)}

/* --- Galerie de photos ---------------------------------------------------- */

.galerie{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.4vw,18px)}
.galerie .cadre img{width:100%;aspect-ratio:4/3;object-fit:cover}

/* --- Formulaires ----------------------------------------------------------
   Champs sur papier, filet fin, focus sauge. Pas de fond gris : sur une page
   crème, un input gris se lit comme un champ désactivé. */

.formulaire{display:flex;flex-direction:column;gap:18px;max-width:640px}
.formulaire--large{max-width:none}
.champ{display:flex;flex-direction:column;gap:7px}
.champ label{
  font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--terre);
}
.champ input,.champ select,.champ textarea{
  width:100%;background:var(--papier);color:var(--encre);
  border:1px solid var(--filet);padding:13px 15px;
  font-family:var(--sans);font-size:15px;font-weight:300;
  transition:border-color .2s ease;
}
.champ input:hover,.champ select:hover,.champ textarea:hover{border-color:var(--sauge-clair)}
.champ input:focus,.champ select:focus,.champ textarea:focus{
  border-color:var(--sauge);outline:none;
}
.champ input:focus-visible,.champ select:focus-visible,.champ textarea:focus-visible{
  outline:2px solid var(--sauge);outline-offset:2px;
}
.champ textarea{resize:vertical;min-height:120px;line-height:1.6}
.champ select{appearance:none;cursor:pointer}
.champ ::placeholder{color:rgba(43,42,36,.38)}
.champs-duo{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.choix{display:flex;gap:26px;flex-wrap:wrap;padding-top:4px}
.choix label{
  display:inline-flex;align-items:center;gap:9px;cursor:pointer;
  font-size:14px;letter-spacing:.02em;color:var(--encre);
  text-transform:none;
}
.choix input{accent-color:var(--sauge);width:16px;height:16px;cursor:pointer}
.formulaire__note{font-size:13px;color:rgba(43,42,36,.6);line-height:1.6;margin:0}
.formulaire__avis{
  font-size:14px;color:var(--sauge);line-height:1.6;margin:0;
  border-left:2px solid var(--sauge-clair);padding-left:14px;
}

/* --- Note chiffrée de la revue de presse ---------------------------------- */

.revue__note{font-size:13px;letter-spacing:.14em;line-height:1;color:var(--terre)}

/* --- Parallaxe légère -----------------------------------------------------
   Celle-ci reste sur animation-timeline : c'est un effet d'appoint, pas une
   apparition. Les navigateurs qui ne la comprennent pas affichent simplement
   l'image immobile, ce qui ne prive de rien. */

@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .plx{animation:derive linear both;animation-timeline:view();
      animation-range:entry 0% exit 100%}
  }
}
@keyframes derive{from{transform:translateY(14px)}to{transform:translateY(-14px)}}

/* --- Responsive des blocs intérieurs -------------------------------------- */

@media (max-width:900px){
  .panneaux{grid-template-columns:1fr}
  .galerie{grid-template-columns:1fr 1fr}
  .champs-duo{grid-template-columns:1fr}
  .hero--court .hero__image{aspect-ratio:16/10}
  .bandeau__voile{background:rgba(250,245,234,.93)}
}

/* --- L'aquarelle du hero --------------------------------------------------
   Une illustration posée à droite du titre, à hauteur de regard. Elle est en
   absolu : le portage l'insère en fin de .hero__contenu sans déranger le
   texte, et le contenu se réserve sa place par un padding à droite.
   Sous 900 px, elle disparaît — sur un téléphone elle passerait derrière le
   titre et le padding mangerait la moitié de la ligne. */

.aqua-hero{
  position:absolute;
  right:var(--marge);
  top:50%;
  transform:translateY(-50%);
  width:min(24vw,230px);
  height:auto;
  opacity:.9;
  pointer-events:none;
}
.hero--court .hero__contenu{
  padding-right:calc(var(--marge) + min(24vw,230px) + 36px);
}

@media (max-width:900px){
  .aqua-hero{display:none}
  .hero--court .hero__contenu{padding-right:var(--marge)}
}

/* --- FAQ ------------------------------------------------------------------
   Même markup que la version sombre — <details>/<summary> natifs, aucun JS.
   Seules les couleurs changent. */

.faq{max-width:var(--lisible);margin:0 auto;border-top:1px solid var(--filet)}
.faq__item{border-bottom:1px solid var(--filet)}
.faq__q{
  list-style:none;cursor:pointer;display:flex;align-items:flex-start;gap:16px;
  padding:20px 0;font-family:var(--serif);
  font-size:clamp(17px,1.5vw,20px);line-height:1.4;color:var(--encre-vif);
  transition:color .2s ease;
}
.faq__q::-webkit-details-marker{display:none}
.faq__q:hover{color:var(--terre)}
.faq__q::after{
  content:"+";margin-left:auto;flex:none;
  font-family:var(--sans);font-size:22px;line-height:1;color:var(--terre);
}
.faq__item[open] .faq__q::after{content:"–"}
.faq__r{padding:0 0 22px;max-width:62ch}
.faq__r p{margin:0 0 12px;font-size:15px;line-height:1.8;color:rgba(43,42,36,.82)}
.faq__r p:last-child{margin-bottom:0}
.faq__r a{color:var(--sauge)}

/* =============================================================================
   BANDEAU « ILS PARLENT DE NOUS » — ajouté le 31/08/2026
   -----------------------------------------------------------------------------
   Un ruban de logos qui défile en continu. Neuf entités : deux médias, un
   repreneur et six annuaires qui référencent le domaine.

   Défilement en CSS pur, sans JavaScript : la liste est présente DEUX FOIS dans
   le HTML, la piste se translate de -50 %, et au moment où elle revient à zéro
   la seconde copie est exactement là où était la première. La boucle est donc
   invisible. La copie porte aria-hidden : un lecteur d'écran n'annonce pas
   deux fois les mêmes liens.

   Tant qu'un vrai fichier de logo n'est pas déposé dans uploads/presse/, chaque
   entrée s'affiche en toutes lettres — lisible, sobre, et sans emprunter une
   marque qu'on n'a pas le droit de reproduire. Déposer une image dans le <a>
   suffit à basculer sur le vrai logo, le CSS est déjà prêt.
   ========================================================================== */

.presse-bandeau{
  border-top:1px solid var(--filet);
  border-bottom:1px solid var(--filet);
  background:var(--papier-2);
  padding:clamp(26px,3vw,40px) 0;
  overflow:hidden;
  /* Les extrémités s'effacent : le ruban semble sortir de la page plutôt que
     d'être coupé net par le bord de l'écran. */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.presse-bandeau__piste{
  display:flex;width:max-content;
  animation:defile 46s linear infinite;
}
.presse-bandeau:hover .presse-bandeau__piste{animation-play-state:paused}
.presse-bandeau__liste{
  display:flex;align-items:center;gap:clamp(38px,5vw,74px);
  list-style:none;margin:0;padding:0 clamp(19px,2.5vw,37px);
}
@keyframes defile{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.logo-presse{
  /* colonne : le nom, puis la mention dessous. En ligne, la mention venait se
     coller au nom et se faisait recouvrir par le logo suivant. */
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:52px;text-decoration:none;white-space:nowrap;
  font-family:var(--serif);font-size:clamp(17px,1.7vw,23px);
  letter-spacing:.01em;color:var(--encre-vif);
  opacity:.72;transition:opacity .25s ease,color .25s ease;
}
.logo-presse:hover{opacity:1;color:var(--terre)}
/* Un vrai logo déposé remplace le texte sans rien changer d'autre. */
.logo-presse img{max-height:42px;width:auto;filter:grayscale(1);
  transition:filter .25s ease}
.logo-presse:hover img{filter:none}
/* Une mention discrète sous le nom : le média, la date, la nature du lien. */
.logo-presse span{
  display:block;font-family:var(--sans);font-size:10px;
  letter-spacing:.26em;text-transform:uppercase;color:var(--terre);
  margin-top:5px;text-align:center;
}

@media (prefers-reduced-motion: reduce){
  /* Plus de défilement : le ruban devient une bande que l'on fait glisser. */
  .presse-bandeau__piste{animation:none}
  .presse-bandeau{overflow-x:auto}
  .presse-bandeau__liste:last-child{display:none}
}

/* =============================================================================
   ÉCHELLE — remontée générale du 31/08/2026
   -----------------------------------------------------------------------------
   Retour de Wakny : « on ne voit pas assez les titres ni les aquarelles ».
   La charte visait un carnet d'aquarelles, avec beaucoup de blanc et une
   typographie discrète. Sur un écran de bureau, ça se lit petit.

   Tout monte d'environ 12 %, en gardant les mêmes rapports entre les niveaux :
   c'est l'échelle qui change, pas la hiérarchie. Les bornes basses des clamp()
   bougent moins que les hautes — sur un téléphone, la taille était déjà bonne,
   c'est en grand écran que ça manquait d'ampleur.

   Ce bloc surcharge volontairement les règles du dessus plutôt que de les
   modifier : on voit d'un coup d'œil ce qui a été remonté, et on peut revenir
   en arrière en supprimant cette seule section.
   ========================================================================== */

body{font-size:18px}

/* --- Titres --------------------------------------------------------------- */
.hero h1{font-size:clamp(42px,6vw,80px)}
.hero--court h1{font-size:clamp(36px,5vw,66px)}
.duo h2,
.duo__texte h2{font-size:clamp(27px,2.9vw,41px)}
.manifeste p{font-size:clamp(23px,2.7vw,35px)}
.menu__titre{font-size:clamp(22px,3.1vh,34px)}
.panneau__titre{font-size:clamp(21px,2vw,27px)}
.rubrique__titre{font-size:23px}
.fiche__nom{font-size:21px}
.pied__marque{font-size:21px}

/* --- Textes courants ------------------------------------------------------- */
.hero__accroche{font-size:clamp(17.5px,1.7vw,21px)}
.manuscrit,
.manifeste .manuscrit,
.hero .manuscrit{font-size:clamp(16px,1.6vw,19.5px)}
.rubrique__texte{font-size:15.5px}
.panneau__sous{font-size:15px}
.specs li{font-size:16px}
.fiche a{font-size:16px}
.revue__cite{font-size:clamp(16.5px,1.35vw,19.5px)}
.pied__adresse,
.pied__liens{font-size:15px}
.faq__q{font-size:clamp(19px,1.65vw,22px)}
.faq__r p{font-size:16px}
.formulaire__note{font-size:14px}
.champ input,.champ select,.champ textarea{font-size:16px}

/* Le kicker reste petit par nature — il est espacé et en capitales — mais un
   demi-point de plus le rend lisible sans lui faire concurrencer le titre. */
.kicker{font-size:12px}
.pied__titre,.info__titre,.fiche__role,.pers__role{font-size:11px}

/* --- Aquarelles : le vrai sujet du retour ---------------------------------- */
.aqua--large{width:min(100%,1040px)}
.aqua--moyen{width:min(100%,490px)}
.aqua--petit{width:min(100%,225px)}
.aqua-hero{width:min(27vw,275px)}
.hero--court .hero__contenu{
  padding-right:calc(var(--marge) + min(27vw,275px) + 40px);
}
@media (max-width:900px){
  .hero--court .hero__contenu{padding-right:var(--marge)}
}

/* =============================================================================
   CONTRASTE — mise à niveau WCAG 2.1 AA du 31/08/2026
   -----------------------------------------------------------------------------
   Retour de Wakny : « le contraste est un peu compliqué, parfois on ne voit pas
   bien les nuances ». Un audit chiffré a confirmé : la palette est belle mais
   plusieurs couleurs passaient sous le seuil lisible de 4,5:1 sur le papier
   crème. En particulier le terracotta des kickers (4,13:1) et les gris de
   texte à faible opacité, qui descendaient jusqu'à 2,19:1 pour les
   placeholders de formulaire.

   Les teintes ne changent pas : on ne fait que les assombrir ou les rendre
   plus opaques. Le site garde exactement le même caractère, il devient
   simplement lisible pour tout le monde — y compris en plein soleil sur un
   téléphone, ce qui est le cas d'usage réel d'un visiteur au milieu du potager.
   ========================================================================== */

:root{
  /* Terracotta assombri : 4,13 → 5,25:1 sur le papier, 3,72 → 4,73:1 sur les
     encarts. Une seule variable corrige les kickers, les titres du pied, les
     rôles des fiches, les libellés de formulaire et les numéros de panneaux —
     plus de 200 occurrences sur les 13 pages. */
  --terre: #9a5527;
}

/* Les gris de texte remontent tous à .74 d'opacité, valeur qui tient les
   4,5:1 sur les DEUX fonds (crème clair et crème appuyé). En dessous, un
   texte informatif n'est plus lisible. */
.menu__lieu,
.menu__pied,
.pied__bas,
.formulaire__note,
.revue__lire{color:rgba(43,42,36,.74)}

/* Les numéros du menu plein écran : le sauge clair y tombait à 2,59:1.
   On assombrit ici seulement — la variable reste inchangée, elle sert
   ailleurs de filet et de bordure, où elle convient. */
.menu__num{color:#65734e}

/* Le texte fantôme des champs : 2,19:1, quasi invisible. Les champs sont
   toujours sur le papier clair, .7 suffit donc. */
.champ ::placeholder{color:rgba(43,42,36,.7)}

/* Les textes secondaires étaient tout juste au-dessus du seuil (4,96 à 5,28:1).
   Techniquement conformes, mais c'est exactement ce que Wakny décrivait par
   « on ne voit pas bien les nuances ». On les monte à .78 : 6,3:1, une marge
   confortable, sans que le texte devienne aussi noir qu'un titre. */
.rubrique__texte,
.panneau__sous,
.pied__adresse{color:rgba(43,42,36,.78)}

/* Les fiches de contact s'étiraient toutes à la hauteur de la plus haute :
   à côté de la fiche « équipe » qui liste quatre personnes, les autres
   devenaient de grands rectangles presque vides. */
.fiches{align-items:start}

/* --- L'aquarelle du hero entre dès le chargement --------------------------
   Elle est au-dessus de la ligne de flottaison : attendre un défilement
   n'aurait pas de sens. */
@media (prefers-reduced-motion: no-preference){
  .hero__plan .aqua,
  .hero-v2__plan .aqua{animation:pose 1.1s cubic-bezier(.2,.6,.2,1) both .15s}
  .hero h1,
  .hero-v2 h1{animation:monte-doux .85s cubic-bezier(.2,.6,.2,1) both}
  .hero .kicker,
  .hero-v2 .kicker{animation:monte-doux .7s cubic-bezier(.2,.6,.2,1) both}
  .hero__accroche,
  .hero-v2__accroche{animation:monte-doux .85s cubic-bezier(.2,.6,.2,1) both .12s}
  .hero .actions,
  .hero-v2 .actions,
  .hero p:last-of-type{animation:monte-doux .85s cubic-bezier(.2,.6,.2,1) both .22s}
}
@keyframes pose{from{opacity:0;transform:translateY(24px) scale(.96)}to{opacity:1;transform:none}}
@keyframes monte-doux{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* Le survol des blocs cliquables gagne en présence : la carte se soulève un
   peu plus haut et l'ombre s'étale, ce qui rend le clic plus évident. */
.rubrique,.panneau,.carte-v2,.revue{transition:transform .3s cubic-bezier(.2,.6,.2,1),
  box-shadow .3s ease,border-color .3s ease}
.rubrique:hover,.panneau:hover,.carte-v2:hover{transform:translateY(-6px);
  box-shadow:0 18px 42px rgba(43,42,36,.13)}

@media (prefers-reduced-motion: reduce){
  .hero__plan .aqua,.hero-v2__plan .aqua,
  .hero h1,.hero-v2 h1,.hero .kicker,.hero-v2 .kicker,
  .hero__accroche,.hero-v2__accroche{animation:none}
}

/* --- Le logo, plus présent ------------------------------------------------
   Demande de Wakny : l'aquarelle du logo se voyait à peine dans l'en-tête, et
   n'apparaissait nulle part en pied de page. */

.marque img{width:105px}

.pied__logo{
  display:block;width:min(100%,170px);height:auto;
  margin:0 0 18px;
}

@media (max-width:900px){
  .marque img{width:76px}
  .pied__logo{width:min(100%,140px);margin-left:auto;margin-right:auto}
}

/* =============================================================================
   L'ÉQUIPE — page À propos
   -----------------------------------------------------------------------------
   Trois groupes : le noyau, le terrain, et ceux qui gravitent autour sans
   travailler pour le domaine (le gîte, l'école, l'apiculteur).

   Aucun portrait n'existe encore, sauf celui de Gatien. En attendant, le
   médaillon affiche l'initiale : ça tient visuellement, ça ne fait pas « photo
   manquante », et une vraie photo se glisse dedans sans toucher au reste —
   il suffit de remplacer le <span data-initiale> par un <span><img></span>.
   ========================================================================== */

.equipes{display:flex;flex-direction:column;gap:clamp(38px,5vw,64px)}

.equipe-groupe__titre{
  font-family:var(--serif);font-size:clamp(21px,2.1vw,28px);
  color:var(--encre-vif);margin:0 0 4px;
}
.equipe-groupe__sous{
  margin:0 0 clamp(20px,2.4vw,30px);font-size:15px;
  color:rgba(43,42,36,.78);
}

.gens{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:clamp(18px,2.4vw,32px);
}
.gens__p{display:flex;flex-direction:column;align-items:center;text-align:center;gap:9px}

.gens__portrait{
  width:clamp(76px,9vw,104px);aspect-ratio:1;border-radius:50%;
  background:var(--papier-2);border:1px solid var(--filet);
  display:grid;place-items:center;overflow:hidden;flex:none;
  transition:border-color .3s ease,transform .3s cubic-bezier(.2,.6,.2,1);
}
.gens__p:hover .gens__portrait{border-color:var(--sauge-clair);transform:translateY(-4px)}
.gens__portrait img{width:100%;height:100%;object-fit:cover}
/* L'initiale, tant qu'il n'y a pas de photo. */
.gens__portrait[data-initiale]::after{
  content:attr(data-initiale);
  font-family:var(--serif);font-size:clamp(26px,3vw,34px);
  color:var(--sauge);line-height:1;
}
.gens__nom{font-family:var(--serif);font-size:17.5px;color:var(--encre-vif);line-height:1.3}
.gens__role{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--terre)}

@media (max-width:520px){
  .gens{grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:20px}
}

/* =============================================================================
   PIED DE PAGE — refonte du 31/08/2026
   -----------------------------------------------------------------------------
   Demande de Wakny : l'identité (logo, nom, coordonnées) à gauche, les trois
   colonnes de liens à droite, le tout occupant toute la largeur.

   L'ancien pied était un flex avec `justify-content:space-between` : dès que
   l'écran s'élargissait, un grand vide se creusait au milieu. Une grille en
   deux zones tient la largeur quelle que soit la taille de l'écran.

   Chaque rubrique porte sa vignette d'aquarelle. Ce sont des réductions à
   112 px : les dessins pleins pèsent 250 à 350 Ko, soit 2,6 Mo pour un pied
   affiché en 34 px. Le lot réduit fait 63 Ko.
   ========================================================================== */

.pied__haut{
  display:grid;
  grid-template-columns:minmax(240px,1fr) minmax(0,2.1fr);
  gap:clamp(34px,5vw,80px);
  align-items:start;
}

.pied__identite{max-width:340px}

.pied__listes{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(22px,3vw,48px);
}
.pied__colonne{min-width:0}

.pied__liens{gap:2px}
/* Grille plutôt que flex : la première colonne fait toujours la largeur d'une
   vignette, même pour les liens qui n'en ont pas. Sans ça, « Alpha School »
   et « Mentions légales » se recalaient à gauche et la colonne partait de
   travers. */
.pied__liens a{
  display:grid;grid-template-columns:54px 1fr;align-items:center;gap:12px;
  padding:5px 0;line-height:1.35;
  transition:color .2s ease,transform .25s cubic-bezier(.2,.6,.2,1);
}
.pied__liens a:hover{transform:translateX(3px)}
/* Les liens sans dessin — partenaires extérieurs et pages légales — occupent
   la largeur entière plutôt que de se serrer dans la seconde colonne. */
.pied__liens a.sans-vignette{grid-template-columns:1fr}

/* La vignette : un cadre de taille fixe, l'aquarelle s'y inscrit sans se
   déformer. Les dessins n'ont pas tous le même rapport — le plan du domaine
   est très large, le chapeau très plat — d'où le `object-fit:contain`. */
.pied__vig{
  width:54px;height:42px;flex:none;
  object-fit:contain;object-position:center;
  opacity:.85;transition:opacity .25s ease,transform .25s cubic-bezier(.2,.6,.2,1);
}
.pied__liens a:hover .pied__vig{opacity:1;transform:scale(1.08)}

@media (max-width:900px){
  .pied__haut{grid-template-columns:1fr;gap:38px}
  .pied__identite{max-width:none;text-align:center}
  .pied__listes{grid-template-columns:1fr 1fr;gap:28px}
}
@media (max-width:520px){
  .pied__listes{grid-template-columns:1fr}
  .pied__liens a{justify-content:flex-start}
}

/* =============================================================================
   ANIMATIONS D'OUVERTURE — trois propositions
   -----------------------------------------------------------------------------
   Le voile est POSÉ PAR-DESSUS le site déjà chargé : il ne masque jamais un
   contenu qui n'existerait pas encore. Si intro.js ne tourne pas, aucune de ces
   règles ne s'applique et la page s'affiche normalement.
   ========================================================================== */

.intro{
  position:fixed;inset:0;z-index:900;
  display:grid;place-items:center;
  background:var(--papier);
  cursor:pointer;
  transition:opacity .7s ease, transform .7s cubic-bezier(.4,0,.2,1),
             visibility .7s;
}
.intro__scene{display:grid;place-items:center;text-align:center;padding:var(--marge)}
.intro-en-cours{overflow:hidden}
.intro-en-cours body{overflow:hidden}

/* --- 1. PIGMENT ------------------------------------------------------------
   Le logo arrive pâle et flou, puis se resserre et se sature : le geste d'une
   aquarelle qui prend sur un papier encore humide. C'est la proposition la
   plus discrète — elle ne raconte rien, elle installe une matière. */

.intro--pigment .intro__logo{
  width:min(64vw,340px);height:auto;
  animation:pigment-prend 1.5s cubic-bezier(.2,.6,.2,1) both;
}
@keyframes pigment-prend{
  0%  {opacity:0;filter:blur(14px) saturate(.2);transform:scale(1.16)}
  55% {opacity:1;filter:blur(2px)  saturate(.8);transform:scale(1.02)}
  100%{opacity:1;filter:none;                   transform:scale(1)}
}
.intro--pigment.intro--sortie{opacity:0;visibility:hidden}

/* --- 2. PAPIER -------------------------------------------------------------
   Le nom se compose ligne à ligne, un filet se trace dessous, puis la feuille
   se lève et découvre le site. C'est la plus affirmée des trois : elle pose le
   nom avant toute chose, comme une page de titre. */

.intro--papier{background:var(--papier-2)}
.intro--papier .intro__ligne{
  display:block;font-family:var(--serif);
  font-size:clamp(34px,6.4vw,74px);line-height:1.08;color:var(--encre-vif);
  opacity:0;transform:translateY(24px);
  animation:papier-monte .85s cubic-bezier(.2,.6,.2,1) both;
}
.intro--papier .intro__ligne--2{animation-delay:.16s}
.intro--papier .intro__filet{
  display:block;height:1px;width:min(60vw,320px);
  background:var(--sauge-clair);margin:22px auto 0;
  transform:scaleX(0);transform-origin:center;
  animation:papier-trace .8s cubic-bezier(.4,0,.2,1) .42s both;
}
.intro--papier .intro__lieu{
  display:block;margin-top:20px;
  font-size:11px;letter-spacing:.42em;text-transform:uppercase;color:var(--terre);
  opacity:0;animation:papier-monte .8s ease .68s both;
}
@keyframes papier-monte{to{opacity:1;transform:none}}
@keyframes papier-trace{to{transform:scaleX(1)}}
/* La feuille se lève : c'est ce mouvement qui fait la différence avec un
   simple fondu — on comprend qu'on entre quelque part. */
.intro--papier.intro--sortie{transform:translateY(-100%)}

/* --- 3. DOMAINE ------------------------------------------------------------
   Le plan aquarellé se découvre de gauche à droite, comme un pinceau qui
   passe, puis fond exactement là où la page le reprend dans son hero. C'est la
   seule des trois qui raconte le lieu — et la seule qui enchaîne avec le
   contenu au lieu de s'effacer devant lui. */

.intro--domaine .intro__plan{
  width:min(86vw,780px);height:auto;
  clip-path:inset(0 100% 0 0);
  animation:domaine-peint 1.35s cubic-bezier(.35,0,.2,1) .1s both;
}
.intro--domaine .intro__lieu{
  display:block;margin-top:26px;
  font-family:var(--serif);font-size:clamp(17px,2vw,23px);color:var(--encre-vif);
  opacity:0;animation:papier-monte .8s ease 1.15s both;
}
@keyframes domaine-peint{
  0%  {clip-path:inset(0 100% 0 0);opacity:.55}
  100%{clip-path:inset(0 0 0 0);   opacity:1}
}
.intro--domaine.intro--sortie{opacity:0;transform:scale(1.06)}

@media (prefers-reduced-motion: reduce){
  .intro{display:none}
}

/* --- OUVERTURE RETENUE : « signature » ------------------------------------
   Les deux propositions enchaînées, en un seul geste.

   Minutage revu le 31/08 (demande de Wakny) : le logo tenait 0,2 s à peine
   entre sa pose et son effacement — on n'avait pas le temps de le lire. Il
   reste maintenant une seconde pleine à l'écran, en respirant très lentement
   pour ne pas paraître figé, avant de céder la place au nom.

     0,00 → 0,95   le logo se dépose, flou puis net
     0,95 → 2,05   il reste posé, avec un souffle très lent
     2,05 → 2,50   il s'efface en remontant
     2,10 → 2,90   le nom se compose, ligne à ligne  (recouvrement de 0,4 s)
     2,40 → 3,10   le filet se trace
     2,80 → 3,55   le lieu apparaît
     3,70 →        la feuille se lève sur le site

   Le logo tient en UNE SEULE animation à pourcentages plutôt qu'en trois
   animations empilées : trois règles qui animent `transform` sur le même
   élément se disputent la propriété, et l'ordre de résolution des fill-modes
   est le genre de détail qui rend un minutage impossible à relire.

   Le logo et le bloc du nom occupent la MÊME cellule de grille : l'un remplace
   l'autre sans que la scène se décale. À l'intérieur du bloc, en revanche, le
   filet et le lieu suivent le flux normal — une première version les plaçait
   par décalages en `em`, qui se référaient à la taille de chaque élément et
   non à celle du titre : le filet venait barrer le nom.

   Toute retouche du minutage doit être reportée dans DUREES, dans intro.js :
   c'est le JS qui décide quand la feuille se lève, pas le CSS.
   ========================================================================== */

.intro--signature{background:var(--papier-2)}
.intro--signature .intro__scene{display:grid;place-items:center}

.intro--signature .intro__logo{
  /* Agrandi le 31/08 : à 190 px le logo se perdait au milieu de l'écran. */
  width:min(64vw,340px);height:auto;grid-area:1/1;
  animation:signature-logo 2.5s cubic-bezier(.2,.6,.2,1) both;
}
/* Repères en % sur les 2,5 s : 0,55 s = 22 % · 0,95 s = 38 % · 2,05 s = 82 %. */
@keyframes signature-logo{
  0%  {opacity:0;filter:blur(14px) saturate(.2);transform:scale(1.16)}
  22% {opacity:1;filter:blur(2px)  saturate(.8);transform:scale(1.02)}
  38% {opacity:1;filter:none;transform:scale(1);
       animation-timing-function:ease-in-out}
  82% {opacity:1;filter:none;transform:scale(1.028);
       animation-timing-function:ease}
  100%{opacity:0;filter:none;transform:translateY(-26px) scale(.96)}
}

.intro--signature .intro__nom{
  grid-area:1/1;display:flex;flex-direction:column;align-items:center;
}

.intro--signature .intro__ligne{
  display:block;font-family:var(--serif);
  font-size:clamp(34px,6.4vw,74px);line-height:1.08;color:var(--encre-vif);
  opacity:0;transform:translateY(22px);
  animation:papier-monte .8s cubic-bezier(.2,.6,.2,1) 2.1s both;
}
.intro--signature .intro__ligne--2{animation-delay:2.22s}

.intro--signature .intro__filet{
  display:block;width:min(60vw,320px);height:1px;
  background:var(--sauge-clair);margin-top:clamp(18px,2vw,26px);
  transform:scaleX(0);transform-origin:center;
  animation:papier-trace .7s cubic-bezier(.4,0,.2,1) 2.4s both;
}

.intro--signature .intro__lieu{
  display:block;margin-top:clamp(14px,1.6vw,20px);
  font-size:11px;letter-spacing:.42em;text-transform:uppercase;color:var(--terre);
  opacity:0;animation:papier-monte .75s ease 2.8s both;
}

/* La feuille se lève, comme la proposition « papier ». */
.intro--signature.intro--sortie{transform:translateY(-100%)}

/* =============================================================================
   CARTES ILLUSTRÉES À L'AQUARELLE — restauré et corrigé le 31/08/2026
   -----------------------------------------------------------------------------
   Les cartes recadrent leurs photos en `cover` : sur un dessin détouré, ça
   rogne les bords et coupe le sujet. L'aquarelle s'inscrit donc en `contain`,
   posée sur le crème appuyé.

   Le rapport est porté par le CADRE, jamais par l'image. Une première version
   laissait l'image libre : sous 900 px la grille passait à une colonne,
   l'aquarelle prenait toute la largeur et une seule carte occupait plus d'un
   écran de téléphone.
   ========================================================================== */

.rubrique__img--aqua{
  background:var(--papier-2);
  aspect-ratio:4/3;
  display:grid;place-items:center;
  padding:clamp(16px,2.4vw,28px);
  overflow:hidden;
}
.rubrique__img--aqua img{
  width:auto;height:auto;
  max-width:100%;max-height:100%;
  aspect-ratio:auto;object-fit:contain;
}
/* Zoom au survol plus discret : un dessin supporte moins l'agrandissement
   qu'une photographie. */
.rubrique:hover .rubrique__img--aqua img{transform:scale(1.03)}

/* --- Grilles sur petit écran ----------------------------------------------
   Entre 560 et 900 px, deux colonnes plutôt qu'une : trois rubriques en pleine
   largeur faisaient défiler sans fin. Sous 560 px, une colonne, avec un cadre
   plus plat pour que la carte tienne dans l'écran. */

@media (max-width:900px){
  .rubriques{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .rubriques{grid-template-columns:1fr}
  .rubrique__img--aqua{aspect-ratio:16/10}
  .panneaux,.cartes,.chiffres{grid-template-columns:1fr}
  .galerie{grid-template-columns:1fr 1fr}
}

/* L'aquarelle en tête d'une fiche de contact : petite, centrée, elle annonce
   le sujet de la fiche sans prendre la place du texte. */
.fiche__aqua{
  width:min(100%,86px);height:auto;margin:0 0 14px;
}

/* ══ COMPOSANTS COMMUNS — début (généré par poser-styles.py) ══ */
:root{
  --fond:      var(--papier);
  --fond-bloc: var(--papier-2);
  --texte:     var(--encre);
  --texte-vif: var(--encre-vif);
  --accent:    var(--sauge);
  --accent-2:  var(--terre);
  --trait:     var(--filet);
  --sur-image: #faf5ea;
}

/* --- Texte réservé aux lecteurs d'écran ----------------------------------- */
.sr-uniquement{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* =============================================================================
   SOUS-MENUS
   Le lien de tête reste un vrai lien vers la page ; c'est un bouton distinct
   qui déplie les sections. Sans JS les listes sont ouvertes — le menu reste
   utilisable, il est simplement plus long.
   ========================================================================== */
/* La ligne est bornée : sans largeur maximale, le chevron part se coller au
   bord droit de l'écran, à 700 px du titre qu'il commande. Borné, il reste
   dans le champ de lecture tout en gardant les chevrons alignés entre eux. */
.menu__ligne{display:flex;align-items:center;gap:14px;max-width:min(100%,430px)}
.menu__ligne .menu__lien{flex:1 1 auto;min-width:0}

.menu__deplier{
  flex:0 0 auto;width:32px;height:32px;padding:0;line-height:1;font-size:11px;
  background:none;border:1px solid var(--trait);color:var(--accent);
  cursor:pointer;
  transition:transform .32s ease,border-color .25s ease,color .25s ease;
}
.menu__deplier:hover{border-color:var(--accent-2);color:var(--accent-2)}
.menu__deplier[aria-expanded="true"]{transform:rotate(180deg);border-color:var(--accent)}

.menu__sous{
  list-style:none;margin:4px 0 12px 42px;padding:0 0 0 18px;
  border-left:1px solid var(--trait);
  overflow:hidden;max-height:340px;opacity:1;
  transition:max-height .35s ease,opacity .28s ease,margin-bottom .35s ease;
}
.menu__sous[data-plie="oui"]{max-height:0;opacity:0;margin-bottom:0;border-left-color:transparent}
.menu__sous a{
  display:block;padding:5px 0;font-size:15px;text-decoration:none;
  color:var(--texte);opacity:.82;letter-spacing:.01em;
  transition:opacity .2s ease,color .2s ease,padding-left .25s ease;
}
.menu__sous a:hover{opacity:1;color:var(--accent-2);padding-left:6px}

/* =============================================================================
   CARROUSEL D'IMAGES
   Aucun défilement automatique : ça vole le focus et ça agace. On avance à la
   flèche, à la vignette, au clavier ou au doigt. Seule la première image est
   chargée d'emblée, les autres à la demande.
   ========================================================================== */
.carrousel{margin:0}
.carrousel__scene{
  position:relative;aspect-ratio:16/9;overflow:hidden;
  background:var(--fond-bloc);border:1px solid var(--trait);
  touch-action:pan-y;
}
.carrousel__scene img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transform:scale(1.035);
  transition:opacity .7s ease,transform 1.4s ease;
}
.carrousel__scene img.est-active{opacity:1;transform:none}

.carrousel__fleche{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:52px;height:52px;padding:0;line-height:1;font-size:15px;
  color:var(--sur-image);cursor:pointer;
  background:rgba(18,22,13,.36);border:1px solid rgba(250,245,234,.5);
  backdrop-filter:blur(3px);
  transition:background .25s ease,border-color .25s ease;
}
.carrousel__fleche:hover{background:rgba(18,22,13,.76);border-color:var(--sur-image)}
.carrousel__fleche--prec{left:18px}
.carrousel__fleche--suiv{right:18px}

.carrousel__pied{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:24px;margin:16px 0 22px;
}
.carrousel__legende{
  font-family:var(--serif);font-size:clamp(15px,1.4vw,17.5px);
  line-height:1.6;color:var(--texte);opacity:.86;margin:0;
}
.carrousel__compteur{
  flex:0 0 auto;font-family:var(--serif);font-size:17px;
  color:var(--texte);opacity:.6;letter-spacing:.06em;
}

.carrousel__rampe{
  display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:12px;
}
.carrousel__vign{
  position:relative;aspect-ratio:3/2;overflow:hidden;padding:0;cursor:pointer;
  background:none;border:1px solid var(--trait);opacity:.5;
  transition:opacity .3s ease,border-color .3s ease;
}
.carrousel__vign:hover{opacity:.86}
.carrousel__vign[aria-current="true"]{opacity:1;border-color:var(--accent)}
.carrousel__vign img{width:100%;height:100%;object-fit:cover}

@media (max-width:700px){
  .carrousel__scene{aspect-ratio:4/3}
  .carrousel__fleche{width:42px;height:42px}
  .carrousel__fleche--prec{left:10px}
  .carrousel__fleche--suiv{right:10px}
  .carrousel__pied{flex-direction:column;gap:6px}
  .carrousel__rampe{
    grid-auto-flow:column;grid-auto-columns:31%;
    overflow-x:auto;scroll-snap-type:x mandatory;
    padding-bottom:8px;-webkit-overflow-scrolling:touch;
  }
  .carrousel__vign{scroll-snap-align:start}
}

/* =============================================================================
   REVUE DE PRESSE EN CARROUSEL
   Une citation à la fois, en grand. Six cartes côte à côte se lisaient comme
   un mur de texte : personne n'en lisait aucune.
   ========================================================================== */
.presse-defile{max-width:1000px;margin:0 auto}
.presse-defile__piste{
  display:grid;grid-template-columns:52px 1fr 52px;gap:26px;align-items:center;
}
.presse-defile__cadre{
  position:relative;background:var(--fond-bloc);border:1px solid var(--trait);
  padding:clamp(28px,3.4vw,46px) clamp(26px,3.6vw,52px);
  min-height:300px;display:flex;flex-direction:column;
}
.presse-defile__article{display:none;flex-direction:column;flex-grow:1}
.presse-defile__article.est-active{display:flex}
.presse-defile__entete{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:20px}
.presse-defile__media{font-family:var(--serif);font-size:19px;color:var(--texte-vif)}
.presse-defile__date{
  font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--accent-2);
}
.presse-defile__cite{
  font-family:var(--serif);font-size:clamp(19px,2vw,26px);line-height:1.45;
  color:var(--texte-vif);margin:0 0 20px;
}
.presse-defile__titre{
  margin:0 0 24px;font-size:15px;line-height:1.65;color:var(--texte);opacity:.8;
  flex-grow:1;
}
.presse-defile__article .lien-file{align-self:flex-start}
.presse-defile__fleche{
  width:52px;height:52px;padding:0;line-height:1;font-size:15px;
  background:none;border:1px solid var(--trait);color:var(--accent);cursor:pointer;
  transition:background .25s ease,color .25s ease,border-color .25s ease;
}
.presse-defile__fleche:hover{background:var(--accent);border-color:var(--accent);color:var(--fond)}
.presse-defile__points{display:flex;gap:10px;justify-content:center;margin:26px 0 14px}
.presse-defile__point{
  width:9px;height:9px;border-radius:50%;padding:0;cursor:pointer;
  background:none;border:1px solid var(--accent);opacity:.55;
  transition:background .25s ease,opacity .25s ease;
}
.presse-defile__point[aria-current="true"]{background:var(--accent);opacity:1}
.presse-defile__note{
  max-width:64ch;margin:0 auto;text-align:center;
  font-size:13.5px;line-height:1.75;color:var(--texte);opacity:.68;
}
@media (max-width:700px){
  .presse-defile__piste{grid-template-columns:1fr;gap:18px}
  .presse-defile__fleche{display:none}
  .presse-defile__cadre{min-height:0}
}

/* --- La revue en liste, sur sa page dédiée -------------------------------- */
.presse-defile-liste{
  background:var(--fond-bloc);border:1px solid var(--trait);
  padding:clamp(26px,3vw,40px);
}
.presse-defile-ligne{
  display:grid;grid-template-columns:200px 1fr 110px;gap:24px;align-items:baseline;
  padding:20px 0;border-top:1px solid var(--trait);
}
.presse-defile-ligne:first-child{border-top:none;padding-top:0}
.presse-defile-ligne__media{font-family:var(--serif);font-size:17px;color:var(--texte-vif)}
.presse-defile-ligne__date{
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent-2);
}
.presse-defile-ligne__titre{font-size:16px;line-height:1.6}
.presse-defile-ligne__cite{
  margin:8px 0 0;font-size:14.5px;line-height:1.7;color:var(--texte);opacity:.78;
  font-style:italic;
}
.presse-defile-ligne__lien{
  font-size:12px;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;
  color:var(--accent);
}
.presse-defile-ligne__lien:hover{color:var(--accent-2)}
@media (max-width:760px){
  .presse-defile-ligne{grid-template-columns:1fr;gap:8px}
}

/* =============================================================================
   PAGE CONTACT — trois niveaux
   Avant : cinq cartes de même rang, dont une trois fois plus haute parce
   qu'elle empilait quatre personnes. Après : une adresse qui domine, puis
   deux rangées de cartes égales.
   ========================================================================== */
.contact-tete{
  background:var(--fond-bloc);border:1px solid var(--trait);
  display:grid;grid-template-columns:150px 1fr auto;gap:clamp(22px,3vw,38px);
  align-items:center;padding:clamp(26px,3vw,36px) clamp(26px,3.4vw,42px);
}
.contact-tete__aqua{width:100%;height:auto;margin:0}
.contact-tete h3{font-size:clamp(21px,2.2vw,27px);margin:0 0 8px}
.contact-tete p{margin:0;font-size:15.5px;color:var(--texte);opacity:.8;max-width:52ch}
.contact-tete__mail{
  font-family:var(--serif);font-size:clamp(19px,1.9vw,24px);text-decoration:none;
  color:var(--accent);border-bottom:1px solid var(--accent);padding-bottom:6px;
  white-space:nowrap;
}
.contact-tete__mail:hover{color:var(--accent-2);border-color:var(--accent-2)}
@media (max-width:860px){
  .contact-tete{grid-template-columns:1fr;text-align:center;justify-items:center}
  .contact-tete__aqua{width:min(100%,130px)}
  .contact-tete p{max-width:none}
}

.contact-rang{
  display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;
  margin:clamp(38px,4.4vw,60px) 0 14px;
}
.contact-rang h3{font-size:clamp(19px,1.9vw,23px);margin:0}
.contact-rang span{font-size:14.5px;color:var(--texte);opacity:.72}

.contact-equipe{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.contact-cas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.contact-equipe .fiche,.contact-cas .fiche{display:flex;flex-direction:column}
.contact-cas .fiche p{flex-grow:1}
.fiche__coord{margin-top:auto;font-size:15px;line-height:1.9}
.fiche__coord a{text-decoration:none}
@media (max-width:980px){
  .contact-equipe{grid-template-columns:1fr 1fr}
  .contact-cas{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
  .contact-equipe,.contact-cas{grid-template-columns:1fr}
}
/* ══ COMPOSANTS COMMUNS — fin ══ */