/*
 * 🔒 12/08/2026 — LA FUITE QUI NE SE VOYAIT PAS DANS LE HTML.
 * La première ligne de ce fichier importait Open Sans depuis
 * `fonts.googleapis.com`. Une feuille de style de MÊME ORIGINE contactait donc
 * deux domaines tiers (googleapis, puis gstatic pour le fichier de police) sur
 * chaque page du site, pages légales comprises : retirer les balises du HTML
 * n'y aurait rien changé, et une preuve qui ne regarde que le HTML servi
 * l'aurait manquée.
 * La police n'était appliquée NULLE PART : aucune règle de ce fichier, ni
 * d'aucun autre, ne nomme « Open Sans » (le corps de page est en
 * Arial/Helvetica, les landings en pile système). Le retrait ne change donc le
 * rendu d'aucune page, ce qui est mesuré, et non supposé.
 */

*{
    padding:0;
    margin:0;
}

html{
    margin: 0;
    height: 100%;
    /*background-color: #eaf0f2;*/
}

/*
 * 🔴 12/08 au 24/08/2026 : LA PHOTOGRAPHIE DE CIMETIÈRE EST PARTIE D'ICI.
 *
 * Ce bloc portait `background: url("src/img/bg.jpg") center no-repeat` et
 * `background-size: cover`. Le fichier est le visuel du gabarit MLFloriKit :
 * une allée d'arbres avec des pierres tombales et un banc. C'était la première
 * chose que voyait quelqu'un venu créer un compte sur une application de
 * stationnement.
 *
 * MESURÉ AU NAVIGATEUR, ET NON DÉDUIT DE LA PRÉSENCE DE LA RÈGLE.
 * ⚠️ CE RELEVÉ A ÉTÉ REFAIT LE 24/08/2026, ET LE PREMIER ÉTAIT COURT D'UNE
 *    PAGE. Il annonçait « 8 routes » et sa propre énumération n'en listait que
 *    huit alors qu'elle disait « six pages publiques » pour cinq. La page qui
 *    manquait est la LANDING SEO, et c'est exactement celle qui manquait aussi
 *    à la liste de `BoilerplateAssetsTest`. Le même angle mort a produit un
 *    chiffre faux et un verrou contournable.
 *   · 10 routes servies sur 11 chargent cette feuille (toutes sauf l'accueil,
 *     qui pose `$PAGE_NO_TEMPLATE_CSS`).
 *   · 9 d'entre elles DEMANDAIENT réellement les 1 192 707 octets de la
 *     photographie, compté sur les requêtes réelles d'un Chromium : connexion,
 *     vérification de jeton, réglages, les cinq pages publiques
 *     (confidentialité, conditions, vente, ODbL, assistance) et la landing SEO.
 *   · sur les six dernières elle n'était même pas VISIBLE, `<main
 *     class="landing">` étant un blanc opaque pleine largeur posé par-dessus.
 *     On téléchargeait 1,19 Mo de photographie funéraire pour ne rien montrer,
 *     sur les pages mêmes qu'Apple, Google et les moteurs de recherche ouvrent.
 *   · seule la carte y échappait, et par accident : `map/map.css` réécrit le
 *     fond du `body`. Un accident n'est pas une garantie.
 *   · le retrait déplace EXACTEMENT 45 valeurs calculées, 5 par page sur les
 *     9 concernées, et toutes sur le même élément, le `body` :
 *     `background-color` (`rgba(0,0,0,0)` vers `rgb(246,245,251)`),
 *     `background-image` (l'URL vers `none`), `background-position`
 *     (`50% 50%` vers `0% 0%`), `background-repeat` (`no-repeat` vers
 *     `repeat`) et `background-size` (`cover` vers `auto`). Aucun autre
 *     élément d'aucune page ne bouge d'une seule propriété. Relevé versionné :
 *     `docs/story-11-4-styles-calcules-2026-08-24.json`.
 *
 * 🔒 POURQUOI LA RÈGLE EST SUPPRIMÉE ICI, ET NON NEUTRALISÉE AILLEURS.
 *    Deux autres voies existaient, et les deux sont moins bonnes :
 *      · la contrer depuis une feuille propre, avec des sélecteurs de type nus,
 *        est LITTÉRALEMENT la dette D9.6-1 : un pari sur l'ordre de cascade,
 *        que ce dépôt a déjà jugé et soldé,
 *      · étendre `$PAGE_NO_TEMPLATE_CSS` ne corrige que les pages qui posent le
 *        drapeau. Les huit autres garderaient la photographie, et surtout c'est
 *        FAIL-OPEN : une page ajoutée demain qui oublie le drapeau la
 *        récupérerait, en silence.
 *    La déclaration n'a qu'UN site, dans un fichier qui nous appartient. La
 *    supprimer retire la photographie des dix routes d'un coup, ne laisse plus
 *    rien à surspécifier, et vaut pour toute page à venir sans qu'elle ait à le
 *    demander. C'est le geste « supprimer la classe de défaut » de la 9.6,
 *    appliqué un cran plus haut : elle avait retiré la FEUILLE à une page, on
 *    retire la RÈGLE à tout le site.
 *
 * ⚠️ `overflow: hidden`, `height: 100%` et le `footer { position: fixed }`
 *    n'avaient pas été touchés par cette story (on ne réforme pas dans la même
 *    passe, leçon 9.6). Ils sont partis depuis, avec leur propre motif : voir
 *    le bloc « STORY 20.2, PASSE 4 » ci-dessous.
 *
 * ⚠️ `src/img/bg.jpg` N'EST PAS SUPPRIMÉ DU DISQUE. Sa provenance et sa licence
 *    sont INCONNUES, et un retrait qui casserait une page serait pire que la
 *    photographie. Il n'est plus référencé par aucune règle, mais il reste
 *    servi et téléchargeable : la décision de l'effacer revient à Mickaël.
 *
 * La couleur qui remplace la photographie est `#f6f5fb`, la valeur de
 * `--home-bg-soft` de la charte (`home/home.css`). Un blanc pur ferait
 * disparaître le bord de `#body_container`, qui vaut `rgba(255,255,255,0.867)`
 * et a été dessiné pour se poser sur un fond teinté : mesuré, pas supposé.
 */
/*
 * 🔒 STORY 20.2, PASSE 4 (26/09/2026, troisième contre-revue) : LES PAGES DE CE
 *    GABARIT SONT DES DOCUMENTS QUI DÉFILENT, PIED DE PAGE COMPRIS, À TOUTES
 *    LES LARGEURS.
 *
 * LE MODÈLE D'AVANT, ET POURQUOI IL NE POUVAIT PAS TENIR. Le corps était figé
 * (`height: 100%`, `overflow: hidden`), `#body_container` défilait à
 * l'intérieur (80 pour cent de la hauteur, 50 px de marge en haut, 20 px de
 * rembourrage) et le pied était FIXÉ en bas de la fenêtre. Le bas du cadre ne
 * restait donc hors du pied que si le pied était plus bas que ce qui restait
 * de la fenêtre, soit à peine plus de 80 px à 768 px de haut. Or la hauteur du
 * pied n'est déclarée nulle part : elle dépend du nombre de lignes que prennent
 * ses liens, donc de la langue, de la largeur et de la réserve à droite pour
 * le sélecteur de langue. Mesuré par la troisième contre-revue : la réserve de
 * la passe 3 le faisait monter de 80 à 106 px à 176 à 232 px, et il recouvrait
 * alors les boutons d'envoi de `/withdraw` et `/cancel`, « Supprimer mon
 * compte » et « Déconnexion » de `/settings`, entre 641 et 800 px de large (clic
 * réel intercepté par `footer.footer-distributed`). Et même sans réserve, un
 * sélecteur FIXÉ retombait sur les liens réglementés du pied à 600 px de haut
 * (`tests/e2e/footer-links-not-covered.mjs`, 488 échecs sur la mise en page de
 * la passe 3). Un élément fixe dont la hauteur varie ne peut pas être évité par
 * un calcul de marge.
 *
 * LE MODÈLE RETENU. Le corps défile comme un document, `#body_container` prend
 * la hauteur de son contenu, le pied est dans le flux après lui, et le
 * sélecteur de langue suit le pied dans le flux (bloc plus bas), exactement
 * comme sur l'accueil et les pages de contenu. Plus aucun élément fixe ne peut
 * recouvrir la page ni le pied, quelle que soit la hauteur de chacun.
 *
 * LA CARTE N'EST PAS CONCERNÉE, et ce n'est pas un hasard de cascade : elle
 * porte `class="page-fixed-viewport"` sur son corps (drapeau
 * `$PAGE_FIXED_VIEWPORT` de `map.php`, rendu par `templates/head.php`), et sa
 * feuille `map/map.css` pose elle-même son corps figé et masque le pied. Le
 * sélecteur de langue y reste fixé en bas à droite (story 9.12).
 */
body{
    margin: 0;
    font:14px/1.5 Arial, Helvetica, sans-serif;
    background: #f6f5fb;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: bold;
}

/* MAP */
#map_container {
    display: flex;
    flex-direction: column;
    margin: 50px 50px 0;
    height: 80%;
    border-radius: 10px;
}

#body_container {
    display: block;
    margin: 50px 50px 0;
    border-radius: 10px;
    background-color: #ffffffdd;
    padding: 10px;
    text-align: center;
    text-align: -moz-center;
    text-align: -webkit-center;
}

#list {
    background-color: rgba(177,255,168,0.85);
    height: 30%;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
    min-height: 200px;
}

/* Style pour le scroll horizontal des cards */
#list::-webkit-scrollbar {
    height: 6px;
}

#list::-webkit-scrollbar-track {
    background: rgba(255,255,255,0.1);
    border-radius: 3px;
}

#list::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.3);
    border-radius: 3px;
}

#list::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,0.5);
}

#parent_map {
    height: 70%;
    width: 100%;
    position: relative;
    flex-shrink: 1;
    min-height: 40%;
}

#map {
    width: 100%;
    height: 100%;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
}

@media (max-width:640px), (max-height:480px){
    #map_container {
        margin: 10px;
        height: 95%;
    }
    #parent_map {
        height: 65%;
    }
    #list {
        height: 35%;
        min-height: 180px;
    }
    #body_container {
        margin: 20px;
    }
}

/* FOOTER : dans le flux, en bas du document (passe 4 de la story 20.2, voir le
   bloc au-dessus de la règle `body`). */

.footer-distributed{
    background-color: #292c2f;
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
    box-sizing: border-box;
    width: 100%;
    text-align: left;
    font: normal 16px sans-serif;
    padding: 5px 40px;
    /* Le pied suit la page dans le flux (passe 4) : un espace le sépare du
       contenu, qui sinon le touchait (carte de connexion, cadre du compte). */
    margin-top: 30px;
    margin-bottom: 0;
}

@media (max-width:640px), (max-height:480px){
    .footer-distributed .footer-left, .footer-distributed .footer-right{
        text-align: center;
    }

    .footer-distributed .footer-right{
        float: none;
        margin: 0 auto 20px;
    }

    .footer-distributed .footer-left p.footer-links{
        line-height: 1.8;
    }
    
    /* Reduce padding on mobile to give more breathing room */
    .footer-distributed{
        padding: 10px 15px !important;
        margin-bottom: 0 !important;
        padding-bottom: calc(10px + env(safe-area-inset-bottom)) !important;
    }
    
    /* La zone du geste de retour des iPhone : le sélecteur de langue, dernier
       élément du document, ne doit pas y tomber. Les 80 px qui étaient posés
       ici réservaient la place d'un sélecteur FIXÉ, qui ne l'est plus. */
    body {
        padding-bottom: env(safe-area-inset-bottom);
    }
}

.footer-distributed .footer-left{
    margin-top: 10px;
}

.footer-distributed .footer-left p{
    color:  #8f9296;
    font-size: 14px;
    margin: 0;
}

/* Footer links */

.footer-distributed p.footer-links{
    font-size:14px;
    font-weight: bold;
    color:  #ffffff;
    margin: 0 0 10px;
    padding: 0;
}

.footer-distributed p.footer-links a{
    display:inline-block;
    line-height: 1.8;
    text-decoration: none;
    color:  inherit;
}

.footer-company-name, .footer-company-name * * {
    color: #8f9296 !important;
    font-size: 11px;
    font-weight: normal;
}

.footer-distributed .footer-right{
    float: right;
    margin-top: 6px;
    max-width: 180px;
}

.footer-distributed .footer-right a{
    display: inline-block;
    width: 35px;
    height: 35px;
    background-color:  #33383b;
    border-radius: 2px;

    font-size: 20px;
    color: #ffffff;
    text-align: center;
    line-height: 35px;

    margin-left: 3px;
}

/* 🔒 STORY 20.2, PASSE 4 : LE SÉLECTEUR DE LANGUE SUIT LE PIED DANS LE FLUX,
   sur toute page de ce gabarit sauf la carte (`page-fixed-viewport`). Même
   règle que `landings/landings.css` et que `main.home ~ .language-switcher-fixed`
   dans `home/home.css`, pour la même raison : un sélecteur FIXÉ en bas à droite
   retombe sur les derniers liens du pied une fois la page défilée jusqu'en bas
   (« Renoncer au contrat ici », « Résilier votre contrat », mesuré de 320 à
   1280 px de large). La passe 3 l'avait gardé fixe en réservant sa place à
   droite du pied, ce qui faisait monter le pied fixe par-dessus la page (voir
   le bloc au-dessus de la règle `body`). Vérifié par
   `tests/e2e/footer-links-not-covered.mjs`, à lancer à la main avant chaque
   déploiement qui touche ce fichier, `templates/footer.php` ou `head.php`. */
body:not(.page-fixed-viewport) footer.footer-distributed ~ .language-switcher-fixed {
    position: static;
    width: max-content;
    max-width: calc(100% - 32px);
    margin: 26px auto 34px;
    flex-wrap: wrap;
    justify-content: center;
}

.carte_svg {
    width: 85%;
    margin: 0 auto;
}
.carte_svg path {
    stroke: #000000;
    stroke-width: 1px;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-opacity: .25;
    fill: #86aae0;
}
.carte_svg g:hover path {
    fill: #86cce0;
}
.carte_svg g path:hover {
    fill: #86eee0;
}
.departement_fiche_card {
    transition: 0.3s ease-in-out;
}
.departement_fiche_card:hover {
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    transform: scale(1.02, 1.02);
}

/* Styles pour les cartes d'autres parcours */
.autre_parcours_card, .autre_parcours_card_mobile {
    transition: all 0.3s ease;
}

.autre_parcours_card:hover, .autre_parcours_card_mobile:hover {
    background-color: rgba(255,255,255,0.5) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* Styles pour le carrousel de photos */
#photoCarousel .carousel-control-prev,
#photoCarousel .carousel-control-next {
    background-color: rgba(0, 0, 0, 0.3);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);
    border: none;
}

#photoCarousel .carousel-control-prev {
    left: 15px;
}

#photoCarousel .carousel-control-next {
    right: 15px;
}

#photoCarousel .carousel-control-prev-icon,
#photoCarousel .carousel-control-next-icon {
    width: 20px;
    height: 20px;
    background-size: 100% 100%;
}

#photoCarousel .carousel-control-prev-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='m11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
}

#photoCarousel .carousel-control-next-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

#photoCarousel .carousel-indicators {
    bottom: 15px;
}

#photoCarousel .carousel-indicators button {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin: 0 5px;
    background-color: rgba(255, 255, 255, 0.6);
    border: 2px solid rgba(255, 255, 255, 0.8);
}

#photoCarousel .carousel-indicators button.active {
    background-color: rgba(255, 255, 255, 1);
}
/* Breadcrumb Navigation */
.pds-breadcrumb .breadcrumb {
    background: transparent;
    padding: 8px 15px;
    margin: 0;
    font-size: 13px;
}
.pds-breadcrumb .breadcrumb-item a {
    color: #27ae60;
}
.pds-breadcrumb .breadcrumb-item.active {
    color: #666;
}