@charset "UTF-8";

/* ===========================================================================
   AUTOFLOW — pages intérieures
   ---------------------------------------------------------------------------
   Prolonge style.css et réutilise ses jetons. Les sélecteurs déclarés ici
   n'existent que sur les pages secondaires : aucun conflit possible avec les
   blocs de l'accueil. Les adaptations mobiles sont déclarées en fin de fichier,
   après les règles de base, pour rester prévisibles.
   ======================================================================== */

/* --- Bandeau de tête ---------------------------------------------------- */

.page-tete {
    position: relative;
    padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(3rem, 6vw, 5rem);
    /*
     * `clip` et non `hidden` : les deux rognent le halo qui déborde, mais
     * `hidden` fait de la section un conteneur de défilement, et l'encart
     * collant s'accroche alors à cette section au lieu de suivre la page.
     * `clip` ne crée pas de conteneur de défilement. La première déclaration
     * sert de repli pour les Safari antérieurs à la version 16.
     */
    overflow: hidden;
    overflow: clip;
}
.page-tete--court { padding-bottom: clamp(2rem, 4vw, 3rem); }

.page-tete__fond {
    position: absolute;
    inset: -40% -20% auto;
    height: 40rem;
    background: radial-gradient(60% 60% at 30% 40%, color-mix(in srgb, var(--amethyste) 42%, transparent), transparent 70%);
    filter: blur(70px);
    pointer-events: none;
}

.page-tete .wrap { position: relative; }

.page-tete__titre {
    font-size: var(--t-3xl);
    font-weight: 800;
    margin-bottom: .4em;
}

.page-tete__promesse {
    font-size: var(--t-lg);
    color: var(--texte-doux);
    max-width: 40rem;
}

.page-tete__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: 2rem;
}

/* --- Fil d'Ariane ------------------------------------------------------- */

.fil { margin-bottom: 2rem; }

.fil__liste {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    font-family: var(--f-mono);
    font-size: var(--t-xs);
    color: var(--texte-doux);
}
.fil__item + .fil__item::before {
    content: "/";
    margin-right: .5rem;
    color: var(--trait-fort);
}
.fil__item a { text-decoration: none; }
.fil__item a:hover { color: var(--peri); }

/* --- Corps de texte ----------------------------------------------------- */

/*
 * Grille unique titre + encart.
 *
 * Le bandeau de tête et le texte courant partagent la colonne de gauche ;
 * l'encart occupe la colonne de droite dès la première ligne, donc à hauteur
 * du titre.
 *
 * Pas d'`align-items: start` ici : une zone de grille alignée en `start` se
 * réduit à la hauteur de son contenu, et l'encart collant n'aurait alors aucune
 * course. La colonne latérale doit s'étirer sur toute la hauteur ; c'est la
 * boîte `.encart` à l'intérieur qui colle.
 */
.duo {
    display: grid;
    grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr);
    gap: clamp(2rem, 4vw, 3.5rem);
}

.duo__principal,
.duo__cote { min-width: 0; }

.duo__principal .prose { margin-top: clamp(2.5rem, 5vw, 4rem); }

.page-tete--duo { padding-bottom: clamp(4rem, 8vw, 7rem); }

.prose { max-width: 42rem; }
.prose h2 { font-size: var(--t-xl); margin: 2.25em 0 .7em; }
.prose h2:first-child { margin-top: 0; }
.prose p { margin-bottom: 1.1em; }
.prose a { color: var(--peri); }

.prose__chapeau {
    font-size: var(--t-lg);
    color: var(--texte);
    margin-bottom: 1.5em;
}
.section--clair .prose__chapeau { color: var(--texte-inv); }
.section--clair .prose a { color: var(--amethyste); }

.liste-puces { display: grid; gap: .85rem; margin: 0 0 1.5em; }
.liste-puces li {
    position: relative;
    padding-left: 1.75rem;
    color: var(--texte-doux);
}
.liste-puces li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .6em;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--peri);
}
.liste-puces strong { color: var(--blanc); }
.section--clair .liste-puces li { color: var(--texte-inv-doux); }
.section--clair .liste-puces li::before { background: var(--amethyste); }
.section--clair .liste-puces strong { color: var(--texte-inv); }

.citation {
    margin: 2.5em 0 0;
    padding: 1.5rem 1.75rem;
    border-left: 3px solid var(--signal);
    background: color-mix(in srgb, var(--encre-2) 70%, transparent);
    border-radius: 0 var(--rayon) var(--rayon) 0;
    font-family: var(--f-display);
    font-size: var(--t-lg);
    font-weight: 500;
    color: var(--blanc);
    line-height: 1.4;
}

/* --- Encart latéral ----------------------------------------------------- */

.encart {
    position: sticky;
    top: 6.5rem;
    padding: clamp(1.35rem, 2.5vw, 1.85rem);
    background: color-mix(in srgb, var(--encre-2) 75%, transparent);
    border: 1px solid var(--trait);
    border-radius: var(--rayon-lg);
    font-size: var(--t-sm);
    color: var(--texte-doux);
}
.encart__titre {
    font-family: var(--f-mono);
    font-size: var(--t-xs);
    font-weight: 400;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--peri);
    margin-bottom: .9rem;
}
.encart__trait {
    border: 0;
    border-top: 1px solid var(--trait);
    margin: 1.5rem 0;
}
.encart__liens { display: grid; gap: .35rem; }
.encart__liens a {
    display: grid;
    gap: .05rem;
    padding: .6rem .7rem;
    margin-inline: -.7rem;
    border-radius: var(--rayon);
    text-decoration: none;
    transition: background-color .2s var(--ease);
}
.encart__liens a:hover { background: color-mix(in srgb, var(--peri) 12%, transparent); }
.encart__liens strong { display: block; color: var(--blanc); font-weight: 600; }
.encart__liens span {
    font-family: var(--f-mono);
    font-size: var(--t-xs);
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--peri);
}
.encart__puces { display: flex; flex-wrap: wrap; gap: .4rem; }
.encart__puces a {
    display: inline-block;
    padding: .3em .75em;
    border: 1px solid var(--trait);
    border-radius: 999px;
    text-decoration: none;
    font-size: var(--t-xs);
    transition: border-color .2s var(--ease), color .2s var(--ease);
}
.encart__puces a:hover { border-color: var(--peri); color: var(--blanc); }
.encart__note { margin-top: 1.25rem; }

/* --- Grille de services réutilisable ------------------------------------ */

.services-grille {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: clamp(1rem, 2vw, 1.5rem);
}

/* --- Maillage local ----------------------------------------------------- */

.section--maillage {
    background: var(--encre-2);
    border-top: 1px solid var(--trait);
    padding-block: clamp(3rem, 6vw, 5rem);
}
.maillage__titre { font-size: var(--t-xl); margin-bottom: .5em; }
.maillage__intro { color: var(--texte-doux); max-width: 38rem; margin-bottom: 2rem; }

.maillage {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 2rem;
}
.maillage__pays {
    font-family: var(--f-mono);
    font-size: var(--t-xs);
    font-weight: 400;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--peri);
    margin-bottom: .9rem;
}
.maillage__liste { display: flex; flex-wrap: wrap; gap: .4rem; }
.maillage__liste a {
    display: inline-block;
    padding: .35em .85em;
    border: 1px solid var(--trait);
    border-radius: 999px;
    font-size: var(--t-sm);
    color: var(--texte-doux);
    text-decoration: none;
    transition: border-color .2s var(--ease), color .2s var(--ease);
}
.maillage__liste a:hover { border-color: var(--peri); color: var(--blanc); }

/* --- Variantes sombres de blocs de l'accueil ---------------------------- */

.methode--sombre .etape { border-top-color: var(--trait); }
.methode--sombre .etape::before,
.methode--sombre .etape__duree { color: var(--peri); }
.methode--sombre .etape__texte { color: var(--texte-doux); }
.methode--large { grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); }
.methode--large .etape__titre { font-size: var(--t-xl); }

.carte-real--sombre {
    background: color-mix(in srgb, var(--encre-2) 72%, transparent);
    border-color: var(--trait);
}
.carte-real--sombre:hover { box-shadow: 0 26px 60px -32px rgb(0 0 0 / .9); }
.carte-real--sombre .carte-real__nom { color: var(--blanc); }
.carte-real--sombre .carte-real__nom a:hover { color: var(--peri); }
.carte-real--sombre .carte-real__secteur,
.carte-real--sombre .carte-real__accroche { color: var(--texte-doux); }
.carte-real--large { max-width: 44rem; }

/* --- Contact ------------------------------------------------------------ */

.contact-grille {
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: start;
}

.contact-direct { display: grid; gap: .75rem; }

.voie {
    display: grid;
    gap: .15rem;
    padding: 1.25rem 1.4rem;
    background: color-mix(in srgb, var(--encre-2) 75%, transparent);
    border: 1px solid var(--trait);
    border-radius: var(--rayon-lg);
    text-decoration: none;
    transition: border-color .25s var(--ease), transform .25s var(--ease);
}
a.voie:hover { border-color: var(--peri); transform: translateY(-2px); }

.voie--signal { border-color: color-mix(in srgb, var(--signal) 45%, transparent); }
a.voie--signal:hover { border-color: var(--signal); }
.voie--signal .voie__canal { color: var(--signal); }

.voie__canal {
    font-family: var(--f-mono);
    font-size: var(--t-xs);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--peri);
}
.voie__valeur {
    font-family: var(--f-display);
    font-size: var(--t-lg);
    font-weight: 700;
    color: var(--blanc);
    line-height: 1.25;
}
.voie__valeur--petit { font-size: var(--t-base); font-weight: 500; line-height: 1.5; }
.voie__note { font-size: var(--t-xs); color: var(--texte-doux); }

/* --- Formulaire --------------------------------------------------------- */

.contact-formulaire {
    padding: clamp(1.5rem, 3vw, 2.5rem);
    background: color-mix(in srgb, var(--encre-2) 82%, transparent);
    border: 1px solid var(--trait);
    border-radius: var(--rayon-lg);
}

.formulaire { display: grid; gap: 1.15rem; }
.champ-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 1.15rem; }

.champ { display: grid; gap: .4rem; }
.champ label {
    font-size: var(--t-sm);
    font-weight: 600;
    color: var(--texte);
}
.champ label span { color: var(--signal); }

.champ input,
.champ select,
.champ textarea {
    width: 100%;
    padding: .8em 1em;
    background: var(--encre);
    border: 1px solid var(--trait);
    border-radius: var(--rayon);
    color: var(--blanc);
    font-family: var(--f-texte);
    font-size: var(--t-base);
    transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.champ textarea { resize: vertical; min-height: 8rem; line-height: 1.6; }
.champ input::placeholder,
.champ textarea::placeholder { color: color-mix(in srgb, var(--texte-doux) 75%, transparent); }
.champ input:focus,
.champ select:focus,
.champ textarea:focus {
    border-color: var(--peri);
    background: var(--encre-2);
}
.champ select { appearance: none; cursor: pointer; }

.champ--erreur input,
.champ--erreur select,
.champ--erreur textarea { border-color: var(--signal); }
.champ--erreur label { color: var(--signal); }

.champ-case {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .75rem;
    align-items: start;
    font-size: var(--t-sm);
    color: var(--texte-doux);
    line-height: 1.5;
}
.champ-case input {
    width: 1.15rem;
    height: 1.15rem;
    margin-top: .2rem;
    accent-color: var(--signal);
    cursor: pointer;
}
.champ-case a { color: var(--peri); }
.champ-case.champ--erreur { color: var(--signal); }

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

.piege {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
}

.message {
    padding: 1.15rem 1.35rem;
    border-radius: var(--rayon);
    margin-bottom: 1.5rem;
    font-size: var(--t-sm);
}
.message--succes {
    background: color-mix(in srgb, var(--peri) 14%, transparent);
    border: 1px solid var(--trait-fort);
    margin-bottom: 0;
}
.message--succes .message__titre { font-size: var(--t-xl); margin-bottom: .5em; }
.message--alerte {
    background: color-mix(in srgb, var(--signal) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--signal) 45%, transparent);
    color: var(--blanc);
}

/* --- Adaptations -------------------------------------------------------- */

@media (max-width: 62rem) {
    .duo,
    .contact-grille { grid-template-columns: 1fr; }
    /* Une seule colonne : l'encart passe sous le texte et ne colle plus. */
    .encart { position: static; }
    .duo__cote { margin-top: clamp(2rem, 5vw, 3rem); }
}

@media (max-width: 34rem) {
    .champ-duo { grid-template-columns: 1fr; }
    .page-tete__actions .bouton { width: 100%; }
}