/*
 * Les deux web : feuille de style principale (maquette Figma « Les deux Web »).
 *
 * Organisation :
 *   1. Polices auto-hébergées
 *   2. Variables (couleurs, typographie, espacements)
 *   3. Base (reset léger, typographie, liens, focus)
 *   4. Layout (conteneur, en-tête, navigation, pied de page)
 *   5. Composants (sur-titre, bouton, fil d'Ariane, cartes, formulaires...)
 *   6. Utilitaires
 *   7. Pages
 *
 * Pour un site client : modifier la section 2 suffit dans la plupart des cas.
 */

/* ========== 1. Polices auto-hébergées (licence SIL OFL, voir assets/fonts/LICENCES.md) ========== */

@font-face {
    font-family: "Gelasio";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/gelasio-latin-400-normal-T3jVH60.woff2") format("woff2");
}

@font-face {
    font-family: "Gelasio";
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/gelasio-latin-400-italic-W7egwaY.woff2") format("woff2");
}

@font-face {
    font-family: "Gelasio";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/gelasio-latin-700-normal-ARgHxvb.woff2") format("woff2");
}

@font-face {
    font-family: "Nunito Sans";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/nunito-sans-latin-400-normal-7QLhHds.woff2") format("woff2");
}

@font-face {
    font-family: "Nunito Sans";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/nunito-sans-latin-700-normal-WYCChC1.woff2") format("woff2");
}

@font-face {
    font-family: "Nunito Sans";
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url("../fonts/nunito-sans-latin-900-normal-e8SRANy.woff2") format("woff2");
}

/* ========== 2. Variables ========== */

:root {
    /* Palette (contrastes mesurés, minimum AA 4,5:1 pour le texte) */
    --c-encre: #1F2623;         /* texte, sections sombres : 14,3:1 sur porcelaine */
    --c-bocage: #3D5E50;        /* boutons, bandeau vert : texte blanc 7,2:1 */
    --c-bocage-fonce: #2F4A3F;  /* survol */
    --c-genet: #EBC363;         /* accent, focus, sur-titres sur fond sombre : 9,2:1 sur encre */
    --c-genet-clair: #F5DA97;   /* sur-titres sur le bandeau vert : 5,3:1 */
    --c-chataigne: #8A4B2A;     /* sur-titres, italiques : 6,2:1 sur porcelaine */
    --c-porcelaine: #F6F6F3;    /* fond de page */
    --c-sauge: #E1E8E3;         /* fonds secondaires */
    --c-lin: #E8D5C4;           /* fonds chauds (photos à venir) */

    /* Dérivées */
    --c-blanc: #FFFFFF;
    --c-texte-doux: #5A635E;    /* textes secondaires : 5,7:1 sur porcelaine */
    --c-texte-clair: #A9B1AC;   /* textes secondaires sur fond sombre : 7:1 sur encre */
    --c-filet: #D3D8D4;
    --c-filet-sombre: rgb(246 246 243 / 0.18);
    --c-bordure-champ: #808985; /* bordure des champs : 3,3:1 (minimum 3:1) */
    --c-erreur: #A3261B;
    --c-erreur-pale: #FBEAE7;

    /* Typographie */
    --f-titre: "Gelasio", Georgia, "Times New Roman", serif;
    --f-texte: "Nunito Sans", "Avenir Next", Avenir, system-ui, -apple-system, "Segoe UI", sans-serif;

    /* Échelle typographique fluide (320 px → 1440 px) */
    --t-0: 0.875rem;                                    /* petit texte */
    --t-1: 1.0625rem;                                   /* texte courant (17 px) */
    --t-2: clamp(1.125rem, 1.05rem + 0.35vw, 1.3rem);   /* chapeaux */
    --t-3: clamp(1.45rem, 1.2rem + 1vw, 2.1rem);        /* h3, titres de carte */
    --t-4: clamp(2.1rem, 1.3rem + 3.4vw, 4.6rem);       /* h2 de section */
    --t-5: clamp(2.6rem, 1.4rem + 5.2vw, 6.25rem);      /* h1 */
    --t-manifeste: clamp(1.5rem, 1rem + 2vw, 3rem);     /* grands paragraphes */

    /* Espacements */
    --e-1: 0.25rem;
    --e-2: 0.5rem;
    --e-3: 0.75rem;
    --e-4: 1rem;
    --e-5: 1.5rem;
    --e-6: 2rem;
    --e-7: 3rem;
    --e-8: clamp(3.5rem, 2rem + 6vw, 7.5rem);           /* entre deux sections */

    /* Divers */
    --largeur-max: 120rem;
    --largeur-texte: 68ch;
    --gouttiere: clamp(1.25rem, 5vw, 6rem);
    --ombre: 0 30px 60px -30px rgb(31 38 35 / 0.25);
}

/* ========== 3. Base ========== */

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

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

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--c-porcelaine);
    color: var(--c-encre);
    font-family: var(--f-texte);
    font-size: var(--t-1);
    line-height: 1.65;
}

main {
    flex: 1;
}

h1, h2, h3, h4 {
    font-family: var(--f-titre);
    font-weight: 400;
    line-height: 1.08;
    letter-spacing: -0.025em;
    margin: 0 0 var(--e-5);
    text-wrap: balance;
}

h1 { font-size: var(--t-5); line-height: 1.02; letter-spacing: -0.035em; }
h2 { font-size: var(--t-4); }
h3 { font-size: var(--t-3); letter-spacing: -0.015em; }
h4 { font-size: var(--t-2); letter-spacing: 0; }

/* Accent italique châtaigne des titres (« un site qui vous ressemble. ») */
h1 em, h2 em, .manifeste em {
    font-style: italic;
    color: var(--c-chataigne);
}

p, ul, ol {
    margin: 0 0 var(--e-4);
}

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

a {
    color: var(--c-bocage);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
}

a:hover {
    text-decoration-thickness: 2px;
}

strong {
    font-weight: 700;
}

/* Focus clavier très visible (genêt + liseré encre, lisible sur fond clair comme sombre) */
:focus-visible {
    outline: 3px solid var(--c-genet);
    outline-offset: 2px;
    box-shadow: 0 0 0 5px var(--c-encre);
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ========== 4. Layout ========== */

.conteneur {
    width: 100%;
    max-width: var(--largeur-max);
    margin-inline: auto;
    padding-inline: var(--gouttiere);
}

.section {
    padding-block: var(--e-8);
}

.section--sombre {
    background: var(--c-encre);
    color: var(--c-porcelaine);
}

.section--verte {
    background: var(--c-bocage);
    color: var(--c-blanc);
}

/* Lien d'évitement : invisible jusqu'au focus clavier */
.lien-evitement {
    position: absolute;
    left: var(--e-4);
    top: -100%;
    z-index: 100;
    padding: var(--e-3) var(--e-4);
    background: var(--c-encre);
    color: var(--c-blanc);
    font-weight: 900;
}

.lien-evitement:focus {
    top: var(--e-4);
}

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

/* Collant : sans JS, toujours visible ; avec JS (entete_controller.js), masqué en descendant,
   réaffiché en remontant. Les ancres s'arrêtent sous l'en-tête (scroll-padding-top). */
html {
    scroll-padding-top: var(--hauteur-entete, 6rem);
}

.entete {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--c-porcelaine);
    border-bottom: 1px solid var(--c-filet);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.entete--defile {
    box-shadow: 0 8px 24px -16px rgb(31 38 35 / 0.35);
}

.entete--masque {
    transform: translateY(-100%);
    box-shadow: none;
}

.entete__barre {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--e-3) var(--e-6);
    padding-block: var(--e-4);
}

/* Logo : emblème + « les deux web » + devise */
.logo {
    display: inline-flex;
    align-items: center;
    gap: var(--e-3);
    color: var(--c-encre);
    text-decoration: none;
}

.logo__embleme {
    flex: none;
    width: 3.5rem;
    height: 3.5rem;
}

.logo__texte {
    display: grid;
    line-height: 1.1;
}

.logo__nom {
    font-family: var(--f-titre);
    font-weight: 700;
    font-size: 1.6rem;
    letter-spacing: -0.02em;
}

.logo__devise {
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--c-texte-doux);
}

.menu-bouton {
    display: none;
}

.nav-principale__liste {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--e-2) var(--e-6);
}

.nav-principale__lien {
    display: inline-block;
    padding-block: var(--e-2);
    color: var(--c-encre);
    font-weight: 900;
    text-decoration: none;
    border-bottom: 2px solid transparent;
}

.nav-principale__lien:hover {
    border-bottom-color: var(--c-filet);
}

.nav-principale__lien[aria-current="page"] {
    border-bottom-color: var(--c-chataigne);
}

.nav-principale__item--devis {
    margin-left: var(--e-3);
}

/* Navigation mobile : repliée uniquement si le JS est actif (amélioration progressive) */
@media (max-width: 68rem) {
    .entete--js .menu-bouton {
        display: inline-flex;
        align-items: center;
        gap: var(--e-2);
        padding: var(--e-2) var(--e-4);
        background: transparent;
        color: var(--c-encre);
        font: inherit;
        font-weight: 900;
        border: 2px solid var(--c-encre);
        cursor: pointer;
    }

    .menu-bouton__icone,
    .menu-bouton__icone::before,
    .menu-bouton__icone::after {
        display: block;
        width: 1.1rem;
        height: 2px;
        background: currentColor;
        position: relative;
    }

    .menu-bouton__icone::before,
    .menu-bouton__icone::after {
        content: "";
        position: absolute;
        left: 0;
    }

    .menu-bouton__icone::before { top: -6px; }
    .menu-bouton__icone::after { top: 6px; }

    .nav-principale {
        flex-basis: 100%;
    }

    .entete--js .nav-principale:not(.nav-principale--ouverte) {
        display: none;
    }

    .nav-principale__liste {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding-block: var(--e-2);
    }

    .nav-principale__lien {
        display: block;
        padding-block: var(--e-3);
        border-bottom: 1px solid var(--c-filet);
    }

    .nav-principale__lien[aria-current="page"] {
        border-bottom: 1px solid var(--c-filet);
        box-shadow: inset 4px 0 0 var(--c-chataigne);
        padding-left: var(--e-4);
    }

    .nav-principale__item--devis {
        margin: 0;
        padding-top: var(--e-4);
    }
}

@media (max-width: 30rem) {
    .entete .logo__devise {
        display: none;
    }

    .entete .logo__embleme {
        width: 2.75rem;
        height: 2.75rem;
    }

    .entete .logo__nom {
        font-size: 1.3rem;
    }
}

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

.pied {
    background: var(--c-encre);
    color: var(--c-texte-clair);
    padding-block: var(--e-8) var(--e-6);
    font-size: var(--t-0);
}

.pied a {
    color: var(--c-porcelaine);
}

.pied .logo {
    color: var(--c-blanc);
}

.pied .logo__devise {
    color: var(--c-texte-clair);
}

.pied__haut {
    display: grid;
    gap: var(--e-6);
    align-items: start;
}

@media (min-width: 56rem) {
    .pied__haut {
        grid-template-columns: auto 1fr auto;
        gap: var(--e-7);
    }
}

.pied__phrase {
    margin: 0;
    font-family: var(--f-titre);
    font-size: var(--t-2);
    line-height: 1.5;
    color: var(--c-texte-clair);
    max-width: 34ch;
}

.pied__nav {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--e-3);
}

.pied__nav a {
    font-size: var(--t-1);
    font-weight: 900;
    text-decoration: none;
}

.pied__nav a:hover {
    text-decoration: underline;
}

/* Maillage interne : métiers et zones */

.pied__bas {
    margin-top: var(--e-7);
    padding-top: var(--e-5);
    border-top: 1px solid var(--c-filet-sombre);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--e-3) var(--e-6);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.pied__bas p,
.pied__bas ul {
    margin: 0;
}

.pied__bas ul {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--e-2) var(--e-5);
}

.pied__bas a {
    color: var(--c-texte-clair);
    text-decoration: none;
}

.pied__bas a:hover {
    color: var(--c-porcelaine);
    text-decoration: underline;
}

/* ========== 5. Composants ========== */

/* --- Sur-titre « — NOS OFFRES » --- */

.sur-titre {
    display: flex;
    align-items: center;
    gap: var(--e-4);
    margin: 0 0 var(--e-5);
    font-size: 0.8rem;
    font-weight: 900;
    letter-spacing: 0.2em;
    line-height: 1.4;
    text-transform: uppercase;
    color: var(--c-chataigne);
}

.sur-titre::before {
    content: "";
    flex: none;
    width: 2rem;
    height: 2px;
    background: currentColor;
}

.section--sombre .sur-titre {
    color: var(--c-genet);
}

.section--verte .sur-titre {
    color: var(--c-genet-clair);
}

/* --- Bouton (templates/components/Bouton.html.twig) --- */

.bouton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--e-4);
    padding: 1.05rem 1.9rem;
    border: 2px solid transparent;
    border-radius: 0;
    font: inherit;
    font-weight: 900;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}

/* Flèche dessinée en CSS (couleur du texte) */
.bouton::after,
.carte-offre__fleche::after {
    content: "";
    flex: none;
    width: 1rem;
    height: 1rem;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1 8h13M9 3l5 5-5 5' fill='none' stroke='%23000' stroke-width='1.8'/%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='M1 8h13M9 3l5 5-5 5' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3C/svg%3E") center / contain no-repeat;
}

.bouton--principal {
    background: var(--c-bocage);
    color: var(--c-blanc);
}

.bouton--principal:hover {
    background: var(--c-bocage-fonce);
}

.bouton--sombre {
    background: var(--c-encre);
    color: var(--c-blanc);
}

.bouton--sombre:hover {
    background: var(--c-bocage);
}

.bouton--secondaire {
    background: transparent;
    color: var(--c-encre);
    border-color: var(--c-encre);
}

.bouton--secondaire:hover {
    background: var(--c-encre);
    color: var(--c-blanc);
}

/* Sur fond sombre */

/* Lien souligné épais (« Découvrir nos offres ») */
.bouton--lien {
    padding: var(--e-2) 0;
    background: none;
    border: 0;
    border-bottom: 2px solid currentColor;
    color: var(--c-encre);
}

.bouton--lien::after {
    display: none;
}

.section--sombre .bouton--lien,
.section--verte .bouton--lien {
    color: var(--c-blanc);
}

.groupe-boutons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--e-4) var(--e-6);
}

/* --- Fil d'Ariane (templates/components/FilAriane.html.twig) --- */

.fil-ariane {
    padding-block: var(--e-5) 0;
    font-size: var(--t-0);
}

.fil-ariane__liste {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--e-1) var(--e-2);
    color: var(--c-texte-doux);
}

.fil-ariane__element:not(:last-child)::after {
    content: "›";
    margin-left: var(--e-2);
}

.fil-ariane__element a {
    color: var(--c-texte-doux);
}

.fil-ariane__element [aria-current="page"] {
    color: var(--c-encre);
    font-weight: 700;
}

/* --- En-tête de page intérieure (sur-titre + h1 + chapeau) --- */

.tete-page {
    padding-block: var(--e-7);
}

.tete-page h1 {
    max-width: 18ch;
}

.tete-page .sur-titre {
    margin-top: var(--e-5);
}

.tete-page__chapeau {
    font-size: var(--t-2);
    color: var(--c-texte-doux);
    max-width: 58ch;
}

/* En-tête de section : titre à gauche, introduction à droite */
.section-tete {
    display: grid;
    gap: var(--e-4) var(--e-7);
    align-items: end;
    margin-bottom: var(--e-7);
}

@media (min-width: 60rem) {
    .section-tete {
        grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    }
}

.section-tete h2 {
    margin: 0;
}

.section-tete__intro {
    margin: 0;
    color: var(--c-texte-doux);
    font-size: var(--t-2);
}

.section--sombre .section-tete__intro {
    color: var(--c-texte-clair);
}

/* --- Cartes --- */

.grille-cartes {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--e-5);
    list-style: none;
    padding: 0;
    margin: 0;
}

@media (min-width: 40rem) {
    .grille-cartes {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* 3 colonnes par défaut, 4 avec .grille-cartes--4 : jamais de carte orpheline */
@media (min-width: 64rem) {
    .grille-cartes {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .grille-cartes--4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 80rem) {
    .grille-cartes--4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* 5 cartes : 3 puis 2 élargies (6 colonnes virtuelles), pas de trou en fin de grille */
@media (min-width: 64rem) {
    .grille-cartes:has(> li:nth-child(5):last-child) {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .grille-cartes:has(> li:nth-child(5):last-child) > li {
        grid-column: span 2;
    }

    .grille-cartes:has(> li:nth-child(5):last-child) > li:nth-child(n + 4) {
        grid-column: span 3;
    }
}

.grille-cartes > li {
    display: flex;
}

.carte {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--e-4);
    padding: clamp(var(--e-5), 3vw, var(--e-7));
    background: var(--c-blanc);
    border: 1px solid var(--c-filet);
}

.carte > * {
    margin: 0;
}

.carte__titre {
    font-size: var(--t-3);
}

.carte__texte {
    color: var(--c-texte-doux);
}

/* Carte entièrement cliquable : le lien du titre est étiré sur toute la carte */
.carte__lien {
    color: inherit;
    text-decoration: none;
}

.carte__lien::after {
    content: "";
    position: absolute;
    inset: 0;
}

.carte__lien:focus-visible {
    outline: none;
    box-shadow: none;
}

.carte__lien:focus-visible::after {
    outline: 3px solid var(--c-genet);
    outline-offset: 2px;
    box-shadow: 0 0 0 5px var(--c-encre);
}

.carte--cliquable {
    transition: box-shadow 0.2s;
}

.carte--cliquable:hover {
    box-shadow: var(--ombre);
}

.carte--cliquable:hover .carte__lien {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.15em;
}

/* --- Carte d'offre (templates/components/CarteOffre.html.twig) --- */

.carte-offre {
    /* Fond blanc + filet : la carte se détache du fond porcelaine de la page */
    background: var(--c-blanc);
    border: 1px solid var(--c-filet);
    padding-block: clamp(var(--e-6), 4vw, 4rem);
}

.carte-offre__numero {
    font-family: var(--f-titre);
    font-size: 1.6rem;
    line-height: 1;
    color: var(--c-chataigne);
}

.carte-offre__sur-titre {
    margin-top: var(--e-5) !important;
    font-size: 0.75rem;
    font-weight: 900;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--c-chataigne);
}

.carte-offre .carte__titre {
    font-size: clamp(1.7rem, 1.3rem + 1.3vw, 2.5rem);
}

.carte-offre .carte__texte {
    padding-bottom: var(--e-5);
    border-bottom: 1px solid var(--c-encre);
}

.carte-offre__badge {
    position: absolute;
    top: var(--e-6);
    right: var(--e-6);
    padding: var(--e-2) var(--e-4);
    background: var(--c-genet);
    color: var(--c-encre);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.carte-offre__pied {
    margin-top: auto !important;
    padding-top: var(--e-5);
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--e-4);
}

.carte-offre__fleche {
    flex: none;
    display: grid;
    place-items: center;
    width: 3.5rem;
    height: 3.5rem;
    border: 1.5px solid currentColor;
}

.carte-offre:hover .carte-offre__fleche {
    background: var(--c-encre);
    color: var(--c-blanc);
}

/* Variante mise en avant (badge) : fond encre, légèrement surélevée */
.carte-offre--vedette {
    background: var(--c-encre);
    border-color: var(--c-encre);
    color: var(--c-porcelaine);
}

.carte-offre--vedette .carte__texte {
    color: var(--c-texte-clair);
    border-bottom-color: var(--c-texte-clair);
}

.carte-offre--vedette .carte-offre__sur-titre,
.carte-offre--vedette .carte-offre__numero {
    color: var(--c-genet);
}

.carte-offre--vedette .liste-coches li::before {
    border-color: var(--c-texte-clair);
}

.carte-offre--vedette:hover .carte-offre__fleche {
    background: var(--c-genet);
    color: var(--c-encre);
}

@media (min-width: 64rem) {
    .grille-offres .carte-offre--vedette {
        margin-top: calc(var(--e-5) * -1);
        margin-bottom: var(--e-5);
    }
}

/* 3e carte d'une grille (maquette) : fond sauge */
.grille-offres > li:nth-child(3) .carte-offre:not(.carte-offre--vedette) {
    background: var(--c-sauge);
    border-color: var(--c-sauge);
}

/* --- Prix (templates/components/Prix.html.twig) --- */

.prix {
    display: grid;
    gap: var(--e-1);
    margin: 0;
    line-height: 1.2;
}

.prix__libelle {
    font-size: var(--t-0);
}

.prix__montant {
    font-family: var(--f-titre);
    font-weight: 700;
    font-size: clamp(1.75rem, 1.4rem + 1vw, 2.25rem);
    letter-spacing: -0.01em;
    white-space: nowrap;
}

.mention-tva {
    margin: var(--e-5) 0 0;
    font-size: var(--t-0);
    color: var(--c-texte-doux);
}

/* --- Liste à coches (points forts) : coche dessinée en CSS --- */

.liste-coches {
    list-style: none;
    padding: 0;
    display: grid;
    gap: var(--e-3);
}

.liste-coches li {
    display: grid;
    grid-template-columns: 1.25rem 1fr;
    gap: var(--e-3);
    align-items: start;
}

.liste-coches li::before {
    content: "";
    width: 0.45rem;
    height: 0.85rem;
    margin: 0.25rem 0 0 0.3rem;
    border: solid var(--c-bocage);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Variante en ligne (« Un interlocuteur dédié · Hébergé en France ») */
.liste-coches--ligne {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e-3) var(--e-6);
    font-size: var(--t-0);
    font-weight: 700;
}

.fiche {
    display: grid;
    gap: var(--e-3);
    width: 100%;
    margin: 0;
}

.fiche > div {
    display: grid;
    gap: 0.1rem;
    padding-bottom: var(--e-3);
    border-bottom: 1px solid var(--c-filet);
}

.fiche dt {
    font-size: 0.75rem;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--c-texte-doux);
}

.fiche dd {
    margin: 0;
    font-family: var(--f-titre);
    font-size: 1.15rem;
}

.fiche--legale {
    margin-bottom: var(--e-6);
}

@media (min-width: 40rem) {
    .fiche--legale > div {
        grid-template-columns: 15rem 1fr;
        gap: var(--e-4);
        align-items: baseline;
    }
}

/* --- Grille complète des offres (accueil) : <details> dépliable, sans JavaScript --- */

.tableau-defilant {
    overflow-x: auto;
}

.grille-complete {
    margin-top: var(--e-7);
}

.grille-complete__bouton {
    display: flex;
    justify-content: center;
    list-style: none;
    cursor: pointer;
}

.grille-complete__bouton::-webkit-details-marker {
    display: none;
}

.grille-complete__voir,
.grille-complete__masquer {
    display: inline-flex;
    align-items: center;
    gap: var(--e-4);
    padding-block: var(--e-2);
    border-bottom: 2px solid currentColor;
    color: var(--c-bocage);
    font-weight: 900;
}

.grille-complete__voir::after,
.grille-complete__masquer::after {
    content: "";
    width: 1rem;
    height: 1rem;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1 8h13M9 3l5 5-5 5' fill='none' stroke='%23000' stroke-width='1.8'/%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='M1 8h13M9 3l5 5-5 5' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Flèche vers le bas quand la grille est dépliée */
.grille-complete__masquer::after {
    transform: rotate(90deg);
}

.grille-complete:not([open]) .grille-complete__masquer,
.grille-complete[open] .grille-complete__voir {
    display: none;
}

.grille-complete__bouton:hover .grille-complete__voir,
.grille-complete__bouton:hover .grille-complete__masquer {
    color: var(--c-encre);
}

.grille-complete__contenu {
    display: grid;
    gap: var(--e-7);
    margin-top: var(--e-7);
}

/* Tableau Offre / Contenu principal / Prix */
.tableau-offres {
    width: 100%;
    min-width: 36rem;
    border-collapse: collapse;
    border: 1px solid var(--c-filet);
}

.tableau-offres th,
.tableau-offres td {
    padding: var(--e-5) var(--e-6);
    text-align: left;
    vertical-align: middle;
    border-bottom: 1px solid var(--c-filet);
}

.tableau-offres thead th {
    background: var(--c-encre);
    color: var(--c-blanc);
    font-size: 0.75rem;
    font-weight: 900;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.tableau-offres tbody th {
    font-weight: 900;
    white-space: nowrap;
}

.tableau-offres tbody th a {
    color: var(--c-encre);
    text-decoration: none;
}

.tableau-offres tbody th a:hover {
    text-decoration: underline;
}

.tableau-offres__prix {
    font-family: var(--f-titre);
    font-weight: 700;
    font-size: 1.4rem;
    color: var(--c-bocage);
    white-space: nowrap;
}

/* Options supplémentaires : bloc sauge, liste sur deux colonnes */
.options-carte {
    display: grid;
    gap: var(--e-5) var(--e-7);
    padding: clamp(var(--e-5), 4vw, var(--e-7));
    background: var(--c-sauge);
}

@media (min-width: 60rem) {
    .options-carte {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr);
    }
}

.options-carte__titre {
    margin: 0;
    font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.5rem);
}

.sur-titre--sans-trait {
    margin-bottom: var(--e-2);
}

.sur-titre--sans-trait::before {
    display: none;
}

.options-liste {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
}

@media (min-width: 40rem) {
    .options-liste {
        grid-template-columns: 1fr 1fr;
    }

    .options-liste li:nth-child(odd) {
        border-right: 1px solid var(--c-bordure-champ);
    }
}

.options-liste li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--e-4);
    padding: var(--e-4) var(--e-5);
    border-bottom: 1px solid var(--c-bordure-champ);
    font-size: var(--t-0);
}

.options-liste strong {
    font-weight: 900;
    color: var(--c-bocage);
    white-space: nowrap;
}

/* --- Packs d'abonnement (templates/components/CartePack.html.twig) --- */

/* En-tête de section centré (« Après la mise en ligne ») */
.section-centree {
    display: grid;
    justify-items: center;
    text-align: center;
    margin-bottom: var(--e-7);
}

.section-centree h2 {
    max-width: 16ch;
}

.section-centree .section-tete__intro {
    max-width: 52ch;
}

.section--packs {
    padding-top: 0;
}

.carte-pack {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--e-5);
    padding: clamp(var(--e-5), 3vw, var(--e-7));
    border: 1px solid var(--c-filet);
    background: var(--c-porcelaine);
    transition: box-shadow 0.2s;
}

.carte-pack > * {
    margin: 0;
}

.carte-pack:hover {
    box-shadow: var(--ombre);
}

.carte-pack__tete {
    display: flex;
    align-items: flex-end;
    gap: var(--e-4);
}

.carte-pack__numero {
    font-family: var(--f-titre);
    font-size: 1.25rem;
    line-height: 1.6;
    color: var(--c-chataigne);
}

.carte-pack__titre {
    display: grid;
    gap: 0.45rem;
    margin: 0;
    font-size: clamp(1.8rem, 1.4rem + 1.2vw, 2.4rem);
    line-height: 1.15;
}

.carte-pack__type {
    line-height: 1;
    font-family: var(--f-texte);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

/* Toute la carte est cliquable : lien étiré sur le nom du pack */
.carte-pack__lien {
    color: inherit;
    text-decoration: none;
}

.carte-pack__lien::after {
    content: "";
    position: absolute;
    inset: 0;
}

.carte-pack__lien:focus-visible {
    outline: none;
    box-shadow: none;
}

.carte-pack__lien:focus-visible::after {
    outline: 3px solid var(--c-genet);
    outline-offset: 2px;
    box-shadow: 0 0 0 5px var(--c-encre);
}

.carte-pack__prix {
    padding-block: var(--e-5) var(--e-6);
    border-bottom: 1px solid var(--c-filet);
    color: var(--c-bocage);
    line-height: 1;
}

.carte-pack__montant {
    font-family: var(--f-titre);
    font-size: clamp(2.6rem, 2rem + 2vw, 3.6rem);
    letter-spacing: -0.02em;
}

.carte-pack__suffixe {
    font-size: var(--t-2);
    color: var(--c-encre);
}

.carte-pack__badge {
    align-self: flex-start;
    padding: var(--e-2) var(--e-4);
    background: var(--c-genet);
    color: var(--c-encre);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

/* Pack mis en avant : fond vert, légèrement surélevé */
.carte-pack--vedette {
    background: var(--c-bocage);
    border-color: var(--c-bocage);
    color: var(--c-blanc);
}

.carte-pack--vedette .carte-pack__numero {
    color: var(--c-genet-clair);
}

.carte-pack--vedette .carte-pack__prix {
    border-bottom-color: rgb(255 255 255 / 0.25);
    color: var(--c-genet);  /* grand texte : 4,3:1 (AA grand texte, minimum 3:1) */
}

.carte-pack--vedette .carte-pack__suffixe {
    color: var(--c-blanc);
}

.carte-pack--vedette .liste-coches li::before {
    border-color: var(--c-genet);
}

/* Grand écran : badge en haut à droite, comme sur la maquette */
@media (min-width: 80rem) {
    .carte-pack__badge {
        position: absolute;
        top: var(--e-5);
        right: var(--e-5);
    }
}

@media (min-width: 64rem) {
    .grille-packs .carte-pack--vedette {
        margin-top: calc(var(--e-5) * -1);
        margin-bottom: var(--e-5);
    }
}

/* --- Étapes numérotées (« Notre façon de faire ») --- */

.etapes {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--c-filet-sombre);
}

.etape {
    display: grid;
    grid-template-columns: 3.5rem 1fr;
    gap: var(--e-4);
    padding-block: var(--e-6);
    border-bottom: 1px solid var(--c-filet-sombre);
}

@media (min-width: 40rem) {
    .etape {
        grid-template-columns: 7.5rem 1fr;
    }
}

.etape__numero {
    font-family: var(--f-titre);
    font-size: 1.3rem;
    color: var(--c-genet);
    line-height: 1.6;
}

.etape__titre {
    margin: 0 0 var(--e-2);
    font-size: clamp(1.35rem, 1.1rem + 0.8vw, 1.9rem);
    color: var(--c-blanc);
}

.etape p {
    margin: 0;
    color: var(--c-texte-clair);
}

.valeurs {
    list-style: none;
    margin: var(--e-6) 0 0;
    padding: var(--e-5) 0 0;
    border-top: 1px solid var(--c-filet);
    display: flex;
    flex-wrap: wrap;
    gap: var(--e-3) var(--e-6);
    font-size: 0.8rem;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

/* --- Photos des associés (aplats de couleur tant que les photos ne sont pas fournies) --- */

.photos-associes {
    position: relative;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    padding-bottom: var(--e-8);
}

.photo-associe {
    position: relative;
    margin: 0;
    aspect-ratio: 4 / 5.6;
    background: var(--c-sauge);
}

.photo-associe:first-child {
    grid-column: 1 / span 7;
    grid-row: 1;
}

.photo-associe:nth-child(2) {
    grid-column: 6 / span 6;
    grid-row: 1;
    margin-top: 45%;
    aspect-ratio: 4 / 5;
    background: var(--c-lin);
}

.photo-associe img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Photo de groupe (remplace les deux portraits quand site.photo_equipe est renseigné) */
.photo-equipe {
    grid-column: 2 / span 9;
    margin: 0;
    aspect-ratio: 4 / 5;
    background: var(--c-sauge);
    /* Contour : marge blanche façon tirage photo + filet châtaigne décalé */
    border: 0.5rem solid var(--c-blanc);
    outline: 1px solid var(--c-chataigne);
    outline-offset: 0.75rem;
}

.photo-equipe img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}


.photos-associes__legende {
    position: absolute;
    left: 0;
    bottom: 0;
    margin: 0;
    max-width: 14ch;
    font-family: var(--f-titre);
    font-style: italic;
    font-size: clamp(1.2rem, 1rem + 0.8vw, 1.6rem);
    line-height: 1.3;
    color: var(--c-chataigne);
    transform: rotate(-6deg);
    transform-origin: left bottom;
}

/* Portrait rond (pages intérieures) */

/* --- Formulaires (thème : templates/form/theme.html.twig) --- */

.formulaire {
    display: grid;
    gap: var(--e-6);
    justify-items: start;
}

.formulaire > * {
    margin: 0;
    width: 100%;
}

.formulaire > .bouton {
    width: auto;
}

.formulaire__intro {
    font-size: var(--t-0);
    color: var(--c-texte-doux);
}

.formulaire__ligne {
    display: grid;
    gap: var(--e-6);
}

@media (min-width: 40rem) {
    .formulaire__ligne {
        grid-template-columns: 1fr 1fr;
    }
}

/* Carte qui contient le formulaire (accueil, contact) */
.formulaire-carte {
    background: var(--c-porcelaine);
    padding: clamp(var(--e-5), 4vw, 4rem);
    box-shadow: 0 30px 80px -20px rgb(31 38 35 / 0.18);
}

.champ {
    display: grid;
    gap: var(--e-2);
}

.champ label {
    font-size: var(--t-0);
    font-weight: 900;
}

.champ__obligatoire {
    font-weight: 400;
    color: var(--c-texte-doux);
}

.champ__aide {
    margin: 0;
    font-size: var(--t-0);
    color: var(--c-texte-doux);
}

/* Champs soulignés (maquette) ; zone de texte encadrée */
.champ input:not([type="checkbox"]),
.champ select {
    width: 100%;
    padding: 0.7rem 0;
    font: inherit;
    color: var(--c-encre);
    background-color: transparent;
    border: 0;
    border-bottom: 2px solid var(--c-bordure-champ);
    border-radius: 0;
}

.champ select {
    padding-right: 1.5rem;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231F2623' stroke-width='1.6'/%3E%3C/svg%3E");
    background-position: right 0.25rem center;
    background-size: 0.75rem;
    background-repeat: no-repeat;
}

.champ textarea {
    width: 100%;
    min-height: 9rem;
    padding: var(--e-4);
    font: inherit;
    color: var(--c-encre);
    background: var(--c-blanc);
    border: 2px solid var(--c-bordure-champ);
    border-radius: 0;
    resize: vertical;
}

.champ input::placeholder,
.champ textarea::placeholder {
    color: var(--c-texte-doux);
    opacity: 0.8;
}

.champ input:focus-visible,
.champ select:focus-visible,
.champ textarea:focus-visible {
    border-color: var(--c-encre);
}

.champ--erreur input:not([type="checkbox"]),
.champ--erreur select,
.champ--erreur textarea {
    border-color: var(--c-erreur);
    background-color: var(--c-erreur-pale);
}

.champ__erreur {
    margin: 0;
    color: var(--c-erreur);
    font-weight: 700;
    font-size: var(--t-0);
}

/* Icône d'erreur dessinée en CSS : l'erreur n'est pas signalée par la seule couleur */
.champ__erreur::before {
    content: "!";
    display: inline-grid;
    place-items: center;
    width: 1.1rem;
    height: 1.1rem;
    margin-right: var(--e-2);
    border-radius: 50%;
    background: var(--c-erreur);
    color: var(--c-blanc);
    font-size: 0.75rem;
    vertical-align: 0.05em;
}

.champ__case {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--e-3);
    align-items: start;
}

.champ__case input {
    width: 1.2rem;
    height: 1.2rem;
    margin: 0.15rem 0 0;
    accent-color: var(--c-bocage);
}

.champ__case label {
    font-weight: 400;
    font-size: var(--t-0);
}

/* Honeypot : retiré de l'écran et de l'arbre d'accessibilité (aria-hidden), pas display:none */
.champ-piege {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* --- Alertes (messages flash, erreurs globales) --- */

.alerte {
    padding: var(--e-4) var(--e-5);
    border-left: 4px solid;
    margin-bottom: var(--e-6);
}

.alerte > :last-child {
    margin-bottom: 0;
}

.alerte--succes {
    background: var(--c-sauge);
    border-color: var(--c-bocage);
}

.alerte--erreur {
    background: var(--c-erreur-pale);
    border-color: var(--c-erreur);
    color: var(--c-erreur);
    font-weight: 700;
}

.alerte--erreur ul {
    margin: var(--e-2) 0 0;
}

.alerte--erreur a {
    color: var(--c-erreur);
}

/* --- Texte long (pages légales) --- */

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

.prose h2 {
    font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem);
}

.prose h3 {
    font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.75rem);
}

.prose > * + h2,
.prose > * + h3 {
    margin-top: var(--e-7);
}

.prose li + li {
    margin-top: var(--e-1);
}

/* ========== 6. Utilitaires ========== */

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

/* ========== 7. Pages ========== */

/* --- Accueil : hero (texte à gauche, photo pleine hauteur à droite) --- */

.hero {
    display: grid;
    border-bottom: 1px solid var(--c-filet);
    /* 100cqw = largeur du hero, barre de défilement exclue (contrairement à 100vw sous Windows). */
    container-type: inline-size;
}

@media (min-width: 64rem) {
    .hero {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
        min-height: min(52rem, calc(100vh - 6rem));
    }
}

.hero__texte {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-block: var(--e-7);
    padding-inline: var(--gouttiere) var(--e-6);
}

@media (min-width: 120rem) {
    .hero__texte {
        padding-left: calc((100cqw - var(--largeur-max)) / 2 + var(--gouttiere));
    }
}

.hero h1 {
    margin-bottom: var(--e-6);
}

.hero__sous-titre {
    font-size: var(--t-2);
    color: var(--c-texte-doux);
    max-width: 46ch;
    margin-bottom: var(--e-6);
}

.hero__garanties {
    margin: var(--e-7) 0 0;
    padding-top: var(--e-5);
    border-top: 1px solid var(--c-filet);
}

.hero__visuel {
    position: relative;
    min-height: 32rem;
    background: var(--c-sauge);
}

.hero__visuel img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}


.hero__etiquette {
    position: absolute;
    top: var(--e-6);
    left: var(--e-6);
    display: flex;
    align-items: center;
    gap: var(--e-3);
    margin: 0;
    padding: var(--e-4) var(--e-5);
    background: var(--c-blanc);
    font-family: var(--f-titre);
    font-size: 1.05rem;
}

.hero__etiquette::before {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--c-bocage);
    box-shadow: 0 0 0 4px var(--c-sauge);
}

.hero__zone {
    position: absolute;
    right: var(--e-6);
    bottom: var(--e-6);
    display: grid;
    grid-template-columns: auto auto;
    align-items: center;
    gap: var(--e-1) var(--e-5);
    margin: 0;
    padding: var(--e-5) var(--e-6);
    background: var(--c-encre);
    color: var(--c-blanc);
}

.hero__zone-libelle {
    grid-column: 1 / -1;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--c-genet);
}

.hero__zone-distance {
    padding-right: var(--e-5);
    border-right: 1px solid var(--c-filet-sombre);
    font-family: var(--f-titre);
    font-weight: 700;
    font-size: 2.2rem;
    line-height: 1.1;
    color: var(--c-genet);
}

.hero__zone-lieu {
    font-size: 0.8rem;
    font-weight: 900;
    line-height: 1.3;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

@media (max-width: 30rem) {
    .hero__etiquette,
    .hero__zone {
        left: var(--e-4);
        right: var(--e-4);
    }

    .hero__etiquette {
        top: var(--e-4);
    }

    .hero__zone {
        bottom: var(--e-4);
    }
}

/* Illustration (SVG) : fond beige du dessin prolongé, dessin calé en bas sans recadrage */
.hero__visuel--illustration {
    background: #EBE6DD;
}

.hero__visuel--illustration img {
    object-fit: contain;
    object-position: center bottom;
}

/* Les encadrés restent dans le ciel du dessin, au-dessus des monuments */
.hero__visuel--illustration .hero__zone {
    top: calc(var(--e-6) + 4.5rem);
    bottom: auto;
    left: var(--e-6);
    right: auto;
}

@media (max-width: 64rem) {
    .hero__visuel--illustration {
        min-height: 40rem;
    }
}

@media (max-width: 30rem) {
    .hero__visuel--illustration .hero__zone {
        top: calc(var(--e-4) + 4.5rem);
        left: var(--e-4);
        right: var(--e-4);
    }
}

/* --- Accueil : manifeste --- */

.manifeste {
    display: grid;
    gap: var(--e-5) var(--e-7);
    align-items: start;
}

@media (min-width: 60rem) {
    .manifeste .sur-titre {
        margin-top: 0.9em;
    }
}

@media (min-width: 60rem) {
    .manifeste {
        grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
    }
}

.manifeste__texte {
    margin: 0;
    font-family: var(--f-titre);
    font-size: var(--t-manifeste);
    line-height: 1.3;
    letter-spacing: -0.02em;
    text-wrap: pretty;
}

/* --- Accueil : deux colonnes (façon de faire, qui sommes-nous, contact) --- */

.deux-colonnes {
    display: grid;
    gap: var(--e-7);
    align-items: start;
}

@media (min-width: 60rem) {
    .deux-colonnes {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
        gap: var(--e-8);
    }

    .deux-colonnes--centre {
        align-items: center;
    }
}

.section--sombre h2,
.section--verte h2 {
    color: var(--c-blanc);
}

.texte-doux {
    color: var(--c-texte-doux);
    font-size: var(--t-2);
}

.section--sombre .texte-doux {
    color: var(--c-texte-clair);
}

/* --- Accueil : qui sommes-nous --- */

.apropos__chapeau {
    font-family: var(--f-titre);
    font-size: clamp(1.2rem, 1rem + 0.6vw, 1.5rem);
    line-height: 1.5;
}

/* --- Accueil : ici et ailleurs (bandeau vert) --- */

.ici-ailleurs__texte {
    font-family: var(--f-titre);
    font-size: clamp(1.2rem, 1rem + 0.6vw, 1.5rem);
    line-height: 1.6;
}

/* --- Accueil et contact : coordonnées --- */

.contact-coordonnees {
    margin-top: var(--e-7);
    padding-top: var(--e-6);
    border-top: 1px solid var(--c-filet);
    display: grid;
    gap: var(--e-5);
}

.contact-coordonnees dl {
    margin: 0;
    display: grid;
    gap: var(--e-5);
}

.contact-coordonnees dt {
    font-size: 0.75rem;
    font-weight: 900;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--c-texte-doux);
}

.contact-coordonnees dd {
    margin: var(--e-1) 0 0;
    font-family: var(--f-titre);
    font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem);
    overflow-wrap: anywhere;
}

.contact-coordonnees dd a {
    color: var(--c-encre);
    text-decoration: none;
}

.contact-coordonnees dd a:hover {
    text-decoration: underline;
}

.contact-coordonnees p {
    margin: 0;
    font-size: var(--t-0);
    color: var(--c-texte-doux);
}

/* --- Connexion au back-office --- */

.page-connexion {
    background: var(--c-encre);
}

.connexion {
    flex: 1;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: var(--e-5);
    padding: var(--e-7) var(--gouttiere);
}

.connexion .logo {
    color: var(--c-blanc);
}

.connexion .logo__devise {
    color: var(--c-texte-clair);
}

.connexion__carte {
    width: 100%;
    max-width: 27rem;
    background: var(--c-porcelaine);
    padding: clamp(var(--e-5), 5vw, var(--e-7));
}

.connexion__titre {
    font-size: var(--t-3);
}

.connexion__carte .alerte {
    margin-bottom: var(--e-5);
}

.connexion__retour {
    color: var(--c-porcelaine);
}