/* =====================================================================
   site.css - AnalyseTech, site public
   Toutes les couleurs, polices et espacements viennent de theme.css.
   Aucun style en ligne dans les gabarits : tout passe par ce fichier.

   Sommaire
   1. Base                   8. Journées (liste)
   2. Boutons et liens       9. Page de journée et sommaire
   3. En-tête                10. Analyses et verrou
   4. Pied de page           11. Formulaires et alertes
   5. Pages intérieures      12. Compte, plans, prose
   6. Accueil : héros        13. Bannière Loi 25
   7. Accueil : sections     14. Adaptatif et mouvement réduit
   ===================================================================== */

/* ------------------------------ 1. Base ------------------------------ */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--e-6); }

body {
    margin: 0;
    background: var(--papier);
    color: var(--encre);
    font-family: var(--police-ui);
    font-size: var(--t-base);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

img, svg { max-width: 100%; height: auto; }

a { color: var(--hausse); text-underline-offset: 0.18em; }
a:hover { color: var(--encre); }

:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--rayon-sm); }

h1, h2, h3 { font-family: var(--police-titre); line-height: 1.15; margin: 0; }
p { margin: 0 0 var(--e-4); }

.conteneur {
    width: 100%;
    max-width: var(--largeur);
    margin: 0 auto;
    padding: 0 var(--e-5);
}

.principal { flex: 1 0 auto; }

.evitement {
    position: absolute;
    left: var(--e-4);
    top: -100px;
    background: var(--encre);
    color: #FFFFFF;
    padding: var(--e-2) var(--e-4);
    z-index: 100;
}
.evitement:focus { top: var(--e-4); }

.etiquette {
    display: inline-block;
    font-size: var(--t-xs);
    font-weight: 600;
    line-height: 1.3;
    padding: 0.2em 0.6em;
    border-radius: var(--rayon-sm);
    background: var(--papier-grille);
    color: var(--encre-douce);
}
.etiquette--hausse { background: var(--lime-pale); color: var(--hausse); }
.etiquette--libre { background: var(--jaune-pale); color: var(--encre); }

/* Cadenas des contenus réservés */
.est-verrouille::after {
    content: "";
    display: inline-block;
    width: 0.8em;
    height: 0.8em;
    margin-left: 0.4em;
    vertical-align: -0.05em;
    background: currentColor;
    opacity: 0.55;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 7V5a4 4 0 0 1 8 0v2h1v8H3V7h1zm2 0h4V5a2 2 0 0 0-4 0v2z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 7V5a4 4 0 0 1 8 0v2h1v8H3V7h1zm2 0h4V5a2 2 0 0 0-4 0v2z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ------------------------- 2. Boutons et liens ----------------------- */

.bouton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--e-2);
    font-family: var(--police-ui);
    font-size: var(--t-sm);
    font-weight: 650;
    line-height: 1.2;
    padding: 0.7em 1.2em;
    border: 2px solid var(--encre);
    border-radius: var(--rayon);
    background: var(--lime);
    color: var(--encre);
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
}
.bouton:hover { background: var(--encre); color: #FFFFFF; }
.bouton:disabled { opacity: 0.6; cursor: wait; }

.bouton--petit { font-size: var(--t-xs); padding: 0.5em 0.9em; }
.bouton--grand { font-size: var(--t-base); padding: 0.85em 1.5em; }
.bouton--plein { width: 100%; }
.bouton--contour { background: transparent; }
.bouton--contour:hover { background: var(--encre); color: #FFFFFF; }
.bouton--clair { background: var(--jaune); border-color: var(--jaune); }
.bouton--clair:hover { background: #FFFFFF; border-color: #FFFFFF; color: var(--encre); }

.lien-bouton {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 0.18em;
    cursor: pointer;
}

.lien-discret { font-size: var(--t-sm); color: var(--gris); }

/* ------------------------------ 3. En-tête -------------------------- */

.entete {
    background: var(--surface);
    border-bottom: 1px solid var(--bordure);
    position: relative;
    z-index: 20;
}

.entete__rangee {
    display: flex;
    align-items: center;
    gap: var(--e-5);
    min-height: 72px;
}

.marque {
    display: flex;
    align-items: center;
    gap: var(--e-3);
    text-decoration: none;
    color: var(--encre);
    margin-right: auto;
}
.marque__logo { width: 44px; height: 44px; }
.marque__nom {
    font-family: var(--police-titre);
    font-size: var(--t-md);
    font-weight: 800;
    font-stretch: 88%;
    letter-spacing: -0.01em;
}
.marque__nom-accent { color: var(--hausse); }

.navigation { display: flex; align-items: center; gap: var(--e-6); }

.navigation__liens {
    display: flex;
    gap: var(--e-5);
    list-style: none;
    margin: 0;
    padding: 0;
}

.navigation a { color: var(--encre-douce); text-decoration: none; font-size: var(--t-sm); font-weight: 550; }
.navigation__liens a { padding: var(--e-2) 0; border-bottom: 2px solid transparent; }
.navigation__liens a:hover { color: var(--encre); border-bottom-color: var(--papier-grille); }
.navigation__liens a[aria-current="page"] { color: var(--encre); border-bottom-color: var(--lime); }

.navigation__compte { display: flex; align-items: center; gap: var(--e-4); }
.navigation__compte a[aria-current="page"] { color: var(--encre); }
.navigation__secondaire { color: var(--gris) !important; }
.navigation .bouton { color: var(--encre); }
.navigation .bouton:hover { color: #FFFFFF; }

.langue {
    display: inline-flex;
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    overflow: hidden;
}
.langue a {
    font-size: var(--t-xs);
    font-weight: 700;
    padding: 0.35em 0.65em;
    color: var(--gris);
}
.langue a:hover { color: var(--encre); background: var(--papier); }
.langue a[aria-current="true"] { background: var(--encre); color: #FFFFFF; }

.burger {
    display: none;
    width: 44px;
    height: 44px;
    border: 0;
    background: none;
    padding: 10px;
    cursor: pointer;
}
.burger span {
    display: block;
    height: 2px;
    background: var(--encre);
    margin: 5px 0;
    transition: transform 0.2s, opacity 0.2s;
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --------------------------- 4. Pied de page ------------------------ */

.pied {
    background: var(--encre);
    color: #C9D1C4;
    margin-top: var(--e-8);
    padding: var(--e-7) 0 var(--e-5);
    font-size: var(--t-sm);
}
.page-accueil .pied { margin-top: 0; }

.pied__grille {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: var(--e-6);
}

.pied__nom {
    font-family: var(--police-titre);
    font-size: var(--t-md);
    font-weight: 800;
    font-stretch: 88%;
    color: #FFFFFF;
    margin-bottom: var(--e-3);
}
.pied .marque__nom-accent { color: var(--lime); }

.pied__avis { max-width: 34rem; line-height: 1.6; }

.pied__liens { display: flex; flex-direction: column; align-items: flex-start; gap: var(--e-2); }
.pied__liens a, .pied__liens .lien-bouton { color: #FFFFFF; text-decoration: none; }
.pied__liens a:hover, .pied__liens .lien-bouton:hover { color: var(--lime); text-decoration: underline; }

.pied__bas {
    margin-top: var(--e-6);
    padding-top: var(--e-4);
    border-top: 1px solid #333B41;
    color: var(--gris-pale);
    font-size: var(--t-xs);
}

/* ------------------------- 5. Pages intérieures --------------------- */

.page { padding-top: var(--e-7); }
.page--etroite { max-width: 44rem; }

.page__tete { margin-bottom: var(--e-6); max-width: var(--largeur-texte); }
.page__titre {
    font-size: var(--t-2xl);
    font-weight: 780;
    font-stretch: 85%;
    letter-spacing: -0.015em;
    margin-bottom: var(--e-3);
}
.page__intro { font-size: var(--t-md); color: var(--gris); margin: 0; }
.page__note { color: var(--gris); font-size: var(--t-sm); margin-top: var(--e-4); }

.fil { font-size: var(--t-sm); color: var(--gris); margin-bottom: var(--e-4); }
.fil a { color: var(--gris); }
.fil__sep { margin: 0 var(--e-2); color: var(--gris-pale); }

.avis-fenetre {
    border-left: 4px solid var(--jaune);
    background: var(--surface);
    padding: var(--e-3) var(--e-4);
    max-width: var(--largeur-texte);
    font-size: var(--t-sm);
    margin-bottom: var(--e-6);
}

.vide {
    background: var(--surface);
    border: 1px dashed var(--bordure);
    border-radius: var(--rayon);
    padding: var(--e-7) var(--e-6);
    text-align: center;
}
.vide__titre { font-family: var(--police-titre); font-size: var(--t-lg); font-weight: 700; }

.section-titre {
    font-size: var(--t-xl);
    font-weight: 780;
    font-stretch: 85%;
    letter-spacing: -0.01em;
    margin-bottom: var(--e-3);
}
.section-intro { color: var(--gris); font-size: var(--t-md); max-width: 38rem; }

/* ------------------------- 6. Accueil : héros ----------------------- */

.heros {
    background-color: var(--papier);
    background-image:
        linear-gradient(var(--papier-grille) 1px, transparent 1px),
        linear-gradient(90deg, var(--papier-grille) 1px, transparent 1px);
    background-size: 28px 28px;
    background-position: -1px -1px;
    border-bottom: 1px solid var(--bordure);
    padding-top: var(--e-8);
    overflow: hidden;
}

.heros__texte { max-width: var(--largeur); }

.heros__titre {
    font-size: var(--t-3xl);
    font-weight: 800;
    font-stretch: 72%;
    line-height: 0.98;
    letter-spacing: -0.02em;
    max-width: 13ch;
    margin-bottom: var(--e-5);
}

.heros__intro {
    font-family: var(--police-texte);
    font-size: var(--t-md);
    line-height: 1.55;
    color: var(--encre-douce);
    max-width: 36rem;
    margin-bottom: var(--e-6);
}

.heros__actions { display: flex; flex-wrap: wrap; gap: var(--e-3); }
.heros__compte { margin-top: var(--e-4); color: var(--gris); font-size: var(--t-sm); }
.heros__compte a { color: var(--hausse); font-weight: 650; }

/* Raccourci « Connexion » de l'en-tête : cellulaire seulement */
.entete__connexion { display: none; }

.heros__graphe {
    max-width: 1320px;
    margin: var(--e-6) auto 0;
    padding: 0 var(--e-4);
}

.graphe { display: block; width: 100%; height: auto; }

/* Bougies : corps plein vert lime en hausse, rouge en baisse */
.bougie line { stroke: var(--encre-douce); stroke-width: 1.2; }
.bougie--hausse rect { fill: var(--lime); stroke: var(--encre); stroke-width: 1; }
.bougie--baisse rect { fill: var(--baisse); stroke: var(--baisse); stroke-width: 1; }

.volume { fill: #CFD6CA; }
.volume--hausse { fill: #BCDC96; }

.graphe__mm { fill: none; stroke: var(--encre); stroke-width: 2.2; stroke-linejoin: round; }

.note-trait { fill: none; stroke: var(--encre); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.note-trait--niveau { stroke-width: 1.6; stroke-dasharray: 7 6; stroke: var(--encre-douce); }

.note-texte {
    font-family: var(--police-main);
    font-size: 30px;
    font-weight: 600;
    fill: var(--encre);
}

.note-fleche { fill: none; stroke: var(--jaune); stroke-width: 12; stroke-linecap: round; }
.note-pointe { fill: var(--jaune); }

/* Un seul moment animé : le graphique se trace de gauche à droite,
   puis les annotations de l'analyste apparaissent. */
.graphe__bougies, .graphe__volumes, .graphe__mm {
    animation: tracer 1.8s cubic-bezier(0.3, 0.1, 0.2, 1) both;
}
.graphe__notes { animation: apparaitre 0.6s ease-out 1.7s both; }
.graphe__notes .note-trait--main, .graphe__notes .note-fleche {
    stroke-dasharray: 600;
    stroke-dashoffset: 600;
    animation: dessiner 0.9s ease-out 1.9s forwards;
}

@keyframes tracer { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes apparaitre { from { opacity: 0; } to { opacity: 1; } }
@keyframes dessiner { to { stroke-dashoffset: 0; } }

/* ------------------------ 7. Accueil : sections --------------------- */

.marches { background: var(--encre); color: #FFFFFF; }

.marches__rangee {
    display: flex;
    align-items: baseline;
    gap: var(--e-5);
    padding-top: var(--e-4);
    padding-bottom: var(--e-4);
}

.marches__titre {
    font-size: var(--t-sm);
    font-weight: 700;
    color: var(--lime);
    white-space: nowrap;
}

.marches__liste {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e-2) var(--e-5);
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: var(--t-sm);
    font-weight: 550;
    font-stretch: 90%;
}

.methode { padding: var(--e-8) 0; }
.methode__tete { margin-bottom: var(--e-6); }

.methode__grille {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: var(--e-5);
}

.outil {
    margin: 0;
    background: var(--surface);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    padding: var(--e-5);
    display: flex;
    flex-direction: column;
    gap: var(--e-4);
}
.outil p { color: var(--gris); margin: 0; }

.outil--principal { grid-row: span 2; }
.outil--principal .outil__graphe { flex: 1; display: flex; align-items: center; justify-content: center; }

.outil__nom { font-size: var(--t-md); font-weight: 750; font-stretch: 88%; margin-bottom: var(--e-2); }

.mini-graphe { display: block; width: 100%; height: auto; }
.mini-graphe--pf { max-width: 300px; margin: 0 auto; }

.pf-grille { stroke: var(--papier-grille); stroke-width: 1; }
.pf-x { stroke: var(--hausse-trait); stroke-width: 2.6; stroke-linecap: round; }
.pf-o { fill: none; stroke: var(--baisse); stroke-width: 2.2; }
.pf-niveau { stroke: var(--jaune); stroke-width: 3; }

.ichi-nuage { stroke: none; }
.ichi-nuage--hausse { fill: var(--lime-pale); }
.ichi-nuage--baisse { fill: var(--baisse-pale); }
.ichi-ligne { fill: none; stroke-width: 1.2; }
.ichi-ligne--a { stroke: var(--hausse-trait); }
.ichi-ligne--b { stroke: var(--baisse); }
.ichi-prix { fill: none; stroke: var(--encre); stroke-width: 2; stroke-linejoin: round; }

.mm-courte { fill: none; stroke: var(--jaune); stroke-width: 2.5; }
.mm-longue { fill: none; stroke: var(--encre); stroke-width: 2; }

.journee {
    background: var(--surface);
    border-top: 1px solid var(--bordure);
    border-bottom: 1px solid var(--bordure);
    padding: var(--e-8) 0;
}

.journee__grille {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
    gap: var(--e-7);
    align-items: center;
}

.etapes {
    list-style: none;
    counter-reset: etape;
    margin: var(--e-5) 0 0;
    padding: 0;
    display: grid;
    gap: var(--e-5);
}
.etapes li {
    counter-increment: etape;
    display: grid;
    grid-template-columns: 2.5rem 1fr;
    column-gap: var(--e-3);
}
.etapes li::before {
    content: counter(etape);
    grid-row: span 2;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    background: var(--lime);
    color: var(--encre);
    font-weight: 800;
    display: grid;
    place-items: center;
}
.etapes__titre { font-size: var(--t-md); font-weight: 720; margin: 0.2em 0 var(--e-1); }
.etapes p { color: var(--gris); margin: 0; }

.apercu {
    background: var(--papier);
    border: 1px solid var(--bordure);
    border-top: 6px solid var(--encre);
    border-radius: var(--rayon);
    padding: var(--e-5);
    transform: rotate(-1.2deg);
    box-shadow: var(--ombre-flottante);
}
.apercu__etiquette { font-family: var(--police-main); font-size: var(--t-md); color: var(--gris); margin: 0; }
.apercu__date { font-family: var(--police-titre); font-size: var(--t-lg); font-weight: 780; font-stretch: 85%; margin: 0; }
.apercu__compte { color: var(--gris); font-size: var(--t-sm); }
.apercu__categorie {
    font-weight: 700;
    font-size: var(--t-sm);
    margin: var(--e-4) 0 var(--e-2);
    padding-bottom: var(--e-1);
    border-bottom: 2px solid var(--lime);
}
.apercu ul { list-style: none; margin: 0; padding: 0; }
.apercu li { display: flex; justify-content: space-between; font-size: var(--t-sm); padding: 0.2em 0; }

.appel { background: var(--encre); color: #FFFFFF; padding: var(--e-7) 0; }
.appel__rangee { display: flex; align-items: center; justify-content: space-between; gap: var(--e-6); }
.appel__titre { font-size: var(--t-xl); font-weight: 780; font-stretch: 85%; margin-bottom: var(--e-2); }
.appel__texte { color: #C9D1C4; margin: 0; max-width: 38rem; }

/* ------------------------- 8. Journées (liste) ---------------------- */

.mois { margin-bottom: var(--e-7); }

.mois__titre {
    font-size: var(--t-md);
    font-weight: 720;
    font-stretch: 90%;
    color: var(--gris);
    padding-bottom: var(--e-2);
    border-bottom: 1px solid var(--bordure);
    margin-bottom: var(--e-3);
}
.mois__titre::first-letter { text-transform: uppercase; }

.jours { list-style: none; margin: 0; padding: 0; }

.jour__lien {
    display: grid;
    grid-template-columns: 4.5rem minmax(0, 1fr) minmax(0, 14rem);
    gap: var(--e-5);
    align-items: start;
    padding: var(--e-4) var(--e-3);
    border-bottom: 1px solid var(--bordure);
    text-decoration: none;
    color: var(--encre);
    border-radius: var(--rayon-sm);
}
.jour__lien:hover { background: var(--surface); }
.jour__lien:hover .jour__titre { text-decoration: underline; }

.jour__date {
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 2px solid var(--encre);
    border-radius: var(--rayon);
    padding: var(--e-1) 0 var(--e-2);
    background: var(--surface);
}
.jour__semaine { font-size: var(--t-xs); font-weight: 700; color: var(--gris); }
.jour__numero {
    font-family: var(--police-titre);
    font-size: var(--t-xl);
    font-weight: 800;
    font-stretch: 80%;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.jour__corps { display: flex; flex-direction: column; gap: var(--e-1); }
.jour__titre { font-weight: 700; font-size: var(--t-md); }
.jour__titre::first-letter { text-transform: uppercase; }
.jour__compte { font-size: var(--t-sm); color: var(--hausse); font-weight: 650; }
.jour__titres { display: flex; flex-wrap: wrap; gap: var(--e-1) var(--e-4); font-size: var(--t-sm); color: var(--encre-douce); }
.jour__plus { color: var(--gris); }

.jour__categories { display: flex; flex-wrap: wrap; gap: var(--e-1); justify-content: flex-end; }

.pagination {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--e-3) var(--e-4);
    margin-top: var(--e-6);
    padding-top: var(--e-5);
    border-top: 1px solid var(--bordure);
}
.pagination__etat { font-size: var(--t-sm); color: var(--gris); }

.pagination__bouts { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.pagination__bouts--fin { justify-content: flex-end; }

.pagination__lien {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 0.9em;
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    background: var(--surface);
    color: var(--encre);
    font-size: var(--t-sm);
    font-weight: 600;
    text-decoration: none;
}
.pagination__lien:hover { border-color: var(--encre); }
.pagination__lien--bout { color: var(--gris); font-weight: 500; }

.pagination__numeros {
    display: flex;
    align-items: center;
    gap: var(--e-1);
    list-style: none;
    margin: 0;
    padding: 0;
}
.pagination__num {
    display: inline-grid;
    place-items: center;
    min-width: 40px;
    height: 40px;
    padding: 0 0.4em;
    border-radius: var(--rayon);
    color: var(--encre);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-decoration: none;
}
a.pagination__num:hover { background: var(--surface); box-shadow: inset 0 0 0 1px var(--bordure); }
.pagination__num.est-courante { background: var(--encre); color: #FFFFFF; }
.pagination__trou { color: var(--gris); padding: 0 0.2em; }

/* Menu « Aller à la page » : remplace les numéros sur cellulaire */
.pagination__aller { display: none; align-items: center; gap: var(--e-2); font-size: var(--t-sm); }
.pagination__aller label { color: var(--gris); }
.pagination__aller select {
    font: inherit;
    font-size: var(--t-base);
    padding: 0.45em 0.6em;
    border: 1px solid #B9C3B3;
    border-radius: var(--rayon);
    background: var(--surface);
    color: var(--encre);
}

/* ------------------- 9. Page de journée et sommaire ----------------- */

.page--jour .page__titre::first-letter { text-transform: uppercase; }

.sommaire {
    background: var(--surface);
    border: 1px solid var(--bordure);
    border-top: 6px solid var(--encre);
    border-radius: var(--rayon);
    padding: var(--e-5) var(--e-5) var(--e-4);
    margin-bottom: var(--e-7);
}

.sommaire__titre { font-size: var(--t-md); font-weight: 780; margin-bottom: var(--e-4); }

.sommaire__groupes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: var(--e-5) var(--e-6);
}

.sommaire__categorie {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: var(--t-sm);
    font-weight: 750;
    padding-bottom: var(--e-1);
    border-bottom: 2px solid var(--lime);
    margin-bottom: var(--e-2);
}
.sommaire__categorie a { color: var(--encre); text-decoration: none; }
.sommaire__categorie a:hover { text-decoration: underline; }
.sommaire__nombre { color: var(--gris); font-weight: 600; font-variant-numeric: tabular-nums; }

.sommaire__liste { list-style: none; margin: 0; padding: 0; }
.sommaire__liste a {
    display: flex;
    justify-content: space-between;
    gap: var(--e-3);
    padding: 0.3em var(--e-2);
    margin: 0 calc(var(--e-2) * -1);
    border-radius: var(--rayon-sm);
    color: var(--encre);
    text-decoration: none;
    font-size: var(--t-sm);
}
.sommaire__liste a:hover { background: var(--papier); }
.sommaire__liste a:hover .sommaire__article { text-decoration: underline; }
.sommaire__liste a.est-actif { background: var(--jaune-pale); }
.sommaire__liste a.est-verrouille::after { display: none; }
.sommaire__liste a.est-verrouille .sommaire__article::after {
    content: "";
    display: inline-block;
    width: 0.75em;
    height: 0.75em;
    margin-left: 0.4em;
    background: var(--gris);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 7V5a4 4 0 0 1 8 0v2h1v8H3V7h1zm2 0h4V5a2 2 0 0 0-4 0v2z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 7V5a4 4 0 0 1 8 0v2h1v8H3V7h1zm2 0h4V5a2 2 0 0 0-4 0v2z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.categorie { margin-bottom: var(--e-7); }
.categorie__titre {
    font-size: var(--t-xl);
    font-weight: 800;
    font-stretch: 82%;
    padding-bottom: var(--e-2);
    border-bottom: 3px solid var(--encre);
    margin-bottom: var(--e-5);
}

.jours-voisins {
    display: flex;
    justify-content: space-between;
    gap: var(--e-4);
    border-top: 1px solid var(--bordure);
    padding-top: var(--e-5);
}
.jours-voisins__lien { display: flex; flex-direction: column; text-decoration: none; color: var(--encre); font-weight: 650; }
.jours-voisins__lien:hover { color: var(--hausse); }
.jours-voisins__lien--suivant { text-align: right; }
.jours-voisins__sens { font-size: var(--t-xs); color: var(--gris); font-weight: 600; }

/* ------------------------ 10. Analyses et verrou -------------------- */

.analyse {
    background: var(--surface);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    padding: var(--e-6);
    margin-bottom: var(--e-5);
}
.analyse--seule { max-width: 52rem; }

.analyse__tete { margin-bottom: var(--e-5); }
.analyse__categorie { font-size: var(--t-sm); font-weight: 700; color: var(--hausse); margin-bottom: var(--e-2); }
.analyse__titre { font-size: var(--t-lg); font-weight: 780; font-stretch: 88%; margin-bottom: var(--e-2); }
.analyse__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-4); font-size: var(--t-sm); color: var(--gris); margin: 0; }

.texte-analyse {
    font-family: var(--police-texte);
    font-size: 1.075rem;
    line-height: 1.7;
    max-width: var(--largeur-texte);
    overflow-wrap: break-word;
}
.texte-analyse img { display: block; margin: var(--e-5) 0; border: 1px solid var(--bordure); border-radius: var(--rayon-sm); background: #FFFFFF; }
.texte-analyse table { border-collapse: collapse; max-width: 100%; display: block; overflow-x: auto; }
.texte-analyse td, .texte-analyse th { border: 1px solid var(--bordure); padding: var(--e-1) var(--e-2); }

.verrou {
    border: 2px dashed var(--bordure);
    border-radius: var(--rayon);
    padding: var(--e-5);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--e-3) var(--e-5);
}
.verrou p { margin: 0; flex-basis: 100%; color: var(--gris); }
.verrou .verrou__titre { font-weight: 750; color: var(--encre); }

.retour-sommaire { display: inline-block; margin-top: var(--e-5); font-size: var(--t-sm); color: var(--gris); }

/* Avis sous chaque analyse : opinion (jaune) puis exclusivité (rouge).
   Restent visibles à l'impression. */
.analyse__avis {
    max-width: var(--largeur-texte);
    margin: var(--e-6) 0 0;
    display: flex;
    flex-direction: column;
    gap: var(--e-2);
}
.avis {
    margin: 0;
    padding: var(--e-3) var(--e-4);
    border-left: 4px solid;
    border-radius: 0 var(--rayon-sm) var(--rayon-sm) 0;
    font-size: var(--t-sm);
    line-height: 1.5;
}
.avis strong { font-weight: 700; }
.avis--opinion {
    background: var(--jaune-pale);
    border-left-color: var(--jaune);
    color: #5C4A00;
}
.avis--opinion strong { color: #3D3100; }
.avis--exclusif {
    background: var(--baisse-pale);
    border-left-color: var(--baisse);
    color: #7A211B;
}
.avis--exclusif strong { color: var(--baisse); }
@media print {
    .avis { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ----------------------- 11. Formulaires et alertes ----------------- */

.formulaire { display: grid; gap: var(--e-4); }

.champ { display: flex; flex-direction: column; gap: var(--e-1); }
.champ label { font-weight: 650; font-size: var(--t-sm); }

.champ input[type="text"],
.champ input[type="email"],
.champ input[type="password"],
.champ select,
.champ textarea {
    font: inherit;
    font-size: var(--t-base);
    color: var(--encre);
    background: var(--surface);
    border: 1px solid #B9C3B3;
    border-radius: var(--rayon);
    padding: 0.65em 0.8em;
    width: 100%;
}
.champ textarea { resize: vertical; min-height: 9rem; }
.champ input:focus, .champ select:focus, .champ textarea:focus { outline: none; border-color: var(--encre); box-shadow: var(--focus); }
.champ [aria-invalid="true"] { border-color: var(--baisse); }

.champ__aide { font-size: var(--t-xs); color: var(--gris); margin: 0; }
.champ__lien { align-self: flex-end; font-size: var(--t-sm); margin-top: var(--e-1); padding: var(--e-1) 0; }
.champ__erreur { font-size: var(--t-sm); color: var(--baisse); font-weight: 600; margin: 0; }

.champ--case { display: grid; grid-template-columns: auto 1fr; column-gap: var(--e-3); align-items: start; }
.champ--case input { width: 1.2rem; height: 1.2rem; margin-top: 0.15em; accent-color: var(--hausse); }
.champ--case label { font-weight: 500; }
.champ--case .champ__erreur { grid-column: 2; }

/* Pot de miel antibot : hors écran, jamais visible pour un humain */
.f-extra {
    position: absolute !important;
    left: -10000px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.alerte {
    border-radius: var(--rayon);
    padding: var(--e-4) var(--e-5);
    margin-bottom: var(--e-5);
    border-left: 5px solid var(--encre);
}
.alerte p:last-child { margin-bottom: 0; }
.alerte__titre { font-weight: 750; }
.alerte--succes { background: var(--succes-fond); border-left-color: var(--hausse-trait); }
.alerte--erreur { background: var(--erreur-fond); border-left-color: var(--baisse); }
.alerte--attente { background: var(--attente-fond); border-left-color: var(--jaune); }

/* ---------------------- 12. Compte, plans, prose -------------------- */

.bloc {
    background: var(--surface);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    padding: var(--e-5);
    margin-bottom: var(--e-5);
}
.bloc__titre { font-size: var(--t-md); font-weight: 750; margin-bottom: var(--e-4); }

.fiche { margin: 0 0 var(--e-4); display: grid; gap: var(--e-3); }
.fiche div { display: grid; grid-template-columns: 12rem 1fr; gap: var(--e-3); }
.fiche dt { color: var(--gris); font-size: var(--t-sm); }
.fiche dd { margin: 0; }

.tableau-defile { overflow-x: auto; }
.tableau { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.tableau th { text-align: left; font-weight: 700; padding: var(--e-2) var(--e-3) var(--e-2) 0; border-bottom: 2px solid var(--encre); }
.tableau td { padding: var(--e-2) var(--e-3) var(--e-2) 0; border-bottom: 1px solid var(--bordure); }

.plans {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: var(--e-5);
}
.plan {
    background: var(--surface);
    border: 1px solid var(--bordure);
    border-top: 6px solid var(--lime);
    border-radius: var(--rayon);
    padding: var(--e-5);
    display: flex;
    flex-direction: column;
}
.plan__titre { font-size: var(--t-md); font-weight: 750; margin-bottom: var(--e-4); }
.plan__prix { display: flex; align-items: baseline; gap: var(--e-2); margin: 0; }
.plan__montant { font-family: var(--police-titre); font-size: var(--t-xl); font-weight: 800; font-stretch: 85%; font-variant-numeric: tabular-nums; }
.plan__taxes { color: var(--gris); font-size: var(--t-sm); }
.plan__total { color: var(--gris); font-size: var(--t-xs); margin-bottom: var(--e-4); }
.plan__desc { color: var(--encre-douce); flex: 1; }

.prose { font-family: var(--police-texte); font-size: 1.075rem; line-height: 1.7; }
.prose h2 { font-size: var(--t-md); font-weight: 750; margin: var(--e-6) 0 var(--e-2); }

/* -------------------------- 13. Bannière Loi 25 --------------------- */
/* Classes neutres (loi25) pour ne pas être masquées par Brave */

.loi25[hidden], .loi25 [hidden] { display: none !important; }

.loi25__banniere {
    position: fixed;
    left: var(--e-4);
    right: var(--e-4);
    bottom: var(--e-4);
    max-width: 44rem;
    margin: 0 auto;
    background: var(--surface);
    border: 2px solid var(--encre);
    border-radius: var(--rayon);
    box-shadow: var(--ombre-flottante);
    padding: var(--e-5);
    z-index: 90;
    font-size: var(--t-sm);
}
.loi25__titre { font-weight: 750; font-size: var(--t-base); margin-bottom: var(--e-2); }
.loi25__texte p:last-child { margin-bottom: var(--e-4); }
.loi25__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3); }
.loi25__actions .lien-bouton { margin-left: auto; font-size: var(--t-sm); }

.loi25__fond {
    position: fixed;
    inset: 0;
    background: rgba(27, 32, 36, 0.55);
    z-index: 95;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--e-4);
}

.loi25__boite {
    background: var(--surface);
    border-radius: var(--rayon);
    max-width: 34rem;
    width: 100%;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    padding: var(--e-6);
    font-size: var(--t-sm);
}
.loi25__boite-titre { font-size: var(--t-lg); font-weight: 780; margin-bottom: var(--e-3); }
.loi25__boite-intro { color: var(--gris); }

.loi25__categorie {
    display: block;
    border-top: 1px solid var(--bordure);
    padding: var(--e-4) 0;
    cursor: pointer;
}
.loi25__categorie p, .loi25__categorie-desc { display: block; color: var(--gris); margin: var(--e-1) 0 0; }
.loi25__categorie-tete { display: flex; justify-content: space-between; align-items: center; gap: var(--e-4); }
.loi25__categorie-nom { font-weight: 700; color: var(--encre); }
.loi25__toujours { font-size: var(--t-xs); font-weight: 700; color: var(--hausse); }

.loi25__boite-pied {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e-3);
    border-top: 1px solid var(--bordure);
    padding-top: var(--e-5);
}

/* Interrupteur des catégories */
.interrupteur {
    appearance: none;
    -webkit-appearance: none;
    flex-shrink: 0;
    width: 2.6rem;
    height: 1.5rem;
    border-radius: 999px;
    background: #C4CCC0;
    position: relative;
    cursor: pointer;
    transition: background-color 0.15s;
    margin: 0;
}
.interrupteur::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: calc(1.5rem - 6px);
    height: calc(1.5rem - 6px);
    border-radius: 50%;
    background: #FFFFFF;
    transition: transform 0.15s;
}
.interrupteur:checked { background: var(--hausse); }
.interrupteur:checked::after { transform: translateX(1.1rem); }
.interrupteur:focus-visible { box-shadow: var(--focus); }

/* --------------------- 14. Adaptatif et mouvement réduit ------------ */

@media (max-width: 960px) {
    .burger { display: block; }
    .entete__connexion { display: inline-flex; margin-left: auto; }

    .navigation {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--surface);
        border-bottom: 1px solid var(--bordure);
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: var(--e-2) var(--e-5) var(--e-5);
        box-shadow: 0 10px 20px rgba(27, 32, 36, 0.08);
    }
    .navigation.est-ouverte { display: flex; }
    .navigation__liens { flex-direction: column; gap: 0; }
    .navigation__liens a { display: block; padding: var(--e-3) 0; border-bottom: 1px solid var(--bordure); font-size: var(--t-base); }
    .navigation__liens a[aria-current="page"] { border-bottom-color: var(--bordure); box-shadow: inset 4px 0 0 var(--lime); padding-left: var(--e-3); }
    .navigation__compte { flex-wrap: wrap; padding-top: var(--e-4); }

    .methode__grille { grid-template-columns: 1fr; }
    .outil--principal { grid-row: auto; }
    .journee__grille { grid-template-columns: 1fr; }
    .apercu { transform: none; }
}

@media (max-width: 720px) {
    .conteneur { padding-left: var(--e-4); padding-right: var(--e-4); }
    .heros { padding-top: var(--e-7); }
    /* Sur cellulaire, on cadre la partie droite du graphique : la base et la cassure */
    .heros__graphe { padding: 0; margin-top: var(--e-5); overflow: hidden; }
    .heros .graphe { width: 185%; max-width: none; margin-left: -78%; }
    .note-mm { display: none; }

    .marches__rangee { flex-direction: column; gap: var(--e-2); }

    .jour__lien { grid-template-columns: 3.8rem minmax(0, 1fr); }
    .jour__categories { grid-column: 2; justify-content: flex-start; }

    .analyse { padding: var(--e-5) var(--e-4); }
    .appel__rangee { flex-direction: column; align-items: flex-start; }
    .pied__grille { grid-template-columns: 1fr; }
    .fiche div { grid-template-columns: 1fr; gap: 0; }

    .loi25__actions .bouton { flex: 1 1 40%; }
    .loi25__actions .lien-bouton { margin: 0 auto; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
    .graphe__notes .note-trait--main, .graphe__notes .note-fleche { stroke-dashoffset: 0; }
    html { scroll-behavior: auto; }
}

@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}

@media print {
    .entete, .pied, .loi25, .sommaire, .retour-sommaire, .jours-voisins { display: none !important; }
    .analyse { border: 0; padding: 0; break-inside: avoid-page; }
}

/* =====================================================================
   15. Recherche des analyses, filtre de journée, visionneuse
   ===================================================================== */

.sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

mark {
    background: var(--jaune-pale);
    color: inherit;
    border-radius: 2px;
    padding: 0 0.08em;
    box-shadow: inset 0 -2px 0 var(--jaune);
}

/* ------------------------- Recherche (liste) ------------------------ */

.recherche { margin-bottom: var(--e-6); max-width: 40rem; }
.recherche__etiquette { display: block; font-weight: 700; font-size: var(--t-sm); margin-bottom: var(--e-2); }

.recherche__champ {
    display: flex;
    align-items: stretch;
    gap: var(--e-2);
    position: relative;
}

.recherche__champ input[type="search"] {
    flex: 1;
    min-width: 0;
    font: inherit;
    font-size: var(--t-base);          /* 16 px minimum : iOS ne zoome pas au focus */
    color: var(--encre);
    background: var(--surface);
    border: 2px solid var(--encre);
    border-radius: var(--rayon);
    padding: 0.7em 2.6em 0.7em 2.6em;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%235C656C' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='8.5' cy='8.5' r='5.5'/%3E%3Cpath d='M13 13l4 4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 0.8em center;
    background-size: 1.15em;
    -webkit-appearance: none;
    appearance: none;
}
.recherche__champ input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
.recherche__champ input[type="search"]:focus { outline: none; box-shadow: var(--focus); }

.recherche__effacer {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0.45rem;
    width: 2rem;
    height: 2rem;
    border: 0;
    border-radius: 50%;
    background: var(--papier-grille);
    cursor: pointer;
}
.recherche__effacer[hidden] { display: none; }
.recherche__effacer::before, .recherche__effacer::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 0.85rem;
    height: 2px;
    background: var(--encre);
}
.recherche__effacer::before { transform: translate(-50%, -50%) rotate(45deg); }
.recherche__effacer::after { transform: translate(-50%, -50%) rotate(-45deg); }
.recherche__effacer:hover { background: var(--bordure); }


.recherche__aide { font-size: var(--t-xs); color: var(--gris); margin: var(--e-2) 0 0; }
.recherche__bilan { font-weight: 650; margin-bottom: var(--e-4); }

.resultats-zone { transition: opacity 0.15s; }
.resultats-zone.est-en-chargement { opacity: 0.55; }

/* Journée en mode recherche : liens directs vers chaque analyse trouvée */
.jour--recherche .jour__lien { grid-template-columns: 4.5rem minmax(0, 1fr); }
.jour--recherche .jour__lien:hover { background: transparent; }
.jour--recherche .jour__date { text-decoration: none; color: var(--encre); }
.jour--recherche .jour__titre { color: var(--encre); text-decoration: none; }
.jour--recherche .jour__titre:hover { text-decoration: underline; }

.resultats { list-style: none; margin: var(--e-2) 0 0; padding: 0; display: grid; gap: var(--e-1); }
.resultats__lien {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 var(--e-3);
    padding: var(--e-2) var(--e-3);
    border-radius: var(--rayon-sm);
    border: 1px solid var(--bordure);
    background: var(--surface);
    color: var(--encre);
    text-decoration: none;
}
.resultats__lien:hover { border-color: var(--encre); }
.resultats__lien:hover .resultats__titre { text-decoration: underline; }
.resultats__titre { font-weight: 650; }
.resultats__meta { font-size: var(--t-sm); color: var(--gris); }
.resultats__lien.est-verrouille::after { order: 3; }

/* ------------------------ Filtre de la journée ---------------------- */

.sommaire__tete {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--e-3) var(--e-5);
    margin-bottom: var(--e-4);
}
.sommaire__tete .sommaire__titre { margin-bottom: 0; }

.filtre-jour { flex: 0 1 18rem; }
.filtre-jour__champ {
    width: 100%;
    font: inherit;
    font-size: var(--t-base);
    border: 1px solid #B9C3B3;
    border-radius: var(--rayon);
    padding: 0.5em 0.8em 0.5em 2.3em;
    background: var(--papier) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%235C656C' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='8.5' cy='8.5' r='5.5'/%3E%3Cpath d='M13 13l4 4'/%3E%3C/svg%3E") no-repeat 0.7em center / 1em;
}
.filtre-jour__champ:focus { outline: none; border-color: var(--encre); box-shadow: var(--focus); }
.filtre-jour__vide { color: var(--gris); margin: 0 0 var(--e-3); }

.sommaire__groupe[hidden], .sommaire__liste li[hidden], .categorie[hidden], .analyse[hidden] { display: none; }

/* ------------------------------ Visionneuse ------------------------- */

.texte-analyse img.est-agrandissable { cursor: zoom-in; transition: box-shadow 0.15s; }
.texte-analyse img.est-agrandissable:hover { box-shadow: 0 0 0 3px var(--lime); }
.texte-analyse img.est-agrandissable:focus-visible { outline: none; box-shadow: var(--focus); }

/* Blocage du défilement pendant la visionneuse (compatible iOS) */
html.defilement-bloque { overflow-y: scroll; }
html.defilement-bloque body {
    position: fixed;
    top: var(--defilement-y, 0);
    left: 0;
    right: 0;
    width: 100%;
    overflow: hidden;
}
html.defilement-instantane { scroll-behavior: auto !important; }

.visionneuse[hidden] { display: none; }

.visionneuse {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: #0E1113;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    overscroll-behavior: contain;
    color: #FFFFFF;
    padding-bottom: env(safe-area-inset-bottom);
}

.visionneuse__barre {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--e-3) var(--e-4);
    padding-top: max(var(--e-3), env(safe-area-inset-top));
}
.visionneuse__compte { margin: 0; font-size: var(--t-sm); color: #C9D1C4; font-variant-numeric: tabular-nums; }

.visionneuse__scene {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 0 4.5rem;
    min-height: 0;
    overscroll-behavior: contain;
}

.visionneuse__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    cursor: zoom-out;
}

/* Grande taille : l'image remplit la hauteur et on se déplace dedans */
.visionneuse__legende {
    margin: 0;
    padding: var(--e-3) var(--e-4) var(--e-4);
    text-align: center;
    font-size: var(--t-sm);
    color: #C9D1C4;
}
.visionneuse__legende [hidden] { display: none; }

.visionneuse__bouton {
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
}
.visionneuse__bouton:hover { background: rgba(255, 255, 255, 0.24); }
.visionneuse__bouton:focus-visible { outline: none; box-shadow: var(--focus); }
.visionneuse__bouton[hidden] { display: none; }

.visionneuse__fermer::before, .visionneuse__fermer::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 20px;
    height: 2px;
    background: #FFFFFF;
}
.visionneuse__fermer::before { transform: translate(-50%, -50%) rotate(45deg); }
.visionneuse__fermer::after { transform: translate(-50%, -50%) rotate(-45deg); }

.visionneuse__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
.visionneuse__nav--prec { left: var(--e-3); }
.visionneuse__nav--suiv { right: var(--e-3); }
.visionneuse__nav::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 12px;
    height: 12px;
    border-top: 2px solid #FFFFFF;
    border-right: 2px solid #FFFFFF;
}
.visionneuse__nav--prec::before { transform: translate(-30%, -50%) rotate(-135deg); }
.visionneuse__nav--suiv::before { transform: translate(-70%, -50%) rotate(45deg); }

/* ---------------------------- Cellulaire ---------------------------- */

@media (max-width: 720px) {

    .filtre-jour { flex-basis: 100%; }

    .jour--recherche .jour__lien { grid-template-columns: 3.8rem minmax(0, 1fr); }

    .pagination { grid-template-columns: 1fr; justify-items: center; }
    .pagination__numeros { display: none; }
    .pagination__aller { display: flex; order: -1; }
    .pagination__bouts, .pagination__bouts--fin { justify-content: center; }
    .pagination__bouts:empty { display: none; }

    /* Visionneuse : image pleine largeur, flèches en bas à portée du pouce */
    .visionneuse__scene { padding: 0; }
    .visionneuse__nav {
        top: auto;
        bottom: max(var(--e-4), env(safe-area-inset-bottom));
        transform: none;
    }
    .visionneuse__nav--prec { left: var(--e-4); }
    .visionneuse__nav--suiv { right: var(--e-4); }
    .visionneuse__legende { padding: var(--e-3) 4.5rem calc(var(--e-4) + 48px); }
}


/* =====================================================================
   16. Caviardage des titres réservés (membres sans abonnement)
   Le vrai titre n'est pas dans la page : seule cette barre est envoyée.
   ===================================================================== */

.caviarde {
    display: inline-block;
    vertical-align: -0.12em;
    height: 0.95em;
    border-radius: 2px;
    background:
        repeating-linear-gradient(100deg, transparent 0 7px, rgba(255, 255, 255, 0.06) 7px 9px),
        var(--encre);
    user-select: none;
}
.caviarde--1 { width: 4.5em; }
.caviarde--2 { width: 6em; }
.caviarde--3 { width: 7.5em; }
.caviarde--4 { width: 9em; }
.caviarde--5 { width: 10.5em; }

/* Dans les grands titres, la barre suit la hauteur du texte */
.analyse__titre .caviarde, .page__titre .caviarde, .categorie__titre .caviarde { height: 0.8em; vertical-align: 0; }
.sommaire__categorie .caviarde { height: 0.85em; }

@media print {
    .caviarde { background: #000000; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}


/* =====================================================================
   17. Menu « Mon compte » et création de compte
   ===================================================================== */

.navigation__connexion { font-weight: 600; }

.menu-compte { position: relative; }

.menu-compte__bouton {
    display: inline-flex;
    align-items: center;
    gap: 0.45em;
    font: inherit;
    font-size: var(--t-sm);
    font-weight: 650;
    color: var(--encre);
    background: var(--surface);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    padding: 0.45em 0.8em;
    cursor: pointer;
}
.menu-compte__bouton::after {
    content: "";
    width: 0.4em;
    height: 0.4em;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-0.15em) rotate(45deg);
    transition: transform 0.15s;
}
.menu-compte__bouton:hover, .menu-compte__bouton[data-actif] { border-color: var(--encre); }
.menu-compte.est-ouvert .menu-compte__bouton::after { transform: translateY(0.1em) rotate(-135deg); }

.menu-compte__liste {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    min-width: 13rem;
    list-style: none;
    margin: 0;
    padding: var(--e-2) 0;
    background: var(--surface);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    box-shadow: var(--ombre-flottante);
    z-index: 40;
}
.menu-compte.est-ouvert .menu-compte__liste,
html:not(.js) .menu-compte:focus-within .menu-compte__liste { display: block; }

.menu-compte__liste a {
    display: block;
    padding: 0.55em 1em;
    color: var(--encre);
    font-size: var(--t-sm);
    text-decoration: none;
}
.menu-compte__liste a:hover { background: var(--papier); }
.menu-compte__liste a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--lime); font-weight: 700; }
.menu-compte__separateur { border-top: 1px solid var(--bordure); margin-top: var(--e-2); padding-top: var(--e-2); }

.encart-inscription {
    margin-top: var(--e-6);
    padding-top: var(--e-5);
    border-top: 1px solid var(--bordure);
    text-align: center;
}
.encart-inscription p { color: var(--gris); margin-bottom: var(--e-3); }

@media (max-width: 960px) {
    /* Dans le menu burger, tout est déplié : pas de sous-menu à ouvrir */
    .navigation__compte { flex-direction: column; align-items: stretch; gap: var(--e-3); }
    .menu-compte__bouton { display: none; }
    .menu-compte__liste {
        display: block;
        position: static;
        box-shadow: none;
        border: 0;
        padding: 0;
        min-width: 0;
    }
    .menu-compte__liste a { padding: var(--e-3) 0; border-bottom: 1px solid var(--bordure); font-size: var(--t-base); }
    .menu-compte__liste a[aria-current="page"] { padding-left: var(--e-3); }
    .menu-compte__separateur { border-top: 0; margin: 0; padding: 0; }
    .navigation__connexion { padding: var(--e-2) 0; }
    .navigation__compte .bouton { align-self: flex-start; }
    .navigation__compte .langue { align-self: flex-start; }
}


/* =====================================================================
   18. Abonnement : récapitulatif avant PayPal
   ===================================================================== */

.plan__recurrent { font-size: var(--t-sm); color: var(--hausse); font-weight: 600; }

.recap__lignes { margin: 0 0 var(--e-4); display: grid; gap: var(--e-2); }
.recap__lignes div { display: flex; justify-content: space-between; gap: var(--e-4); }
.recap__lignes dt { color: var(--gris); }
.recap__lignes dd { margin: 0; font-variant-numeric: tabular-nums; }
.recap__total { border-top: 2px solid var(--encre); padding-top: var(--e-2); font-weight: 750; font-size: var(--t-md); }
.recap__total dt { color: var(--encre); }
.recap__note { color: var(--encre-douce); font-size: var(--t-sm); }
.recap__securite { font-size: var(--t-xs); color: var(--gris); margin: var(--e-3) 0 0; text-align: center; }


/* Mon compte : appareils connectés */
.appareils { list-style: none; margin: 0 0 var(--e-4); padding: 0; }
.appareils li { display: flex; flex-direction: column; padding: var(--e-2) 0; border-bottom: 1px solid var(--bordure); }
.appareils__nom { font-weight: 650; }
.appareils__meta { font-size: var(--t-sm); color: var(--gris); font-variant-numeric: tabular-nums; }

/* =====================================================================
   Partage sur les réseaux sociaux (accueil)
   ===================================================================== */

.partage { padding: var(--e-6) 0; border-top: 1px solid var(--bordure); }
.partage__rangee {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--e-4);
    text-align: center;
}
.partage__texte { margin: 0; color: var(--gris); }
.partage__bouton { display: inline-flex; align-items: center; gap: var(--e-2); }

/* =====================================================================
   Annulation du renouvellement (page compte)
   ===================================================================== */

.lien-bouton {
    border: 0;
    background: none;
    padding: 0;
    font: inherit;
    color: var(--hausse);
    text-decoration: underline;
    cursor: pointer;
}
.annulation {
    margin-top: var(--e-5);
    padding: var(--e-4);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    background: var(--papier);
}
.annulation[hidden] { display: none; }
.annulation__titre { margin: 0 0 var(--e-2); font-size: var(--t-md); }
.annulation__texte { margin: 0 0 var(--e-4); color: var(--gris); font-size: var(--t-sm); }

/* =====================================================================
   Code promotionnel (page de paiement)
   ===================================================================== */

.code-promo { margin: var(--e-4) 0; padding-top: var(--e-4); border-top: 1px solid var(--bordure); }
.code-promo__etiquette { display: block; margin-bottom: var(--e-2); font-size: var(--t-sm); color: var(--gris); }
.code-promo__rangee { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.code-promo__saisie { flex: 1; min-width: 12rem; text-transform: uppercase; font-variant-numeric: tabular-nums; }
.code-promo__erreur { margin: var(--e-2) 0 0; color: var(--baisse); font-size: var(--t-sm); }
.recap__code {
    margin: 0 0 var(--e-3);
    padding: var(--e-3);
    border-radius: var(--rayon);
    background: var(--lime-pale, #EEF5E4);
    color: var(--encre);
    font-weight: 650;
}