/* La pêche à la perle — reprend le design du site WordPress (ColorMag, mise en page « boxed », fond bleu ciel) */
:root {
  --bleu: #257bc1;         /* onglets, menu actif */
  --bleu-fonce: #207daf;   /* couleur principale ColorMag */
  --ciel: #87ceeb;         /* fond du site */
  --fond: #e4e4e7;         /* fond de la page autour du site */
  --menu: #27272a;
  --texte: #3f3f46;
  --titre: #27272a;
  --doux: #71717a;
  --ligne: #e4e4e7;
  --rouge: #a30000;
  --rouge-bouton: #a3200e;
  --pied: #3f3f46;
  --rayon: 6px;
  --ombre: 0 1px 3px rgba(0, 0, 0, .12);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; padding: 10px 0; background: var(--fond); color: var(--texte);
  font: 16px/1.6 "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--bleu-fonce); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, .h3 { color: var(--titre); line-height: 1.3; font-weight: 600; }
h1 { font-size: 1.9rem; margin: .2em 0 .5em; }
h2 { font-size: 1.35rem; margin: 1.4em 0 .6em; }
h3, .h3 { font-size: 1.1rem; margin: .3em 0; }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.meta, .carte-meta { color: var(--doux); font-size: .85rem; }
.vide { color: var(--doux); font-style: italic; }
.centre { text-align: center; }
.rouge { color: var(--rouge); }
.visuellement-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.bandeau-test { background: #e8542c; color: #fff; text-align: center; font-size: .8rem; padding: 3px; margin: -10px 0 10px; }

/* ---------- Conteneur « boxed » ---------- */
.site { max-width: 1200px; margin: 0 auto; background: var(--ciel); box-shadow: 0 0 6px rgba(0, 0, 0, .08); }

/* ---------- En-tête : bannière + titre encadré ---------- */
.entete { padding: 26px 30px 24px; text-align: center; }
.banniere img { margin: 0 auto; border: 2px solid #bfbfbf; width: 100%; max-width: 1140px; }
.titre-site { display: inline-block; margin-top: 50px; text-align: left; }
.titre-site-nom { display: block; background: #fff; color: var(--bleu); font-size: 2.6rem; line-height: 1.15; padding: 0 2px; text-decoration: none !important; }
.titre-site-slogan { margin: 0; background: #fff; color: var(--texte); padding: 2px 2px; }

/* ---------- Menu principal ---------- */
.menu-principal { background: var(--menu); border-top: 4px solid var(--bleu); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 0 30px; position: relative; z-index: 20; }
.menu-liens { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; }
.menu-liens > li { position: relative; }
.menu-liens a { display: block; color: #fff; padding: 14px 16px; font-size: .9rem; font-weight: 600; text-transform: uppercase; text-decoration: none !important; }
.menu-liens a:hover, .menu-liens a.actif { background: var(--bleu); }
.a-sous-menu > a::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: translateY(-3px) rotate(45deg); }
.sous-menu { list-style: none; margin: 0; padding: 0; position: absolute; left: 0; top: 100%; min-width: 270px; background: var(--menu); border-top: 3px solid var(--bleu);
  box-shadow: 0 4px 10px rgba(0, 0, 0, .25); display: none; }
.sous-menu a { text-transform: none; font-weight: 400; padding: 9px 16px; border-bottom: 1px solid #3a3a3e; }
.a-sous-menu:hover > .sous-menu, .a-sous-menu:focus-within > .sous-menu { display: block; }
.menu-recherche input { border: 0; border-radius: 3px; padding: 7px 10px; font: inherit; font-size: .85rem; width: 180px; }
.menu-bascule, .menu-burger { display: none; }

/* ---------- Corps : contenu + barre latérale ---------- */
.corps { display: grid; grid-template-columns: minmax(0, 1fr) 333px; gap: 30px; padding: 30px; }
.corps.pleine-largeur { grid-template-columns: minmax(0, 1fr); }
.principal, .lateral { min-width: 0; }

/* Onglets de titre de section (ColorMag) */
.titre-section { border-bottom: 2px solid var(--bleu); margin: 0 0 18px; font-size: 1.15rem; font-weight: 400; line-height: 1.3; }
.titre-section span { display: inline-block; background: var(--bleu); color: #fff; padding: 7px 12px; }
.titre-section a { text-decoration: none !important; }
.titre-plein { border-bottom: 0; }
.titre-plein span { display: block; text-align: center; background: var(--bleu-fonce); padding: 2px 12px; }

/* Boîtes blanches */
.boite-blanche { display: block; background: #fff; padding: 14px 16px; }
.boite-blanche p { margin: .6rem 0; }
.ligne-membre { margin: 1.1rem 0 !important; }
.ligne-membre a, .sortie-texte a { color: inherit; }
.sortie-texte { margin: .2rem 0 1.1rem !important; font-size: .92rem; }
.bouton-rouge { display: inline-block; background: var(--rouge-bouton); color: #fff !important; font-weight: 700; padding: 6px 12px; border-radius: 4px; text-decoration: none !important; }
.bouton-rouge:hover { background: #7f1709; }
.lien-rouge { color: var(--rouge); font-weight: 700; }
.liens-maillage { font-size: .9rem; margin: .6rem 0 0; }

/* ---------- Accueil : rangée « à la une » ---------- */
.accueil-une { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 12px 12px; padding: 30px 30px 0; }
.tuile { position: relative; overflow: hidden; border-radius: var(--rayon); background: #222; box-shadow: var(--ombre); }
.tuile a { display: block; height: 100%; color: #fff; text-decoration: none !important; }
.tuile img, .tuile .sans-image { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16 / 11; transition: transform .35s; }
.tuile-grande img, .tuile-grande .sans-image { aspect-ratio: auto; min-height: 340px; max-height: 360px; }
.tuile a:hover img { transform: scale(1.05); }
.sans-image { display: block; background: linear-gradient(135deg, var(--bleu), #0e4c66); }
.tuile-texte { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 16px 12px; background: linear-gradient(transparent, rgba(0, 0, 0, .78)); }
.tuile-titre { display: block; font-size: 1.05rem; line-height: 1.3; text-shadow: 0 1px 2px rgba(0, 0, 0, .5); }
.tuile-grande .tuile-titre { font-size: 1.6rem; margin-top: 6px; }
.grille-tuiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.grille-tuiles .tuile img, .grille-tuiles .tuile .sans-image { aspect-ratio: 16 / 11; }
.grille-tuiles-2 { gap: 12px; }
.grille-tuiles-2 .tuile img, .grille-tuiles-2 .tuile .sans-image { aspect-ratio: 16 / 11; }
.badge { display: inline-block; background: var(--bleu); color: #fff; font-size: .7rem; text-transform: uppercase; padding: 3px 8px; border-radius: 3px; }

/* ---------- Bloc « grande carte + liste à vignettes » ---------- */
.bloc { margin: 0 0 30px; }
.bloc-liste { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
.carte-blanche { background: #fff; border-radius: var(--rayon); overflow: hidden; box-shadow: var(--ombre); }
.carte-une .carte-img img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
.carte-une .carte-corps { padding: 18px 20px 20px; }
.carte-une-titre { font-size: 1.55rem; font-weight: 400; margin: .6rem 0; }
.carte-une-titre a, .vignette h3 a { color: var(--titre); }
.carte-extrait { color: var(--doux); font-size: .9rem; margin: 0; }
.liste-vignettes { display: grid; gap: 12px; }
.vignette { display: grid; grid-template-columns: 130px 1fr; align-items: center; min-height: 90px; }
.vignette-img img { width: 130px; height: 90px; object-fit: cover; }
.vignette h3 { font-size: .95rem; font-weight: 400; margin: 0; padding: 10px 16px; }

/* ---------- Cartes génériques (archives, sorties) ---------- */
.cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.carte { background: #fff; border-radius: var(--rayon); overflow: hidden; box-shadow: var(--ombre); display: flex; flex-direction: column; }
.carte-img { display: block; overflow: hidden; }
.carte-img img { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; transition: transform .3s; }
.carte-img:hover img { transform: scale(1.05); }
.carte .carte-corps { padding: .7rem 1rem 1rem; }
.carte-corps p { margin: .25rem 0; }
.carte h3, .carte h2 { font-size: 1.02rem; margin: .4rem 0 .2rem; }
.carte h3 a, .carte h2 a { color: var(--titre); }
.carte-chiffres { font-size: .85rem; }
.voir-tout { text-align: right; font-weight: 600; }

/* ---------- Pages intérieures : contenu sur fond blanc ---------- */
.principal > .article, .principal > .article-entete, .principal > .commentaires, .principal > .bloc:not(:has(.titre-section)),
.principal > .table-wrap, .principal > .fiche, .principal > .chiffres, .principal > .pastilles-titre, .principal > .pastilles,
.principal > p, .principal > .deux-col, .principal > .vide-page, .principal > .encart, .principal > form, .principal > .pagination,
.principal > .boite-form, .principal > .form, .principal > .alerte {
  background: #fff; padding: 16px 20px; margin-bottom: 16px; border-radius: var(--rayon); box-shadow: var(--ombre);
}
.principal > .cartes { margin-bottom: 16px; }
.ariane { font-size: .82rem; color: var(--titre); margin-bottom: .8rem; }
.ariane a { color: var(--titre); }
.article-entete h1 { font-size: 1.9rem; font-weight: 400; }
.contenu { font-size: 1rem; }
.contenu img { margin: 1rem 0; border-radius: 4px; }
.contenu figure { margin: 1rem 0; }
.contenu figcaption { font-size: .82rem; color: var(--doux); }
.contenu table { border-collapse: collapse; }
.contenu td, .contenu th { border: 1px solid var(--ligne); padding: .3rem .5rem; }

/* Fiche de sortie, météo */
.fiche, .meteo { border: 1px solid var(--ligne); border-top: 3px solid var(--bleu); padding: 1rem 1.2rem; margin: 1rem 0 1.5rem; background: #fff; }
.meteo h2 { margin-top: 0; }
.fiche-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: .8rem 1.2rem; margin: 0 0 1rem; }
.fiche-grille dt { font-size: .72rem; color: var(--doux); text-transform: uppercase; letter-spacing: .05em; }
.fiche-grille dd { margin: 0; font-weight: 600; }
.fiche-grille dd.gros { font-size: 1.6rem; color: var(--rouge); }
.table-captures { width: 100%; border-collapse: collapse; }
.table-captures caption { text-align: left; font-weight: 600; margin-bottom: .3rem; }
.table-captures th, .table-captures td { padding: .3rem .4rem; border-top: 1px solid var(--ligne); text-align: left; font-weight: normal; }
.table-captures td.part { width: 45%; }
.galerie-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.galerie-grille img { aspect-ratio: 1; object-fit: cover; width: 100%; border-radius: 4px; }
.video { position: relative; aspect-ratio: 16 / 9; margin: 1rem 0; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.graphe { width: 100%; height: auto; background: #fafcfd; border: 1px solid var(--ligne); }
.graphe-ligne { fill: none; stroke: var(--bleu); stroke-width: 2.5; }
.graphe-grille { stroke: #e3e9ec; stroke-width: 1; }
.graphe-seance { fill: rgba(163, 0, 0, .12); }
.graphe-txt { font-size: 11px; fill: #888; }

/* Chiffres clés */
.chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.chiffres div { border: 1px solid var(--ligne); border-top: 3px solid var(--bleu); padding: .7rem 1rem; }
.chiffres dt { font-size: .72rem; color: var(--doux); text-transform: uppercase; letter-spacing: .05em; }
.chiffres dd { margin: .1rem 0 0; font-size: 1.5rem; font-weight: 700; color: var(--rouge); font-variant-numeric: tabular-nums; }
.chiffres dd.petit { font-size: 1rem; }

/* Listes, pastilles, barres */
.deux-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 28px; }
.bloc > h2:not(.titre-section) { font-size: 1.15rem; border-bottom: 2px solid var(--bleu); padding-bottom: 4px; }
.liste-simple, .liste-articles, .classement { padding-left: 1.2rem; }
.liste-simple li, .liste-articles li, .classement li { margin: .35rem 0; }
.pastilles { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; }
.pastilles li { border: 1px solid var(--ligne); padding: .2rem .7rem; font-size: .88rem; }
.barres { list-style: none; padding: 0; }
.barres li { display: grid; grid-template-columns: 8.5rem 1fr 4.5rem; align-items: center; gap: .6rem; margin: .3rem 0; }
.barre { display: block; height: 9px; background: linear-gradient(90deg, var(--bleu) var(--p), #e6f1fa var(--p)); }

/* Tableaux */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-sorties { width: 100%; border-collapse: collapse; font-size: .9rem; background: #fff; }
.table-sorties th, .table-sorties td { padding: .5rem .65rem; border-bottom: 1px solid var(--ligne); text-align: left; }
.table-sorties th { background: #92e3e3; font-weight: 600; white-space: nowrap; border-bottom: 3px solid #8ebf42; }
.table-sorties th a { color: var(--titre); }
.table-sorties tbody tr:hover { background: #f5fbfd; }
.table-sorties td.actions form { display: flex; gap: .3rem; }

/* Commentaires */
.comms { list-style: none; padding: 0; margin: 0; }
.comms .comms { margin-left: 1.2rem; border-left: 2px solid var(--ligne); padding-left: .8rem; }
.comm { border: 1px solid var(--ligne); padding: .7rem 1rem; margin: .6rem 0; border-radius: 4px; }
.comm-meta { margin: 0 0 .3rem; font-size: .85rem; }
.comm-texte p { margin: .3rem 0; }

/* Modules (ex-snippets) */
.module { margin: 1.2rem 0; }
.module .titre-section { margin-top: 0; }
.chiffre-cle { background: #fff; padding: .5rem 1rem; text-align: center; font-size: 1.1rem; }
.chiffre-cle strong { color: var(--rouge); }

/* ---------- Barre latérale ---------- */
.widget { margin-bottom: 30px; font-size: .92rem; }
.widget .titre-section { font-size: 1.1rem; }
.liste-widget { list-style: none; margin: 0; }
.liste-widget li { padding: .45rem 0; }
.liste-widget a { color: var(--texte); }
.widget-image { padding: 16px; }
.widget-image img { margin: 0 auto; box-shadow: var(--ombre); }
.etiquettes { display: flex; flex-wrap: wrap; gap: 5px; }
.etiquettes a { border: 1px solid var(--ligne); padding: 2px 9px; color: var(--texte); font-size: .85rem; border-radius: 3px; }
.etiquettes a:hover { background: var(--bleu); color: #fff; text-decoration: none; }

/* ---------- Formulaires, alertes, espace membre ---------- */
.bouton, .bouton-lien { display: inline-block; background: var(--bleu); color: #fff; border: 0; cursor: pointer; padding: .55rem 1.1rem; border-radius: 4px; font: inherit; font-weight: 600; text-decoration: none !important; }
.bouton:hover, .bouton-lien:hover { background: var(--bleu-fonce); color: #fff; }
.bouton-second { background: #555; }
.bouton-danger { background: #c0392b; }
.bouton-petit { padding: .3rem .7rem; font-size: .85rem; }
.bouton-grand { padding: .8rem 1.6rem; font-size: 1.05rem; background: var(--rouge-bouton); }
.lien-bouton { background: none; border: 0; color: var(--bleu-fonce); cursor: pointer; font: inherit; padding: 0; text-decoration: underline; }
.form label, .form .label { display: block; font-weight: 600; margin: .7rem 0 .25rem; font-size: .92rem; }
.form input[type=text], .form input[type=password], .form input[type=date], .form input[type=time], .form input[type=url],
.form input[type=number], .form input[type=file], .form input[type=email], .form input[type=search], .form select, .form textarea {
  display: block; width: 100%; margin-top: .25rem; padding: .5rem .6rem; border: 1px solid #ccc; border-radius: 4px; font: inherit; font-weight: normal; background: #fff; }
.form input:focus, .form select:focus, .form textarea:focus { outline: 2px solid var(--bleu); border-color: var(--bleu); }
.form fieldset { border: 1px solid var(--ligne); border-top: 3px solid var(--bleu); padding: .5rem 1.2rem 1.2rem; margin: 0 0 1.4rem; background: #fff; }
.form legend { font-weight: 700; text-transform: uppercase; font-size: .85rem; padding: 0 .4rem; color: var(--bleu); }
.form input[name="videos[]"] { margin-bottom: .4rem; }
.grille-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 1rem; }
.grille-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0 1rem; }
.grille-especes { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 0 .8rem; }
.grille-especes label { font-weight: normal; }
.cases { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; align-items: center; }
.form .case, .form .case-texte { display: inline-flex; align-items: center; gap: .35rem; font-weight: normal; margin: .2rem 0; }
.form .case-texte input { width: 180px; margin: 0; }
.total-prises { font-size: 1.05rem; margin: .8rem 0 0; }
.total-prises strong { color: var(--rouge); }
.aide { font-size: .85rem; color: var(--doux); }
.boite-form { max-width: 460px; margin: 0 auto 16px; border-top: 3px solid var(--bleu) !important; }
.boite-form .bouton { margin-top: 1rem; width: 100%; }
.alerte { padding: .7rem 1rem; margin: 0 0 1rem; border-left: 4px solid; background: #fff; }
.alerte ul { margin: .3rem 0 0; }
.alerte-ok { background: #edf8ef; border-color: #2e9e4f; }
.alerte-erreur { background: #fdeeee; border-color: #c0392b; }
.alerte-info { background: #fff8e6; border-color: #e6a700; }
.encart { background: #f6f6f6; border: 1px solid var(--ligne); padding: .6rem 1rem; margin: 1rem 0; }
.encart-ok { background: #edf8ef; border-color: #bfe3c8; }
.progression { height: 10px; background: #e3e3e3; max-width: 320px; }
.progression span { display: block; height: 100%; width: var(--p); background: var(--bleu); }
.badge-attente { background: #fff1cc; color: #8a6100; padding: 1px 7px; font-size: .8rem; }

/* Pagination */
.pagination { display: flex; flex-wrap: wrap; gap: .35rem; }
.pagination a, .pagination span { padding: .3rem .7rem; border: 1px solid var(--ligne); background: #fff; text-decoration: none; border-radius: 3px; }
.pagination .current { background: var(--bleu); color: #fff; border-color: var(--bleu); }
.pagination .ellipsis { border: 0; background: none; }

/* ---------- Pied de page ---------- */
.pied { background: var(--pied); color: #e4e4e7; font-size: .92rem; }
.pied-colonnes { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 0 30px; padding: 40px 30px; }
.titre-pied { border-bottom: 2px solid var(--bleu-fonce); font-size: 1.25rem; font-weight: 400; color: #e4e4e7; margin: 0 0 16px; }
.titre-pied span { display: inline-block; padding: 4px 12px; }
.pied a { color: #fff; font-weight: 600; }
.pied ul { list-style: none; padding: 0; margin: 0; }
.pied li { padding: .45rem 0; border-bottom: 1px solid #52525b; }
.pied-ligne { margin: 0; line-height: 1.6; }
.pied-bas { background: var(--menu); color: #a1a1aa; text-align: center; padding: 14px; font-size: .85rem; }
.pied-bas a { font-weight: 400; }

/* ---------- Mobile ---------- */
@media (max-width: 960px) {
  .corps { grid-template-columns: minmax(0, 1fr); }
  .accueil-une { grid-template-columns: 1fr; }
  .pied-colonnes { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  body { padding: 0; }
  .entete { padding: 12px; }
  .titre-site { margin-top: 18px; }
  .titre-site-nom { font-size: 1.7rem; }
  .menu-principal { padding: 0 12px; }
  .menu-burger { display: flex; flex-direction: column; gap: 4px; padding: 14px 4px; cursor: pointer; }
  .menu-burger span:not(.visuellement-cache) { width: 24px; height: 3px; background: #fff; display: block; }
  .menu-liens { display: none; width: 100%; flex-direction: column; order: 3; }
  .menu-bascule:checked ~ .menu-liens { display: flex; }
  .menu-liens a { padding: 11px 6px; border-top: 1px solid #3a3a3e; }
  .sous-menu { position: static; display: block; box-shadow: none; border-top: 0; min-width: 0; }
  .sous-menu a { padding-left: 22px; }
  .menu-recherche input { width: 150px; }
  .corps, .accueil-une { padding: 16px 12px; }
  .accueil-une { padding-bottom: 0; }
  .bloc-liste, .grille-tuiles { grid-template-columns: 1fr; }
  .tuile-grande img, .tuile-grande .sans-image { min-height: 220px; }
  .tuile-grande .tuile-titre { font-size: 1.25rem; }
  .vignette { grid-template-columns: 100px 1fr; }
  .vignette-img img { width: 100px; height: 80px; }
  .barres li { grid-template-columns: 6.5rem 1fr 3.5rem; }
  .pied-colonnes { grid-template-columns: 1fr; padding: 24px 16px; }
  .pied-colonnes section { margin-bottom: 20px; }
}

/* Bloc « Mes perles » : grande carte puis liste empilée sur toute la largeur */
.bloc-liste.empile { grid-template-columns: 1fr; gap: 8px; }
.bloc-liste.empile .liste-vignettes { gap: 8px; }
.bloc-liste.empile .carte-une .carte-img img { aspect-ratio: 2 / 1; }
.bloc-liste.empile .carte-une-titre { font-size: 1.3rem; }
.bloc-liste.empile .vignette { grid-template-columns: 90px 1fr; min-height: 62px; }
.bloc-liste.empile .vignette-img img { width: 90px; height: 62px; }
.bloc-liste.empile .vignette h3 { font-size: .85rem; }

/* Administration */
.admin-nav { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.admin-nav a { background: #fff; padding: 8px 14px; border-radius: 4px; color: var(--titre); font-weight: 600; box-shadow: var(--ombre); }
.admin-nav a.actif { background: var(--bleu); color: #fff; }
.admin-filtres { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.admin-filtres input, .admin-filtres select { width: auto !important; display: inline-block !important; margin: 0 !important; }
.admin-filtres input[type=search] { flex: 1; min-width: 200px; padding: .45rem .6rem; border: 1px solid #ccc; border-radius: 4px; font: inherit; }
.table-admin select { padding: .3rem; border: 1px solid #ccc; border-radius: 4px; font: inherit; font-size: .85rem; }
.form-ligne { margin: 0; }
.barre-admin { background: #fff8e6; border-left: 4px solid #e6a700; padding: .5rem 1rem; margin-bottom: 1rem; font-size: .9rem; }
.pastille-nb { display: inline-block; min-width: 20px; padding: 0 6px; border-radius: 10px; background: var(--rouge); color: #fff; font-size: .75rem; text-align: center; }
.actions-groupe { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 10px; }
.actions-membre { display: flex; flex-wrap: wrap; gap: 4px; }
.nouveau-mdp { margin-top: 4px; font-size: .85rem; }
.nouveau-mdp summary { cursor: pointer; color: var(--bleu-fonce); }
.nouveau-mdp form { display: flex; gap: 4px; margin-top: 4px; }
.nouveau-mdp input { padding: .3rem .5rem; border: 1px solid #ccc; border-radius: 4px; font: inherit; font-size: .85rem; }
.message { padding: 14px 18px; margin-bottom: 12px; }
.message .form-ligne { display: flex; gap: 6px; }
.principal > .form-groupe { background: #fff; padding: 16px 20px; margin-bottom: 16px; border-radius: var(--rayon); box-shadow: var(--ombre); }

/* Graphiques de pression (comme l'ancien site) */
.graphe-wrap { overflow-x: auto; margin: .5rem 0 1rem; }
.graphe-ancien { min-width: 560px; background: #fff; }
.graphe-ancien .fond-veille { fill: #cce5ff; }
.graphe-ancien .fond-jour { fill: #d9ead3; }
.graphe-ancien .graphe-heure { stroke: #fff; stroke-width: 1; opacity: .7; }
.graphe-ancien .graphe-grille { stroke: #9bb59b; stroke-width: .7; }
.graphe-ancien .graphe-ligne { fill: none; stroke: #111; stroke-width: 2; }
.graphe-ancien .graphe-point { fill: #111; }
.graphe-ancien .graphe-val { font-size: 12px; font-weight: 700; fill: #222; }
.graphe-ancien .graphe-fin { fill: var(--rouge); }
.graphe-ancien .graphe-h { font-size: 10px; fill: #333; text-anchor: middle; }
.graphe-ancien .graphe-date { font-size: 14px; font-weight: 700; fill: #222; text-anchor: middle; }
.graphe-ancien .graphe-titre { font-size: 15px; font-weight: 700; fill: #222; text-anchor: middle; }
.graphe-ancien .graphe-peche { fill: #c99d63; opacity: .55; }
.graphe-ancien .graphe-peche-bord { stroke: red; stroke-width: 3; }
.graphe-ancien .graphe-peche-txt { font-size: 12px; font-weight: 700; fill: #a30000; text-anchor: middle; }
.graphe-ancien .zone-extreme { fill: red; opacity: .35; }
.graphe-ancien .zone-txt { font-size: 18px; font-weight: 700; fill: #7a0000; text-anchor: middle; }
.graphe-ancien .bande-veille { fill: gray; opacity: .45; }
.graphe-ancien .bande-jour { fill: blue; opacity: .35; }
.graphe-ancien .graphe-minuit { stroke: #333; stroke-dasharray: 4 3; }
.graphe-details { margin: .5rem 0 1rem; }
.graphe-details > summary { cursor: pointer; font-weight: 700; font-size: 1.05rem; color: var(--bleu-fonce); padding: .4rem 0; }
.ville-meteo { background: #fffb09; color: #f90d0d; padding: 0 .3rem; }

/* Accueil modulable */
.accueil-une > .bloc { margin: 0; }
.accueil-une > .bloc-pleine { grid-column: 1 / -1; }
.accueil-une .apres-grande { margin-top: 12px; }
.paire-blocs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }
.grille-tuiles.cols-1 { grid-template-columns: 1fr; }
.grille-tuiles.cols-3, .cartes.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grille-tuiles.cols-4, .cartes.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cartes.cols-1 { grid-template-columns: 1fr; }
.cartes.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.texte-libre > :first-child { margin-top: 0; }
.texte-libre > :last-child { margin-bottom: 0; }
@media (max-width: 760px) {
  .paire-blocs { grid-template-columns: 1fr; }
  .grille-tuiles.cols-3, .grille-tuiles.cols-4, .cartes.cols-2, .cartes.cols-3, .cartes.cols-4 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .grille-tuiles.cols-3, .grille-tuiles.cols-4, .cartes.cols-2, .cartes.cols-3, .cartes.cols-4 { grid-template-columns: 1fr; }
}

/* Tableaux d'administration de la mise en page */
.tableau-blocs td { vertical-align: top; padding: .45rem .4rem; }
.tableau-blocs select, .tableau-blocs input[type=text] { width: 100%; min-width: 9rem; margin: 0 0 .3rem; }
.tableau-blocs input.petit { width: 4.5rem; min-width: 0; }
.tableau-blocs textarea { width: 100%; min-width: 14rem; font-family: monospace; font-size: .8rem; }
.t-ordre { white-space: nowrap; }
.t-ordre button, .t-suppr { border: 1px solid var(--ligne); background: #fff; cursor: pointer; padding: 2px 7px; border-radius: 3px; margin: 0 1px; }
.t-ordre button:hover { background: var(--bleu); color: #fff; }
.t-suppr { color: var(--rouge); }
.t-suppr:hover { background: var(--rouge); color: #fff; }
.tableau-blocs tr .si-texte { display: none; }
.tableau-blocs tr[data-source="texte"] .si-texte { display: block; }
.tableau-blocs tr[data-source="texte"] .si-articles > *,
.tableau-blocs tr[data-source="classement"] .si-articles > :not([name$="[nombre]"]) { visibility: hidden; }
.tableau-blocs tr:not([data-source="sorties"]):not([data-source="cat"]):not([data-source="especes"]) .si-nombre > * { visibility: hidden; }
.tableau-blocs tr:not([data-source="lien"]):not([data-source="image"]):not([data-source="especes"]) .si-lien > * { visibility: hidden; }
.tableau-blocs tr:not([data-source="image"]) .si-image > * { visibility: hidden; }
.tableau-blocs tr:has(input[name$="[actif]"]:not(:checked)) { opacity: .5; }
.apercu-mini { display: block; max-width: 60px; max-height: 60px; margin-top: 4px; }
.form-large { max-width: none !important; }
.bouton-gris { background: #71717a !important; }
.grille-couleurs { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .3rem 1rem; }
.form .couleur { display: flex; align-items: center; gap: .5rem; font-weight: normal; }
.form .couleur input { width: 48px; height: 34px; padding: 2px; border: 1px solid var(--ligne); }
.form .couleur em { color: var(--rouge); font-style: normal; font-size: .8rem; }

/* Comptes */
.piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.liens-form { margin-top: 1rem; font-size: .92rem; }

/* Pages météo */
.meteo-page { background: #fff; padding: 1rem 1.2rem; margin: 1rem 0; border-top: 3px solid var(--bleu); }
.meteo-bonjour { margin: 0 0 .6rem; }
.meteo-onglets { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 1rem; }
.meteo-onglets a { padding: .4rem .9rem; border: 1px solid var(--ligne); border-radius: 4px; color: var(--texte); text-decoration: none; font-weight: 600; }
.meteo-onglets a.actif, .meteo-onglets a:hover { background: var(--bleu); color: #fff; border-color: var(--bleu); }
.meteo-form { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; justify-content: center; background: #ece9e7; padding: .8rem; margin: 0 0 1rem; }
.meteo-form label { font-weight: 700; }
.meteo-form input { padding: .5rem .6rem; border: 1px solid #ccc; border-radius: 4px; min-width: 220px; font: inherit; }
.meteo-titre { text-align: center; background: #ece9e7; padding: .6rem; font-size: 1.2rem; margin: 0 0 .5rem; }
.meteo-titre strong { color: #e11010; }
.meteo-sous { text-align: center; color: var(--doux); margin: 0 0 1rem; }
.meteo-maintenant { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1rem 3rem; margin: 1rem 0; }
.meteo-ciel { display: flex; align-items: center; gap: .6rem; }
.meteo-temp { display: flex; flex-direction: column; align-items: center; }
.meteo-gros { font-size: 3rem; font-weight: 700; color: #e11010; line-height: 1; }
.meteo-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; margin: 1rem 0; }
.meteo-grille > div { border: 1px solid #ccc; padding: .5rem .7rem; }
.meteo-grille dt { font-size: .8rem; color: var(--doux); }
.meteo-grille dd { margin: 0; font-weight: 700; color: #e11010; }
.meteo-grille dd small { display: block; color: var(--texte); font-weight: 400; }
.meteo-lune { text-align: center; margin: 1.5rem 0 1rem; }
.lune-svg { filter: drop-shadow(0 0 18px hsl(220, 100%, 25%)); }
.meteo-ic { display: inline-block; vertical-align: middle; }
.meteo-liste { display: flex; flex-direction: column; gap: 4px; }
.meteo-item > summary { list-style: none; cursor: pointer; display: flex; flex-wrap: wrap; align-items: center; gap: .3rem 1rem;
  background: #d3d2dd; color: #333; padding: .5rem .8rem; border: 1px solid #ccc; }
.meteo-item > summary::-webkit-details-marker { display: none; }
.meteo-item > summary:hover { background: #ddd; }
.meteo-item[open] > summary { background: var(--bleu); color: #fff; }
.meteo-item[open] > summary .rouge, .meteo-item[open] > summary b { color: #fff; }
.meteo-date { font-weight: 700; min-width: 13rem; }
.meteo-court { font-weight: 600; min-width: 8rem; }
.meteo-plus { margin-left: auto; font-size: .85rem; text-decoration: underline; }
.meteo-detail { background: #f3f6f1; padding: .8rem; border: 1px solid #ccc; border-top: 0; }
.meteo-ligne { display: flex; gap: 8px; margin-bottom: 8px; }
.meteo-ligne > div { flex: 1; border: 1px solid #ccc; background: #fff; padding: .5rem .7rem; }
.rouge { color: #e11010; }
.pression-extreme { color: #fff !important; background: #d11; padding: 0 .3rem; border-radius: 3px; }
.meteo-grille dd.pression-extreme { display: inline-block; }
@media (max-width: 768px) {
  .meteo-ligne { flex-direction: column; }
  .meteo-date { min-width: 0; width: 100%; }
}

/* Contenu réservé */
.contenu-apercu { position: relative; max-height: 22rem; overflow: hidden; }
.contenu-apercu::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6rem; background: linear-gradient(rgba(255,255,255,0), #fff); }
.bloc-connexion { background: #fff; border: 2px solid var(--bleu); border-radius: var(--rayon); padding: 1rem 1.2rem; margin: 1rem 0; text-align: center; }
.bloc-connexion-titre { font-size: 1.15rem; font-weight: 700; color: var(--titre); margin: 0 0 .3rem; }
.form-connexion-rapide { max-width: 360px; margin: .6rem auto 0; text-align: left; }
.form-connexion-rapide .bouton { margin-top: .8rem; }
.bouton-inscription { background: #289dcc; }
.encart-action { text-align: center; }
.pression-extreme small { color: #fff !important; }

/* Commentaires et contact */
.commenter, .contact { background: #fff; padding: 1rem 1.2rem; margin: 1rem 0; border-top: 3px solid var(--bleu); }
.commenter h2 { margin-top: 0; font-size: 1.2rem; }
.info-comm { background: #f3f8fc; border-left: 4px solid var(--bleu); padding: .6rem .9rem; font-size: .92rem; }
.deux-champs { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.reponse-a { background: #fff8e6; padding: .4rem .7rem; margin: .5rem 0; }
.repondre { font-size: .85rem; margin-top: .3rem; }
@media (max-width: 600px) { .deux-champs { grid-template-columns: 1fr; } }
.form-commentaire .bouton, .contact .bouton { display: block; margin-top: .8rem; }

/* Éditeur d'articles */
.editeur-grille { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 0 20px; align-items: start; }
.editeur-cote { position: sticky; top: 10px; }
.form .champ-titre { font-size: 1.3rem; font-weight: 600; }
.slug-ligne { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; font-weight: 400; }
.slug-ligne input { flex: 1; min-width: 200px; margin: 0 !important; }
.apercu-une { max-width: 100%; border-radius: 4px; margin-bottom: .5rem; }
.form-supprimer { background: none !important; box-shadow: none !important; text-align: right; }
.lien-bouton.rouge { color: var(--rouge); }
.actions-nouveau { display: flex; gap: 8px; margin: 0 0 12px; }
@media (max-width: 960px) { .editeur-grille { grid-template-columns: 1fr; } .editeur-cote { position: static; } }
.compteur-vues { background: #1aa9e3; color: #111; text-align: center; padding: .4rem .8rem; border-radius: 4px; }
.galerie-perles { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; margin: 1rem 0; }
.galerie-perles figure { margin: 0; background: #fff; box-shadow: var(--ombre); border-radius: 4px; overflow: hidden; }
.galerie-perles img { margin: 0 !important; aspect-ratio: 1; object-fit: cover; width: 100%; border-radius: 0 !important; }
.galerie-perles figcaption { background: #289dcc; color: #fff; font-weight: 700; text-align: center; font-size: .85rem; padding: .3rem; }

/* Images centrées (image à la une + images du texte) ; alignleft/alignright de WordPress respectés */
.image-une { margin: 1rem 0 1.2rem; text-align: center; }
.image-une img { margin: 0 auto; border-radius: 4px; max-height: 80vh; max-width: 100%; height: auto; object-fit: contain; }
.contenu img { margin-left: auto; margin-right: auto; }
.contenu figure, .contenu .wp-caption, .contenu .wp-block-image { margin: 1rem auto; text-align: center; max-width: 100%; }
.contenu figcaption, .contenu .wp-caption-text { font-size: .85rem; color: var(--doux); margin-top: .3rem; }
.contenu p:has(> img:only-child), .contenu p:has(> a:only-child > img) { text-align: center; }
.contenu .alignleft, .contenu img.alignleft { float: left; margin: .3rem 1.2rem .8rem 0; }
.contenu .alignright, .contenu img.alignright { float: right; margin: .3rem 0 .8rem 1.2rem; }
.contenu .aligncenter, .contenu img.aligncenter { display: block; margin-left: auto; margin-right: auto; float: none; }
.contenu::after { content: ""; display: block; clear: both; }
@media (max-width: 600px) { .contenu .alignleft, .contenu .alignright { float: none; margin: 1rem auto; } }
.boutons-compte { text-align: center; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.contenu a.bouton-compte { display: inline-block; color: #fff !important; text-decoration: none !important; padding: .6rem 1.4rem; border-radius: 4px; font-weight: 700; background: var(--bleu); }
.contenu a.bouton-compte.bouton-inscription { background: #289dcc; }
.contenu a.bouton-compte:hover { filter: brightness(1.1); }
.contenu .wp-block-buttons { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 1rem 0; }
.contenu .wp-block-button { margin: 0; }

/* Blocs Gutenberg (anciens articles WordPress) : colonnes côte à côte, empilées sur mobile */
.contenu .wp-block-columns { display: flex; gap: 2rem; align-items: flex-start; margin: 1.5rem 0; }
.contenu .wp-block-columns.are-vertically-aligned-center { align-items: center; }
.contenu .wp-block-column { flex: 1 1 0; min-width: 0; }
.contenu .wp-block-column[style*="flex-basis"] { flex-grow: 0; }
.contenu .wp-block-column.is-vertically-aligned-center { align-self: center; }
.contenu .wp-block-column > :first-child { margin-top: 0; }
.contenu .wp-block-media-text { display: grid; grid-template-columns: 50% 1fr; gap: 1.5rem; align-items: center; margin: 1.5rem 0; }
.contenu .wp-block-media-text.has-media-on-the-right { grid-template-columns: 1fr 50%; }
.contenu .wp-block-media-text.has-media-on-the-right .wp-block-media-text__media { order: 2; }
.contenu .wp-block-media-text__media img { margin: 0; width: 100%; }
.contenu .wp-block-group, .contenu .wp-block-cover { margin: 1.5rem 0; }
.contenu .has-text-align-center { text-align: center; }
.contenu .has-text-align-right { text-align: right; }
.contenu .wp-block-separator { border: 0; border-top: 2px solid var(--ligne); margin: 2rem auto; max-width: 120px; }
.contenu .wp-block-separator.is-style-wide { max-width: none; }
@media (max-width: 781px) {
  .contenu .wp-block-columns:not(.is-not-stacked-on-mobile) { flex-direction: column; gap: 1rem; }
  .contenu .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column { flex-basis: 100% !important; width: 100%; }
  .contenu .wp-block-media-text, .contenu .wp-block-media-text.has-media-on-the-right { grid-template-columns: 1fr; }
  .contenu .wp-block-media-text.has-media-on-the-right .wp-block-media-text__media { order: 0; }
}

/* Galeries d'images (blocs Galerie WordPress, listes d'images, galeries perles) :
   petites vignettes carrées, 5 par ligne sur grand écran → 4 → 3 → 2 selon la largeur */
.contenu { container-type: inline-size; }
.contenu .wp-block-gallery, .contenu .blocks-gallery-grid, .contenu .gallery, .contenu .galerie-perles,
.contenu ul:has(> li > img), .contenu ul:has(> li > figure img), .contenu ul:has(> li > a > img) {
  display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; list-style: none; padding: 0; margin: 1.2rem 0;
}
.contenu .wp-block-gallery > *, .contenu .blocks-gallery-grid > *, .contenu .gallery > *, .contenu .galerie-perles > *,
.contenu ul:has(> li > img) > li, .contenu ul:has(> li > figure img) > li, .contenu ul:has(> li > a > img) > li {
  margin: 0 !important; width: auto !important; padding: 0; list-style: none; position: relative;
}
.contenu .wp-block-gallery img, .contenu .blocks-gallery-grid img, .contenu .gallery img, .contenu .galerie-perles img,
.contenu ul:has(> li > img) img, .contenu ul:has(> li > figure img) img, .contenu ul:has(> li > a > img) img {
  width: 100% !important; height: auto !important; aspect-ratio: 1 / 1; object-fit: cover; margin: 0 !important; border-radius: 4px;
  box-shadow: var(--ombre); transition: transform .2s;
}
.contenu .wp-block-gallery a:hover img, .contenu .blocks-gallery-grid a:hover img, .contenu .galerie-perles a:hover img, .contenu ul a:hover > img { transform: scale(1.04); }
.contenu .wp-block-gallery figure, .contenu .blocks-gallery-grid figure, .contenu .galerie-perles figure { margin: 0 !important; }
.contenu .wp-block-gallery figcaption, .contenu .blocks-gallery-item figcaption { font-size: .75rem; padding: .2rem; text-align: center; }
@container (max-width: 700px) {
  .wp-block-gallery, .blocks-gallery-grid, .gallery, .galerie-perles,
  ul:has(> li > img), ul:has(> li > figure img), ul:has(> li > a > img) { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}
@container (max-width: 520px) {
  .wp-block-gallery, .blocks-gallery-grid, .gallery, .galerie-perles,
  ul:has(> li > img), ul:has(> li > figure img), ul:has(> li > a > img) { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@container (max-width: 340px) {
  .wp-block-gallery, .blocks-gallery-grid, .gallery, .galerie-perles,
  ul:has(> li > img), ul:has(> li > figure img), ul:has(> li > a > img) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* Liens « Découvre… » seuls dans un paragraphe centré → boutons, alignés en bas des colonnes */
.contenu a.bouton-cta { display: inline-block; background: var(--bleu); color: #fff !important; text-decoration: none !important; padding: .6rem 1.4rem; border-radius: 4px; font-weight: 700; }
.contenu a.bouton-cta:hover { filter: brightness(1.1); }
.contenu p.ligne-cta { text-align: center; margin: 1.2rem 0; }
.contenu .wp-block-columns { align-items: stretch; }
.contenu .wp-block-column { display: flex; flex-direction: column; }
.contenu .wp-block-column > p.ligne-cta:last-child { margin-top: auto; padding-top: 1rem; }
.contenu ul:has(> li > figure img) figure, .contenu .gallery figure, .contenu .gallery .gallery-icon { margin: 0 !important; }
/* Ancienne galerie WordPress : <figure class="wp-block-gallery"><ul class="blocks-gallery-grid">…
   seule la liste intérieure est une grille, le cadre extérieur prend toute la largeur */
.contenu .wp-block-gallery:has(> .blocks-gallery-grid), .contenu .wp-block-gallery:has(> ul),
.contenu figure:has(> .blocks-gallery-grid), .contenu div:has(> .blocks-gallery-grid) { display: block !important; width: 100% !important; max-width: none !important; margin: 1.2rem 0 !important; }
.contenu .wp-block-gallery:has(> .blocks-gallery-grid) > .blocks-gallery-grid, .contenu .wp-block-gallery:has(> ul) > ul { width: 100% !important; margin: 0 !important; }

/* Visionneuse d'images */
.visionneuse { position: fixed; inset: 0; z-index: 1000; background: rgba(10, 10, 12, .92); display: none; align-items: center; justify-content: center; }
.visionneuse.ouverte { display: flex; }
.visionneuse figure { margin: 0; max-width: calc(100vw - 120px); max-height: calc(100vh - 80px); display: flex; flex-direction: column; align-items: center; }
.visionneuse img { max-width: 100%; max-height: calc(100vh - 110px); object-fit: contain; margin: 0; border-radius: 4px; box-shadow: 0 6px 30px rgba(0, 0, 0, .5); }
.visionneuse figcaption { color: #eee; font-size: .9rem; margin-top: .5rem; text-align: center; }
.visionneuse button { position: absolute; background: rgba(255, 255, 255, .12); color: #fff; border: 0; cursor: pointer; font: inherit; line-height: 1; border-radius: 50%; }
.visionneuse button:hover, .visionneuse button:focus-visible { background: rgba(255, 255, 255, .3); outline: none; }
.visionneuse .v-fermer { top: 14px; right: 16px; width: 46px; height: 46px; font-size: 2rem; }
.visionneuse .v-prec, .visionneuse .v-suiv { top: 50%; transform: translateY(-50%); width: 50px; height: 50px; font-size: 2.4rem; }
.visionneuse .v-prec { left: 14px; }
.visionneuse .v-suiv { right: 14px; }
.visionneuse.v-seule .v-prec, .visionneuse.v-seule .v-suiv { display: none; }
.visionneuse .v-compteur { position: absolute; top: 24px; left: 20px; color: #ccc; font-size: .9rem; }
@media (max-width: 600px) {
  .visionneuse figure { max-width: 100vw; }
  .visionneuse .v-prec, .visionneuse .v-suiv { top: auto; bottom: 14px; transform: none; }
}

/* ---------- Admin : santé SEO ---------- */
.seo-bon { color: #15803d; } .seo-moyen { color: #b45309; } .seo-faible { color: #b91c1c; }
.seo-resume { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 10px 0; }
.seo-carte { background: #fff; border-radius: var(--rayon); box-shadow: var(--ombre); padding: 12px; display: flex; flex-direction: column; gap: 2px; font-size: .85rem; color: var(--doux); }
.seo-gros { font-size: 1.8rem; font-weight: 700; line-height: 1.1; }
.seo-problemes { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 6px; }
.seo-problemes a { display: flex; align-items: center; gap: 8px; background: #fff; padding: 7px 10px; border-radius: 4px; color: var(--texte); box-shadow: var(--ombre); font-size: .9rem; }
.seo-problemes a strong { margin-left: auto; }
.seo-problemes li.actif a { outline: 2px solid var(--bleu); }
.seo-pastille { width: 10px; height: 10px; border-radius: 50%; flex: none; background: #b45309; }
.seo-pastille.seo-err { background: #b91c1c; }
.seo-note { display: inline-block; min-width: 38px; padding: 3px 0; text-align: center; border-radius: 14px; font-weight: 700; color: #fff; background: #b91c1c; }
.seo-note.seo-bon { background: #15803d; } .seo-note.seo-moyen { background: #d97706; }
.table-seo td { vertical-align: top; }
.seo-progression { background: #fff; padding: 20px; border-radius: var(--rayon); }
.seo-barre { height: 16px; background: var(--ligne); border-radius: 8px; overflow: hidden; margin: 10px 0; }
.seo-barre span { display: block; height: 100%; background: var(--bleu); transition: width .3s; }

.seo-tete { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; background: #fff; padding: 16px; border-radius: var(--rayon); box-shadow: var(--ombre); }
.seo-cercle { --c: #b91c1c; width: 110px; height: 110px; border-radius: 50%; flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: radial-gradient(closest-side, #fff 78%, transparent 80% 100%), conic-gradient(var(--c) calc(var(--p) * 1%), var(--ligne) 0); }
.seo-cercle.seo-bon { --c: #15803d; } .seo-cercle.seo-moyen { --c: #d97706; }
.seo-cercle span { font-size: 2rem; font-weight: 700; color: var(--c); line-height: 1; }
.seo-cercle small { color: var(--doux); }
.seo-chiffres { flex: 1; display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 6px 14px; font-size: .9rem; color: var(--doux); }
.seo-chiffres strong { display: block; font-size: 1.15rem; color: var(--titre); }
.seo-bloc { background: #fff; padding: 14px 18px; border-radius: var(--rayon); box-shadow: var(--ombre); margin: 14px 0; }
.seo-bloc h2 { margin-top: 0; font-size: 1.2rem; }
.seo-bloc h3 { font-size: 1rem; margin: 16px 0 6px; }
.seo-bloc mark, .seo-plan mark { background: #fde68a; padding: 0 2px; border-radius: 2px; }
.seo-motcle { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.seo-motcle label { flex-basis: 100%; font-weight: 600; }
.seo-motcle input { flex: 1; min-width: 220px; }
.seo-repartition { display: flex; gap: 14px; align-items: flex-end; height: 120px; max-width: 420px; padding: 6px 0; }
.seo-rep-col { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; font-size: .8rem; color: var(--doux); }
.seo-rep-barre { width: 100%; background: var(--bleu); border-radius: 4px 4px 0 0; }
.seo-rep-barre.zero { background: #fecaca; }
.seo-rep-col strong { color: var(--titre); }
.seo-extrait { margin: 0; padding: 10px 14px; border-left: 4px solid var(--bleu); background: #f8fafc; }
.seo-serp { font-family: Arial, sans-serif; max-width: 600px; padding: 12px 14px; border: 1px solid var(--ligne); border-radius: 8px; }
.seo-serp-url { color: #202124; font-size: .85rem; }
.seo-serp-titre { color: #1a0dab; font-size: 1.25rem; margin: 3px 0; }
.seo-serp-desc { color: #4d5156; font-size: .9rem; line-height: 1.45; }
.seo-groupe { border: 1px solid var(--ligne); border-radius: var(--rayon); margin: 8px 0; }
.seo-groupe summary { cursor: pointer; padding: 9px 12px; font-weight: 600; }
.seo-checks { list-style: none; margin: 0; padding: 0 12px 8px; }
.seo-checks li { display: flex; gap: 10px; padding: 7px 0; border-top: 1px solid var(--ligne); font-size: .92rem; }
.seo-ico { flex: none; width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: .75rem; font-weight: 700; }
.seo-err .seo-ico { background: #b91c1c; } .seo-warn .seo-ico { background: #d97706; }
.seo-ok .seo-ico { background: #15803d; } .seo-info .seo-ico { background: #64748b; }
.seo-conseil { color: var(--doux); font-size: .85rem; }
.seo-passages li { margin: 6px 0; font-size: .92rem; }
.seo-badge { display: inline-block; background: #fee2e2; color: #b91c1c; font-weight: 700; font-size: .75rem; padding: 1px 7px; border-radius: 10px; }
.seo-deux { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 760px) { .seo-deux { grid-template-columns: 1fr; } }
.seo-freq { width: 100%; border-collapse: collapse; font-size: .9rem; }
.seo-freq th, .seo-freq td { padding: 4px 6px; border-bottom: 1px solid var(--ligne); text-align: left; }
.seo-freq .num { text-align: right; }
.seo-freq tr.seo-cle td { background: #fef9c3; font-weight: 600; }
.seo-freq-barre { width: 35%; } .seo-freq-barre span { display: block; height: 8px; background: var(--bleu); border-radius: 4px; }
.seo-plan { list-style: none; padding: 0; font-size: .92rem; }
.seo-plan li { padding: 3px 0; }
.seo-plan span { display: inline-block; min-width: 28px; font-size: .7rem; font-weight: 700; color: #fff; background: var(--bleu); border-radius: 3px; text-align: center; margin-right: 6px; }
.seo-plan .niv-3 { padding-left: 22px; } .seo-plan .niv-4 { padding-left: 44px; } .seo-plan .niv-5, .seo-plan .niv-6 { padding-left: 66px; }
.seo-plan .niv-1 span { background: var(--titre); }
.seo-liens { columns: 2; font-size: .88rem; }
.seo-prio { display: inline-block; font-size: .68rem; font-weight: 700; padding: 1px 5px; border-radius: 3px; color: #fff; background: #64748b; vertical-align: 1px; }
.seo-prio.seo-P0 { background: #7f1d1d; } .seo-prio.seo-P1 { background: #b91c1c; } .seo-prio.seo-P2 { background: #d97706; } .seo-prio.seo-P3 { background: #64748b; }
.seo-problemes .seo-prio { flex: none; }
.seo-source { display: inline-block; font-size: .68rem; padding: 0 5px; border-radius: 3px; border: 1px solid var(--ligne); color: var(--doux); vertical-align: 1px; }
.seo-src-g { border-color: #93c5fd; color: #1d4ed8; }
.seo-site { background: #fff; margin: 12px 0; }
.seo-rendu { margin-bottom: 10px; }
.seo-partage { display: flex; gap: 10px; align-items: center; max-width: 520px; border: 1px solid var(--ligne); border-radius: 6px; padding: 8px; }
.seo-partage img { width: 120px; height: 63px; object-fit: cover; border-radius: 4px; flex: none; }
.seo-notes { display: grid; grid-template-columns: auto auto; gap: 6px 10px; align-items: center; }
.seo-cercle-petit { width: 70px; height: 70px; }
.seo-cercle-petit span { font-size: 1.3rem; }
.seo-note-g { opacity: .85; min-width: 32px; font-size: .85rem; }

/* ---------- Statistiques, réglages SEO, auteur ---------- */
.stats-courbe { display: flex; align-items: flex-end; gap: 2px; height: 160px; padding: 6px 0; border-bottom: 1px solid var(--ligne); }
.stats-courbe span { flex: 1; background: var(--bleu); border-radius: 2px 2px 0 0; min-width: 2px; }
.stats-courbe span:hover { background: var(--bleu-fonce); }
.seo-vignette { max-width: 120px; max-height: 120px; vertical-align: middle; border: 1px solid var(--ligne); border-radius: 4px; }
.rond { border-radius: 50%; object-fit: cover; }
.auteur-bio { display: flex; gap: 16px; align-items: flex-start; background: #fff; padding: 14px; border-radius: var(--rayon); box-shadow: var(--ombre); margin: 12px 0; }
.auteur-bio img { flex: none; width: 120px; height: 120px; }
.auteur-bio p { margin: 0 0 6px; }
@media (max-width: 520px) { .auteur-bio { flex-direction: column; align-items: center; text-align: center; } }
.seo-gsc td:first-child { max-width: 320px; }
.seo-outils { background: #f8fafc; border-radius: 4px; padding: 8px 10px; font-size: .9rem; }
.seo-index { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.seo-index li strong { font-size: 1.3rem; }
.seo-index-etat { font-size: 1.05rem; }

/* ---------- Admin : vidéos YouTube ---------- */
.yt-liste { display: grid; gap: 8px; }
.yt-ligne { display: flex; gap: 12px; align-items: flex-start; background: #fff; padding: 10px; border-radius: var(--rayon); box-shadow: var(--ombre); }
.yt-ligne img { width: 160px; height: 90px; object-fit: cover; border-radius: 4px; flex: none; }
.yt-info { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.yt-info select { max-width: 100%; }
@media (max-width: 560px) { .yt-ligne { flex-direction: column; } .yt-ligne img { width: 100%; height: auto; aspect-ratio: 16/9; } }
.video-yt { margin: 0 0 16px; }
.video-yt figcaption { color: var(--doux); font-size: .9rem; margin-top: 4px; }
.seo-env { background: #1e293b; color: #e2e8f0; padding: 10px; border-radius: 4px; font-size: .85rem; overflow-x: auto; }

/* ---------- Historique SEO (courbes) ---------- */
.histo-svg { width: 100%; height: auto; display: block; font-size: 11px; }
.histo-svg text { fill: var(--doux); font-family: inherit; }
.histo-svg .histo-grille { stroke: var(--ligne); stroke-width: 1; }
.histo-svg circle { cursor: help; }
.histo-legende { display: flex; flex-wrap: wrap; gap: 14px; margin: 4px 0 0; font-size: .85rem; color: var(--doux); }
.histo-legende i { display: inline-block; width: 12px; height: 3px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }
.histo-boite { overflow-x: auto; }
@media (max-width: 600px) { .histo-svg { min-width: 520px; } }

/* ---------- À faire (phase 2) ---------- */
a.seo-carte { color: inherit; text-decoration: none; }
a.seo-carte:hover { box-shadow: 0 0 0 2px var(--bleu); }
.afaire td { vertical-align: top; }
.afaire td:nth-child(2), .afaire td:nth-child(3) { font-size: .88rem; }
.afaire-redir { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: 0; }
.afaire-redir input[type=text] { min-width: 260px; flex: 1; padding: 4px 6px; }
.afaire-redir .bouton { padding: 4px 10px; }

/* ---------- Restructurer avec Claude ---------- */
.claude-flux { max-height: 320px; overflow: auto; background: #f4f4f5; border-radius: 4px; padding: 10px; white-space: pre-wrap; font-size: .8rem; }
.claude-analyse label { display: block; margin: 10px 0; font-weight: 600; }
.claude-analyse input[type=text], .claude-analyse textarea, .claude-analyse select { display: block; width: 100%; box-sizing: border-box; font-weight: 400; padding: 6px; margin-top: 3px; }
.claude-fiche input { width: 100%; box-sizing: border-box; padding: 4px; }
.claude-comparaison { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.claude-comparaison > div { min-width: 0; border: 1px solid var(--ligne); border-radius: 4px; padding: 10px 14px; max-height: 80vh; overflow: auto; }
@media (max-width: 760px) { .claude-comparaison { grid-template-columns: 1fr; } }
.claude-texte mark, .claude-analyse mark { background: #fde68a; }
.claude-h1 { font-size: 1.5rem; }
.claude-html { width: 100%; box-sizing: border-box; font-family: monospace; font-size: .8rem; }
.contenu table.fiche { border-collapse: collapse; margin: 12px 0; width: 100%; max-width: 520px; font-size: .95rem; }
.contenu table.fiche th, .contenu table.fiche td { border: 1px solid var(--ligne); padding: 5px 9px; text-align: left; vertical-align: top; }
.contenu table.fiche th { background: #f4f4f5; width: 40%; font-weight: 600; }
.soldats ul { margin: 0; padding-left: 20px; }
.soldats li { margin: 4px 0; }
.claude-texte img { max-width: 100%; height: auto; }
.claude-texte::after { content: ""; display: block; clear: both; }
.guide-pilier { border-left: 4px solid var(--bleu); background: #eef6fc; padding: 10px 14px; margin: 18px 0; border-radius: 4px; }
.guide-pilier p { margin: 4px 0; }
.guide-pilier-titre { font-size: .85rem; text-transform: uppercase; letter-spacing: .03em; color: var(--bleu-fonce); font-weight: 600; }
.maillage textarea { width: 100%; min-width: 260px; box-sizing: border-box; padding: 5px; font: inherit; font-size: .9rem; }
.maillage td:first-child { width: 38%; }
mark.a-verifier, .claude-texte mark.a-verifier { background: #fed7aa; border-bottom: 1px dashed #c2410c; }
.claude-analyse input.a-verifier { background: #fff7ed; border-color: #fb923c; }
.claude-copie { width: 70%; padding: 5px; }

/* ---------- Vidéos YouTube avec accord (cookies) ---------- */
.video[data-youtube] { background: #0f3d57; border-radius: 6px; overflow: hidden; }
.video .video-fond { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .45; }
.video-attente { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
                 padding: 14px; text-align: center; color: #fff; background: linear-gradient(135deg, rgba(15,61,87,.55), rgba(32,125,175,.35)); }
.video-attente .video-titre { font-weight: 600; font-size: 1.05rem; text-shadow: 0 1px 3px rgba(0,0,0,.5); }
.video-attente p { margin: 0; max-width: 520px; font-size: .88rem; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.video-attente .video-lire { border: 0; border-radius: 6px; padding: 9px 16px; background: #fff; color: #0f3d57; font: inherit; font-weight: 600; cursor: pointer; }
.video-attente .video-toujours { background: none; border: 0; padding: 0; color: #e0f2fe; text-decoration: underline; font: inherit; font-size: .82rem; cursor: pointer; }
.video-lien-yt { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 600; }
@media (max-width: 480px) { .video-attente p { display: none; } .video-attente .video-lire { font-size: .85rem; } }

.consent-banniere { position: fixed; left: 16px; right: 16px; bottom: 16px; max-width: 560px; margin-right: auto; background: #fff; color: var(--texte);
                    border-radius: 8px; box-shadow: 0 6px 24px rgba(0,0,0,.25); padding: 14px 16px; z-index: 60; font-size: .9rem; }
.consent-banniere[hidden], .consent-icone[hidden] { display: none; }
.consent-banniere h2 { font-size: 1.05rem; margin: 0 0 6px; }
.consent-banniere p { margin: 0 0 8px; }
.consent-banniere details { margin: 4px 0 10px; font-size: .83rem; }
.consent-banniere table { border-collapse: collapse; width: 100%; margin: 6px 0; }
.consent-banniere td, .consent-banniere th { border: 1px solid var(--ligne); padding: 4px 6px; text-align: left; vertical-align: top; }
.consent-choix { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }   /* Accepter et Refuser : même taille, même niveau */
.consent-choix .bouton { width: 100%; text-align: center; }
.consent-etat { font-size: .85rem; color: var(--doux); }
.consent-icone { position: fixed; left: 16px; bottom: 16px; width: 46px; height: 46px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; z-index: 59;
                 background: #fff; box-shadow: 0 3px 12px rgba(0,0,0,.3); font-size: 23px; line-height: 46px; text-align: center; }
.consent-icone:hover { transform: scale(1.08); }

/* Fusion du sous-domaine phil */
.seo-freq.fusion td { vertical-align: top; }
.seo-freq.fusion tr.fusion-fait td { background: #f0fdf4; }
.fusion-form { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.fusion-form input[type=text] { min-width: 220px; flex: 1; }
.fusion-form details { flex-basis: 100%; }
.fusion-form details select { margin: 4px 0; }