:root{
    --bleu:#0189D7;
    --cyan:#00AFF0;
    --bleu-fonce:#0568A5;
    --rouge:#D3292B;
    --rouge-fonce:#A81E20;
    --jaune:#F3F136;
    --noir:#231F20;
    --gris:#5B5757;
    --gris-clair:#8C8886;
    --filet:#DEDCDA;
    --fond:#FFFFFF;
    --fond-alt:#F5F5F3;
    --titre:'Oswald', 'Arial Narrow', sans-serif;
    --serif:'Source Serif 4', Georgia, serif;
    --sans:'Inter', -apple-system, sans-serif;
    --maxw:1200px;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{margin:0;background:var(--fond);color:var(--noir);font-family:var(--sans);-webkit-font-smoothing:antialiased;}
  img{display:block;max-width:100%;}
  a{color:inherit;text-decoration:none;}
  button{font-family:inherit;cursor:pointer;}
  :focus-visible{outline:3px solid var(--bleu);outline-offset:2px;}
  @media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;}}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px;}

  /* Bandeau rouge */
  .bandeau{background:var(--rouge);color:#fff;}
  .bandeau .wrap{display:flex;align-items:center;gap:14px;padding:11px 20px;}
  .bandeau .flash{
    background:#fff;color:var(--rouge);font-family:var(--titre);font-weight:700;
    font-size:12px;letter-spacing:.08em;padding:3px 9px;flex-shrink:0;
  }
  .bandeau p{margin:0;font-family:var(--titre);font-weight:500;font-size:clamp(14px,2.2vw,19px);line-height:1.25;}

  /* Barre service */
  .service{background:var(--noir);color:#D9D6D3;font-size:12px;}
  .service .wrap{display:flex;justify-content:space-between;align-items:center;height:34px;}
  .service-gauche{display:flex;gap:16px;color:#A7A29E;}
  .service-droite{display:flex;gap:14px;align-items:center;}
  .btn-abo{background:var(--cyan);color:#062733!important;font-weight:700;padding:5px 13px;letter-spacing:.02em;}
  .btn-abo:hover{background:#fff;}

  /* En-tête / logo */
  .entete{border-bottom:4px solid var(--bleu);padding:20px 0 16px;}
  .entete .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;}
  .logo-bloc{display:flex;align-items:center;gap:0;}
  .logo-bloc img{width:min(430px,68vw);height:auto;}
  .date-bloc{text-align:right;line-height:1;}
  .date-bloc .num{font-family:var(--titre);font-weight:700;font-size:13px;color:var(--noir);letter-spacing:.05em;}
  .date-bloc .date{font-family:var(--titre);font-weight:700;font-size:clamp(30px,5vw,52px);color:var(--cyan);letter-spacing:-.01em;}
  .date-bloc .prix{font-family:var(--titre);font-weight:600;font-size:12px;color:var(--gris);letter-spacing:.06em;margin-top:4px;}

  /* Navigation */
  .nav{background:var(--bleu);position:sticky;top:0;z-index:40;}
  .nav-inner{display:flex;align-items:center;gap:0;overflow-x:auto;scrollbar-width:none;}
  .nav-inner::-webkit-scrollbar{display:none;}
  .nav-btn{
    background:none;border:none;color:#fff;font-family:var(--titre);font-weight:500;
    font-size:14.5px;letter-spacing:.05em;text-transform:uppercase;padding:13px 15px;
    white-space:nowrap;border-bottom:4px solid transparent;transition:background .15s,border-color .15s;
  }
  .nav-btn:hover{background:rgba(0,0,0,.14);}
  .nav-btn[aria-current="true"]{background:var(--noir);border-bottom-color:var(--cyan);}
  .nav-recherche{margin-left:auto;display:flex;align-items:center;gap:7px;padding:7px 0 7px 12px;}
  .nav-recherche input{
    border:none;padding:7px 11px;font-size:13px;font-family:var(--sans);width:145px;
    background:rgba(255,255,255,.95);color:var(--noir);
  }
  .nav-recherche input::placeholder{color:#8C8886;}

  /* Une */
  .une{
    display:grid;grid-template-columns:1.15fr .85fr;gap:0;
    background:var(--jaune);margin-top:26px;align-items:stretch;
    animation:apparait .5s ease both;
  }
  @keyframes apparait{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
  .une-texte{padding:38px 34px;display:flex;flex-direction:column;justify-content:center;}
  .une-surtitre{
    font-family:var(--titre);font-weight:700;font-size:clamp(22px,3vw,34px);
    color:var(--gris);text-transform:uppercase;letter-spacing:.01em;line-height:1;margin:0 0 10px;
  }
  .une-titre{
    font-family:var(--titre);font-weight:700;font-size:clamp(30px,4.6vw,54px);
    line-height:.98;text-transform:uppercase;margin:0 0 16px;letter-spacing:-.005em;
  }
  .une-titre a:hover{color:var(--rouge-fonce);}
  .une-chapo{font-family:var(--serif);font-size:16.5px;line-height:1.5;margin:0 0 16px;color:#33302E;}
  .une-meta{font-family:var(--titre);font-weight:600;font-size:13px;letter-spacing:.06em;color:#4A4745;text-transform:uppercase;}
  .une-photo{display:block;aspect-ratio:16 / 9;overflow:hidden;background:#d7d2ce;}
  .une-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:center top;transition:transform .25s ease;}
  .une-photo:hover img{transform:scale(1.02);}

  /* Titres de section */
  .titre-section{display:flex;align-items:center;gap:14px;margin:44px 0 20px;}
  .titre-section h2{
    font-family:var(--titre);font-weight:700;font-size:26px;text-transform:uppercase;
    letter-spacing:.02em;margin:0;background:var(--noir);color:#fff;padding:5px 14px;
  }
  .titre-section .trait{flex:1;height:3px;background:var(--bleu);}
  .titre-section .tout{font-family:var(--titre);font-weight:600;font-size:13px;letter-spacing:.06em;color:var(--bleu);text-transform:uppercase;}
  .titre-section .tout:hover{color:var(--rouge);}

  /* Grille articles */
  .grille{display:grid;grid-template-columns:repeat(3,1fr);gap:30px 26px;}
  .carte{display:flex;flex-direction:column;}
  .carte.masquee{display:none;}
  .carte-photo{width:100%;aspect-ratio:16/10;object-fit:cover;background:var(--fond-alt);margin-bottom:12px;}
  .carte-photo.placeholder{display:flex;align-items:center;justify-content:center;}
  .carte-rubrique{
    font-family:var(--titre);font-weight:700;font-size:12px;letter-spacing:.09em;
    text-transform:uppercase;color:var(--rouge);margin-bottom:7px;
  }
  .carte-rubrique.bleu{color:var(--bleu);}
  .carte-titre{
    font-family:var(--titre);font-weight:600;font-size:21px;line-height:1.12;margin:0 0 9px;
  }
  .carte-titre a:hover{color:var(--bleu);}
  .carte-chapo{font-family:var(--serif);font-size:14.5px;line-height:1.5;color:var(--gris);margin:0 0 10px;}
  .carte-meta{font-size:11.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--gris-clair);margin-top:auto;}
  .vide{display:none;font-family:var(--serif);font-style:italic;color:var(--gris-clair);padding:26px 0;}

  /* Éditorial */
  .edito{margin-top:48px;background:var(--noir);color:#EDEAE7;padding:36px 0;}
  .edito .wrap{display:grid;grid-template-columns:200px 1fr;gap:34px;}
  .edito-label{
    font-family:var(--titre);font-weight:700;font-size:30px;text-transform:uppercase;
    color:var(--cyan);line-height:1;border-top:4px solid var(--cyan);padding-top:12px;
  }
  .edito-label span{display:block;font-size:12px;letter-spacing:.08em;color:#8F8A86;font-weight:500;margin-top:8px;}
  .edito h3{font-family:var(--titre);font-weight:700;font-size:clamp(26px,3.4vw,38px);text-transform:uppercase;margin:0 0 14px;line-height:1;}
  .edito p{font-family:var(--serif);font-size:16px;line-height:1.62;color:#CFCBC7;margin:0 0 12px;max-width:68ch;}
  .edito .signature{font-family:var(--titre);font-weight:700;letter-spacing:.08em;color:var(--cyan);font-size:14px;}

  /* Citation du jour */
  .citation{background:var(--fond-alt);border-top:3px solid var(--jaune);border-bottom:3px solid var(--jaune);padding:26px 0;margin-top:44px;text-align:center;}
  .citation p{font-family:var(--serif);font-style:italic;font-size:clamp(17px,2.4vw,23px);margin:0 0 8px;line-height:1.4;}
  .citation cite{font-family:var(--titre);font-weight:700;font-style:normal;letter-spacing:.06em;text-transform:uppercase;font-size:14px;color:var(--rouge);}

  /* Expresso */
  .expresso{margin-top:44px;}
  .expresso-grille{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}
  .breve{border-top:3px solid var(--noir);padding-top:12px;}
  .breve h4{font-family:var(--titre);font-weight:600;font-size:17px;line-height:1.15;margin:0 0 8px;}
  .breve .lieu{color:var(--rouge);}
  .breve p{font-family:var(--serif);font-size:13.5px;line-height:1.5;color:var(--gris);margin:0;}

  /* Newsletter */
  .newsletter{margin-top:52px;background:var(--bleu);color:#fff;padding:40px 0;text-align:center;}
  .newsletter h2{font-family:var(--titre);font-weight:700;font-size:clamp(24px,3.4vw,34px);text-transform:uppercase;margin:0 0 8px;}
  .newsletter p{margin:0 0 20px;font-size:14.5px;color:#DCF1FC;}
  .nl-form{display:flex;gap:9px;max-width:430px;margin:0 auto;}
  .nl-form input{flex:1;border:none;padding:12px 14px;font-size:14px;font-family:var(--sans);}
  .nl-form button{background:var(--noir);color:#fff;border:none;padding:12px 20px;font-family:var(--titre);font-weight:600;letter-spacing:.05em;text-transform:uppercase;font-size:14px;}
  .nl-form button:hover{background:var(--rouge);}
  .nl-note{margin-top:12px!important;font-size:13px;min-height:18px;color:#fff!important;font-weight:600;}

/* Espace client */
.page-client{
  max-width: 760px;
  margin: 48px auto 72px;
  padding: 0 20px;
}

.client-card{
  background: #f7f7f5;
  border: 1px solid var(--filet);
  padding: 28px 24px;
  box-shadow: 0 12px 30px rgba(35,31,32,0.05);
}

.client-card h1{
  font-family: var(--titre);
  font-size: clamp(28px, 4vw, 40px);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 12px;
}

.client-card p{
  margin: 0 0 22px;
  color: var(--gris);
  line-height: 1.6;
}

.client-form{
  display: grid;
  gap: 16px;
}

.client-form label{
  display: grid;
  gap: 8px;
  font-family: var(--titre);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--noir);
}

.client-form input,
.client-form select{
  border: 1px solid var(--filet);
  padding: 12px 14px;
  font-size: 15px;
  font-family: var(--sans);
  background: #fff;
}

.client-form button{
  width: fit-content;
  border: none;
  background: var(--bleu);
  color: #fff;
  padding: 12px 20px;
  font-family: var(--titre);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.client-form button:hover{ background: var(--rouge); }

.client-message{
  min-height: 22px;
  margin-top: 6px;
  font-weight: 600;
  color: var(--bleu-fonce);
}

.client-message.erreur{ color: var(--rouge); }
  .pied-grille li{margin-bottom:8px;}
  .pied-grille li a{font-size:13.5px;color:var(--gris);}
  .pied-grille li a:hover{color:var(--rouge);}
  .pied-bas{display:flex;justify-content:space-between;align-items:center;padding-top:20px;font-size:12px;color:var(--gris-clair);flex-wrap:wrap;gap:8px;}

  /* Lecteur d'article */
  .lecteur{
    position:fixed;inset:0;background:rgba(20,18,18,.72);z-index:100;
    display:none;overflow-y:auto;padding:26px 16px;
  }
  .lecteur.ouvert{display:block;}
  .lecteur-boite{
    max-width:760px;margin:0 auto;background:#fff;padding:0 0 40px;
    animation:apparait .25s ease both;
  }
  .lecteur-barre{
    position:sticky;top:0;background:var(--noir);display:flex;justify-content:space-between;
    align-items:center;padding:10px 18px;z-index:2;
  }
  .lecteur-barre span{font-family:var(--titre);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--cyan);font-size:13px;}
  .lecteur-barre button{background:none;border:none;color:#fff;font-size:26px;line-height:1;padding:0 4px;}
  .lecteur-contenu{padding:26px 34px 0;}
  .lecteur-contenu .rub{font-family:var(--titre);font-weight:700;font-size:13px;letter-spacing:.09em;text-transform:uppercase;color:var(--rouge);margin-bottom:10px;}
  .lecteur-contenu h2{font-family:var(--titre);font-weight:700;font-size:clamp(26px,4vw,40px);line-height:1.02;margin:0 0 14px;}
  .lecteur-contenu .chapo{font-family:var(--serif);font-size:18px;line-height:1.5;color:#3A3735;font-weight:600;margin:0 0 18px;}
  .lecteur-contenu img{width:100%;margin:0 0 8px;}
  .lecteur-contenu .legende{font-size:12.5px;color:var(--gris-clair);margin:0 0 20px;font-style:italic;}
  .lecteur-contenu p{font-family:var(--serif);font-size:16.5px;line-height:1.68;margin:0 0 14px;}
  .lecteur-contenu h3{font-family:var(--titre);font-weight:700;font-size:20px;text-transform:uppercase;color:var(--bleu);margin:24px 0 10px;}
  .lecteur-contenu .sign{font-family:var(--titre);font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--rouge);font-size:15px;margin-top:22px;}

  @media (max-width:980px){
    .une{grid-template-columns:1fr;}
    .une-photo{aspect-ratio:4 / 3;order:-1;}
    .grille{grid-template-columns:repeat(2,1fr);}
    .expresso-grille{grid-template-columns:repeat(2,1fr);}
    .edito .wrap{grid-template-columns:1fr;gap:18px;}
    .pied-grille{grid-template-columns:1fr 1fr;}
  }
  @media (max-width:600px){
    .grille{grid-template-columns:1fr;}
    .expresso-grille{grid-template-columns:1fr;}
    .service-gauche{display:none;}
    .nl-form{flex-direction:column;}
    .entete .wrap{justify-content:center;text-align:center;}
    .date-bloc{text-align:center;}
    .une-texte{padding:26px 20px;}
    .lecteur-contenu{padding:20px 18px 0;}
  }

/* ------------------------------------------------------------------ */
/* Ajouts pour la version dynamique (frontend + backend)               */
/* ------------------------------------------------------------------ */

.chargement{padding:50px 0;text-align:center;color:var(--gris-clair);font-family:var(--titre);letter-spacing:.08em;text-transform:uppercase;font-size:14px;}
.squelette{background:linear-gradient(90deg,#F0EFED 25%,#E6E4E1 50%,#F0EFED 75%);background-size:200% 100%;animation:brille 1.2s infinite;}
@keyframes brille{0%{background-position:200% 0;}100%{background-position:-200% 0;}}
.squelette-carte{height:270px;}

.pagination{display:flex;gap:8px;justify-content:center;margin-top:34px;}
.pagination button{border:2px solid var(--filet);background:#fff;font-family:var(--titre);font-weight:600;padding:9px 16px;letter-spacing:.05em;text-transform:uppercase;font-size:13px;}
.pagination button:hover:not(:disabled){border-color:var(--bleu);color:var(--bleu);}
.pagination button:disabled{opacity:.4;cursor:default;}
.pagination .courante{background:var(--bleu);border-color:var(--bleu);color:#fff;}

/* Page article (rendue par le serveur) */
.article-page{max-width:760px;margin:0 auto;padding:34px 20px 0;}
.article-page .fil{font-family:var(--titre);font-size:13px;letter-spacing:.07em;text-transform:uppercase;color:var(--gris-clair);margin-bottom:14px;}
.article-page .fil a{color:var(--bleu);}
.article-page .sur{font-family:var(--titre);font-weight:700;font-size:clamp(18px,2.6vw,26px);text-transform:uppercase;color:var(--gris);margin:0 0 6px;}
.article-page h1{font-family:var(--titre);font-weight:700;font-size:clamp(28px,4.4vw,46px);line-height:1.02;margin:0 0 16px;}
.article-page .chapo{font-family:var(--serif);font-size:18.5px;line-height:1.5;font-weight:600;color:#3A3735;margin:0 0 18px;}
.article-page .signature{display:flex;gap:14px;flex-wrap:wrap;align-items:center;border-top:3px solid var(--noir);border-bottom:1px solid var(--filet);padding:12px 0;font-family:var(--titre);font-size:13.5px;letter-spacing:.05em;text-transform:uppercase;margin-bottom:22px;}
.article-page .signature .auteur{color:var(--rouge);font-weight:700;}
.article-page .signature .sep{color:var(--filet);}
.article-page figure{margin:0 0 22px;}
.article-page figure img{width:100%;}
.article-page figcaption{font-size:12.5px;font-style:italic;color:var(--gris-clair);padding-top:7px;}
.article-page .corps p{font-family:var(--serif);font-size:17px;line-height:1.7;margin:0 0 15px;}
.article-page .corps h3{font-family:var(--titre);font-weight:700;font-size:21px;text-transform:uppercase;color:var(--bleu);margin:26px 0 10px;}
.partage{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin:28px 0;padding:16px 0;border-top:1px solid var(--filet);border-bottom:1px solid var(--filet);}
.partage span{font-family:var(--titre);font-size:13px;letter-spacing:.07em;text-transform:uppercase;color:var(--gris);}
.partage a,.partage button{background:var(--noir);color:#fff;border:none;font-family:var(--titre);font-weight:600;font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;padding:8px 14px;}
.partage a.wa{background:#25D366;color:#062b12;}
.partage a.fb{background:#1877F2;}
.aussi-bloc{margin:34px 0 50px;}
.aussi-bloc h2{font-family:var(--titre);font-weight:700;font-size:20px;text-transform:uppercase;border-top:3px solid var(--bleu);padding-top:12px;margin:0 0 16px;}
.lien-aussi{display:grid;grid-template-columns:96px 1fr;gap:14px;align-items:center;padding:12px 0;border-bottom:1px solid var(--filet);}
.lien-aussi img{width:96px;height:64px;object-fit:cover;}
.lien-aussi span{font-family:var(--titre);font-weight:600;font-size:16px;line-height:1.2;}
.lien-aussi:hover span{color:var(--bleu);}

/* Interface de la redaction */
.admin-body{background:var(--fond-alt);font-family:var(--sans);}
.admin-entete{background:var(--noir);color:#fff;padding:12px 0;}
.admin-entete .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;}
.admin-entete img{width:170px;filter:invert(1) brightness(2);}
.admin-entete .qui{font-size:13px;color:#A7A29E;}
.admin-entete button{background:var(--rouge);color:#fff;border:none;padding:7px 14px;font-family:var(--titre);letter-spacing:.05em;text-transform:uppercase;font-size:12.5px;}
.admin-onglets{display:flex;gap:2px;background:var(--bleu);}
.admin-onglets button{background:none;border:none;color:#fff;font-family:var(--titre);font-size:14px;letter-spacing:.05em;text-transform:uppercase;padding:12px 18px;border-bottom:4px solid transparent;}
.admin-onglets button[aria-current="true"]{background:var(--noir);border-bottom-color:var(--cyan);}
.panneau{display:none;padding:26px 0 60px;}
.panneau.actif{display:block;}
.carte-admin{background:#fff;border:1px solid var(--filet);padding:22px;margin-bottom:18px;}
.carte-admin h3{font-family:var(--titre);font-weight:700;font-size:19px;text-transform:uppercase;margin:0 0 16px;border-left:5px solid var(--bleu);padding-left:11px;}
.champ{margin-bottom:14px;}
.champ label{display:block;font-family:var(--titre);font-size:13px;letter-spacing:.05em;text-transform:uppercase;color:var(--gris);margin-bottom:5px;}
.champ input,.champ select,.champ textarea{width:100%;border:1px solid var(--filet);padding:9px 11px;font-family:var(--sans);font-size:14.5px;background:#fff;}
.champ textarea{min-height:190px;font-family:var(--serif);line-height:1.6;resize:vertical;}
.champ small{color:var(--gris-clair);font-size:12px;}
.ligne{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.cases{display:flex;gap:22px;align-items:center;margin-bottom:16px;}
.cases label{display:flex;gap:7px;align-items:center;font-size:14px;font-weight:600;}
.cases input{width:auto;}
.bouton{background:var(--bleu);color:#fff;border:none;padding:11px 22px;font-family:var(--titre);font-weight:600;letter-spacing:.05em;text-transform:uppercase;font-size:14px;}
.bouton:hover{background:var(--bleu-fonce);}
.bouton.gris{background:var(--gris);}
.bouton.rouge{background:var(--rouge);}
.message{padding:11px 14px;margin-bottom:14px;font-size:14px;font-weight:600;display:none;}
.message.ok{background:#E4F6E7;color:#186B2B;border-left:4px solid #2AA745;display:block;}
.message.ko{background:#FDE8E8;color:#9B1C1C;border-left:4px solid var(--rouge);display:block;}
table.liste{width:100%;border-collapse:collapse;background:#fff;font-size:14px;}
table.liste th{background:var(--noir);color:#fff;font-family:var(--titre);font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;text-align:left;padding:10px;}
table.liste td{padding:10px;border-bottom:1px solid var(--filet);vertical-align:middle;}
table.liste tr:hover td{background:#FAFAF9;}
.etiquette{display:inline-block;font-family:var(--titre);font-size:11px;letter-spacing:.05em;text-transform:uppercase;padding:3px 8px;color:#fff;}
.etiquette.publie{background:#2AA745;}
.etiquette.brouillon{background:var(--gris-clair);}
.etiquette.une{background:var(--jaune);color:var(--noir);}
.mini{background:none;border:1px solid var(--filet);padding:5px 10px;font-size:12px;font-family:var(--titre);letter-spacing:.04em;text-transform:uppercase;}
.mini:hover{border-color:var(--bleu);color:var(--bleu);}
.stats-grille{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:20px;}
.stat{background:#fff;border:1px solid var(--filet);border-top:4px solid var(--bleu);padding:18px;}
.stat .n{font-family:var(--titre);font-weight:700;font-size:36px;line-height:1;color:var(--noir);}
.stat .l{font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--gris-clair);margin-top:5px;}
.apercu-photo{max-width:230px;border:1px solid var(--filet);margin-top:9px;}
.connexion-boite{max-width:390px;margin:70px auto;background:#fff;border:1px solid var(--filet);border-top:5px solid var(--bleu);padding:32px;}
.connexion-boite img{width:100%;margin-bottom:22px;}
@media (max-width:760px){
  .ligne,.stats-grille{grid-template-columns:1fr;}
  table.liste{font-size:13px;}
}