/*
 * Feuille de styles commune aux pages publiques, à l’administration et à l’espace camping.
 * Les règles sont regroupées par composants, puis complétées par les ajustements pour petits écrans.
 */
/* ==========================================================
   CAMPING FRAÎCHEUR — RÈGLES OBLIGATOIRES DE MAINTENANCE CSS
   ==========================================================

   Cette feuille est l’UNIQUE feuille de style commune au site public,
   à l’administration et à l’espace camping.

   AVANT TOUTE MODIFICATION :

   1. Lire et rechercher les règles déjà existantes concernant
      l’élément à modifier.

   2. Modifier PRIORITAIREMENT la définition existante à son
      emplacement d’origine.

   3. NE JAMAIS recréer un style, une classe ou une règle déjà
      présente ailleurs dans cette feuille.

   4. INTERDICTION d’ajouter en fin de fichier une nouvelle couche
      de CSS destinée à écraser ou corriger des règles existantes.

   5. INTERDICTION d’augmenter artificiellement la spécificité des
      sélecteurs pour forcer un affichage.

   6. NE PAS utiliser !important sauf nécessité technique réelle,
      clairement identifiée et explicitement acceptée.

   7. NE PAS modifier le style, les dimensions, les espacements,
      les couleurs ou le comportement d’un composant qui ne fait
      pas partie de la demande.

   8. Respecter strictement la charte graphique, les composants,
      les variables et la structure déjà en place.

   9. Toute nouvelle règle doit être réellement nécessaire.
      Si une règle existante peut être adaptée, elle DOIT l’être
      plutôt que d’en créer une nouvelle.

   10. Toute proposition permettant de simplifier cette feuille,
       supprimer des doublons ou redondances, réduire le nombre
       de classes, diminuer la spécificité ou améliorer la cohérence
       générale est bienvenue.

       MAIS toute opération de nettoyage, fusion, suppression,
       déplacement ou restructuration doit être expliquée clairement
       et recevoir un ACCORD EXPLICITE AVANT toute modification.

   OBJECTIF :
   conserver une feuille CSS simple, lisible par un humain,
   prévisible, sans empilement de correctifs et sans surcouches.

   CONVENTION DE NOMMAGE :
   les classes propres au site sont nommées en français, sans accents,
   avec des mots séparés par des tirets.
   ========================================================== */

/* ==========================================================
   PARAMETRES GLOBEAUX DU SITE
   ========================================================== */

:root {
  --bg: #f5f8f5;
  --surface: #fff;
  --soft: #f8fbfc;
  --ink: #163044;
  --muted: #60717f;
  --line: #dce6ea;
  --blue: #0878bd;
  --blue-deep: #045584;
  --green: #7fac14;
  --green-deep: #5c8308;
  --red: #a62b2b;
  --radius: 20px;
  --small: 12px;
  --shadow: 0 12px 35px rgba(25,68,90,.08);
  --max: 1180px;
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html {
  scroll-behavior: smooth;
  overflow-y: scroll;
}

body {
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 8% 4%,rgba(45,183,223,.08),transparent 26%),
    radial-gradient(circle at 92% 2%,rgba(127,172,20,.07),transparent 24%),
    var(--bg);
  font: 15px/1.55 Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

a {
  color: inherit;
}

img {
  max-width: 100%;
}

button,input,textarea,select {
  font: inherit;
}

h1,h2,h3,p {
  margin-top: 0;
}

h1 {
  margin-bottom: 18px;
  font-size: clamp(1.65rem,3vw,2.25rem);
  line-height: 1.15;
  letter-spacing: -.025em;
}

h2 {
  margin-bottom: 14px;
  font-size: 1.25rem;
  line-height: 1.3;
}

h3 {
  font-size: 1.08rem;
  line-height: 1.25;
}

p {
  color: var(--muted);
}

/* ==========================================================
   STRUCTURE COMMUNE DES PAGES
   utilisé dans : index.php, label.php, carte.php, admin, espace-camping
   ========================================================== */

.conteneur {
  width: min(var(--max),calc(100% - 36px));
  margin-inline: auto;
}

.page {
  padding: 28px 0 54px;
}

.page-etroite {
  max-width: 480px;
}

.page-etroite h1 {
  margin-bottom: 12px;
}

.page-etroite label {
  margin: 16px 0;
}

.page > section + section,.page > form > section + section {
  margin-top: 18px;
}

.page > form > .actions {
  margin: 18px 0;
}

.page > form > .actions > .actions {
  margin: 0;
}

.section {
  padding: 28px 0;
}

.entete-page,.entete-cadre {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.entete-page :is(h1,h2),.entete-cadre :is(h2,h3) {
  margin-bottom: 0;
}

.entete-page p {
  margin-bottom: 0;
}

.entete-page h1 + p {
  margin-top: 8px;
}

.entete-cadre {
  align-items: flex-start;
  gap: 8px 16px;
}

.entete-cadre > p {
  flex-basis: 100%;
  margin: 0;
}

.cadre:where(:not(.cadre-detail)) > :last-child,.etape > div > :last-child {
  margin-bottom: 0;
}

.cadre {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 24px;
}

.cadre-compact {
  padding: 18px;
  border-radius: var(--small);
  box-shadow: none;
}

.empilement {
  display: grid;
  align-content: start;
  gap: 14px;
}

.formulaire-en-ligne {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.empilement > .formulaire-en-ligne select {
  flex: 1 1 180px;
  width: auto;
}

.cadre > .empilement + .grille-formulaire,.cadre > .grille-formulaire + .cadre-tableau {
  margin-top: 18px;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.barre-outils {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  margin: 14px 0;
}

.recherche {
  position: relative;
  display: flex;
  flex: 1 1 280px;
  max-width: 620px;
  gap: 8px;
}

.recherche input {
  padding-right: 38px;
}

.surtitre {
  display: block;
  margin: 0 0 7px;
  color: var(--green-deep);
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.introduction {
  max-width: 720px;
  font-size: 1.08rem;
}

.discret,.aide,.vide {
  color: var(--muted);
}

.aide {
  margin: 0;
  font-size: .9rem;
}

.vide {
  margin: 0;
  padding: 18px 0;
}

/* ==========================================================
   ÉTIQUETTES ET MESSAGES
   utilisé dans : index.php, label.php, admin, espace-camping
   ========================================================== */

.etiquette {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 5px 9px;
  border-radius: 999px;
  background: #eef7fb;
  color: var(--blue-deep);
  font-size: .75rem;
  font-weight: 760;
  white-space: nowrap;
}

.etiquette.est-valide {
  background: #eef6df;
  color: #4d7000;
}

.etiquette.est-invalide {
  background: #fff1f1;
  color: var(--red);
}

.etiquette.est-en-attente {
  background: #f2f4f5;
  color: var(--muted);
}

.proposition-contributeur .etiquette.est-en-attente {
  background: #fff3d6;
  color: #765400;
}

.badge-notification {
  display: inline-flex;
  min-width: 1.35rem;
  height: 1.35rem;
  align-items: center;
  justify-content: center;
  margin-left: .3rem;
  padding: 0 .35rem;
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  font-size: .72rem;
  font-weight: 800;
  line-height: 1;
}

.message {
  margin: 20px 0;
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: var(--small);
  background: var(--soft);
  color: var(--ink);
}

.message-succes {
  background: #f0f7e6;
  border-color: #d3e5ad;
  color: #456500;
}

.message-erreur {
  background: #fff1f1;
  border-color: #edc7c7;
  color: #8b2424;
}

/* ==========================================================
   FORMULAIRES COMMUNS
   utilisé dans : admin, espace-camping
   ========================================================== */

form {
  margin: 0;
}

label {
  display: grid;
  gap: 6px;
  color: var(--ink);
  font-size: .9rem;
  font-weight: 650;
}

label small {
  color: var(--muted);
  font-weight: 400;
}

input,select,textarea {
  min-width: 0;
  max-width: 100%;
  font-weight: 400;
}

input[type="file"] {
  width: 100%;
}

input:is([type="checkbox"],[type="radio"]) {
  flex: 0 0 auto;
  width: auto;
  margin: 0;
  accent-color: var(--blue);
}

/* -----------------------------------
   TÉLÉCHARGEMENT DE FICHIERS
   utilisé dans : administration, espace camping
   ----------------------------------- */

.champ-fichier {
  width: 100%;
  color: var(--muted);
  font: inherit;
}

.champ-fichier::file-selector-button {
  min-height: 36px;
  margin-right: 10px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: var(--small);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: .82rem;
  font-weight: 700;
  cursor: pointer;
}

.champ-fichier::file-selector-button:hover {
  border-color: var(--blue);
  color: var(--blue-deep);
}




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

input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]),select,textarea {
  width: 100%;
  min-height: 40px;
  padding: 9px 11px;
  border: 1px solid #cbdbe2;
  border-radius: 11px;
  outline: 0;
  background: var(--surface);
  color: var(--ink);
}

textarea {
  min-height: 110px;
  resize: vertical;
}

input:focus,select:focus,textarea:focus {
  border-color: #74add0;
  box-shadow: 0 0 0 3px rgba(8,120,189,.08);
}

.formulaire {
  display: grid;
  gap: 16px;
}

.grille-formulaire {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(220px,100%),1fr));
  align-items: end;
  gap: 14px;
}

.grille-formulaire .large {
  grid-column: 1/-1;
}

.grille-formulaire > *,.grille-bandeau > *,.grille-portail > *,.grille-contenu > *,.grille-photos > *,.etape > * {
  min-width: 0;
}

.logo-connexion {
  display: block;
  width: 76px;
  margin-top: 0;
  margin-bottom: 14px;
  margin-right: auto;
  margin-left: 0; /* Aligne à gauche */
}

.lien-aide {
  display: grid;
  gap: 4px;
  text-align: center;
}

.lien-aide a {
  color: var(--blue-deep);
  font-weight: 700;
}

.lien-aide,.lien-retour {
  margin-top: 14px;
  color: var(--muted);
  font-size: .9rem;
}

.lien-retour {
  display: block;
  text-align: center;
  text-decoration: none;
}

/* ==========================================================
   TABLEAUX ET SYNTHÈSES
   utilisé dans : admin, espace-camping
   ========================================================== */

.cadre-tableau {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--small);
  background: var(--surface);
}

.tableau {
  width: 100%;
  border-collapse: collapse;
}

.tableau :is(th,td) {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.tableau th {
  background: #f5f8f8;
  color: var(--muted);
  font-size: .78rem;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.tableau tr:last-child td {
  border-bottom: 0;
}

.tableau td small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
}

.tableau td strong a {
  overflow-wrap: anywhere;
}

.tableau td {
  overflow-wrap: anywhere;
}

.tableau .ligne-vide {
  padding: 22px;
  color: var(--muted);
  text-align: center;
}

.actions-ligne {
  white-space: nowrap;
}

.liens-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.lien-tri {
  color: inherit;
  text-decoration: none;
}

.point-geo {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 5px;
  border-radius: 50%;
  background: #a6b3ba;
}

.point-geo.validee {
  background: var(--green);
}

.point-geo.a_verifier {
  background: #d6a91d;
}

.grille-cadres {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(150px,1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.grille-cadres > :is(a,div) {
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: var(--small);
  background: var(--surface);
  text-decoration: none;
}

.grille-cadres strong {
  display: block;
  margin-top: 4px;
  font-size: 1.35rem;
}

.grille-resume {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(130px,1fr));
  gap: 14px;
}

.sous-section {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.sous-section span {
  display: block;
  color: var(--muted);
  font-size: .86rem;
}

.etape {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: start;
}

.numero-etape {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #eef7fb;
  color: var(--blue-deep);
  font-weight: 800;
}

/* ==========================================================
   BOUTONS ET COMMANDES — CHARTE COMMUNE
   utilisé dans : index.php, carte.php, admin, espace-camping
   ==========================================================
   Hauteur standard : 32 px ; texte : 13 px ; souris desktop.
   Les cartes cliquables conservent leur gabarit structurel.
   ========================================================== */

.bouton,
.navigation-site a,
.niveaux button,
.effacer-recherche,
.etape-progression > .discret button,
.suggestions button,
.retour-carte,
.cf-visionneuse-fermer {
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition:
    background .2s ease,
    color .2s ease,
    border-color .2s ease,
    box-shadow .2s ease;
}

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 32px;
  padding: 0 17px;
  border: 1px solid #cad8df;
  border-radius: 7px;
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 2px 7px rgba(25,68,90,.08);
  transition: background .2s ease,color .2s ease,border-color .2s ease,box-shadow .2s ease,transform .15s ease; /* --- Ajout pour petit bougé au passage de la souri --- */
}

.bouton:is(:hover,:focus-visible) {
  border-color: #a9c2ce;
  background: #fbfdfe;
  box-shadow: 0 4px 12px rgba(25,68,90,.13);
  transform: translateY(-1px); /* --- Ajout pour petit bougé au passage de la souri --- */
}

.bouton-principal {
  border-color: var(--blue);
  background: var(--blue);
  color: #fff;
  box-shadow: 0 2px 7px rgba(8,120,189,.18);
}

.bouton-principal:is(:hover,:focus-visible) {
  border-color: var(--blue-deep);
  background: var(--blue-deep);
  box-shadow: 0 4px 12px rgba(8,120,189,.23);
}

.bouton-succes {
  border-color: var(--green-deep);
  background: var(--green-deep);
  color: #fff;
  box-shadow: 0 2px 7px rgba(92,131,8,.17);
}

.bouton-succes:is(:hover,:focus-visible) {
  border-color: #4f7207;
  background: #4f7207;
  box-shadow: 0 4px 12px rgba(92,131,8,.22);
}

.bouton-danger {
  border-color: #e0bcbc;
  background: #fff7f7;
  color: var(--red);
  box-shadow: 0 2px 7px rgba(166,43,43,.07);
}

.bouton-danger:is(:hover,:focus-visible) {
  border-color: #d79f9f;
  background: #fff1f1;
  box-shadow: 0 4px 11px rgba(166,43,43,.12);
}

button:disabled,
.bouton:disabled,
.bouton[aria-disabled="true"] {
  opacity: .55;
  cursor: default;
  box-shadow: none;
}

.page-etroite .bouton {
  width: 100%;
}

.grille-formulaire > .bouton {
  align-self: end;
}

.tableau .bouton {
  height: 32px;
  padding-inline: 16px;
  font-size: 13px;
}

/* ==========================================================
   EN-TÊTE, NAVIGATION ET PIED DE PAGE
   utilisé dans : toutes les pages via includes/header.php et includes/footer.php
   ========================================================== */

/* -----------------------------------
   MENU SUPÉRIEUR
   utilisé dans : toutes les pages via includes/header.php
   ----------------------------------- */

.barre-reseau{
  background:linear-gradient(90deg,rgba(235,244,241,.96),rgba(225,238,240,.96) 48%,rgba(232,242,235,.96));
  border-bottom:1px solid rgba(190,208,211,.78);
  color:#566d7b;
  font-size:.74rem;
}

.barre-reseau .conteneur{
  min-height:27px;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:1px;
  overflow-x:auto;
  white-space:nowrap;
  scrollbar-width:none;
}

.barre-reseau .conteneur::-webkit-scrollbar{
  display:none;
}

.barre-reseau a{
  position:relative;
  text-decoration:none;
  padding:5px 9px 4px;
  border-radius:7px;
  color:#5f7481;
}

.barre-reseau a:hover{
  background:rgba(255,255,255,.48);
  color:var(--blue-deep);
}

.barre-reseau a.actif{
  font-weight:760;
}


/* -------- STOP MERDE MENU ------------------

.barre-reseau a.actif::after{
  position:absolute;
  right:9px;
  bottom:-1px;
  left:9px;
  height:1px;
  background:rgba(8,120,189,.72);
  content:"";
}
*/



/* -----------------------------------
   EN-TÊTE PRINCIPAL
   utilisé dans : toutes les pages via includes/header.php
   ----------------------------------- */

.entete-site {
  position: relative;
  z-index: 50;
  background: rgba(255,255,255,.90);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(220,230,234,.86);
}

.entete-site .conteneur {
  min-height: 80px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.identite-site {
  display: flex;
  align-items: center;
  gap: 13px;
  min-width: 0;
  text-decoration: none;
}

.identite-site img {
  flex: 0 0 50px;
  width: 50px;
  height: 58px;
  object-fit: contain;
}

.identite-site strong {
  display: block;
  font-size: 1.34rem;
  line-height: 1.1;
  letter-spacing: .01em;
}

.identite-site > span > span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: .8rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* -----------------------------------
   MENU DE NAVIGATION DU SITE
   utilisé dans : toutes les pages via includes/header.php
   ----------------------------------- */

.navigation-site {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  flex-wrap: wrap;
}

.navigation-site a {
  text-decoration: none;
  padding: 8px 11px;
  border-radius: 999px;
  color: var(--muted);
  font-size: .88rem;
  font-weight: 680;
  transition: background .15s ease,color .15s ease,box-shadow .15s ease;
}

.navigation-site a:hover,.navigation-site a.actif {
  background: #eef7fb;
  color: var(--blue-deep);
}

.navigation-site a.actif {
  box-shadow: 0 8px 22px rgba(8,120,189,.07);
}

.header-navigation-actions {
  display: flex;
  align-items: center;
  gap: 18px;
}

.header-deconnexion {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

.header-deconnexion img {
  display: block;
}

/* -----------------------------------
   PIED DE PAGE
   utilisé dans : toutes les pages via includes/footer.php
   ----------------------------------- */

.pied-page {
  margin-top: 5px;
  border-top: 1px solid #9fe2fd;
/*  background: linear-gradient(180deg, var(--soft), var(--surface) 72%); */

background:
    linear-gradient(135deg,rgba(45,183,223,.24),rgba(127,172,20,.18)),
    var(--surface);

}

.pied-page .conteneur {
  padding: 30px 0 18px;
}

.pied-page .grille-contenu {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.pied-page .cadre-portail {
  min-width: 0;
  padding: 18px 20px;
  border-radius: var(--small);
  box-shadow: 0 5px 18px rgba(25,68,90,.045);
  transform: none;
}

.pied-page .cadre-portail:is(:hover, :focus-within) {
  border-color: #c8dce4;
  box-shadow: 0 8px 22px rgba(25,68,90,.07);
}

.pied-page .etiquette {
  margin: 0 0 12px;
}

.pied-page nav ul {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pied-page nav li {
  min-width: 0;
}

.pied-page nav a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--muted);
  font-size: .88rem;
  line-height: 1.4;
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: color .15s ease;
}

.pied-page nav a:hover {
  color: var(--blue-deep);
}

.pied-page-icone {
  display: inline-flex;
  flex: 0 0 20px;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: var(--blue-deep);
}

.pied-page-icone svg {
  display: block;
  width: 18px;
  height: 18px;
}

.pied-page .actions {
  justify-content: space-between;
  gap: 8px 18px;
  margin-top: 22px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.pied-page p {
  margin: 0;
  font-size: .82rem;
}

/* ==========================================================
   CONTENUS ET MÉDIAS COMMUNS
   utilisé dans : site public, espace camping, administration
   ========================================================== */

/* -----------------------------------
   TITRES DES SECTIONS
   utilisé dans : index.php, label.php, espace-camping, administration
   ----------------------------------- */

.section h2 {
  font-size: clamp(1.45rem,2.4vw,2.05rem);
}

/* -----------------------------------
   GRILLES DE CONTENU
   utilisé dans : index.php, label.php, admin/modele-demande.php
   ----------------------------------- */

.grille-contenu {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 20px;
}

.grille-contenu:not(.grille-contenu-espacee) > :only-child {
  grid-column: 1/-1;
}

.grille-contenu-espacee {
  margin-top: 12px;
}

/* -----------------------------------
   IMAGE DE PRÉSENTATION / CERTIFICAT
   utilisé dans : label.php, admin/modele-demande.php
   ----------------------------------- */

.media {
  display: block;
  width: 100%;
  margin-top: 16px;
  border-radius: 14px;
}

/* ==========================================================
   PAGES PUBLIQUES — PRÉSENTATION COMMUNE
   utilisé dans : index.php, label.php
   ========================================================== */

.bandeau {
  padding: 42px 0 28px;
}

body[data-space="main"] > .page {
  padding-top: 0;
}

.bandeau h1 {
  margin: 14px 0 22px;
  font-size: clamp(2.2rem,4vw,3.6rem);
  line-height: 1.05;
}

.bandeau-lateral h2 {
  font-size: 1.3rem;
}

.grille-bandeau {
  display: grid;
  grid-template-columns: minmax(0,1.2fr) minmax(0,.8fr);
  gap: 24px;
}

.bandeau-principal {
  padding: 40px;
}

.bandeau-principal h1 em {
  color: var(--blue);
  font-style: normal;
}

.bandeau-lateral {
  padding: 28px;
}

.liste-laterale {
  display: grid;
  gap: 10px;
}

.element-lateral {
  padding: 12px 0;
  border-top: 1px solid var(--line);
}

.element-lateral:first-child {
  border-top: 0;
}

.element-lateral :is(strong,span) {
  display: block;
}

.element-lateral span {
  color: var(--muted);
  font-size: .9rem;
}

.grille-portail {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 16px;
}

.cadre-portail h3 {
  margin: 9px 0;
  overflow-wrap: anywhere;
}

.cadre-portail p {
  margin-bottom: 0;
}

/* ==========================================================
   CARTES-PORTAIL CLIQUABLES
   utilisé dans : index.php, label.php
   ========================================================== */

.cadre-portail {
  display: block;
  padding: 23px;
  box-shadow: 0 10px 30px rgba(25,68,90,.07);
  text-decoration: none;
  transition:
    transform .18s ease,
    border-color .2s ease,
    box-shadow .2s ease;
}

.cadre-portail:is(:hover,:focus-visible) {
  border-color: #b9d7e3;
  transform: translateY(-3px);
}

.cadre-portail.actif {
  border-color: rgba(8,120,189,.35);
  background: linear-gradient(180deg,#fff,#f4fbff);
  box-shadow: 0 18px 45px rgba(8,120,189,.12);
}

/* ==========================================================
   ACCUEIL
   utilisé dans : index.php
   ========================================================== */

/* -----------------------------------
   BLOCS DE PRÉSENTATION DE LA STRATÉGIE
   utilisé dans : index.php
   ----------------------------------- */

.bloc-strategie {
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--soft);
}

.bloc-strategie h3 {
  margin-bottom: 8px;
}

.bloc-strategie p {
  margin-bottom: 10px;
}

.bloc-strategie p:last-child {
  margin-bottom: 0;
}

/* -----------------------------------
   PRÉSENTATION AUDIO ET VIDÉO
   utilisé dans : index.php
   ----------------------------------- */

.bloc-audio {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--soft);
}

.bloc-audio p {
  margin: 3px 0 10px;
}

.bloc-audio audio {
  width: 100%;
}

.video {
  aspect-ratio: 16/9;
  overflow: hidden;
  border-radius: 14px;
  background: #000;
}

.video iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.langues {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 12px 0;
  justify-content: center;
}


/* ==========================================================
   LE LABEL
   utilisé dans : label.php
   ========================================================== */

/* -----------------------------------
   BLOCS EXPLICATIFS DU LABEL
   utilisé dans : label.php
   ----------------------------------- */

/* ==========================================================
   TROUVER UN CAMPING — CARTE — FONCTION COMMUNE
   utilisé dans : carte.php, admin/index.php, admin/campsite-edit.php ; éléments dynamiques via assets/js/site.js
   ========================================================== */

/* -----------------------------------
   RECHERCHE ET GÉOLOCALISATION
   utilisé dans : carte.php, admin/index.php, admin/campsite-edit.php
   ----------------------------------- */

.carte-admin {
  margin: 16px 0;
  height: 310px;
  border: 1px solid var(--line);
  border-radius: var(--small);
}

.suggestions {
  position: relative;
  z-index: 1200;
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.suggestions:empty {
  display: none;
}

.etat-suggestion {
  padding: 10px 12px;
  color: var(--muted);
}

.resultat-recherche-camping {
  display: grid;
  gap: 3px;
}

.resultat-recherche-camping strong {
  color: var(--green-deep);
  font-weight: 800;
}

.resultat-recherche-camping span {
  color: var(--muted);
  font-size: .8rem;
}

.effacer-recherche {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  box-shadow: none;
}

.effacer-recherche:is(:hover,:focus-visible) {
  border-color: #d8e2e7;
  background: #f3f7f8;
  color: var(--ink);
  box-shadow: 0 2px 7px rgba(25,68,90,.07);
}

.suggestions button {
  display: flex;
  align-items: center;
  width: 100%;
  height: 32px;
  padding: 0 16px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: var(--surface);
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  box-shadow: none;
}

.suggestions button:last-child {
  border-bottom: 0;
}

.suggestions button:is(:hover,:focus-visible) {
  background: #f6fafc;
}

/* -----------------------------------
   CARTE INTERACTIVE PUBLIQUE
   utilisé dans : carte.php ; éléments générés par assets/js/site.js
   ----------------------------------- */

.section-carte {
  position: relative;
}

.barre-outils-carte {
  position: relative;
  z-index: 100;
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center;
  gap: 14px;
  margin-bottom: 9px;
  padding: 0;
}

.recherche-lieu {
  position: relative;
  min-width: 0;
}

.recherche-lieu input {
  width: 100%;
  height: 39px;
  padding: 0 14px 0 36px !important;
  border: 1px solid var(--line);
  border-radius: 11px;
  outline: 0;
  background: rgba(255,255,255,.82);
  color: var(--ink);
  font-size: .90rem;
  box-shadow: 0 5px 18px rgba(25,68,90,.035);
  transition: border-color .15s ease,background .15s ease,box-shadow .15s ease;
}

.recherche-lieu input::placeholder {
  color: #8899a4;
}

.recherche-lieu input:focus {
  background: #fff;
  border-color: #b7d4e0;
  box-shadow: 0 0 0 3px rgba(8,120,189,.06);
}

.icone-recherche {
  position: absolute;
  z-index: 2;
  left: 13px;
  top: 50%;
  transform: translateY(-51%);
  color: #8ca0ac;
  font-size: 1.05rem;
  pointer-events: none;
}

.suggestions-flottantes {
  position: absolute;
  top: calc(100% + 5px);
  max-height: 360px;
  overflow-y: auto;
}

.libelle-niveaux {
  padding: 0 7px 0 6px;
  color: #80919c;
  font-size: .70rem;
  font-weight: 750;
  letter-spacing: .01em;
}

/* -----------------------------------
   FILTRES NIVEAUX N1 / N2 / N3
   utilisé dans : carte.php
   ----------------------------------- */

.niveaux {
  display: flex;
  align-items: center;
  gap: 3px;
  flex-wrap: nowrap;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #fff;
}

.niveaux button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 0;
  height: 31px;
  padding: 0 9px;
  border:1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: #ccc;
  font-size: .76rem;
  font-weight: 760;
  box-shadow: none;
  transition: background .15s ease,color .15s ease,box-shadow .15s ease;
}

.niveaux button .drapeau {
  color: #8aa0ac;
  font-size: .72rem;
  letter-spacing: -.08em;
}

.niveaux button.selectionne {
  border-color:#dce6ea;
  background: #fff;
  color: var(--green-deep);
  box-shadow: 0 3px 10px rgba(25,68,90,.08);
}

.niveaux button.selectionne .drapeau {
  color: var(--green-deep);
}

/* -----------------------------------
   INFOBULLES DES NIVEAUX DE LABELLISATION
   affichées au survol sur ordinateur
   ----------------------------------- */

.infobulle-niveau {
  position: absolute;
  z-index: 20;
  left: 50%;
  bottom: calc(100% + 10px);
  width: max-content;
  max-width: 190px;
  padding: 8px 11px;
  border: 1px solid #dce6ea;
  border-radius: 8px;
  background: #fff;
  color: #60717f;
  box-shadow: 0 5px 16px rgba(25,68,90,.10);
  font-size: .76rem;
  font-weight: 400;
  line-height: 1.35;
  text-align: left;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%,4px);
  transition: opacity .15s ease,transform .15s ease,visibility .15s ease;
}

.infobulle-niveau strong,
.infobulle-niveau span {
  display: block;
}

.infobulle-niveau strong {
  margin-bottom: 1px;
  font-weight: 700;
}

.infobulle-niveau::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -5px;
  width: 9px;
  height: 9px;
  border-right: 1px solid #dce6ea;
  border-bottom: 1px solid #dce6ea;
  background: #fff;
  transform: translateX(-50%) rotate(45deg);
}

.niveaux button:is(:hover,:focus-visible) {
  z-index: 21;
}

.niveaux button:is(:hover,:focus-visible) .infobulle-niveau {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%,0);
}

.niveaux button:last-child .infobulle-niveau {
  right: 0;
  left: auto;
  transform: translateY(4px);
}

.niveaux button:last-child:is(:hover,:focus-visible) .infobulle-niveau {
  transform: translateY(0);
}

.niveaux button:last-child .infobulle-niveau::after {
  right: 18px;
  left: auto;
  transform: rotate(45deg);
}

.cadre-carte {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 7px;
  background: rgba(255,255,255,.94);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(25,68,90,.07);
}

#map {
  position: relative;
  z-index: 1;
  width: 100%;
  height: min(72vh,720px);
  min-height: 500px;
  overflow: hidden;
  border-radius: 14px;
  background: #e9eef1;
}

.etat-carte {
  position: absolute;
  z-index: 500;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  padding: 7px 11px;
  border-radius: 9px;
  background: #fff;
  color: var(--muted);
  box-shadow: 0 4px 16px rgba(0,0,0,.12);
  font-size: .80rem;
}

.leaflet-container {
  font-family: Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
}

.leaflet-control-attribution {
  font-size: 9px;
}

.cf-marqueur-conteneur,
.cf-marqueur-conteneur.leaflet-div-icon {
  width: 27px !important;
  height: 51px !important;
  border: 0 !important;
  background: transparent !important;
}

.cf-marqueur-image {
  display: block;
  width: 27px;
  height: 51px;
  max-width: none;
  object-fit: contain;
  image-rendering: auto;
  filter: drop-shadow(0 3px 4px rgba(22,48,68,.22));
  cursor: pointer;
  user-select: none;
  -webkit-user-drag: none;
  transform-origin: 50% 100%;
  transition: transform .14s ease,filter .14s ease;
}

.cf-marqueur-image:hover {
  transform: scale(1.08);
  filter: drop-shadow(0 4px 6px rgba(22,48,68,.28));
}

.cf-infobulle-leaflet .leaflet-popup-content-wrapper {
  padding: 0 !important;
  overflow: hidden;
  border: 1px solid rgba(220,230,234,.9);
  border-radius: 14px !important;
  box-shadow: 0 12px 32px rgba(22,48,68,.18);
}

.cf-infobulle-leaflet .leaflet-popup-content {
  margin: 0 !important;
  width: 268px !important;
  max-width: 268px !important;
  max-height: none !important;
  overflow: visible !important;
}

.cf-infobulle-leaflet .leaflet-popup-tip {
  background: #fff;
}

.cf-infobulle-contenu {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  padding: 9px 11px;
}

.cf-infobulle-contenu :is(strong,span,em) {
  display: block;
}

.cf-infobulle-contenu strong {
  font-size: .91rem;
  line-height: 1.18;
}

.cf-infobulle-contenu span {
  color: var(--muted);
  font-size: .75rem;
  line-height: 1.25;
}

.cf-infobulle-contenu em {
  color: var(--blue);
  font-size: .74rem;
  font-style: normal;
  font-weight: 780;
}

/* -----------------------------------
   INFOBULLES ET DÉTAIL DU CAMPING
   utilisé dans : carte.php ; éléments générés par assets/js/site.js
   ----------------------------------- */

.cf-infobulle-cadre {
  display: grid;
  grid-template-columns: 82px 1fr;
  width: 268px;
  min-height: 88px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: #fff;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  box-shadow: none;
}

.cf-infobulle-cadre:is(:hover,:focus-visible) {
  border-color: transparent;
  box-shadow: none;
}

.cf-infobulle-cadre > img {
  display: block;
  width: 82px;
  height: 100%;
  min-height: 88px;
  object-fit: cover;
}

.cf-infobulle-cadre.sans-image {
  grid-template-columns: 82px 1fr;
  padding-top: 0;
}

.cf-infobulle-cadre.sans-image::before {
  content: "";
  display: block;
  width: 82px;
  min-height: 88px;
  background: linear-gradient(135deg,rgba(45,183,223,.08),rgba(127,172,20,.10));
  border-right: 1px solid #edf2f4;
}

.detail {
  margin-top: 18px;
}

.detail:empty {
  display: none;
}

.entete-detail {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

.detail-principal {
  flex: 1 1 600px;
  min-width: 0;
}

.detail h2 {
  margin-bottom: 10px;
}

.infos,.description {
  color: var(--muted);
  overflow-wrap: anywhere;
}

.description {
  margin-top: 18px;
  white-space: pre-line;
}


.nom-niveau {
  flex: 0 0 auto;
  max-width: none;
  padding-top: 0;
  color: var(--green-deep);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.4;
  text-align: right;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  white-space: nowrap;
}

.drapeaux-niveau {
  color: var(--green-deep);
  font-size: .82rem;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: 2px;
  letter-spacing: 1px;
}

.ligne-infos-detail {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(280px,100%),1fr));
  gap: 24px;
  margin-top: 18px;
}

.media-accueil-public {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--soft);
}

/* -----------------------------------
   ACCUEIL PHOTOS AUDIO DE LA FICHE CAMPING
   
   ----------------------------------- */


.audio-accueil {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 14px;
}

.audio-accueil img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
}

.audio-accueil audio {
  width: 100%;
}


.video-accueil {
  aspect-ratio: 16/9;
}

.video-accueil iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

/* -----------------------------------
   RETOUR À LA CARTE
   utilisé dans : carte.php ; bouton généré par assets/js/site.js
   ----------------------------------- */

.retour-carte {
  display:flex;
  align-items:center;
  justify-content:center;
  width:max-content;
  margin:22px auto 0;
  padding:8px 14px;
  border:0;
  border-radius:999px;
  background:#eef7fb;
  color:var(--blue-deep);
  box-shadow:0 8px 22px rgba(8,120,189,.07);
  font-size:.88rem;
  font-weight:680;
  line-height:1;
  cursor:pointer;
  text-decoration:none;
  transition:background .15s ease,color .15s ease,box-shadow .15s ease,transform .15s ease;
  gap:0;
}

.retour-carte:hover {
  background:#e6f2f8;
  color:var(--blue-deep);
  text-decoration:none;
  transform:translateY(-1px);
}

.galerie {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 10px;
  margin: 24px 0 0;
}

body.visionneuse-ouverte {
  overflow: hidden;
}

.cf-visionneuse {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
}

.cf-visionneuse.ouvert {
  display: flex;
}

.cf-visionneuse-fond {
  position: absolute;
  inset: 0;
  background: rgba(8,20,28,.90);
  backdrop-filter: blur(4px);
}

.cf-visionneuse-fenetre {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(96vw,1700px);
  height: min(92vh,1100px);
}

.cf-visionneuse-image {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 20px 70px rgba(0,0,0,.35);
  opacity: 1;
  transition: opacity .52s ease;
}

.cf-visionneuse-image.en-transition {
  opacity: 0;
}

.cf-visionneuse-compteur {
  position: absolute;
  left: 50%;
  bottom: 8px;
  transform: translateX(-50%);
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(10,26,36,.48);
  color: #fff;
  font-size: .76rem;
}

/* -----------------------------------
   GALERIE DU DÉTAIL CAMPING
   utilisé dans : carte.php ; éléments générés par assets/js/site.js
   ----------------------------------- */

.element-galerie {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 13px;
  background: transparent;
  cursor: zoom-in;
  overflow: hidden;
  box-shadow: none;
}

.element-galerie:is(:hover,:focus-visible) {
  border-color: transparent;
  box-shadow: none;
}

.element-galerie img {
  display: block;
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: 13px;
  object-fit: cover;
  transition: transform .18s ease;
}

.element-galerie:hover img {
  transform: scale(1.015);
}

/* -----------------------------------
   VISIONNEUSE
   utilisé dans : carte.php ; éléments générés par assets/js/site.js
   ----------------------------------- */

.cf-visionneuse-fermer {
  top: 0;
  right: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  color: #fff;
  background: rgba(10,26,36,.48);
  font-size: 1.7rem;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.cf-visionneuse-fermer:is(:hover,:focus-visible) {
  border-color: transparent;
  background: rgba(10,26,36,.62);
  box-shadow: none;
}

/* ==========================================================
   GESTION DES PHOTOS DU CAMPING — ÉLÉMENTS COMMUNS
   utilisé dans : espace-camping/gerer-ma-fiche.php, admin/campsite-edit.php
   ========================================================== */

/* -----------------------------------
   GALERIE, ORDRE DES PHOTOS ET SUPPRESSION
   utilisé dans : espace-camping/gerer-ma-fiche.php, admin/campsite-edit.php
   ----------------------------------- */

.grille-photos {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 14px;
}

.cadre-photo {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
}

.cadre-photo > img {
  display: block;
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
}

.etiquette-photo {
  position: absolute;
  top: 9px;
  left: 9px;
  z-index: 2;
  padding: 5px 8px;
  border-radius: 999px;
  background: #e6f2ca;
  color: #456500;
  font-size: .72rem;
  font-weight: 800;
}

.pied-photo {
  display: grid;
  grid-template-columns: minmax(0,1fr) 28px minmax(0,1fr);
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
}

.libelle-photo {
  color: var(--muted);
  font-size: .82rem;
}

.pied-photo :is(button,form) {
  justify-self: end;
}

.icone-deplacement-photo {
  justify-self: center;
  display: block;
  width: 28px;
  height: 28px;
  object-fit: contain;
  cursor: grab;
  user-select: none;
  -webkit-user-drag: none;
}

.en-deplacement {
  opacity: .45;
}

.survol-deplacement {
  outline: 2px solid var(--blue);
}

.grille-photos + form,.gestion-images > .actions {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.texte-danger {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--red);
  font-size: .82rem;
  font-weight: 400;
  line-height: inherit;
  box-shadow: none;
  cursor: pointer;
  transform: translateY(-2px);
}

.texte-danger:is(:hover,:focus-visible) {
  background: transparent;
  box-shadow: none;
  text-decoration: underline;
}


/* ==========================================================
   LABELLISATION — ÉLÉMENTS COMMUNS AUX DEUX ESPACES
   utilisé dans : espace-camping/progression-labellisation.php, espace-camping/dossier.php, admin/dossier_camping.php, admin/modele-demande.php
   ========================================================== */

/* -----------------------------------
   PROGRESSION N1 / N2 / N3
   utilisé dans : espace-camping/progression-labellisation.php, admin/dossier_camping.php, admin/modele-demande.php
   ----------------------------------- */

.progression {
  display: grid;
  grid-template-columns: minmax(0,1fr) 28px minmax(0,1fr) 28px minmax(0,1fr);
  align-items: stretch;
  margin: 18px 0 26px;
}

.etape-progression {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.etape-progression > form:not(.discret) {
  display: flex;
  flex: 1;
}

.fleche-progression {
  display: grid;
  place-items: center;
  color: #9aaab3;
}

.etape-progression > .discret {
  margin-top: 8px;
}

.cadre-progression {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-width: 0;
  min-height: 92px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--small);
  background: var(--surface);
  color: var(--ink);
  text-align: left;
  text-decoration: none;
  box-shadow: 0 2px 7px rgba(25,68,90,.04);
  transition:
    background .2s ease,
    border-color .2s ease,
    box-shadow .2s ease;
}

button.cadre-progression {
  cursor: pointer;
}

.cadre-progression strong {
  font-size: .9rem;
  line-height: 1.35;
}

.cadre-progression span {
  color: var(--muted);
  font-size: .78rem;
}

.etape-progression.est-termine .cadre-progression,
.cadre-progression.est-termine {
  border-color: #c8dda5;
  background: #f1f8e8;
}

.etape-progression.est-courant .cadre-progression,
.cadre-progression.est-courant {
  border-color: #9cc4d5;
  box-shadow: 0 0 0 2px rgba(8,120,189,.1);
}

.cadre-progression:is(a,button):is(:hover,:focus-visible) {
  border-color: #91b7c8;
  box-shadow: 0 4px 12px rgba(25,68,90,.10);
}

.etape-progression > .discret button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--blue-deep);
  text-decoration: underline;
  box-shadow: none;
}

.etape-progression > .discret button:is(:hover,:focus-visible) {
  border-color: #d7e4e9;
  background: #f5fafc;
  text-decoration: none;
}

/* -----------------------------------
   DOSSIERS, ARCHIVES, QUESTIONNAIRE, ÉCHANGES ET DÉCISION
   utilisé dans : espace-camping/dossier.php, admin/dossier_camping.php, admin/modele-demande.php
   ----------------------------------- */

.date-archive-dossier {
  margin: 0 0 12px;
  color: var(--ink);
  font-size: 1.12rem;
  font-weight: 650;
}

.archive-dossier {
  display: block;
  min-width: 0;
  margin: 28px 0;
}

.archive-dossier + .archive-dossier {
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

.archive-dossier > .discret {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  margin: 14px 0;
  font-size: .86rem;
}

.contenu-dossier {
  width: 100%;
  min-width: 0;
  margin-top: 14px;
}

.contenu-dossier > .entete-cadre {
  display: block;
}

.contenu-dossier > .entete-cadre h2 {
  margin-top: 5px;
}

.fiche-candidature {
  display: grid;
  grid-template-columns: minmax(220px,.7fr) minmax(0,1.8fr);
  gap: 28px;
  align-items: start;
}

.adresse-candidat {
  display: flex;
  flex-direction: column;
  gap: 5px;
  color: var(--muted);
  font-size: .9rem;
  overflow-wrap: anywhere;
}

.adresse-candidat strong {
  color: var(--ink);
  font-size: 1rem;
}

.adresse-candidat .etiquette {
  white-space: normal;
}

.demande-ecrite {
  min-width: 0;
}

.demande-ecrite textarea {
  min-height: 260px;
  line-height: 1.6;
  font-size: 1rem;
}

.lecture-questionnaire > h3 {
  margin: 24px 0 4px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.lecture-questionnaire > h3:first-child {
  margin-top: 0;
}

.lecture-questionnaire article {
  display: grid;
  grid-template-columns: auto minmax(0,1fr);
  align-items: start;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}

.lecture-questionnaire article p {
  margin: 6px 0 0;
}

.cadre-decision {
  margin: 14px 0;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--small);
  background: var(--soft);
}

form.cadre-decision > label {
  margin-top: 14px;
}

.contenu-dossier .tableau .formulaire-en-ligne {
  margin-top: 8px;
}

.contenu-dossier .tableau input[type="file"] {
  max-width: 300px;
}

.conversation {
  display: grid;
  gap: 10px;
}

.message-conversation {
  width: min(82%,720px);
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--small);
  background: var(--surface);
}

.message-conversation.depuis-association {
  margin-left: auto;
  background: #eef7fb;
}

.infos-conversation {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-size: .76rem;
}

.infos-conversation > div {
  display: grid;
  gap: 3px;
}

.infos-conversation time {
  white-space: nowrap;
}

.message-conversation p {
  margin: 10px 0 0;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.saisie-conversation {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.anciens-documents {
  margin-top: 18px;
}

.cadre-decision.est-accepte {
  border-color: #c8df9e;
  background: #f3f8e9;
}

.cadre-decision.est-refuse {
  border-color: #edc7c7;
  background: #fff4f4;
}

/* -----------------------------------
   ONGLETS DES DOSSIERS DE DEMANDES
   utilisé dans : admin/modele-demande.php, admin/dossier_camping.php, espace-camping/dossier.php
   ----------------------------------- */

.onglets-dossier {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-end;
  gap: 0 28px;
  margin: 16px 0 25px;
  border-bottom: 2px solid var(--line);

}

.onglets-dossier a {
  display: block;
  height: auto;
  padding: 0px 10px 3px 10px;
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: none;
}

.onglets-dossier a:is(:hover,:focus-visible) {
  background: transparent;
  color: var(--ink);
  box-shadow: none;
}

.onglets-dossier a.actif {
  margin-bottom: -1px;
  border-bottom-color: var(--green-deep);
  background: transparent;
  color: var(--ink);
  box-shadow: none;
}

/* --- Affiche le statut à droite du menu à onglets --- */

.onglets-dossier > strong {
  margin-left: auto;
  padding: 0 10px 3px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

/* ==========================================================
   ESPACE CAMPING — CLASSES SPÉCIFIQUES
   utilisé dans : espace-camping/index.php, espace-camping/gerer-ma-fiche.php, espace-camping/demandes.php, espace-camping/progression-labellisation.php, espace-camping/dossier.php, espace-camping/cotisations.php
   ========================================================== */

/* -----------------------------------
   ACCUEIL
   utilisé dans : espace-camping/index.php
   ----------------------------------- */

/* aucune classe spécifique actuellement : la page utilise les composants communs. */

/* -----------------------------------
   GÉRER MA FICHE
   utilisé dans : espace-camping/gerer-ma-fiche.php
   ----------------------------------- */

.grille-photos + form {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 12px;
}

/* -----------------------------------
   INSERTION DE MÉDIA DANS LA FICHE
   utilisé dans : espace-camping/gerer-ma-fiche.php
   ----------------------------------- */

.insertion-media-fiche [role="radiogroup"] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 28px;
}

.insertion-media-fiche [role="radiogroup"] label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  cursor: pointer;
}

.insertion-media-fiche [data-media-fields="audio"] > .cadre-compact,
.insertion-media-fiche [data-media-fields="video"] {
  background: var(--soft);
}

.insertion-media-fiche > .actions {
  justify-content: flex-end;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

/* -----------------------------------
   DEMANDES DE LABELLISATION
   utilisé dans : espace-camping/progression-labellisation.php, espace-camping/dossier.php
   ----------------------------------- */

.etape-progression.est-verrouille > div.cadre-progression {
  background: #f0f3f4;
}

.progression-questionnaire {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 10px 0 22px;
  color: var(--muted);
  font-size: .86rem;
}

.progression-questionnaire progress {
  flex: 1;
  max-width: 320px;
  height: 10px;
  accent-color: var(--green-deep);
}

/* -----------------------------------
   COTISATIONS
   utilisé dans : espace-camping/cotisations.php
   ----------------------------------- */

/* aucune classe spécifique actuellement : la page utilise les composants communs. */

/* ==========================================================
   ADMINISTRATION — CLASSES SPÉCIFIQUES
   utilisé dans : admin/index.php, admin/campsite-edit.php, admin/liste_des_demandes.php, admin/dossier_camping.php, admin/modele-demande.php, admin/cotisations.php
   ========================================================== */

/* -----------------------------------
   CAMPINGS
   utilisé dans : admin/index.php, admin/campsite-edit.php
   ----------------------------------- */

/* les styles de carte et de géolocalisation restent dans le groupe CARTE ; les styles généraux de formulaire restent dans les groupes communs. */

.champ-fichier-image {
  position: absolute;
  left: -9999px;
}

.zone-attente {
  margin-top: 16px;
}

/* -----------------------------------
   DEMANDES
   utilisé dans : admin/liste_des_demandes.php, admin/dossier_camping.php
   ----------------------------------- */

.entete-principal-dossier {
  display: grid;
  min-width: 0;
  gap: 10px;
}

.resume-contact-dossier {
  display: grid;
  gap: 4px;
}

.resume-contact-dossier > div {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
}

.ligne-contact-dossier {
  color: var(--muted);
  font-size: .88rem;
  overflow-wrap: anywhere;
}

.reglages-decision {
  display: grid;
  gap: 10px;
  margin: 14px 0;
}

.case-en-ligne {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* -----------------------------------
   STRUCTURE N1 / N2 / N3
   utilisé dans : admin/modele-demande.php
   ----------------------------------- */

.edition-questionnaire .entete-cadre { margin-bottom: 10px; }

.rubriques-edition { display: grid; gap: 12px; }

.rubrique-edition,.sans-rubrique-edition { border: 1px solid var(--line); border-radius: var(--small); overflow: hidden; background: var(--surface); }

.sans-rubrique-edition { margin-top: 14px; }

.entete-rubrique { display: flex; align-items: center; gap: 10px; padding: 11px 12px; background: var(--soft); }

.entete-rubrique strong { flex: 1; }

.questions-edition { min-height: 18px; }

.question-edition { display: grid; grid-template-columns: auto auto minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 10px 12px; border-top: 1px solid var(--line); }

.texte-question { min-width: 0; overflow-wrap: anywhere; }

.poignee-deplacement { cursor: grab; color: var(--muted); font-weight: 800; user-select: none; }

.icone-modifier { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #eef7fb; color: var(--blue-deep); text-decoration: none; font-weight: 800; }

.est-en-deplacement { opacity: .45; }

.questions-edition.est-cible-depot { background: #f5fbfe; }

/* -----------------------------------
   COTISATIONS
   utilisé dans : admin/cotisations.php
   ----------------------------------- */

/* aucune classe spécifique actuellement : la page utilise les composants communs. */

/* ==========================================================
   ADAPTATION TABLETTES ET TÉLÉPHONES
   utilisé dans : toutes les pages du site
   ========================================================== */

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

@media (max-width:850px) {
  .grille-bandeau,.grille-contenu {
    grid-template-columns: minmax(0,1fr);
  }

  .pied-page .grille-contenu {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pied-page .cadre-portail:last-child {
    grid-column: 1 / -1;
  }

  .bandeau-principal {
    padding: 28px;
  }

  .grille-photos {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }

  .fiche-candidature {
    grid-template-columns: minmax(0,1fr);
    gap: 20px;
  }

  .progression {
    grid-template-columns: minmax(0,1fr);
    gap: 8px;
  }

  .fleche-progression {
    height: 20px;
    transform: rotate(90deg);
  }

  .onglets-dossier {
    align-items: flex-start;
    flex-direction: column;
  }

  .ligne-infos-detail {
    grid-template-columns: minmax(0,1fr);
  }
}

@media (max-width:720px) {
  .barre-reseau .conteneur,
  .entete-site .conteneur {
    width: min(100% - 22px,var(--max));
  }

  .barre-reseau .conteneur {
    justify-content: flex-start;
  }

  .entete-site .conteneur {
    min-height: 72px;
    gap: 14px;
  }

  .identite-site img {
    flex-basis: 44px;
    width: 44px;
    height: 52px;
  }

  .identite-site strong {
    font-size: 1.16rem;
  }

  .identite-site > span > span {
    display: none;
  }

  .header-navigation-actions {
    flex: 1 1 320px;
    min-width: 0;
    gap: 14px;
  }

  .navigation-site {
    min-width: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    white-space: nowrap;
  }
}

@media (max-width:600px) {
  .conteneur {
    width: calc(100% - 24px);
  }

  .page {
    padding: 22px 0 36px;
  }

  .cadre {
    padding: 18px;
  }

  .cadre.cadre-detail {
    padding: 24px;
  }

  .bandeau {
    padding: 24px 0 12px;
  }

  .bandeau-principal,.bandeau-lateral {
    padding: 22px;
  }

  .section {
    padding: 18px 0;
  }

  .grille-portail,.grille-formulaire,.grille-photos {
    grid-template-columns: minmax(0,1fr);
  }

  .pied-page .conteneur {
    padding: 22px 0 14px;
  }

  .pied-page .grille-contenu {
    grid-template-columns: minmax(0,1fr);
    gap: 10px;
  }

  .pied-page .cadre-portail:last-child {
    grid-column: auto;
  }

  .pied-page .cadre-portail {
    padding: 16px;
  }

  .pied-page .actions {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
    margin-top: 16px;
  }



  .entete-page {
    align-items: flex-start;
  }

  .etape {
    gap: 10px;
  }

  .numero-etape {
    width: 28px;
    height: 28px;
  }

  .message-conversation {
    width: 100%;
  }

  .infos-conversation {
    flex-direction: column;
    gap: 4px;
  }

  .tableau :is(th,td) {
    padding: 10px;
  }


  .audio-accueil {
    gap: 10px;
    padding: 10px;
  }

  .barre-outils-carte {
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 7px;
    margin-bottom: 7px;
  }

  .recherche-lieu {
    min-width: 0;
  }

  .niveaux {
    justify-content: flex-start;
    width: max-content;
    max-width: 100%;
    overflow-x: auto;
  }

  .libelle-niveaux {
    font-size: .67rem;
  }

  .niveaux button {
    height: 30px;
    padding: 0 8px;
  }

  /* Infobulles désactivées sur smartphone : pas de survol fiable au tactile. */

  .infobulle-niveau {
    display: none;
  }

  .cadre-carte {
    position: relative;
    z-index: 1;
    height: auto;
    min-height: 0;
    padding: 5px;
    border-radius: 16px;
  }

  #map {
    height: 64vh;
    min-height: 400px;
    border-radius: 12px;
  }

  .galerie {
    grid-template-columns: 1fr;
  }
}

@media (max-width:700px) {
  .cf-visionneuse {
    padding: 8px;
  }

  .cf-visionneuse-fenetre {
    width: 100vw;
    height: 100vh;
  }

  .cf-visionneuse-image {
    max-width: 100vw;
    max-height: 88vh;
    border-radius: 0;
  }

  .cf-visionneuse-fermer {
    top: 12px;
    right: 12px;
    width: 40px;
    height: 40px;
  }

  .cf-visionneuse-compteur {
    bottom: 18px;
  }
}


/* Médias éditoriaux de l’espace Actualités */
.actu-galerie{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin:24px 0}.actu-galerie figure,.actu-diaporama figure{margin:0}.actu-galerie img,.actu-diaporama img{display:block;width:100%;height:auto;border-radius:8px}.actu-diaporama{margin:24px 0}.actu-diapo-commandes{display:flex;justify-content:center;align-items:center;gap:20px;padding:12px}.actu-diapo-commandes button{min-width:40px;min-height:40px;border:0;border-radius:50%;background:var(--primary,#27635a);color:#fff;font-size:1.5rem;cursor:pointer}

.actu-video-embed{position:relative;aspect-ratio:16/9;max-width:100%;background:#111}.actu-video-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.formulaire-proposition{gap:12px}
.barre-redaction{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:10px;background:#f3f6f4;border:1px solid var(--line);border-radius:10px;margin:0}
.barre-redaction button{min-height:38px;padding:0 12px;border:1px solid #cad8df;border-radius:7px;background:var(--surface);color:var(--ink);font:inherit;cursor:pointer}
.barre-redaction button:hover{background:#eef7fb;border-color:#a9c2ce}
.barre-redaction select{width:auto;min-width:130px;min-height:38px;padding:7px 10px}
.barre-redaction input[type="color"]{width:54px;min-width:54px;height:38px;min-height:38px;padding:4px;border:1px solid #cad8df;border-radius:7px;background:#fff}
.zone-redaction{min-height:280px;padding:16px;border:1px solid #aab7b2;border-radius:8px;background:#fff;line-height:1.65}
.zone-redaction:focus{border-color:#74add0;box-shadow:0 0 0 3px rgba(8,120,189,.08);outline:0}
.gestion-medias{display:grid;gap:14px;margin-top:24px;scroll-margin-top:24px}
.gestion-medias h2,.gestion-medias h3,.gestion-medias p{margin:0}
.gestion-medias > p{color:var(--muted)}
.formulaire-medias{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.formulaire-medias > label:nth-of-type(1),.formulaire-medias > label:nth-of-type(2),.formulaire-medias > label:nth-of-type(6),.formulaire-medias > label:nth-of-type(7),.formulaire-medias > button{grid-column:1/-1}
.actions-insertion-medias{display:flex;flex-wrap:wrap;gap:8px}
.actu-partage{align-items:center;margin-top:24px}
@media(max-width:600px){.formulaire-medias{grid-template-columns:minmax(0,1fr)}.formulaire-medias>label,.formulaire-medias>button{grid-column:1}}
/* Journal Actualités — composition et composants repris de la maquette validée. */
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(1px,1px,1px,1px);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.lien-evitement:focus {
  position: fixed;
  z-index: 10000;
  inset: 8px auto auto 8px;
  width: auto;
  height: auto;
  margin: 0;
  padding: 12px;
  clip: auto;
  clip-path: none;
  background: var(--surface);
  color: var(--blue-deep);
}

.cf-journal { padding: 42px 0 56px; }
.journal-cadre { display: grid; grid-template-columns: minmax(0,1fr) 290px; gap: 34px; align-items: start; }
.journal-principal { min-width: 0; }
.journal-lateral { display: grid; gap: 22px; min-width: 0; }
.journal-intro { margin: 0 0 25px; }
.journal-intro h1 { margin: 0; font-size: 28px; line-height: 1.15; letter-spacing: -.035em; }
.journal-recherche { display: flex; align-items: center; gap: 8px; max-width: 100%; padding: 6px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.journal-recherche input { flex: 1 1 auto; min-width: 0; min-height: 40px; padding: 8px; border: 0; box-shadow: none; background: transparent; }
.journal-recherche button { flex: 0 0 42px; width: 42px; height: 42px; border: 0; border-radius: 9px; background: var(--blue-deep); color: #fff; cursor: pointer; }
.journal-recherche svg { width: 18px; height: 18px; vertical-align: middle; }
.journal-recherche:focus-within { outline: 2px solid var(--blue); outline-offset: 2px; }
.journal-recherche button:focus-visible,.liste-laterale a:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }
.bloc-lateral { min-width: 0; padding: 21px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.bloc-lateral h2 { margin: 0 0 17px; padding-bottom: 12px; border-bottom: 1px solid var(--line); font-size: 16px; letter-spacing: -.02em; }
.calendrier-entete { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.calendrier-entete strong { font-size: 14px; font-weight: 700; }
.calendrier-entete a { display: grid; place-items: center; width: 33px; height: 33px; border: 1px solid var(--line); border-radius: 8px; background: var(--soft); color: var(--blue-deep); font-size: 20px; text-decoration: none; }
.calendrier-publications { width: 100%; border-collapse: separate; border-spacing: 2px; table-layout: fixed; font-size: 12px; text-align: center; }
.calendrier-publications th { padding: 5px 0; color: var(--muted); font-size: 11px; font-weight: 500; }
.calendrier-publications td { height: 34px; padding: 0; color: var(--muted); }
.calendrier-publications a { display: grid; place-items: center; min-height: 33px; border-radius: 8px; background: #edf5f8; color: var(--blue-deep); font-weight: 750; text-decoration: none; }
.calendrier-publications a:hover,.calendrier-publications a[aria-current="date"] { background: var(--blue-deep); color: #fff; }
.calendrier-legende { margin: 12px 0 0; font-size: 11px; line-height: 1.6; }
.archives-lateral label { margin-bottom: 7px; font-size: 12px; }
.archives-form { display: grid; gap: 8px; }
.archives-form .bouton { width: 100%; }
.liste-laterale { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.liste-laterale a { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 35px; padding: 5px 0; color: var(--ink); font-size: 13px; text-decoration: none; }
.liste-laterale a:hover,.liste-laterale a[aria-current="page"] { color: var(--blue-deep); text-decoration: underline; text-underline-offset: 4px; }
.liste-laterale .compte { color: var(--muted); font-size: 11px; }
.annees-archives { margin-top: 13px; }
.fil-journal { margin: 0 0 20px; color: var(--muted); font-size: 13px; }
.fil-journal ol { display: flex; flex-wrap: wrap; gap: 7px; margin: 0; padding: 0; list-style: none; }
.fil-journal li { display: inline-flex; align-items: baseline; gap: 7px; min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.fil-journal .separateur-fil { flex: 0 0 auto; color: var(--muted); }
.fil-journal a { color: var(--blue-deep); text-underline-offset: 3px; }
.etat-navigation { margin: 0 0 20px; color: var(--muted); font-size: 13px; }
.grille-journal { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); align-items: start; gap: 28px 22px; }
.carte-journal { display: block; min-width: 0; }
.carte-journal > .lien-image { display: block; margin-bottom: 12px; }
.carte-journal > .lien-image img { display: block; width: 100%; aspect-ratio: 1.5; object-fit: cover; border-radius: 12px; }
.carte-journal-contenu { min-width: 0; }
.carte-journal .categorie,.lecture-entete .categorie { color: var(--blue-deep); font-size: 11px; font-weight: 780; letter-spacing: .065em; text-transform: uppercase; }
.carte-journal h2 { margin: 7px 0; font-size: 18px; line-height: 1.3; letter-spacing: -.02em; }
.carte-journal h2 a { color: inherit; text-decoration: none; }
.carte-journal h2 a:hover { color: var(--blue-deep); text-decoration: underline; text-underline-offset: 4px; }
.carte-journal .resume { display: -webkit-box; margin: 0 0 9px; overflow: hidden; color: var(--muted); font-size: 13px; line-height: 1.55; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.carte-journal .article-meta,.lecture-entete .article-meta { margin: 0; color: var(--muted); font-size: 11px; }
.pagination-journal { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 15px; margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 13px; }
.pagination-journal a { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--blue-deep); text-decoration: none; }
.pagination-journal span { color: var(--muted); }
.resultat-vide { padding: 25px 0; }
.resultat-vide a { color: var(--blue-deep); }
.lecture-feuille { min-width: 0; padding: clamp(20px,2.6vw,32px); overflow-wrap: anywhere; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.lecture-entete,.lecture-redaction { width: 100%; max-width: 680px; margin-inline: auto; }
.lecture-entete { margin-bottom: 24px; }
.lecture-entete .categorie { font-size: 12px; text-decoration: none; }
.lecture-entete h1 { margin: 10px 0 12px; color: var(--ink); font-size: clamp(1.65rem,2.6vw,2rem); line-height: 1.2; letter-spacing: -.025em; text-wrap: balance; }
.lecture-entete .article-meta { font-size: 13px; line-height: 1.5; }
.lecture-entete .chapeau { margin: 18px 0 0; color: var(--ink); font-size: 18px; line-height: 1.65; }
.lecture-redaction { display: flow-root; }
.lecture-illustration { float: right; width: 42%; max-width: 280px; margin: 0 0 18px 24px; }
.lecture-photo { display: block; width: 100%; height: auto; border-radius: 8px; }
.lecture-corps { color: var(--ink); font-size: 17px; line-height: 1.75; }
.lecture-corps p { margin: 0 0 1.15em; color: inherit; font-size: inherit; line-height: inherit; }
.lecture-corps h2 { margin: 1.6em 0 .6em; color: var(--ink); font-size: 23px; line-height: 1.3; letter-spacing: -.02em; }
.lecture-corps h3 { margin: 1.4em 0 .6em; color: var(--ink); font-size: 20px; line-height: 1.35; }
.lecture-corps > :first-child { margin-top: 0; }
.lecture-corps > :last-child { margin-bottom: 0; }
.lecture-corps a { color: var(--blue-deep); text-decoration: underline; text-underline-offset: 3px; }
.lecture-corps :is(ul,ol) { margin: 0 0 1.15em; padding-left: 1.35em; }
.lecture-corps li + li { margin-top: .35em; }
.lecture-corps blockquote { margin: 1.4em 0; padding: 4px 0 4px 18px; border-left: 3px solid var(--green); font-style: italic; }
.lecture-corps figure { max-width: 100%; margin: 1.5em 0; }
.lecture-corps :is(figure,table,pre,blockquote) { clear: both; }
.lecture-corps :is(img,video) { display: block; max-width: 100%; height: auto; border-radius: 8px; }
.lecture-corps :is(audio,video) { width: 100%; }
.lecture-corps figcaption { margin-top: 8px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.lecture-corps table { display: block; max-width: 100%; margin: 1.4em 0; overflow-x: auto; border-collapse: collapse; font-size: 15px; }
.lecture-corps :is(th,td) { padding: 9px 12px; border: 1px solid var(--line); text-align: left; vertical-align: top; }
.lecture-corps pre { max-width: 100%; overflow-wrap: anywhere; white-space: pre-wrap; font-size: 14px; line-height: 1.6; }
.lecture-fin { width: 100%; max-width: 680px; margin: 26px auto 0; padding-top: 16px; border-top: 1px solid var(--line); }
.lecture-fin .actu-partage { margin-bottom: 18px; }
.journal-retour { display: inline-flex; align-items: center; min-height: 44px; margin: 0 0 12px; color: var(--blue-deep); font-size: 14px; font-weight: 600; text-underline-offset: 4px; overflow-wrap: anywhere; }
@media (max-width: 900px) {
  .journal-cadre { grid-template-columns: minmax(0,1fr); }
  .journal-lateral { grid-template-columns: repeat(2,minmax(0,1fr)); margin-top: 25px; }
}
@media (max-width: 800px) { .grille-journal { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 680px) {
  .cf-journal { padding-top: 28px; }
  .journal-lateral { grid-template-columns: minmax(0,1fr); }
  .journal-recherche input { font-size: 16px; }
  .carte-journal > .lien-image img { aspect-ratio: 1.85; }
  .carte-journal .resume { font-size: 15px; }
  .lecture-feuille { padding: 20px 16px; }
  .lecture-entete .chapeau { font-size: 17px; }
  .lecture-illustration { float: none; width: min(100%,320px); max-width: 100%; margin: 0 auto 20px; }
  .lecture-corps { font-size: 16px; }
  .lecture-corps h2 { font-size: 21px; }
  .lecture-corps h3 { font-size: 18px; }
}
@media (max-width: 560px) { .grille-journal { grid-template-columns: minmax(0,1fr); } }