/* ═══════════════════════════════════════════════════════════
   blog.css — le journal de la maison, republié dans le site.

   Les 128 articles vivaient dans PrestaShop (module prestablog)
   et s'éteindront avec lui. Ils sont ici mot pour mot, dans le
   gabarit du site : bandeau d'encre, fil d'Ariane, colonne de
   lecture héritée de legal.css.

   Cette feuille tient trois choses :
     1. la liste — une lecture de magazine : un article à la une,
        des rubriques qui filtrent sans recharger, une grille ;
     2. l'article — une colonne étroite, des visuels qui débordent
        quand ils le méritent, un partage sans script tiers ;
     3. la page Actualités, qui range les mêmes cartes par thème.

   Aucune couleur n'est inventée : tout vient des jetons de
   site.css (--laque, --encre, --creme, --trait, --display…).
   ═══════════════════════════════════════════════════════════ */

/* ── Deux utilitaires ────────────────────────────────────────
   `hidden` doit l'emporter sur les display: des cartes, sans quoi
   une carte filtrée resterait affichée. Et le libellé du champ de
   recherche existe pour les lecteurs d'écran seuls. */
[hidden]{display:none!important}
.masq-tout{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* ═══ 1. LA LISTE ═══════════════════════════════════════════ */

.blog-liste{padding-block:clamp(30px,4vw,56px) clamp(48px,6vw,96px)}

/* ── La barre de rubriques ───────────────────────────────────
   Sept rubriques, dont deux portent l'essentiel. Sur un
   téléphone elles défilent horizontalement plutôt que de se
   casser sur quatre lignes : la barre reste une barre. */
.blog-rubriques{display:flex;gap:8px;margin-bottom:20px;
  overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  padding-bottom:2px}
.blog-rubriques::-webkit-scrollbar{display:none}
/* Au doigt, la rangée de rubriques est la seule commande de la page :
   9 px de rembourrage donnaient 37 px de haut, sous le minimum visable. */
@media(pointer:coarse){
  .blog-rubriques :is(a,button){padding-block:12px;min-height:44px;align-items:center}
}
.blog-rubriques :is(a,button){display:inline-flex;align-items:baseline;gap:6px;
  font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  color:var(--encre-doux);border:1px solid var(--trait);background:transparent;
  padding:9px 14px;white-space:nowrap;flex:0 0 auto;
  transition:color .2s var(--ease),border-color .2s var(--ease),
             background-color .2s var(--ease)}
.blog-rubriques :is(a,button) b{font-weight:600;color:var(--encre-tres-doux);
  font-size:.66rem;transition:color .2s var(--ease)}
.blog-rubriques :is(a,button):hover{border-color:var(--encre);color:var(--encre)}
.blog-rubriques :is(a.ici,button.ici,button[aria-pressed="true"]){
  background:var(--encre);border-color:var(--encre);color:#fff}
.blog-rubriques :is(a.ici,button.ici,button[aria-pressed="true"]) b{
  color:rgba(255,255,255,.6)}

/* ── La ligne d'état : recherche + décompte ──────────────────
   Le champ n'apparaît que si le script a pris la main ; sans
   JavaScript la page reste une liste paginée qui fonctionne. */
.blog-barre{display:flex;flex-wrap:wrap;gap:14px 20px;align-items:center;
  justify-content:space-between;margin-bottom:22px;
  padding-bottom:16px;border-bottom:1px solid var(--trait)}
.blog-compte{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--encre-tres-doux);margin:0}
.blog-chercher{position:relative;flex:0 1 300px;min-width:0}
.blog-chercher input{width:100%;border:0;border-bottom:1px solid var(--trait);
  background:transparent;font:inherit;font-size:.88rem;font-weight:300;
  padding:8px 26px 8px 0;color:var(--encre);
  transition:border-color .2s var(--ease)}
.blog-chercher input::placeholder{color:var(--encre-tres-doux)}
.blog-chercher input:focus{outline:0;border-bottom-color:var(--encre)}
.blog-chercher svg{position:absolute;right:2px;top:50%;transform:translateY(-50%);
  color:var(--encre-tres-doux);pointer-events:none}
.blog-vide{padding:clamp(40px,6vw,80px) 0;text-align:center;color:var(--encre-doux);
  font-weight:300}
.blog-vide b{display:block;font-family:var(--display);font-size:1.3rem;
  text-transform:uppercase;color:var(--encre);margin-bottom:8px}

/* ── L'article à la une ──────────────────────────────────────
   Le premier article d'une liste ne mérite pas la même vignette
   que les sept autres : il occupe toute la largeur, l'image à
   gauche, le texte à droite, et il donne le ton de la page. */
.act-une{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  border:1px solid var(--trait);background:#fff;margin-bottom:2px;
  min-width:0;align-items:stretch}
.act-une .act-vue{aspect-ratio:16/9;height:100%}
.act-une-corps{padding:clamp(26px,3.4vw,52px);display:flex;flex-direction:column;
  justify-content:center;min-width:0}
.act-une .act-eti{margin-bottom:16px}
.act-une h2{font-family:var(--display);text-transform:uppercase;
  font-size:clamp(1.35rem,2.5vw,2.15rem);line-height:1.08;letter-spacing:.01em;
  text-wrap:balance;overflow-wrap:break-word}
.act-une p.chapo{color:var(--encre-doux);font-weight:300;margin-top:16px;
  font-size:.98rem;line-height:1.65;max-width:52ch;
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.act-une .aller{margin-top:26px}
.act-une:hover .act-vue img{transform:scale(1.03)}
@media(max-width:860px){
  .act-une{grid-template-columns:minmax(0,1fr)}
  .act-une .act-vue{aspect-ratio:16/10}
}

/* ── La grille de cartes ─────────────────────────────────────
   Trois colonnes séparées d'un trait, deux sous 980 px, une
   sous 600 px. Le trait est le fond de la grille : la gouttière
   de 1 px le laisse apparaître. */
.act-grille{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;
  background:var(--trait);border:1px solid var(--trait)}
.act-carte{background:#fff;display:flex;flex-direction:column;min-width:0;
  position:relative}
.act-vue{aspect-ratio:16/10;background:var(--creme);overflow:hidden}
.act-vue img{width:100%;height:100%;object-fit:cover;
  transition:transform .5s var(--ease)}
.act-carte:hover .act-vue img{transform:scale(1.04)}
.act-corps{padding:22px 24px 26px;display:flex;flex-direction:column;flex:1 1 auto}
.act-corps h3{font-family:var(--display);font-size:1.08rem;text-transform:uppercase;
  line-height:1.14;letter-spacing:.01em;text-wrap:balance;overflow-wrap:break-word}
/* `:not(.act-eti)` est indispensable : sans lui, la règle attrapait
   aussi la ligne date + rubrique et la transformait en boîte tronquée
   — l'espace entre la date et la rubrique disparaissait. */
.act-corps p:not(.act-eti){color:var(--encre-doux);font-size:.86rem;font-weight:300;
  margin-top:10px;line-height:1.6;flex:1 1 auto;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.act-corps .aller,.act-une .aller{font-size:.68rem;letter-spacing:.18em;
  text-transform:uppercase;font-weight:600;color:var(--encre);
  display:inline-flex;align-items:center;gap:8px;align-self:flex-start}
.act-corps .aller{margin-top:18px}
.act-corps .aller::after,.act-une .aller::after{content:'→';
  transition:transform .2s var(--ease)}
.act-carte:hover .aller,.act-une:hover .aller{color:var(--laque)}
.act-carte:hover .aller::after,.act-une:hover .aller::after{transform:translateX(4px)}
@media(max-width:980px){.act-grille{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.act-grille{grid-template-columns:minmax(0,1fr)}}

/* L'étiquette date + rubrique, au-dessus du titre de la carte. */
.act-eti{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:baseline;
  font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;
  color:var(--encre-tres-doux);margin-bottom:10px}
.act-eti .rub{color:var(--laque)}

/* Apparition à l'ouverture : très courte, décalée carte par
   carte, et annulée dès que l'utilisateur demande moins de
   mouvement. Rien qui retarde la lecture. */
@media(prefers-reduced-motion:no-preference){
  .js .act-grille>*,.js .act-une{animation:blog-monte .22s var(--ease) both}
  .js .act-grille>*:nth-child(n+4){animation-delay:.04s}
  .js .act-grille>*:nth-child(n+7){animation-delay:.08s}
}
@keyframes blog-monte{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ── Pagination ──────────────────────────────────────────────
   Les mêmes tranches de huit que la boutique, pour que les
   adresses restent superposables. */
.blog-pagination{display:flex;flex-wrap:wrap;gap:6px;align-items:center;
  justify-content:center;margin-top:clamp(30px,4vw,52px)}
.blog-pagination a,.blog-pagination span{font-size:.72rem;letter-spacing:.08em;
  min-width:40px;height:40px;display:inline-flex;align-items:center;
  justify-content:center;padding-inline:12px;border:1px solid var(--trait);
  color:var(--encre-doux);transition:color .2s var(--ease),border-color .2s var(--ease)}
.blog-pagination a:hover{border-color:var(--encre);color:var(--encre)}
.blog-pagination .ici{background:var(--encre);border-color:var(--encre);color:#fff}
.blog-pagination .off{opacity:.3}
.blog-pagination .pts{border-color:transparent}
@media(max-width:520px){
  .blog-pagination .num{display:none}
  .blog-pagination .num.ici,.blog-pagination .num.voisin{display:inline-flex}
}

/* L'index porte les 128 articles dans le HTML. Tant que le script
   n'a pas pris la main (classe `filtrable`), on n'en montre que la
   première fournée : la page ne s'affiche donc jamais entière pour
   se replier aussitôt. Sans script, la pagination en bas de page
   mène aux suivants — rien n'est perdu. */
[data-index]:not(.filtrable) .act-grille>.act-carte:nth-child(n+14){display:none}

/* La pagination de secours de l'index : discrète, mais elle existe —
   c'est par elle que passent les moteurs et les navigateurs sans
   script. */
.blog-tranches{margin-top:clamp(30px,4vw,52px);padding-top:24px;
  border-top:1px solid var(--trait)}
.blog-tranches p{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;
  font-weight:600;color:var(--encre-tres-doux);text-align:center;margin-bottom:14px}
.blog-tranches .blog-pagination{margin-top:0}

/* Le bouton « voir la suite » de l'index filtrable. */
.blog-plus{margin-top:clamp(28px,3.5vw,44px);text-align:center}
.blog-plus button{border:1px solid var(--encre);padding:15px 34px;font-size:.68rem;
  letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:var(--encre);
  transition:background-color .2s var(--ease),color .2s var(--ease)}
.blog-plus button:hover{background:var(--encre);color:#fff}

/* ═══ 2. UN ARTICLE ═════════════════════════════════════════ */

/* La colonne de lecture. legal.css la pose à 760 px ; pour du
   texte suivi c'est une ligne trop longue — on resserre à
   ~66 signes, la mesure confortable, et on remonte un peu le
   corps pour compenser la largeur perdue. */
.art .doc-in{max-width:680px}
.art-corps{font-size:1.04rem;line-height:1.75}
.art-bande h1{max-width:24ch}
.art-bande p{max-width:60ch}

/* La ligne de service : date, rubriques, temps de lecture. */
.art-meta{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;
  font-size:.66rem;letter-spacing:.15em;text-transform:uppercase;font-weight:600;
  color:var(--encre-tres-doux);margin-bottom:8px}
.art-meta a{color:var(--encre-doux);transition:color .2s var(--ease)}
.art-meta a:hover{color:var(--laque)}
.art-meta .sep{opacity:.45}

/* Partage : quatre liens ordinaires et un bouton qui copie
   l'adresse. Aucun script tiers, aucun compteur, rien à
   charger — la politique de sécurité du site n'autorise que
   nos propres fichiers. */
.art-outils{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;
  justify-content:space-between;
  padding-bottom:18px;margin-bottom:30px;border-bottom:1px solid var(--trait)}
.art-partage{display:flex;gap:6px;align-items:center}
.art-partage a,.art-partage button{width:34px;height:34px;display:inline-flex;
  align-items:center;justify-content:center;border:1px solid var(--trait);
  color:var(--encre-doux);
  transition:color .2s var(--ease),border-color .2s var(--ease)}
.art-partage a:hover,.art-partage button:hover{color:var(--laque);
  border-color:var(--laque)}
.art-partage svg{width:15px;height:15px}
.art-copie{position:relative}
.art-copie[data-fait]::after{content:attr(data-fait);position:absolute;
  bottom:calc(100% + 8px);right:0;white-space:nowrap;background:var(--encre);
  color:#fff;font-size:0.66rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:600;padding:6px 10px}

/* ── Les visuels du corps ────────────────────────────────────
   Le module PrestaShop noyait chaque image dans un paragraphe,
   parfois dans un titre. On les a sorties en <figure> : elles
   peuvent alors déborder de la colonne de lecture quand leur
   format le justifie (bannières panoramiques), et rester
   sagement dans la colonne quand elles sont hautes.
   Jamais d'étirement : c'est toujours la hauteur qui suit. */
.art-figure{margin-block:clamp(30px,3.6vw,48px)}
.art-figure img{display:block;width:100%;height:auto;background:transparent}
.art-figure figcaption{margin-top:12px;font-size:.76rem;font-weight:300;
  color:var(--encre-tres-doux);line-height:1.55}

/* Le débordement : l'image large reprend la largeur du texte plus une
   marge de chaque côté, sans jamais dépasser la fenêtre ni provoquer
   de défilement horizontal. `max-width:none` est obligatoire ici :
   legal.css plafonne toute figure à 100 % de sa colonne, ce qui
   annulerait le débordement. */
.art-figure.large{max-width:none;
  width:min(1020px,calc(100vw - 2*var(--gouttiere)));
  margin-inline:calc(50% - min(510px,(100vw - 2*var(--gouttiere))/2))}
@media(max-width:760px){
  .art-figure.large{width:auto;max-width:100%;margin-inline:0}
}

.art-corps img{display:block;width:100%;height:auto;background:transparent}
.art-corps hr{border:0;border-top:1px solid var(--trait);margin-block:2.4em}
.art-corps blockquote{margin-block:1.9em;padding:4px 0 4px 22px;
  border-left:2px solid var(--laque);color:var(--encre);font-weight:300;
  font-size:1.1rem;line-height:1.6;font-style:italic}
.art-corps blockquote p:last-child{margin-bottom:0}
/* Les intertitres respirent davantage que dans une page légale :
   on lit un article, pas des conditions générales. */
.art-corps :is(h2,h3,h4){margin-top:2em;margin-bottom:.7em}
.art-corps>:first-child{margin-top:0}
/* Une citation mise en avant par l'auteur (italique seul dans son
   paragraphe) garde son air de citation sans fabriquer de balise. */
.art-corps p>em:only-child{color:var(--encre)}

/* ── Les listes d'un article ─────────────────────────────────
   legal.css met les <li> en flex : commode pour une liste de
   texte nu (mentions légales), désastreux ici. Les articles du
   journal mettent des <strong> en pleine phrase, et chacun
   devenait un élément de flex — la ligne ne revenait jamais et
   le texte sortait de l'écran. On repasse donc en bloc, la puce
   posée en absolu. */
.art-corps :is(ul,ol){list-style:none;padding-left:0;margin-block:0 1.2em}
.art-corps li{display:block;position:relative;padding-left:22px;margin-block:9px}
.art-corps ul>li::before{content:'';position:absolute;left:3px;top:.62em;
  width:5px;height:5px;background:var(--encre-tres-doux)}
.art-corps ol{counter-reset:art-n}
.art-corps ol>li{counter-increment:art-n}
.art-corps ol>li::before{content:counter(art-n) '.';position:absolute;left:0;top:0;
  color:var(--laque);font-weight:500;font-size:.82rem}
.art-corps li>:is(ul,ol){margin-block:8px 0}

/* Aucun article n'a de tableau aujourd'hui, mais l'éditeur en permet :
   celui qui viendra défilera seul plutôt que de pousser la page. */
.art-corps table{display:block;overflow-x:auto;width:100%;
  border-collapse:collapse;margin-block:1.7em;font-size:.92rem}
.art-corps :is(td,th){border:1px solid var(--trait);padding:9px 11px;
  text-align:left}

/* ── Les montres citées ──────────────────────────────────────
   Le module liait l'article à des fiches produit. Le lien mène
   maintenant à la fiche du prototype ; celles qui n'ont pas de
   fiche chez nous ne sont pas listées. */
.art-produits{margin-top:clamp(34px,4vw,54px);padding:26px;background:var(--creme)}
.art-produits .sur{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  font-weight:600;color:var(--encre-doux);margin-bottom:14px}
.art-produits-liste{display:flex;flex-wrap:wrap;gap:8px}
.art-produits-liste a{background:#fff;border:1px solid var(--trait);
  padding:11px 15px;font-size:.82rem;color:var(--encre);
  transition:border-color .2s var(--ease),color .2s var(--ease)}
.art-produits-liste a:hover{border-color:var(--laque);color:var(--laque)}

/* L'adresse d'origine est citée comme un fait, pas comme un
   lien : la boutique s'éteint, le lien mourrait avec elle. */
.art-url{color:var(--encre-tres-doux);overflow-wrap:anywhere}

/* ── Article précédent, suivant ───────────────────────────── */
.art-voisins{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:14px;
  align-items:center;margin-top:clamp(34px,4vw,54px);padding-top:26px;
  border-top:1px solid var(--trait);font-size:.8rem}
.art-voisins a{color:var(--encre-doux);overflow-wrap:anywhere;
  transition:color .2s var(--ease)}
.art-voisins a:hover{color:var(--laque)}
.art-voisins .suiv{text-align:right}
.art-voisins .retour{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;
  font-weight:600;color:var(--encre);white-space:nowrap}
@media(max-width:700px){
  .art-voisins{grid-template-columns:minmax(0,1fr);text-align:left}
  .art-voisins .suiv{text-align:left}
}

/* ── La suite : trois articles de la même rubrique ─────────── */
.art-suite{background:var(--creme);padding-block:clamp(44px,5.5vw,80px);
  margin-top:clamp(48px,6vw,90px)}
.art-suite-tete{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:baseline;
  justify-content:space-between;margin-bottom:24px}
.art-suite-tete h2{font-family:var(--display);text-transform:uppercase;
  font-size:clamp(1.1rem,2vw,1.5rem);letter-spacing:.02em}
.art-suite-tete a{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;
  font-weight:600;color:var(--encre);transition:color .2s var(--ease)}
.art-suite-tete a:hover{color:var(--laque)}
.art-suite .act-grille{background:var(--trait);border-color:var(--trait)}

/* ═══ 3. LA PAGE ACTUALITÉS ═════════════════════════════════
   Les mêmes cartes, rangées par thème : trois coupes du même
   journal plutôt qu'une seconde liste. */
.act-groupe{padding-block:clamp(40px,5vw,72px)}
.act-groupe+.act-groupe{border-top:1px solid var(--trait)}
.act-titre{display:flex;flex-wrap:wrap;gap:12px 32px;align-items:flex-end;
  justify-content:space-between;margin-bottom:26px}
.act-titre .sur{color:var(--laque);margin-bottom:8px}
.act-titre h2{font-family:var(--display);text-transform:uppercase;
  font-size:clamp(1.5rem,3vw,2.3rem);line-height:1.06;letter-spacing:.01em}
.act-titre p{color:var(--encre-doux);font-weight:300;margin-top:10px;max-width:54ch}
.act-titre-g{min-width:0}
.act-titre .act-lien{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;
  font-weight:600;color:var(--encre);white-space:nowrap;
  transition:color .2s var(--ease)}
.act-titre .act-lien:hover{color:var(--laque)}

/* Le renvoi vers le journal complet, en bas de page. */
.act-tout{margin-top:clamp(30px,3.5vw,48px);text-align:center;
  padding-bottom:clamp(40px,5vw,72px)}
.act-tout a{display:inline-block;border:1px solid var(--encre);padding:15px 32px;
  font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600;
  color:var(--encre);
  transition:background-color .2s var(--ease),color .2s var(--ease)}
.act-tout a:hover{background:var(--encre);color:#fff}