/* ------------------------------------------------------------
   Mes jolies idées — le magazine des propriétaires, par Gomaloc
   Signature : le nuancier. Chaque rubrique est une carte de peinture,
   chaque teinte une sous-rubrique.
   ------------------------------------------------------------ */

:root {
    --fond: #FBFBF8;
    --fond-carte: #FFFFFF;
    --encre: #2A2130;          /* prune presque noire */
    --encre-douce: #685D6E;
    --ligne: #E6E2E8;

    --bleu-volet: #3E6FA3;     /* location courte durée */
    --bleu-volet-2: #7FA3C9;
    --bleu-volet-3: #C9DAEC;
    --mimosa: #D9A42B;         /* équiper et décorer */
    --mimosa-2: #EBC66E;
    --mimosa-3: #F6E6BC;
    --tomette: #C8664B;        /* carnet */
    --tomette-2: #E09A84;
    --tomette-3: #F3D3C8;
    --vert-gomaloc: #1F5C4A;   /* le fil vers Gomaloc, rien d'autre */

    --police-titre: 'Young Serif', Georgia, serif;
    --police-texte: 'Albert Sans', system-ui, sans-serif;
    --police-code: 'IBM Plex Mono', ui-monospace, monospace;

    --largeur: 72rem;
    --rayon: 6px;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--fond);
    color: var(--encre);
    font-family: var(--police-texte);
    font-size: 1.0625rem;
    line-height: 1.6;
}

img, svg { display: block; max-width: 100%; }

a { color: inherit; }

:focus-visible {
    outline: 3px solid var(--bleu-volet);
    outline-offset: 3px;
    border-radius: 2px;
}

.conteneur {
    width: min(100% - 2rem, var(--largeur));
    margin-inline: auto;
}

.lien-evitement {
    position: absolute;
    left: -999px;
}
.lien-evitement:focus {
    left: 1rem;
    top: 1rem;
    background: var(--encre);
    color: #fff;
    padding: .5rem 1rem;
    z-index: 10;
}

/* ---------- En-tête ---------- */

.entete {
    border-bottom: 1px solid var(--ligne);
    background: var(--fond);
}

.entete .conteneur {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding-block: 1rem;
    flex-wrap: wrap;
}

.marque {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    line-height: 1.1;
}

.marque-nom {
    font-family: var(--police-titre);
    font-size: 1.5rem;
}

.marque-par {
    font-family: var(--police-code);
    font-size: .72rem;
    letter-spacing: .04em;
    color: var(--vert-gomaloc);
}

.navigation ul {
    display: flex;
    gap: 1.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
}

.navigation a {
    text-decoration: none;
    font-weight: 500;
    font-size: .95rem;
}

.navigation a:hover { text-decoration: underline; text-underline-offset: 4px; }

.bouton {
    display: inline-block;
    padding: .7rem 1.2rem;
    border-radius: 999px;
    background: var(--encre);
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: .95rem;
    transition: transform .15s ease;
}

.bouton:hover { transform: translateY(-1px); }

.bouton-clair {
    background: transparent;
    color: var(--encre);
    border: 1.5px solid var(--encre);
}

/* ---------- Ouverture ---------- */

.ouverture {
    padding-block: clamp(3rem, 8vw, 6rem) clamp(3rem, 6vw, 5rem);
}

.ouverture .conteneur {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
}

.surtitre {
    font-family: var(--police-code);
    font-size: .8rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--encre-douce);
    margin: 0 0 1rem;
}

h1, h2, h3 {
    font-family: var(--police-titre);
    font-weight: 400;
    line-height: 1.12;
    margin: 0;
}

.ouverture h1 {
    font-size: clamp(2.4rem, 5.6vw, 4.2rem);
    letter-spacing: -.01em;
}

.ouverture h1 em {
    font-style: normal;
    background: linear-gradient(transparent 62%, var(--mimosa-3) 62%);
}

.chapeau {
    font-size: 1.2rem;
    color: var(--encre-douce);
    max-width: 34rem;
    margin: 1.5rem 0 2rem;
}

.actions { display: flex; gap: .75rem; flex-wrap: wrap; }

.signature {
    margin: 2.5rem 0 0;
    padding-top: 1.25rem;
    border-top: 1px solid var(--ligne);
    font-size: .98rem;
    max-width: 30rem;
}

.signature strong { color: var(--vert-gomaloc); font-weight: 600; }

/* ---------- Le nuancier (signature du site) ---------- */

.eventail {
    position: relative;
    height: 26rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.eventail li {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 12.5rem;
    transform-origin: 50% 92%;
    transition: transform .35s cubic-bezier(.2, .7, .2, 1);
}

/* Cartes écartées : le nom de chacune reste lisible en haut, comme sur un vrai nuancier. */
.eventail li:nth-child(1) { transform: translateX(-100%) rotate(-14deg); }
.eventail li:nth-child(2) { transform: translateX(-50%); z-index: 1; }
.eventail li:nth-child(3) { transform: translateX(0%) rotate(14deg); z-index: 2; }

.eventail li:nth-child(1):hover,
.eventail li:nth-child(1):focus-within { transform: translateX(-100%) rotate(-17deg) translateY(-14px); }
.eventail li:nth-child(2):hover,
.eventail li:nth-child(2):focus-within { transform: translateX(-50%) translateY(-14px); }
.eventail li:nth-child(3):hover,
.eventail li:nth-child(3):focus-within { transform: translateX(0%) rotate(17deg) translateY(-14px); }

.eventail .nuance {
    display: flex;
    flex-direction: column-reverse;
}

/* Le nom tient dans la partie de la carte que la suivante ne recouvre pas. */
.eventail .nuance-nom { max-width: 6.5rem; }

.nuance {
    display: block;
    text-decoration: none;
    background: var(--fond-carte);
    border-radius: var(--rayon);
    box-shadow: 0 1px 2px rgba(42, 33, 48, .08), 0 12px 28px rgba(42, 33, 48, .12);
    overflow: hidden;
}

.nuance-teintes { display: grid; }
.nuance-teintes span { height: 4.6rem; }

.nuance-legende {
    padding: .8rem .9rem 1rem;
    display: grid;
    gap: .15rem;
}

.nuance-ref {
    font-family: var(--police-code);
    font-size: .7rem;
    color: var(--encre-douce);
}

.nuance-nom {
    font-family: var(--police-titre);
    font-size: 1.15rem;
    line-height: 1.2;
}

.t-volet span:nth-child(1) { background: var(--bleu-volet); }
.t-volet span:nth-child(2) { background: var(--bleu-volet-2); }
.t-volet span:nth-child(3) { background: var(--bleu-volet-3); }
.t-mimosa span:nth-child(1) { background: var(--mimosa); }
.t-mimosa span:nth-child(2) { background: var(--mimosa-2); }
.t-mimosa span:nth-child(3) { background: var(--mimosa-3); }
.t-tomette span:nth-child(1) { background: var(--tomette); }
.t-tomette span:nth-child(2) { background: var(--tomette-2); }
.t-tomette span:nth-child(3) { background: var(--tomette-3); }

/* ---------- Sections ---------- */

.section { padding-block: clamp(3rem, 7vw, 5rem); }
.section-bordee { border-top: 1px solid var(--ligne); }

.section-tete {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 1rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.section-tete h2 { font-size: clamp(1.8rem, 3.5vw, 2.5rem); }
.section-tete p { margin: .5rem 0 0; color: var(--encre-douce); max-width: 36rem; }

/* À lire d'abord */

.essentiels {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}

.essentiel {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    padding: 1.5rem;
    background: var(--fond-carte);
    border: 1px solid var(--ligne);
    border-top: 6px solid var(--bleu-volet);
    border-radius: var(--rayon);
    text-decoration: none;
    transition: border-color .2s ease;
}

.essentiel:hover { border-color: var(--bleu-volet); }
.essentiel h3 { font-size: 1.45rem; }
.essentiel p { margin: 0; color: var(--encre-douce); font-size: .98rem; }
.essentiel .nuance-ref { margin-top: auto; }

/* Les rubriques en bandes de nuancier */

.rubriques { display: grid; gap: 1.25rem; }

.rubrique {
    display: grid;
    grid-template-columns: 15rem 1fr;
    background: var(--fond-carte);
    border: 1px solid var(--ligne);
    border-radius: var(--rayon);
    overflow: hidden;
}

.rubrique-titre {
    padding: 1.5rem;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1.5rem;
}

.rubrique-titre h3 { font-size: 1.6rem; }
.rubrique-titre h3 a { text-decoration: none; }
.rubrique-titre h3 a:hover { text-decoration: underline; text-underline-offset: 4px; }
.rubrique-titre p { margin: 0; font-size: .92rem; opacity: .9; }

.r-volet .rubrique-titre { background: var(--bleu-volet); }
.r-mimosa .rubrique-titre { background: var(--mimosa); color: var(--encre); }
.r-tomette .rubrique-titre { background: var(--tomette); }

/* Trois teintes par ligne. Filets à gauche et au-dessus de chaque case ; la marge négative
   cache celui de la première ligne, déjà tracé par le cadre de la rubrique. */
.rubrique-teintes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    list-style: none;
    margin: -1px 0 0;
    padding: 0;
}

.rubrique-teintes li {
    border-left: 1px solid var(--ligne);
    border-top: 1px solid var(--ligne);
}

.rubrique-teintes a {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    height: 100%;
    padding: 1.1rem 1.1rem 1.25rem;
    text-decoration: none;
}

.rubrique-teintes a::before {
    content: "";
    display: block;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 3px;
    background: var(--teinte);
    margin-bottom: .4rem;
}

.rubrique-teintes a:hover { background: var(--fond); }
.rubrique-teintes strong { font-weight: 600; font-size: 1rem; }
.rubrique-teintes span { font-size: .88rem; color: var(--encre-douce); }

/* Notre histoire */

.histoire {
    background: var(--encre);
    color: #F4F0F5;
}

.histoire .conteneur {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
}

.histoire h2 { font-size: clamp(2rem, 4vw, 3rem); }
.histoire p { color: #CFC6D3; margin: 0 0 1rem; }
.histoire .surtitre { color: #A99FAE; }

.frise {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1.25rem;
    border-left: 2px solid #4A3F50;
}

.frise li { padding-left: 1.25rem; position: relative; }

.frise li::before {
    content: "";
    position: absolute;
    left: -7px;
    top: .45rem;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--mimosa);
}

.frise li:last-child::before { background: #7FC0A9; }
.frise time { font-family: var(--police-code); font-size: .8rem; color: #A99FAE; }
.frise p { margin: .15rem 0 0; color: #F4F0F5; }

.lien-histoire { color: #fff; font-weight: 600; }

/* Outils et checklist */

.outils-cartes {
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr;
    gap: 1.25rem;
}

.outil-carte {
    padding: 1.5rem;
    border: 1px solid var(--ligne);
    border-radius: var(--rayon);
    background: var(--fond-carte);
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.outil-carte h3 { font-size: 1.35rem; }
.outil-carte p { margin: 0; color: var(--encre-douce); font-size: .98rem; }
.outil-carte .bouton { align-self: flex-start; margin-top: auto; }

.outil-vedette {
    background: var(--mimosa-3);
    border-color: var(--mimosa-2);
}

.outil-vedette ul {
    margin: 0;
    padding-left: 1.1rem;
    font-size: .95rem;
}

/* ---------- Pied de page ---------- */

.pied {
    border-top: 1px solid var(--ligne);
    padding-block: 3rem 2rem;
    font-size: .93rem;
}

.pied-grille {
    display: grid;
    grid-template-columns: 1.4fr repeat(3, 1fr);
    gap: 2rem;
}

.pied h2 {
    font-family: var(--police-code);
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--encre-douce);
    margin-bottom: .75rem;
}

.pied ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.pied a { text-decoration: none; }
.pied a:hover { text-decoration: underline; }

.pied-gomaloc a {
    color: var(--vert-gomaloc);
    font-weight: 600;
}

.pied-bas {
    margin-top: 2.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--ligne);
    color: var(--encre-douce);
    font-size: .85rem;
}

/* ---------- Pages à rédiger ---------- */

.fil-ariane {
    font-size: .88rem;
    color: var(--encre-douce);
    padding-top: 2rem;
}

.fil-ariane ol { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; }
.fil-ariane li + li::before { content: "/"; margin-right: .4rem; color: var(--ligne); }

.page-brouillon { padding-block: 2rem 5rem; max-width: 46rem; }
.page-brouillon h1 { font-size: clamp(2rem, 4.5vw, 3rem); margin-bottom: 1.5rem; }

.fiche-page {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: .5rem 1.5rem;
    padding: 1.25rem 1.5rem;
    border: 1px dashed var(--encre-douce);
    border-radius: var(--rayon);
    background: var(--fond-carte);
    margin: 0 0 2rem;
}

.fiche-page dt { font-family: var(--police-code); font-size: .8rem; color: var(--encre-douce); padding-top: .15rem; }
.fiche-page dd { margin: 0; }

.sous-pages { padding-left: 1.2rem; }
.sous-pages li { margin-bottom: .35rem; }

/* ---------- Articles ---------- */

.article { padding-block: 1.5rem 5rem; }

.article-tete {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
    padding-block: 1.5rem 3rem;
    border-bottom: 1px solid var(--ligne);
}

.article-tete h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); letter-spacing: -.01em; }
.article-tete .chapeau { margin-bottom: 1.25rem; }

.article-meta {
    font-family: var(--police-code);
    font-size: .78rem;
    color: var(--encre-douce);
    margin: 0;
}

/* La carte de peinture : la couleur de la page, comme arrachée au nuancier. */
.carte-couleur {
    background: var(--fond-carte);
    border-radius: var(--rayon);
    box-shadow: 0 1px 2px rgba(42, 33, 48, .08), 0 12px 28px rgba(42, 33, 48, .12);
    overflow: hidden;
    transform: rotate(2deg);
    max-width: 22rem;
    width: 100%;
    justify-self: center;
}

.carte-couleur-teinte { height: 13rem; background: var(--teinte); }

.carte-couleur dl {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: .3rem 1rem;
    margin: 0;
    padding: .6rem 1.25rem 1.3rem;
}

.carte-couleur-nom {
    font-family: var(--police-titre);
    font-size: 1.5rem;
    margin: 0;
    padding: 1.1rem 1.25rem 0;
}

.carte-couleur dt { font-family: var(--police-code); font-size: .72rem; color: var(--encre-douce); padding-top: .2rem; }
.carte-couleur dd { margin: 0; font-family: var(--police-code); font-size: .85rem; }

.article-corps {
    display: grid;
    grid-template-columns: minmax(0, 44rem) 14rem;
    justify-content: space-between;
    gap: 3rem;
    padding-top: 3rem;
}

.sommaire {
    position: sticky;
    top: 1.5rem;
    align-self: start;
    font-size: .9rem;
    order: 2;
}

.sommaire h2 {
    font-family: var(--police-code);
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--encre-douce);
    margin-bottom: .75rem;
}

.sommaire ol { list-style: none; margin: 0; padding: 0 0 0 .9rem; border-left: 2px solid var(--ligne); display: grid; gap: .5rem; }
.sommaire a { text-decoration: none; color: var(--encre-douce); }
.sommaire a:hover { color: var(--encre); text-decoration: underline; text-underline-offset: 3px; }

.texte > * + * { margin-top: 1.1rem; }
.texte > h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); margin-top: 3.25rem; scroll-margin-top: 1.5rem; }
.texte > h3 { font-size: 1.3rem; margin-top: 2rem; }
.texte p, .texte ul, .texte ol { margin-bottom: 0; }
.texte ul, .texte ol { padding-left: 1.2rem; }
.texte li + li { margin-top: .35rem; }
.texte a { text-decoration-color: var(--mimosa); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.texte a:hover { text-decoration-color: var(--encre); }

/* Les nuances : des pastilles, du clair au foncé. */
.texte .nuances {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .75rem;
    list-style: none;
    padding: 0;
}

.texte .nuances li { margin: 0; }

.pastille {
    display: block;
    aspect-ratio: 4 / 3;
    border-radius: var(--rayon);
    background: var(--teinte);
    box-shadow: inset 0 0 0 1px rgba(42, 33, 48, .08);
    margin-bottom: .5rem;
}

.nuances strong { display: block; font-weight: 600; font-size: .95rem; line-height: 1.3; }
.nuances code { font-family: var(--police-code); font-size: .75rem; color: var(--encre-douce); }

/* Les accords : la couleur de la page à côté de sa partenaire. */
.texte .accords {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    list-style: none;
    padding: 0;
}

.texte .accords li {
    margin: 0;
    display: grid;
    grid-template-columns: 4.5rem 1fr;
    gap: 1rem;
    align-items: center;
    padding: .9rem;
    border: 1px solid var(--ligne);
    border-radius: var(--rayon);
    background: var(--fond-carte);
}

.duo { display: grid; grid-template-columns: 1fr 1fr; height: 4.5rem; border-radius: 4px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(42, 33, 48, .08); }
.duo span:first-child { background: var(--a); }
.duo span:last-child { background: var(--b); }
.accords strong { display: block; font-weight: 600; }
.accords p { margin: .15rem 0 0; font-size: .9rem; color: var(--encre-douce); }

.encadre {
    padding: 1.4rem 1.5rem;
    background: var(--mimosa-3);
    border-radius: var(--rayon);
    border-left: 6px solid var(--mimosa);
}

.encadre .encart-titre { font-family: var(--police-titre); font-size: 1.25rem; margin: 0 0 .6rem; }
.encadre ul { margin: 0; padding-left: 1.2rem; }
.encadre li + li { margin-top: .4rem; }

.tableau { overflow-x: auto; }
.tableau table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.tableau th, .tableau td { text-align: left; padding: .6rem .75rem; border-bottom: 1px solid var(--ligne); vertical-align: top; }
.tableau th { font-family: var(--police-code); font-size: .75rem; font-weight: 400; color: var(--encre-douce); text-transform: uppercase; letter-spacing: .04em; }

/* Maquette : ce qui reste à faire avant publication. */
.photo-a-faire {
    display: grid;
    place-items: center;
    min-height: 15rem;
    margin-inline: 0;
    padding: 1.5rem;
    border: 1.5px dashed var(--encre-douce);
    border-radius: var(--rayon);
    background: repeating-linear-gradient(-45deg, var(--fond), var(--fond) 10px, var(--fond-carte) 10px, var(--fond-carte) 20px);
    color: var(--encre-douce);
    font-size: .92rem;
    text-align: center;
}

.photo-a-faire figcaption { max-width: 28rem; }
.a-completer { background: #FFF1A8; padding: 0 .2em; border-radius: 2px; }

.faq details { border-bottom: 1px solid var(--ligne); padding-block: .9rem; }
.faq summary { cursor: pointer; font-weight: 600; }
.faq details p { margin: .6rem 0 0; color: var(--encre-douce); }

.a-lire { border-top: 1px solid var(--ligne); margin-top: 4rem; padding-top: 2.5rem; }
.a-lire h2 { font-size: 1.6rem; margin-bottom: 1.25rem; }
.a-lire ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }

.a-lire a {
    display: block;
    height: 100%;
    text-decoration: none;
    background: var(--fond-carte);
    border-radius: var(--rayon);
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(42, 33, 48, .08), 0 6px 16px rgba(42, 33, 48, .08);
    transition: transform .15s ease;
}

.a-lire a:hover { transform: translateY(-3px); }
.a-lire a::before { content: ""; display: block; height: 4.5rem; background: var(--teinte); }
.a-lire a span { display: block; padding: .75rem .9rem .9rem; font-weight: 600; font-size: .95rem; line-height: 1.3; }

/* ---------- Composants du moteur (repris de guide-du-bailleur, au nuancier du site) ---------- */

.visuellement-cache {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

mark { background: linear-gradient(transparent 55%, var(--mimosa-3) 55%); color: inherit; padding: 0 2px; }

/* Lien vers une page encore en brouillon : la carte reste, grisée et sans lien. */
.a-venir { opacity: .5; }

/* En-tête d'article sans carte de couleur : une seule colonne. */
.article-tete-simple { grid-template-columns: minmax(0, 46rem); }

.signature-auteur { display: flex; align-items: center; gap: .75rem; }
.signature-auteur a { color: var(--encre); }
.avatar-petit, .avatar-grand { flex: none; border-radius: 50%; object-fit: cover; }
.avatar-petit { width: 2.5rem; height: 2.5rem; }
.avatar-grand { width: 5.5rem; height: 5.5rem; }
.avatar-initiale { display: grid; place-items: center; background: var(--teinte, var(--tomette)); color: #fff; font-family: var(--police-titre); }
.avatar-petit.avatar-initiale { font-size: 1.1rem; }
.avatar-grand.avatar-initiale { font-size: 2.4rem; }

.encadre-auteur {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
    margin-top: 3rem;
    padding: 1.5rem;
    background: var(--fond-carte);
    border: 1px solid var(--ligne);
    border-radius: var(--rayon);
}

.encadre-auteur p { margin: 0 0 .6rem; font-size: .98rem; }
.encadre-auteur-titre { font-family: var(--police-code); font-size: .75rem !important; text-transform: uppercase; letter-spacing: .06em; color: var(--encre-douce); }
.encadre-auteur-nom { font-family: var(--police-titre); font-size: 1.3rem !important; }

.bouton-x {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .45rem 1rem;
    border: 1.5px solid var(--encre);
    border-radius: 999px;
    text-decoration: none;
    font-weight: 600;
    font-size: .9rem;
}

.tete-auteur { display: flex; gap: 1.75rem; align-items: center; padding-block: 2rem; border-bottom: 1px solid var(--ligne); }
.tete-auteur h1 { font-size: clamp(2.2rem, 5vw, 3.2rem); }
.tete-auteur-fonction { color: var(--encre-douce); margin: .4rem 0 .75rem; }

/* Rubriques */
.tete-rubrique { padding-block: 2rem 2.5rem; border-bottom: 1px solid var(--ligne); max-width: 52rem; }
.tete-rubrique h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); }
.tete-rubrique h1::before { content: ""; display: block; width: 3rem; height: .5rem; border-radius: 2px; background: var(--teinte); margin-bottom: 1.25rem; }
.tete-rubrique .chapeau { margin-bottom: 0; }
.texte-rubrique { max-width: 46rem; padding-top: 2rem; }

.liste-pages { padding-block: 2.5rem 5rem; }
.liste-pages h2 { font-size: 1.8rem; margin-bottom: 1.25rem; }
.liste-pages ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 1rem; }

.liste-pages a {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    height: 100%;
    padding: 1.25rem;
    background: var(--fond-carte);
    border: 1px solid var(--ligne);
    border-radius: var(--rayon);
    text-decoration: none;
    transition: border-color .2s ease;
}

.liste-pages a::before { content: ""; display: block; width: 1.6rem; height: 1.6rem; border-radius: 3px; background: var(--teinte, var(--encre-douce)); margin-bottom: .4rem; }
.liste-pages a:hover { border-color: var(--encre-douce); }
.liste-pages strong { font-family: var(--police-titre); font-weight: 400; font-size: 1.2rem; line-height: 1.25; }
.liste-pages span { color: var(--encre-douce); font-size: .92rem; }
.liste-pages-rubrique a { border-style: dashed; }
.liste-vide { color: var(--encre-douce); }

.article-simple { max-width: 46rem; padding-block: 2rem 5rem; }
.article-simple h1 { font-size: clamp(2rem, 4.5vw, 3rem); margin-bottom: 1.5rem; }

/* Encadrés du contenu */
.chapo { font-size: 1.2rem; color: var(--encre-douce); }
.encart-titre { font-family: var(--police-code); font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--encre-douce); margin: 0 0 .6rem; }
.bref, .encart { padding: 1.25rem 1.5rem; background: var(--fond-carte); border: 1px solid var(--ligne); border-radius: var(--rayon); }
.bref ul, .encart ul { margin: 0; padding-left: 1.2rem; }
.encart { border-left: 6px solid var(--vert-gomaloc); }
.encart p { margin: 0 0 .6rem; }
.encart-mention { font-size: .85rem; color: var(--encre-douce); }
.encart .bouton { background: var(--vert-gomaloc); }
.sources { font-size: .92rem; color: var(--encre-douce); border-top: 1px solid var(--ligne); padding-top: 1rem; }
.lien-partenaire { font-family: var(--police-code); font-size: .65rem; text-transform: uppercase; color: var(--encre-douce); margin-left: .25rem; }

.image-une, .image-article { margin-inline: 0; }
.image-une img, .image-article img { width: 100%; height: auto; border-radius: var(--rayon); }
.image-une figcaption, .image-article figcaption { font-size: .78rem; color: var(--encre-douce); text-align: right; margin-top: .35rem; }

.en-ce-moment { border-top: 3px solid var(--mimosa); border-bottom: 1px solid var(--ligne); padding-block: .9rem; }
.en-ce-moment ul { list-style: none; padding: 0; margin: 0; }
.en-ce-moment li { padding-block: .35rem; font-weight: 600; }
.en-ce-moment time { display: block; font-weight: 400; font-size: .82rem; color: var(--encre-douce); }

/* Newsletter */
.newsletter {
    margin-top: 3rem;
    padding: 1.75rem;
    background: var(--encre);
    color: #F4F0F5;
    border-radius: var(--rayon);
}

.section .newsletter { margin-top: 0; }
.newsletter p { margin: 0; }
.newsletter-titre { font-family: var(--police-titre); font-size: 1.6rem; margin-bottom: .35rem !important; color: #fff; }
.newsletter-accroche { color: #CFC6D3; margin-bottom: 1.25rem !important; }
.newsletter-form { display: grid; grid-template-columns: 1fr 1.4fr auto; gap: .75rem; align-items: end; }
.newsletter-form label span { display: block; font-size: .82rem; font-weight: 600; margin-bottom: .25rem; }
.newsletter-form input:not([type=checkbox]) { width: 100%; padding: .7rem .8rem; border: 0; border-radius: 4px; font: inherit; color: var(--encre); background: #fff; }
.newsletter-form button { padding: .75rem 1.3rem; border: 0; border-radius: 999px; background: var(--mimosa); color: var(--encre); font: inherit; font-weight: 600; cursor: pointer; }
.newsletter-consentement { grid-column: 1 / -1; display: flex; gap: .5rem; align-items: flex-start; font-size: .88rem; color: #E4DEE7; }
.newsletter-consentement input { margin-top: .3rem; }
.newsletter-mention { grid-column: 1 / -1; font-size: .78rem; color: #A99FAE; }
.newsletter-mention a { color: #fff; }
.newsletter-piege { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.newsletter-cadeau { border-left: 6px solid var(--mimosa); }

/* Outils (formulaires de calcul) */
.outil {
    padding: 1.5rem;
    background: var(--fond-carte);
    border: 1px solid var(--ligne);
    border-top: 6px solid var(--vert-gomaloc);
    border-radius: var(--rayon);
}

.outil fieldset { border: 0; margin: 0 0 1.25rem; padding: 0; }
.outil legend { font-family: var(--police-titre); font-size: 1.25rem; margin-bottom: .75rem; }
.outil input:not([type=checkbox]):not([type=radio]), .outil select { width: 100%; padding: .6rem .7rem; border: 1px solid var(--ligne); border-radius: 4px; font: inherit; background: var(--fond); color: var(--encre); }
.outil-pieces { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: .5rem .75rem; }
.outil-pieces-tete { font-family: var(--police-code); font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--encre-douce); }
.outil-ligne { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem 1rem; }
.outil-ligne label { display: grid; gap: .3rem; font-size: .9rem; font-weight: 600; }
.outil-aide { font-size: .85rem; color: var(--encre-douce); margin: .6rem 0 0; }
.outil textarea { width: 100%; padding: .6rem .7rem; border: 1px solid var(--ligne); border-radius: 4px; font: inherit; background: var(--fond); color: var(--encre); }
.outil-seul { display: grid; gap: .3rem; font-size: .9rem; font-weight: 600; margin-top: .75rem; }
.outil-cases { display: grid; gap: .4rem; }
.outil-cases label, .outil-consentement { display: flex; gap: .5rem; align-items: flex-start; font-size: .92rem; }
.outil-cases input, .outil-consentement input { margin-top: .3rem; }
.outil-consentement { margin-bottom: 1rem; }
.outil-form button { padding: .75rem 1.5rem; border: 0; border-radius: 999px; background: var(--encre); color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
.outil-resultat { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--ligne); scroll-margin-top: 1.5rem; }
.outil-resultat > * + * { margin-top: 1rem; }
.verdict-outil { font-family: var(--police-titre); font-size: 1.5rem; line-height: 1.25; padding-left: .9rem; border-left: 6px solid; margin: 0; }
.verdict-ok { border-color: var(--vert-gomaloc); }
.verdict-attention { border-color: var(--mimosa); }
.verdict-alerte { border-color: var(--tomette); }
.capture-gomaloc { margin-top: 1.5rem; padding: 1.25rem; background: var(--fond); border: 1px solid var(--ligne); border-left: 6px solid var(--vert-gomaloc); border-radius: var(--rayon); }

/* ---------- Petits écrans ---------- */

@media (max-width: 900px) {
    .ouverture .conteneur,
    .histoire .conteneur { grid-template-columns: 1fr; }
    .eventail { height: 22rem; max-width: 26rem; margin-inline: auto; width: 100%; }
    .eventail li { width: 10.5rem; }
    .essentiels, .outils-cartes { grid-template-columns: 1fr; }
    .rubrique { grid-template-columns: 1fr; }
    .rubrique-teintes { grid-template-columns: repeat(2, 1fr); margin-top: 0; }
    .pied-grille { grid-template-columns: 1fr 1fr; }
    .article-tete { grid-template-columns: 1fr; }
    .carte-couleur { transform: none; }
    .article-corps { grid-template-columns: 1fr; gap: 0; padding-top: 2rem; }
    .sommaire { position: static; order: 0; margin-bottom: 1rem; }
    .a-lire ul { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
    .navigation { order: 3; width: 100%; }
    .navigation ul { gap: 1rem; }
    .entete .bouton { display: none; }
    .eventail { height: 19rem; }
    .eventail li { width: 8.5rem; }
    .eventail li:nth-child(1) { transform: translateX(-88%) rotate(-12deg); }
    .eventail li:nth-child(3) { transform: translateX(-12%) rotate(12deg); }
    .eventail .nuance-nom { font-size: .95rem; max-width: 4.6rem; }
    .nuance-teintes span { height: 3.6rem; }
    .pied-grille { grid-template-columns: 1fr; }
    .texte .nuances { grid-template-columns: repeat(2, 1fr); }
    .newsletter-form, .outil-ligne { grid-template-columns: 1fr; }
    .newsletter, .outil { padding: 1.25rem 1rem; }
    .encadre-auteur, .tete-auteur { flex-direction: column; }
    .texte .accords { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; }
}