/* =====================================================================
   Le Refuge Créatif — feuille de style unique
   Palette de la charte : terre cuite, crème, encre olive (#383d2b), sauge.
   ===================================================================== */

:root {
  --terre:        #b5714f;
  --terre-fonce:  #94573a;
  --creme:        #f9f4ec;
  --creme-fonce:  #efe2d3;
  --encre:        #383d2b;   /* charte graphique */
  --encre-doux:   #6e7360;   /* la même teinte, éclaircie */
  --sauge:        #8a9b5b;
  --bleu:         #4f6d8f;
  --bordure:      #ded0bc;
  --terre-clair:  #e7cbb9;   /* terracotta éclairci, pour les cadres */
  --alerte:       #b04a3a;
  --succes:       #4d7a4f;
  --ambre:        #d99b28;
  --rayon:        10px;
  --ombre:        0 2px 10px rgba(56, 61, 43, .08);
  --ombre-forte:  0 8px 32px rgba(56, 61, 43, .20);
  /* La charte : Playfair Display pour les titres, Lato pour le texte courant.
     Les polices de secours restent listées derrière — si Google Fonts ne répond
     pas, le site garde des formes proches plutôt que celles du navigateur.
     Les noms de variables sont conservés pour que rien d'autre ne bouge :
     --serif désigne la police des titres, --sans celle du texte. */
  --serif:        'Playfair Display', Georgia, 'Iowan Old Style', 'Palatino Linotype', serif;
  --titre-sc:     'Playfair Display SC', 'Playfair Display', Georgia, serif;
  --calligraphie: 'Lavishly Yours', 'Brush Script MT', cursive;
  --sans:         'Lato', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--creme);
  color: var(--encre);
  /* 16,5 px et non 17 : Lato a un œil plus petit que la Georgia précédente,
     mais des lettres plus larges — la ligne resterait trop longue à l'identique. */
  font: 16.5px/1.7 var(--sans);
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--terre-fonce); text-decoration: none; border-bottom: 1px solid rgba(181,113,79,.35); }
a:hover { border-bottom-color: var(--terre); }

h1, h2, h3, h4 { font-family: var(--serif); line-height: 1.2; margin: 0 0 .6em; font-weight: 600; }
h1 { font-size: 2.4rem; }
h2 { font-size: 1.7rem; }
h3 { font-size: 1.25rem; }

.contenu { max-width: 1120px; margin: 0 auto; padding: 0 22px; }
.contenu--etroit { max-width: 760px; }

/* --- bandeau sandbox ------------------------------------------------ */
.sandbox {
  background: repeating-linear-gradient(45deg, #f6dfa8, #f6dfa8 12px, #f0d493 12px, #f0d493 24px);
  color: #5c4310;
  font: 600 13px/1.4 var(--sans);
  padding: 8px 22px;
  text-align: center;
  letter-spacing: .02em;
}
.sandbox a { color: #5c4310; }

/* --- en-tête -------------------------------------------------------- */
.entete {
  background: #fff;
  border-bottom: 1px solid var(--bordure);
  position: sticky; top: 0; z-index: 40;
}
.entete__barre {
  display: flex; align-items: center; gap: 26px;
  max-width: 1120px; margin: 0 auto; padding: 14px 22px;
}
.logo {
  font: 600 1.35rem/1 var(--serif);
  color: var(--terre-fonce); border: 0; white-space: nowrap;
}
/* Le sous-titre est en capitales et en petit corps : c'est l'interlettrage qui
   le rend lisible, davantage que la taille. */
.logo small { display: block; font: 400 .68rem/1.35 var(--sans); color: var(--encre-doux); letter-spacing: .13em; text-transform: uppercase; margin-top: 6px; }

/* Le nom du Refuge, en deux écritures : petites capitales pour « Le Refuge »,
   calligraphie pour le dernier mot. Les deux polices n'ont ni la même hauteur
   d'œil ni la même ligne de base, d'où le décalage et l'agrandissement — sans
   quoi la signature paraîtrait minuscule et posée trop haut. */
.nom-site { display: inline-flex; align-items: baseline; gap: .14em; line-height: 1; }
.nom-site__debut { font-family: var(--titre-sc); letter-spacing: .015em; }
.nom-site__signature {
  font-family: var(--calligraphie);
  font-weight: 400; font-size: 2.05em; line-height: .62;
  position: relative; top: -.03em;   /* à peine au-dessus de la ligne de base */
}
.nav { display: flex; gap: 20px; flex-wrap: wrap; margin-left: auto; align-items: center; font: 15px/1 var(--sans); }
.nav a { color: var(--encre); border: 0; padding: 6px 0; border-bottom: 2px solid transparent; }
.nav a:hover, .nav a.actif { border-bottom-color: var(--terre); }
.nav__compte { display: flex; gap: 12px; align-items: center; padding-left: 18px; border-left: 1px solid var(--bordure); }
.pastille {
  background: var(--terre); color: #fff; border-radius: 20px;
  font: 600 12px/1 var(--sans); padding: 4px 8px; margin-left: 5px;
}
.menu-bouton { display: none; background: none; border: 1px solid var(--bordure); border-radius: 8px; padding: 8px 11px; font-size: 18px; cursor: pointer; margin-left: auto; }

/* --- boutons -------------------------------------------------------- */
.bouton {
  display: inline-block; border: 0; cursor: pointer;
  background: var(--terre); color: #fff;
  font: 600 15px/1 var(--sans); padding: 13px 22px;
  border-radius: var(--rayon); text-align: center;
}
.bouton:hover { background: var(--terre-fonce); color: #fff; }
.bouton--secondaire { background: #fff; color: var(--encre); border: 1px solid var(--bordure); }
.bouton--secondaire:hover { background: var(--creme-fonce); color: var(--encre); }
.bouton--sauge { background: var(--sauge); }
.bouton--sauge:hover { background: #74854a; }
.bouton--danger { background: #fff; color: var(--alerte); border: 1px solid #e7c3bc; }
.bouton--danger:hover { background: #fbeeeb; color: var(--alerte); }
.bouton--petit { padding: 8px 13px; font-size: 13px; }
.bouton--bloc { display: block; width: 100%; }
.bouton[disabled] { opacity: .5; cursor: not-allowed; }

/* --- messages flash ------------------------------------------------- */
.flash {
  border-radius: var(--rayon); padding: 13px 18px; margin: 0 0 14px;
  font: 15px/1.5 var(--sans); border-left: 4px solid;
}
.flash--succes { background: #eef4ea; border-color: var(--succes); color: #2f4f31; }
.flash--erreur { background: #fbeeeb; border-color: var(--alerte); color: #7d2f22; }
.flash--info   { background: #eef2f7; border-color: var(--bleu); color: #33475e; }
.flash--attention { background: #fdf4e0; border-color: var(--ambre); color: #6b4c12; }

/* --- héros ---------------------------------------------------------- */
.heros {
  /* Autour du fond du logo, #e7d5c4 : la bande passe par cette teinte exacte au
     milieu, plus claire en haut, à peine plus soutenue en bas. Un logo à fond
     transparent s'y pose sans démarcation. */
  background: linear-gradient(160deg, #f0e4d6 0%, #e7d5c4 55%, #dfcab4 100%);
  border-bottom: 1px solid var(--bordure);
  padding: 62px 0 54px;
}
.heros h1 { font-size: 2.9rem; max-width: 20ch; margin-bottom: .35em; }
.heros p { font-size: 1.18rem; max-width: 58ch; color: var(--encre-doux); }
.heros__liens { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 28px; }

/* Le logo à droite du texte. La colonne s'adapte à l'image sans jamais dépasser
   420 px, et le texte garde le reste : une image plus grande ne doit pas écraser
   la présentation du Refuge. */
.heros__grille { display: grid; grid-template-columns: 1fr auto; gap: 44px; align-items: center; }
.heros__logo { max-width: 420px; justify-self: end; }
.heros__logo img { width: 100%; height: auto; }

/* --- sections ------------------------------------------------------- */
.section { padding: 54px 0; }
.section--claire { background: #fff; border-top: 1px solid var(--bordure); border-bottom: 1px solid var(--bordure); }
.section__titre { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 26px; }
.section__titre h2 { margin: 0; }
.chapo { color: var(--encre-doux); max-width: 66ch; }

/* --- carrousel de news ---------------------------------------------- */
.carrousel { position: relative; background: #fff; border: 1px solid var(--bordure); border-radius: 14px; overflow: hidden; box-shadow: var(--ombre); }
.carrousel__piste { display: flex; transition: transform .45s ease; }
.carrousel__vue { min-width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
.carrousel__image { background: var(--creme-fonce); min-height: 280px; display: flex; align-items: center; justify-content: center; color: var(--encre-doux); font: 14px var(--sans); }
.carrousel__image img { width: 100%; height: 100%; object-fit: cover; }
.carrousel__texte { padding: 34px 38px; }
.carrousel__date { font: 13px/1 var(--sans); color: var(--encre-doux); text-transform: uppercase; letter-spacing: .06em; }
.carrousel__nav { display: flex; gap: 8px; align-items: center; justify-content: center; padding: 14px; border-top: 1px solid var(--bordure); background: var(--creme); }
.carrousel__puce { width: 9px; height: 9px; border-radius: 50%; border: 0; background: var(--bordure); cursor: pointer; padding: 0; }
.carrousel__puce.actif { background: var(--terre); }
.carrousel__fleche { background: #fff; border: 1px solid var(--bordure); border-radius: 8px; width: 34px; height: 34px; cursor: pointer; font-size: 15px; }

/* --- grille de cartes ----------------------------------------------- */
.grille { display: grid; gap: 22px; grid-template-columns: repeat(auto-fill, minmax(288px, 1fr)); }
.carte {
  background: #fff; border: 1px solid var(--bordure); border-radius: 14px;
  overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--ombre);
}
/* Hauteur FIXE, et non pas un rapport d'aspect : quelle que soit la taille de
   la photo déposée — ou son absence — toutes les cartes d'une grille gardent
   exactement la même hauteur d'image. */
.carte__image {
  height: 210px; overflow: hidden;
  background: var(--creme-fonce);
  display: flex; align-items: center; justify-content: center; position: relative;
}
.carte__image img { width: 100%; height: 100%; object-fit: cover; }
.carte__marque { position: absolute; left: 12px; top: 12px; background: rgba(255,255,255,.94); border-radius: 20px; padding: 5px 11px; font: 600 12px/1 var(--sans); }
.carte__corps { padding: 20px 22px; flex: 1; display: flex; flex-direction: column; gap: 10px; }
.carte__corps h3 { margin: 0; }
.carte__meta { font: 13px/1.5 var(--sans); color: var(--encre-doux); display: flex; flex-wrap: wrap; gap: 4px 14px; }
.carte__prix { font: 600 1.05rem var(--serif); margin-top: auto; }
.carte__prix s { color: var(--encre-doux); font-weight: 400; font-size: .9em; margin-right: 6px; }
.carte__pied { padding: 0 22px 20px; }

/* --- filtres -------------------------------------------------------- */
.filtres { background: #fff; border: 1px solid var(--bordure); border-radius: 14px; padding: 18px 20px; margin-bottom: 28px; box-shadow: var(--ombre); }
.filtres form { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; }
.champ { display: flex; flex-direction: column; gap: 5px; font: 13px/1.3 var(--sans); color: var(--encre-doux); }
.champ label { font-weight: 600; color: var(--encre); }
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=date], input[type=time], input[type=datetime-local], input[type=tel],
select, textarea {
  font: 15px var(--sans); padding: 10px 12px; border: 1px solid var(--bordure);
  border-radius: 8px; background: #fff; color: var(--encre); min-width: 0;
}
input:focus, select:focus, textarea:focus { outline: 2px solid rgba(181,113,79,.4); outline-offset: 1px; }
textarea { min-height: 120px; resize: vertical; font-family: var(--sans); }
.champ--large { flex: 1 1 240px; }

/* --- popup (faux modal) --------------------------------------------- */
.popup { position: fixed; inset: 0; background: rgba(47,42,38,.55); display: none; z-index: 90; padding: 26px; overflow: auto; }
.popup.ouvert { display: block; }
.popup__boite {
  background: var(--creme); max-width: 860px; margin: 24px auto; border-radius: 16px;
  box-shadow: var(--ombre-forte); overflow: hidden; position: relative;
}
.popup__fermer {
  position: absolute; right: 14px; top: 14px; z-index: 2;
  background: rgba(255,255,255,.94); border: 1px solid var(--bordure); border-radius: 50%;
  width: 36px; height: 36px; font-size: 19px; cursor: pointer; line-height: 1;
}
.popup__banniere { aspect-ratio: 21/8; background: var(--creme-fonce); }
.popup__banniere img { width: 100%; height: 100%; object-fit: cover; }
.popup__corps { padding: 28px 32px 32px; }
.popup__grille { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 26px; margin: 20px 0; font: 15px/1.6 var(--sans); }
.popup__grille dt { font-weight: 600; color: var(--encre-doux); font-size: 13px; text-transform: uppercase; letter-spacing: .04em; margin-top: 12px; }
.popup__grille dd { margin: 2px 0 0; }
.popup__vignettes { display: flex; gap: 10px; flex-wrap: wrap; margin: 18px 0; }
.popup__vignettes span { width: 92px; height: 66px; background: var(--creme-fonce); border-radius: 8px; display: flex; align-items: center; justify-content: center; font: 11px var(--sans); color: var(--encre-doux); overflow: hidden; }
.popup__vignettes img { width: 100%; height: 100%; object-fit: cover; }
.popup__dates { border-top: 1px solid var(--bordure); margin-top: 22px; padding-top: 18px; }
.popup__actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 22px; }

/* --- agenda --------------------------------------------------------- */
.agenda__entete { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.agenda__mois { font: 600 1.5rem var(--serif); text-transform: capitalize; }
.calendrier { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: var(--bordure); border: 1px solid var(--bordure); border-radius: 12px; overflow: hidden; }
.calendrier__jour-nom { background: var(--creme-fonce); font: 600 12px/1 var(--sans); text-transform: uppercase; letter-spacing: .05em; padding: 11px 8px; text-align: center; color: var(--encre-doux); }
.calendrier__case { background: #fff; min-height: 118px; padding: 7px 8px; }
.calendrier__case--vide { background: #fbf8f3; }
.calendrier__case--aujourdhui { background: #fdf6ea; }
.calendrier__numero { font: 600 13px var(--sans); color: var(--encre-doux); }
.calendrier__case--aujourdhui .calendrier__numero { color: var(--terre-fonce); }
.evenement {
  display: block; width: 100%; text-align: left; border: 0; cursor: pointer;
  border-left: 4px solid var(--terre); background: var(--creme);
  border-radius: 5px; padding: 6px 7px; margin-top: 5px;
  font: 12px/1.35 var(--sans); color: var(--encre);
}
.evenement:hover { background: var(--creme-fonce); }
.evenement strong { display: block; font-weight: 600; }
.evenement small { color: var(--encre-doux); }
.evenement--annule { opacity: .62; }
.evenement--annule strong { text-decoration: line-through; }
.evenement--complet small { color: var(--alerte); }

/* --- tableaux ------------------------------------------------------- */
.tableau { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--bordure); border-radius: 12px; overflow: hidden; font: 15px/1.5 var(--sans); }
.tableau th, .tableau td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--bordure); vertical-align: middle; }
.tableau th { background: var(--creme-fonce); font: 600 13px var(--sans); text-transform: uppercase; letter-spacing: .04em; color: var(--encre-doux); }
.tableau tr:last-child td { border-bottom: 0; }
.tableau tbody tr:hover { background: #fdfaf5; }
.tableau--compact th, .tableau--compact td { padding: 8px 11px; font-size: 14px; }
.tableau__vide { padding: 26px; text-align: center; color: var(--encre-doux); font: 15px var(--sans); }

/* --- étiquettes ----------------------------------------------------- */
.etiquette { display: inline-block; font: 600 12px/1 var(--sans); padding: 5px 9px; border-radius: 20px; background: var(--creme-fonce); color: var(--encre-doux); }
.etiquette--ok { background: #e7f0e7; color: #35592f; }
.etiquette--attention { background: #fdf0d8; color: #6b4c12; }
.etiquette--danger { background: #f9e5e0; color: #7d2f22; }
.etiquette--info { background: #e6ecf4; color: #33475e; }

/* --- panneaux ------------------------------------------------------- */
.panneau { background: #fff; border: 1px solid var(--bordure); border-radius: 14px; padding: 24px 26px; box-shadow: var(--ombre); }
/* Deux blocs qui se suivent sont séparés du même écart, qu'il s'agisse de deux
   panneaux ou d'une grille de panneaux : sans la deuxième ligne, une grille
   placée après un panneau viendrait se coller à lui. */
.panneau + .panneau,
.panneau + .deux-colonnes, .deux-colonnes + .panneau,
.deux-colonnes + .deux-colonnes { margin-top: 22px; }
/* À l'intérieur d'une grille, en revanche, l'espacement vient de `gap` : la
   marge ci-dessus décalerait vers le bas tous les panneaux sauf le premier, et
   leurs sommets ne seraient plus alignés.
   La liste couvre toutes les grilles du site, et non les deux qui avaient posé
   problème : c'est la troisième fois que ce défaut réapparaît ailleurs — la page
   « À propos » alignait mal ses trois lieux pour cette raison exactement. */
:is(.grille, .deux-colonnes, .panier__grille, .offres, .valeurs, .pied__grille,
    .chiffres) > .panneau + .panneau { margin-top: 0; }
.panneau__titre { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.panneau__titre h2, .panneau__titre h3 { margin: 0; }

/* --- valeurs, prix -------------------------------------------------- */
.valeurs { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
/* Sur « À propos », les valeurs sont rendues à l'intérieur de la colonne de
   texte, large de 760 px : trois encarts y tiennent, pas quatre. La colonne
   reste étroite — c'est ce qui rend la prose lisible — mais la grille, elle,
   s'élargit vers la droite jusqu'à la largeur du contenu.
   Elle n'est surtout pas recentrée : la colonne étroite est alignée à gauche
   dans le contenu, et une grille centrée sur elle débordait donc à gauche du
   texte, désalignée avec tout le reste de la page. Même largeur que `.contenu`,
   même bord gauche. */
@media (min-width: 1000px) {
  .contenu--etroit .valeurs {
    width: min(1076px, calc(100vw - 44px));
    grid-template-columns: repeat(4, 1fr);
  }
}
.valeur { background: #fff; border: 1px solid var(--bordure); border-radius: 14px; padding: 22px 24px; }
.valeur h3 { color: var(--terre-fonce); }
.valeur p { margin: 0; color: var(--encre-doux); font-size: .97rem; }

/* --- newsletter ------------------------------------------------------
   Trois formes possibles pour le même encart : le formulaire du site, le
   formulaire MailPoet chargé dans un cadre, ou son code HTML inséré tel
   quel. Les trois partagent le même habillage, pour que le passage de l'un
   à l'autre ne se voie pas. */
.newsletter { text-align: center; max-width: 560px; margin: 0 auto; }
.newsletter__titre { margin: 0 0 10px; }
.newsletter__texte { font: 1.02rem/1.7 var(--sans); color: var(--encre-doux); margin: 0 auto 22px; }
.newsletter__form { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.newsletter__form input[type=email] { flex: 1 1 260px; }

.newsletter__cadre { background: #fff; border: 1px solid var(--bordure); border-radius: 14px; padding: 6px 10px; }
.newsletter__iframe { display: block; width: 100%; border: 0; }

/* MailPoet livre son formulaire habillé — bordure noire, bouton noir,
   police importée. Le code PHP retire ces styles en dur ; les règles qui
   suivent prennent le relais pour que les champs ressemblent à ceux du
   reste du site. */
.newsletter__mailpoet .mailpoet_form_popup_overlay { display: none; }
.newsletter__mailpoet .mailpoet_form { border: 0; background: none; padding: 0; width: 100%; }
.newsletter__mailpoet form.mailpoet_form { padding: 0; }
.newsletter__mailpoet .mailpoet-heading { font: 600 1.6rem/1.25 var(--serif); color: var(--encre); margin: 0 0 10px; }
.newsletter__mailpoet .mailpoet_form_paragraph { font: 1rem/1.7 var(--sans); color: var(--encre-doux); margin: 0 0 18px; }
.newsletter__mailpoet .mailpoet_paragraph { margin: 0 0 12px; }
.newsletter__mailpoet .mailpoet_text { width: 100%; }
.newsletter__mailpoet .mailpoet_submit {
  width: 100%; border: 0; cursor: pointer;
  background: var(--terre); color: #fff;
  font: 600 15px/1 var(--sans); padding: 13px 22px; border-radius: var(--rayon);
}
.newsletter__mailpoet .mailpoet_submit:hover { background: var(--terre-fonce); }
.newsletter__mailpoet .mailpoet_message { margin: 0; padding: 0; }
.newsletter__mailpoet .mailpoet_validate_success { color: var(--succes); }
.newsletter__mailpoet .mailpoet_validate_error,
.newsletter__mailpoet .parsley-errors-list { color: var(--alerte); font: 14px var(--sans); }
.newsletter__mailpoet .mailpoet_form_loading { display: none; }
.newsletter__mailpoet a { color: var(--terre-fonce); }

.offres { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); align-items: start; }
/* Toutes les cartes portent le même cadre, dans un terracotta éclairci : assez
   présent pour dessiner les trois colonnes, assez discret pour ne pas crier.
   Aucune formule n'est mise en avant — c'était le cas de la première, ce qui
   orientait le choix du visiteur sans qu'on l'ait voulu. */
.offre { background: #fff; border: 2px solid var(--terre-clair); border-radius: 16px; padding: 28px; display: flex; flex-direction: column; gap: 14px; box-shadow: var(--ombre); }
.offre__prix { font: 600 2.1rem/1 var(--serif); color: var(--terre-fonce); }
.offre__prix small { font: 400 .85rem var(--sans); color: var(--encre-doux); display: block; margin-top: 6px; }
/* Deux lignes réservées, occupées ou non : c'est ce qui met les boutons
   « Nous écrire pour souscrire » à la même hauteur d'une carte à l'autre. Une
   description plus longue les désalignerait de nouveau — deux phrases courtes
   valent mieux ici.
   La réserve était de trois lignes : la troisième, jamais utilisée, se voyait
   comme un vide au-dessus du bouton et rompait la symétrie. */
.offre__texte { color: var(--encre-doux); margin: 0; min-height: 3.4em; }
/* Le même écart au-dessus et en dessous. Les 14 px viennent s'ajouter au `gap`
   de la carte, qui vaut lui aussi 14 px : le bouton respire donc de 28 px des
   deux côtés. */
.offre .bouton--bloc { margin: 14px 0; }
.offre ul { margin: 0; padding-left: 20px; color: var(--encre-doux); font-size: .96rem; }
.offre ul li { margin-bottom: 6px; }

/* --- FAQ ------------------------------------------------------------ */
.faq__theme { margin-bottom: 34px; }
.faq details { background: #fff; border: 1px solid var(--bordure); border-radius: 10px; margin-bottom: 10px; overflow: hidden; }
.faq summary { padding: 15px 20px; cursor: pointer; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 14px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--terre); font-size: 1.3rem; line-height: 1; }
.faq details[open] summary::after { content: '–'; }
.faq details > div { padding: 0 20px 18px; color: var(--encre-doux); }

/* --- formulaires ---------------------------------------------------- */
.form { display: grid; gap: 16px; }
.form__ligne { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; }
.form label { font: 600 14px var(--sans); display: block; margin-bottom: 5px; }
.form .aide { font: 13px/1.4 var(--sans); color: var(--encre-doux); margin-top: 4px; }
.form__champ input, .form__champ select, .form__champ textarea { width: 100%; }
.case { display: flex; gap: 10px; align-items: flex-start; font: 15px/1.45 var(--sans); }
.case input { margin-top: 3px; }

/* --- panier --------------------------------------------------------- */
.panier__grille { display: grid; grid-template-columns: 1.6fr 1fr; gap: 26px; align-items: start; }
.recap { background: #fff; border: 1px solid var(--bordure); border-radius: 14px; padding: 24px; position: sticky; top: 96px; box-shadow: var(--ombre); }
.recap__ligne { display: flex; justify-content: space-between; gap: 14px; font: 15px var(--sans); padding: 7px 0; }
.recap__total { border-top: 2px solid var(--encre); margin-top: 10px; padding-top: 12px; font: 600 1.2rem var(--serif); display: flex; justify-content: space-between; }
.recap__note { font: 13px/1.5 var(--sans); color: var(--encre-doux); margin-top: 12px; }

/* --- écran de paiement simulé --------------------------------------- */
.paiement-test {
  border: 2px dashed var(--ambre); border-radius: 16px; padding: 30px;
  background: #fffaf0; text-align: center;
}
.paiement-test h2 { color: #6b4c12; }
.paiement-test__boutons { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 22px; }

/* --- écrans d'édition à deux colonnes -------------------------------- */
/* Le contenu à gauche, les réglages à droite : les cases à cocher des
   catégories et des animateurs ne mangent plus la largeur du formulaire. */
.edition { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 26px; align-items: start; }
.edition__cote { display: grid; gap: 16px; position: sticky; top: 20px; }

.bloc-cote {
  background: var(--creme); border: 1px solid var(--bordure);
  border-radius: 12px; padding: 16px 18px;
}
.bloc-cote h3 {
  font: 600 12px/1 var(--sans); text-transform: uppercase; letter-spacing: .07em;
  color: var(--encre-doux); margin: 0 0 12px;
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
}
.bloc-cote__lien { font: 400 12px var(--sans); text-transform: none; letter-spacing: 0; }
.bloc-cote .aide { margin-top: 10px; }
.bloc-cote .form__champ label { font-size: 13px; }

/* Liste de cases à cocher compacte, avec ascenseur au-delà de sept lignes */
.liste-cases {
  background: #fff; border: 1px solid var(--bordure); border-radius: 9px;
  max-height: 232px; overflow-y: auto;
}
.liste-cases__ligne {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 11px; cursor: pointer;
  font: 14px/1.35 var(--sans); margin: 0;
}
.liste-cases__ligne + .liste-cases__ligne { border-top: 1px solid var(--creme-fonce); }
.liste-cases__ligne:hover { background: var(--creme); }
.liste-cases__ligne input { margin: 0; flex: none; }
.liste-cases__ligne i {
  width: 12px; height: 12px; border-radius: 3px; flex: none;
  display: inline-block; border: 1px solid rgba(0, 0, 0, .12);
}
.liste-cases__ligne span { min-width: 0; }
.liste-cases__ligne small { color: var(--encre-doux); }
.liste-cases__ligne--archive { opacity: .6; }

@media (max-width: 1000px) {
  .edition { grid-template-columns: 1fr; }
  .edition__cote { position: static; }
  .liste-cases { max-height: none; }
}

/* --- pied de page --------------------------------------------------- */
.pied { background: var(--encre); color: #d8cfc4; margin-top: 60px; padding: 46px 0 26px; font: 15px/1.7 var(--sans); }
.pied a { color: #e8ddd0; border: 0; }
.pied a:hover { color: #fff; text-decoration: underline; }
.pied__grille { display: grid; gap: 30px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.pied h4 { color: #fff; font: 600 15px var(--sans); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 12px; }
.pied ul { list-style: none; margin: 0; padding: 0; }
.pied li { margin-bottom: 7px; }
.pied__bas { border-top: 1px solid #4c5140; margin-top: 34px; padding-top: 18px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 14px; color: #a6a693; }

/* --- administration ------------------------------------------------- */
.admin { display: grid; grid-template-columns: 232px 1fr; min-height: 100vh; }
.admin__lateral { background: #343829; color: #dcd9c8; padding: 22px 0; }
.admin__lateral h1 { color: #fff; font: 600 1.1rem var(--serif); padding: 0 20px; margin-bottom: 6px; }
.admin__lateral p { padding: 0 20px; font: 13px var(--sans); color: #a89e91; margin: 0 0 18px; }
.admin__lateral nav a { display: block; padding: 9px 20px; color: #ddd4c8; border: 0; font: 15px var(--sans); border-left: 3px solid transparent; }
.admin__lateral nav a:hover { background: #3c3833; color: #fff; }
.admin__lateral nav a.actif { background: #45403a; border-left-color: var(--terre); color: #fff; }
.admin__lateral .groupe { font: 600 11px var(--sans); text-transform: uppercase; letter-spacing: .08em; color: #857b6f; padding: 18px 20px 6px; }
.admin__contenu { padding: 28px 32px 60px; background: var(--creme); min-width: 0; }
.admin__entete { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.admin__entete h1 { margin: 0; font-size: 1.7rem; }
.chiffres { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); margin-bottom: 28px; }
.chiffre { background: #fff; border: 1px solid var(--bordure); border-radius: 14px; padding: 20px 22px; }
.chiffre__valeur { font: 600 1.9rem/1 var(--serif); color: var(--terre-fonce); }
.chiffre__libelle { font: 13px var(--sans); color: var(--encre-doux); text-transform: uppercase; letter-spacing: .05em; margin-top: 8px; }
.barre-outils { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 18px; }

/* --- divers --------------------------------------------------------- */
.pagination { display: flex; gap: 6px; justify-content: center; margin-top: 26px; font: 14px var(--sans); }
.pagination a, .pagination span { padding: 8px 13px; border: 1px solid var(--bordure); border-radius: 8px; background: #fff; }
.pagination span.actif { background: var(--terre); color: #fff; border-color: var(--terre); }
.vide { text-align: center; padding: 46px 22px; color: var(--encre-doux); background: #fff; border: 1px dashed var(--bordure); border-radius: 14px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.deux-colonnes { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: start; }

@media (max-width: 900px) {
  .carrousel__vue { grid-template-columns: 1fr; }
  /* Une fois les colonnes empilées, l'image du carrousel occupe toute la
     largeur : sans plafond, elle mangerait la moitié de l'écran. */
  .carrousel__image { min-height: 0; height: 190px; }
  .carte__image { height: 180px; }
  .panier__grille, .deux-colonnes, .popup__grille, .form__ligne { grid-template-columns: 1fr; }
  .recap { position: static; }
  .admin { grid-template-columns: 1fr; }
  .admin__lateral { padding-bottom: 10px; }
  .admin__lateral nav { display: flex; flex-wrap: wrap; }
  .admin__lateral nav a { border-left: 0; border-bottom: 3px solid transparent; }
  .admin__lateral .groupe { display: none; }
  .heros h1 { font-size: 2.1rem; }
  /* Le logo disparaît dès que les deux colonnes ne tiennent plus. Il n'apparaît
     donc que là où il peut se poser à côté du texte : en dessous, il repousserait
     la présentation et les boutons sous la ligne de flottaison. Le nom du Refuge
     reste de toute façon affiché en haut de chaque page. */
  .heros__grille { grid-template-columns: 1fr; gap: 0; }
  .heros__logo { display: none; }
  .calendrier__case { min-height: 92px; }
}
@media (max-width: 720px) {
  /* Les cartes sont empilées : il n'y a plus rien à aligner, et la hauteur
     réservée ne ferait que creuser des trous. */
  .offre__texte { min-height: 0; }
  .carrousel__image { height: 160px; }
  .carte__image { height: 165px; }

  /* En-tête mobile : le sous-titre disparaît, ce qui ramène le logo sur une
     seule ligne. Le bouton du menu se retrouve alors naturellement aligné avec
     le titre, et l'en-tête gagne en hauteur utile. */
  .logo small { display: none; }
  .entete__barre { padding-top: 11px; padding-bottom: 11px; }
  .menu-bouton {
    display: flex; align-items: center; justify-content: center;
    align-self: center;
    width: 44px; height: 44px;      /* cible tactile confortable */
  }
  .nav { display: none; width: 100%; flex-direction: column; align-items: stretch; gap: 0; }
  .nav.ouvert { display: flex; }
  .entete__barre { flex-wrap: wrap; }
  .nav a { padding: 11px 0; border-bottom: 1px solid var(--bordure); }
  .nav__compte { border: 0; padding: 10px 0 0; }
  .calendrier { display: block; border: 0; background: none; }
  .calendrier__jour-nom { display: none; }
  .calendrier__case { border: 1px solid var(--bordure); border-radius: 10px; margin-bottom: 8px; min-height: 0; }
  .calendrier__case--vide { display: none; }
  h1 { font-size: 1.9rem; }
}