/* =========================================================================
   Minisites AC Environnement
   Charte Graphique AC Environnement, septembre 2024.

   Palette principale : Bleu Indigo #0B1F8F, Vert Pomme #7FBD00,
   Gris Charbon #3B4544, Blanc.
   Palette secondaire (rubriques et elements cles, jamais du texte courant) :
   Rouge Brique, Bleu Royal, Violet, Tangerine.
   Tangerine sert de couleur d'action, comme sur les anciens minisites ou le
   bouton "Devis immediat" etait orange.

   Typographie : Asap Condensed Black (900) pour les titres, Asap Bold pour
   les sous-titres, Asap pour le corps. Repli Arial puis Verdana.
   ========================================================================= */

@font-face { font-family: 'Asap'; src: url('/fonts/asap.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Asap Condensed'; src: url('/fonts/asap-condensed-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Asap Condensed'; src: url('/fonts/asap-condensed-700.woff2') format('woff2'); font-weight: 600 700; font-display: swap; }
@font-face { font-family: 'Asap Condensed'; src: url('/fonts/asap-condensed-800.woff2') format('woff2'); font-weight: 800; font-display: swap; }
@font-face { font-family: 'Asap Condensed'; src: url('/fonts/asap-condensed-900.woff2') format('woff2'); font-weight: 900; font-display: swap; }

:root {
    /* --- palette principale --------------------------------------------- */
    --bleu: #0B1F8F;
    --vert: #7FBD00;
    --gris-fonce: #3B4544;
    --blanc: #fff;

    /* --- palette secondaire --------------------------------------------- */
    --orange: #FF8300;
    --rouge-brique: #CC2A30;
    --bleu-royal: #4575E0;
    --violet: #A242C7;

    /* --- declinaisons de travail ---------------------------------------- */
    --bleu-nuit: #081766;
    --orange-fonce: #E06F00;
    --vert-fonce: #6BA000;
    --texte: #333c3b;
    --texte-doux: #6d7877;
    --fond: #f4f7f9;
    --fond-doux: #fbfcfd;
    --bordure: #e4e9ee;

    --r: 16px;
    --r-s: 10px;
    --r-xs: 6px;
    --ombre-1: 0 1px 2px rgba(11, 31, 143, .05), 0 4px 14px rgba(11, 31, 143, .06);
    --ombre-2: 0 2px 6px rgba(11, 31, 143, .07), 0 18px 40px rgba(11, 31, 143, .12);
    --ombre-3: 0 30px 70px rgba(8, 23, 102, .28);
    --largeur: 1220px;
    --titre: 'Asap Condensed', 'Arial Narrow', Arial, Verdana, sans-serif;
    --corps: 'Asap', Arial, Verdana, system-ui, sans-serif;
    --transition: .22s cubic-bezier(.4, 0, .2, 1);
}

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

body {
    margin: 0;
    font-family: var(--corps);
    font-size: 16.5px;
    line-height: 1.7;
    color: var(--texte);
    background: var(--blanc);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--titre); font-weight: 900; line-height: 1.1; color: var(--gris-fonce); margin: 0 0 .5em; letter-spacing: -.01em; }
h1 { font-size: clamp(2.1rem, 4.6vw, 3.5rem); }
h2 { font-size: clamp(1.7rem, 3vw, 2.5rem); }
h3 { font-size: 1.35rem; }
h4 { font-size: 1.05rem; }

a { color: var(--bleu); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--orange); }
img { max-width: 100%; height: auto; }

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

/* Intitule de section, en orange : le petit accent qui rythme la page. */
.surtitre {
    display: inline-flex; align-items: center; gap: 9px;
    font-family: var(--titre); font-weight: 700; font-size: .82rem;
    letter-spacing: .16em; text-transform: uppercase; color: var(--orange);
    margin-bottom: 12px;
}
.surtitre::before { content: ''; width: 26px; height: 3px; border-radius: 2px; background: var(--orange); }

/* ====================================================== barre de service */
.barre-service { background: var(--gris-fonce); color: rgba(255, 255, 255, .82); font-size: .85rem; line-height: 1; }
.barre-service .conteneur { display: flex; align-items: center; gap: 18px; min-height: 42px; flex-wrap: wrap; }
.barre-service a { color: rgba(255, 255, 255, .82); }
.barre-service a:hover { color: var(--blanc); }
.barre-service .pousse { margin-left: auto; }
.bs-item { display: inline-flex; align-items: center; gap: 7px; }
.bs-item svg { width: 15px; height: 15px; flex: 0 0 15px; stroke: var(--vert); }
.bs-tel { font-family: var(--titre); font-weight: 800; font-size: 1.06rem; color: var(--blanc) !important; }
@media (max-width: 900px) { .barre-service .masq { display: none; } }

/* ================================================================ entete */
.entete {
    position: sticky; top: 0; z-index: 100;
    background: rgba(255, 255, 255, .96);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--bordure);
}
.entete-inner { display: flex; align-items: center; gap: 18px; min-height: 78px; }
.logo { display: flex; align-items: center; flex-shrink: 0; }

/* Rappel « Nos actus » : pendu sous l en-tete, a droite, a moitie sur la photo.
   Meme facture que les boutons du menu (police, rayon, taille). Degrade du
   Bleu Indigo vers un bleu plus vif, pictogramme en Vert Pomme. Le bleu clair
   s arrete a #3D63D8 (blanc a 5,3:1) : au-dela, le texte passerait sous 4,5:1.
   Au survol, le degrade glisse et la lumiere passe de droite a gauche. */
.actus-ancre {
    position: absolute; left: 0; right: 0; bottom: 0; height: 0;
    display: flex; justify-content: flex-end; align-items: flex-start; pointer-events: none;
}
.actus-onglet {
    --actus-x: 0px; --actus-y: -25%;
    pointer-events: auto; transform: translate(var(--actus-x), var(--actus-y));
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 18px; border-radius: var(--r-xs);
    background: linear-gradient(110deg, var(--bleu-nuit) 0%, #3D63D8 50%, var(--bleu-nuit) 100%);
    background-size: 200% 100%; background-position: 0% 50%;
    color: var(--blanc); border: 1px solid rgba(255, 255, 255, .22);
    font-family: var(--titre); font-weight: 800; font-size: .92rem; white-space: nowrap;
    box-shadow: 0 6px 20px rgba(11, 31, 143, .38), inset 0 1px 0 rgba(255, 255, 255, .18);
    transition: transform var(--transition), box-shadow var(--transition), background-position .5s ease;
}
.actus-onglet svg { width: 17px; height: 17px; flex: 0 0 17px; stroke: var(--vert); }
.actus-onglet:hover {
    color: var(--blanc); background-position: 100% 50%;
    transform: translate(var(--actus-x), calc(var(--actus-y) - 2px));
    box-shadow: 0 10px 26px rgba(11, 31, 143, .48), inset 0 1px 0 rgba(255, 255, 255, .18);
}
/* Sous le bouton Devis, l onglet descend assez pour ne pas le toucher. Sur un
   ecran large, il passe a sa droite, dans la marge, centre sur la ligne. */
@media (max-width: 1240px) { .actus-onglet { --actus-y: -15%; } }
@media (min-width: 1540px) { .actus-onglet { --actus-x: calc(100% + 16px); --actus-y: -50%; } }
.burger-etat:checked ~ .actus-ancre { display: none; }
@media (max-width: 640px) { .actus-onglet { padding: 8px 14px; font-size: .86rem; } }
.logo img { height: 32px; width: auto; display: block; }
.pied .logo img { height: 32px; }

.nav { margin-left: auto; display: flex; align-items: center; gap: 4px; }

/* --- menu deroulant ------------------------------------------------------ */
.rubrique { position: relative; }
.rubrique > .rub-titre {
    display: flex; align-items: center; gap: 7px;
    font-family: var(--titre); font-weight: 800; font-size: 1.06rem;
    color: var(--gris-fonce); padding: 10px 9px; border-radius: var(--r-s);
    cursor: pointer; white-space: nowrap; background: none; border: 0;
    transition: background var(--transition), color var(--transition);
}
.rubrique > .rub-titre::after {
    content: ''; width: 6px; height: 6px; margin-top: -3px;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: rotate(45deg); opacity: .5; transition: transform var(--transition), margin var(--transition);
}
.rubrique > .rub-titre.sans-fleche::after { display: none; }
.rubrique:hover > .rub-titre, .rubrique:focus-within > .rub-titre { background: var(--fond); color: var(--bleu); }
.rubrique:hover > .rub-titre::after { transform: rotate(225deg); margin-top: 2px; }

.sous-menu {
    position: absolute; top: calc(100% + 12px); left: 50%;
    transform: translateX(-50%) translateY(-8px);
    min-width: 340px; padding: 10px; margin: 0; list-style: none;
    background: var(--blanc); border: 1px solid var(--bordure); border-radius: var(--r);
    box-shadow: var(--ombre-2);
    opacity: 0; visibility: hidden; transition: all var(--transition); z-index: 120;
}
.sous-menu::before {
    content: ''; position: absolute; top: -7px; left: 50%; margin-left: -6px;
    width: 12px; height: 12px; background: var(--blanc);
    border-left: 1px solid var(--bordure); border-top: 1px solid var(--bordure);
    transform: rotate(45deg);
}
.rubrique:hover .sous-menu, .rubrique:focus-within .sous-menu {
    opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
.sous-menu a {
    display: block; padding: 9px 14px; border-radius: var(--r-s);
    color: var(--texte); font-size: .98rem; font-weight: 500; line-height: 1.45;
    transition: background var(--transition), color var(--transition), padding var(--transition);
}
.sous-menu a:hover { background: var(--fond); color: var(--bleu); padding-left: 19px; }
/* Les dernieres rubriques deborderaient a droite : on les ancre a droite. */
.nav > .rubrique:nth-last-child(-n+3) .sous-menu { left: auto; right: 0; transform: translateX(0) translateY(-8px); }
.nav > .rubrique:nth-last-child(-n+3) .sous-menu::before { left: auto; right: 26px; }
.nav > .rubrique:nth-last-child(-n+3):hover .sous-menu { transform: translateX(0) translateY(0); }

@media (max-width: 1240px) { .nav .rubrique { display: none; } }

/* --- menu mobile (sans JavaScript) --------------------------------------- */
.burger-etat { position: absolute; opacity: 0; pointer-events: none; }
.burger {
    display: none; width: 46px; height: 46px; margin-left: 6px; cursor: pointer;
    border: 1px solid var(--bordure); border-radius: var(--r-s);
    flex-direction: column; align-items: center; justify-content: center; gap: 5px;
    background: var(--blanc); flex-shrink: 0;
}
.burger span { display: block; width: 20px; height: 2px; border-radius: 2px; background: var(--gris-fonce); transition: transform var(--transition), opacity var(--transition); }
.burger-etat:checked ~ .conteneur .burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger-etat:checked ~ .conteneur .burger span:nth-child(2) { opacity: 0; }
.burger-etat:checked ~ .conteneur .burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.menu-mobile {
    display: none; background: var(--blanc); border-top: 1px solid var(--bordure);
    max-height: calc(100vh - 120px); overflow-y: auto; padding: 22px 0 28px;
    box-shadow: var(--ombre-2);
}
.burger-etat:checked ~ .menu-mobile { display: block; }
.mm-bloc + .mm-bloc { margin-top: 20px; }
.mm-titre { font-family: var(--titre); font-weight: 900; font-size: .82rem; letter-spacing: .13em; text-transform: uppercase; color: var(--orange); margin-bottom: 6px; }
.mm-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 26px; }

@media (max-width: 1240px) {
    .burger { display: flex; }
    .nav { margin-left: auto; }
}

/* ============================================================== boutons */
.bouton {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    font-family: var(--titre); font-weight: 800; font-size: 1rem;
    padding: 13px 26px; border: 2px solid transparent; border-radius: var(--r-s);
    cursor: pointer; text-align: center; white-space: nowrap;
    background: var(--orange); color: var(--blanc);
    box-shadow: 0 4px 14px rgba(255, 131, 0, .32);
    transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
}
.bouton:hover { background: var(--orange-fonce); color: var(--blanc); transform: translateY(-2px); box-shadow: 0 8px 22px rgba(255, 131, 0, .42); }
.bouton:active { transform: translateY(0); }
.bouton svg { width: 18px; height: 18px; flex: 0 0 18px; }

.bouton-bleu { background: var(--bleu); box-shadow: 0 4px 14px rgba(11, 31, 143, .28); }
.bouton-bleu:hover { background: var(--bleu-nuit); box-shadow: 0 8px 22px rgba(11, 31, 143, .38); }
.bouton-vert { background: var(--vert); box-shadow: 0 4px 14px rgba(127, 189, 0, .3); }
.bouton-vert:hover { background: var(--vert-fonce); box-shadow: 0 8px 22px rgba(127, 189, 0, .4); }
.bouton-contour { background: transparent; color: var(--bleu); border-color: var(--bordure); box-shadow: none; }
.bouton-contour:hover { background: var(--fond); color: var(--bleu); border-color: var(--bleu); box-shadow: none; }
.bouton-blanc { background: rgba(255, 255, 255, .14); color: var(--blanc); border-color: rgba(255, 255, 255, .45); box-shadow: none; }
.bouton-blanc:hover { background: var(--blanc); color: var(--bleu); border-color: var(--blanc); box-shadow: none; }
.bouton-s { padding: 9px 17px; font-size: .92rem; border-radius: var(--r-xs); }
.bouton-l { padding: 16px 34px; font-size: 1.12rem; }
.bouton-plein { width: 100%; }

/* ================================================================== hero */
.hero { position: relative; color: var(--blanc); isolation: isolate; overflow: hidden; }
.hero-image { position: absolute; inset: 0; z-index: -2; }
.hero-image img { width: 100%; height: 100%; object-fit: cover; }
.hero::before {
    content: ''; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(105deg,
        rgba(8, 23, 102, .96) 0%,
        rgba(11, 31, 143, .88) 38%,
        rgba(59, 69, 68, .58) 72%,
        rgba(59, 69, 68, .30) 100%);
}
.hero::after {
    /* Filigrane : l'icone seule, en transparence, coupee au bord, a droite,
       hors du bloc de texte - les deux regles de la charte. */
    content: ''; position: absolute; right: -80px; bottom: -110px; z-index: -1;
    width: 420px; height: 420px; pointer-events: none;
    background: url('/medias/marque/ACE_Icone_Blanc.png') no-repeat center / contain;
    opacity: .09;
}
.hero .conteneur { position: relative; padding-top: 74px; padding-bottom: 80px; }
.hero-accueil .conteneur { padding-top: 104px; padding-bottom: 114px; }
.hero-texte { max-width: 660px; }
.hero h1 { color: var(--blanc); text-shadow: 0 2px 24px rgba(8, 23, 102, .3); }
.hero-accroche { font-size: 1.18rem; color: rgba(255, 255, 255, .92); margin: 0 0 30px; max-width: 56ch; }
.hero-actions { display: flex; gap: 13px; flex-wrap: wrap; }

.fil { font-size: .88rem; color: rgba(255, 255, 255, .72); margin-bottom: 16px; display: flex; gap: 9px; flex-wrap: wrap; align-items: center; }
.fil a { color: rgba(255, 255, 255, .9); }
.fil a:hover { color: var(--blanc); }
.fil i { font-style: normal; opacity: .5; }

.gages { display: flex; gap: 28px; flex-wrap: wrap; margin-top: 36px; }
.gage { display: flex; align-items: center; gap: 11px; font-size: .93rem; color: rgba(255, 255, 255, .92); }
.gage-ico { width: 36px; height: 36px; flex: 0 0 36px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .16); }
.gage-ico svg { width: 18px; height: 18px; stroke: var(--vert); }

/* ============================================================== sections */
.section { padding: 78px 0; }
.section-claire { background: var(--fond); }
.section-serree { padding: 54px 0; }
.section-entete { max-width: 720px; margin-bottom: 42px; }
.section-entete.centre { margin-left: auto; margin-right: auto; text-align: center; }
.section-entete.centre .surtitre { justify-content: center; }
.section-entete p { color: var(--texte-doux); font-size: 1.06rem; margin: 0; }

/* --- cartes de rubrique avec visuel ------------------------------------- */
.cartes { display: grid; grid-template-columns: repeat(auto-fit, minmax(262px, 1fr)); gap: 26px; }
.carte {
    background: var(--blanc); border: 1px solid var(--bordure); border-radius: var(--r);
    overflow: hidden; box-shadow: var(--ombre-1); display: flex; flex-direction: column;
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.carte:hover { transform: translateY(-6px); box-shadow: var(--ombre-2); border-color: transparent; }
.carte-visuel { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--fond); }
.carte-visuel img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.4, 0, .2, 1); }
.carte:hover .carte-visuel img { transform: scale(1.06); }
.carte-visuel::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(8, 23, 102, .5), transparent 55%); }
.carte-corps { padding: 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.carte-corps h3 { margin: 0; font-size: 1.16rem; }
.carte-corps p { margin: 0; color: var(--texte-doux); font-size: .95rem; }
.carte-lien { display: block; color: inherit; }
.carte-lien:hover { color: inherit; }
.carte-fleche { display: inline-flex; align-items: center; gap: 7px; font-family: var(--titre); font-weight: 700; color: var(--orange); font-size: .95rem; margin-top: auto; padding-top: 6px; }
.carte-fleche::after { content: '\2192'; transition: transform var(--transition); }
.carte:hover .carte-fleche::after { transform: translateX(5px); }

.carte-liens { list-style: none; margin: 6px 0 0; padding: 0; }
.carte-liens li { border-top: 1px solid var(--bordure); }
.carte-liens a { display: flex; align-items: center; gap: 9px; padding: 9px 0; font-size: .92rem; color: var(--texte); }
.carte-liens a::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--vert); flex: 0 0 5px; transition: transform var(--transition), background var(--transition); }
.carte-liens a:hover { color: var(--bleu); }
.carte-liens a:hover::before { transform: scale(1.8); background: var(--orange); }

/* --- chiffres ------------------------------------------------------------ */
.chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(172px, 1fr)); gap: 20px; }
.chiffre { text-align: center; padding: 28px 18px; background: var(--blanc); border-radius: var(--r); border: 1px solid var(--bordure); transition: transform var(--transition), box-shadow var(--transition); }
.chiffre:hover { transform: translateY(-4px); box-shadow: var(--ombre-1); }
.chiffre-valeur { font-family: var(--titre); font-weight: 900; font-size: 2.5rem; color: var(--bleu); line-height: 1; }
.chiffre-libelle { font-size: .9rem; color: var(--texte-doux); margin-top: 8px; }
.chiffre:nth-child(2) .chiffre-valeur { color: var(--vert); }
.chiffre:nth-child(3) .chiffre-valeur { color: var(--orange); }
.chiffre:nth-child(4) .chiffre-valeur { color: var(--bleu-royal); }

/* --- bandeau d'appel a l'action ------------------------------------------ */
.appel {
    position: relative; overflow: hidden; border-radius: var(--r);
    background: linear-gradient(115deg, var(--bleu-nuit), var(--bleu) 58%, #1a35b8);
    color: var(--blanc); padding: 48px; display: flex; align-items: center;
    justify-content: space-between; gap: 34px; flex-wrap: wrap;
    box-shadow: var(--ombre-3);
}
.appel::after {
    content: ''; position: absolute; right: -60px; top: -80px; width: 330px; height: 330px;
    background: url('/medias/marque/ACE_Icone_Blanc.png') no-repeat center / contain; opacity: .1;
}
.appel h2 { color: var(--blanc); margin: 0 0 8px; }
.appel p { margin: 0; color: rgba(255, 255, 255, .88); max-width: 54ch; }
.appel-texte, .appel-actions { position: relative; }
.appel-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* ================================================================ article */
.grille { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 52px; align-items: start; }
/* Un element de grille prend par defaut la largeur de son contenu : sans cette
   ligne, un tableau large repousse la colonne et c'est la page entiere qui
   defile lateralement. */
.grille > * { min-width: 0; }
@media (max-width: 980px) { .grille { grid-template-columns: 1fr; gap: 36px; } }

.article { font-size: 1.04rem; }
.article > :first-child { margin-top: 0; }
.article :is(h2, h3) { margin-top: 1.8em; }
.article h2 { display: block; padding: 0; border: 0; margin-top: 2.1em; }
.article h2::after {
    content: ''; display: block; width: 58px; height: 4px; border-radius: 2px;
    background: linear-gradient(90deg, var(--vert), var(--orange)); margin-top: 14px;
}
.article h3 { color: var(--bleu); margin-top: 1.9em; }
.article p { margin: 0 0 1.1em; }
.article ul, .article ol { margin: 0 0 1.3em; padding-left: 0; list-style: none; }
.article ol { counter-reset: n; }
.article li { position: relative; padding-left: 30px; margin-bottom: .55em; }
.article ul > li::before { content: ''; position: absolute; left: 4px; top: .62em; width: 8px; height: 8px; border-radius: 50%; background: var(--vert); }
.article ol > li::before {
    counter-increment: n; content: counter(n);
    position: absolute; left: 0; top: .12em;
    width: 21px; height: 21px; border-radius: 50%; background: var(--bleu); color: #fff;
    font-family: var(--titre); font-weight: 800; font-size: .78rem; display: grid; place-items: center;
}
.article img { border-radius: var(--r-s); box-shadow: var(--ombre-1); margin: .4em 0; }
.article a { font-weight: 600; border-bottom: 2px solid rgba(255, 131, 0, .3); }
.article a:hover { border-bottom-color: var(--orange); }

/* Un bouton dans le corps de page : ni soulignement de lien, ni gras herite.
   L'ancien site posait la une image PNG « Demandez un devis » ; c'est
   maintenant un vrai bouton, qui reste net a tout zoom et se lit a la voix. */
.article a.bouton { border-bottom: 0; color: var(--blanc); }
.article a.bouton-contour { color: var(--bleu); }

.bloc-bouton { text-align: center; margin: 28px 0; }
.article table { width: 100%; border-collapse: collapse; margin: 1.5em 0; font-size: .96rem; }
.article :is(th, td) { border: 1px solid var(--bordure); padding: 11px 14px; text-align: left; }
.article th { background: var(--fond); font-family: var(--titre); font-weight: 800; }
.article iframe { max-width: 100%; border-radius: var(--r-s); }
.tableau-defilant { overflow-x: auto; }

/* ================================================================ encarts */
.encart { background: var(--blanc); border: 1px solid var(--bordure); border-radius: var(--r); padding: 24px; margin-bottom: 22px; box-shadow: var(--ombre-1); }
.encart-titre { font-family: var(--titre); font-weight: 800; font-size: .84rem; letter-spacing: .14em; text-transform: uppercase; color: var(--orange); margin: 0 0 16px; }

.responsable { text-align: center; }
.responsable-photo { position: relative; width: 116px; margin: 0 auto 14px; }
.responsable-photo img { width: 116px; height: 116px; border-radius: 50%; object-fit: cover; border: 4px solid var(--blanc); box-shadow: var(--ombre-2); display: block; }
.responsable-photo::after { content: ''; position: absolute; right: 5px; bottom: 5px; width: 20px; height: 20px; border-radius: 50%; background: var(--vert); border: 3px solid var(--blanc); }
.responsable-nom { font-family: var(--titre); font-weight: 900; font-size: 1.35rem; color: var(--gris-fonce); line-height: 1.2; }
.responsable-role { font-size: .89rem; color: var(--texte-doux); margin-bottom: 12px; }
.responsable-tel { display: flex; align-items: center; justify-content: center; gap: 9px; font-family: var(--titre); font-weight: 900; font-size: 1.5rem; color: var(--bleu); margin: 12px 0 16px; }
.responsable-tel:hover { color: var(--orange); }
.responsable-tel svg { width: 20px; height: 20px; stroke: var(--vert); }

.liste-liens { list-style: none; margin: 0; padding: 0; }
.liste-liens li + li { border-top: 1px solid var(--bordure); }
.liste-liens a { display: flex; align-items: center; gap: 9px; padding: 10px 0; color: var(--texte); font-size: .95rem; }
.liste-liens a::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--vert); flex: 0 0 5px; transition: transform var(--transition), background var(--transition); }
.liste-liens a:hover { color: var(--bleu); }
.liste-liens a:hover::before { background: var(--orange); transform: scale(1.8); }
.liste-liens a.actif { color: var(--bleu); font-weight: 700; }
.liste-liens a.actif::before { background: var(--orange); transform: scale(1.6); }

.puces-villes { display: flex; flex-wrap: wrap; gap: 8px; }
.puce { background: var(--fond); border: 1px solid var(--bordure); border-radius: 100px; padding: 5px 14px; font-size: .85rem; color: var(--texte); transition: all var(--transition); }
.puce:hover { background: var(--vert); color: var(--blanc); border-color: var(--vert); transform: translateY(-2px); }

/* ================================================================= tarifs */
.tarifs { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .96rem; background: var(--blanc); border-radius: var(--r); overflow: hidden; box-shadow: var(--ombre-1); }
.tarifs :is(th, td) { padding: 13px 16px; text-align: center; border-bottom: 1px solid var(--bordure); }
.tarifs thead th { font-family: var(--titre); font-weight: 800; background: var(--bleu); color: var(--blanc); border-bottom: 0; }
.tarifs thead th small { display: block; font-weight: 400; font-size: .72rem; opacity: .78; font-family: var(--corps); }
.tarifs td:first-child, .tarifs th:first-child { text-align: left; font-weight: 700; }
.tarifs tbody tr:nth-child(even) { background: var(--fond-doux); }
.tarifs tbody tr:hover { background: #f1f7e7; }
.tarifs tbody tr:last-child td { border-bottom: 0; }
.tarifs .prix { font-family: var(--titre); font-weight: 800; color: var(--bleu); font-size: 1.04rem; }

/* ============================================================ formulaires */
.panneau { background: var(--blanc); border: 1px solid var(--bordure); border-radius: var(--r); padding: 30px; box-shadow: var(--ombre-1); margin-bottom: 22px; }
.champ { margin-bottom: 18px; }
.champ label { display: block; font-family: var(--titre); font-weight: 700; margin-bottom: 6px; color: var(--gris-fonce); font-size: .96rem; }
.champ :is(input, select, textarea) {
    width: 100%; padding: 12px 15px; border: 1.5px solid var(--bordure); border-radius: var(--r-s);
    font-family: var(--corps); font-size: 1rem; background: var(--blanc); color: var(--texte);
    transition: border-color var(--transition), box-shadow var(--transition);
}
.champ :is(input, select, textarea):focus { outline: 0; border-color: var(--vert); box-shadow: 0 0 0 4px rgba(127, 189, 0, .15); }
.champs-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 640px) { .champs-2 { grid-template-columns: 1fr; } }

.choix-diagnostic { display: flex; align-items: center; gap: 10px; padding: 12px 15px; border: 1.5px solid var(--bordure); border-radius: var(--r-s); cursor: pointer; font-size: .95rem; transition: all var(--transition); }
.choix-diagnostic:hover { border-color: var(--vert); }
.choix-diagnostic input { width: auto; accent-color: var(--vert); }

.message { padding: 15px 19px; border-radius: var(--r-s); margin-bottom: 20px; font-size: .96rem; border-left: 4px solid; }
.message-ok { background: #f2f9e6; border-color: var(--vert); color: #4d7600; }
.message-ko { background: #fdeced; border-color: var(--rouge-brique); color: #9c2026; }

.resultat-devis { background: linear-gradient(125deg, var(--bleu-nuit), var(--bleu)); color: var(--blanc); border-radius: var(--r); padding: 32px; margin-top: 24px; box-shadow: var(--ombre-3); }
.resultat-devis h3 { color: var(--blanc); }
.resultat-total { font-family: var(--titre); font-weight: 900; font-size: 3rem; color: var(--vert); line-height: 1.05; margin: 6px 0 10px; }
.detail-devis { list-style: none; margin: 0 0 18px; padding: 0; }
.detail-devis li { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid rgba(255, 255, 255, .15); }
.detail-devis li:last-child { border-bottom: 0; }

/* ============================================================ pied de page */
/* Le fond et l'encre du pied sont reglables a /admin/pied : les regles qui
   suivent passent toutes par ces deux variables, de sorte qu'un seul style
   pose sur <footer> suffise a changer l'ensemble. L'encre n'est pas choisie
   a la main, elle se deduit du fond (voir PiedDePage.Encre). */
.pied { --pied-fond: var(--gris-fonce); --pied-encre: 255, 255, 255;
        background: var(--pied-fond); color: rgba(var(--pied-encre), .76); padding: 60px 0 24px; }
.pied-accroche { max-width: 58ch; margin: 1.1em 0 0; font-size: .95rem; opacity: .8; }
.pied a { color: rgba(var(--pied-encre), .76); }
.pied a:hover { color: var(--vert); }
.pied h4 { color: rgb(var(--pied-encre)); font-size: .86rem; letter-spacing: .13em; text-transform: uppercase; margin-bottom: 1.1em; font-weight: 800; }
.pied-grille { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 40px; }
@media (max-width: 900px) { .pied-grille { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 32px; } }
.pied .liste-liens li + li { border-top-color: rgba(var(--pied-encre), .1); }
.pied .liste-liens a { color: rgba(var(--pied-encre), .74); font-size: .92rem; }
.pied .liste-liens a::before { background: rgba(var(--pied-encre), .35); }
.pied .liste-liens a:hover { color: var(--vert); }
.pied .liste-liens a:hover::before { background: var(--vert); }
.pied .puce { background: rgba(var(--pied-encre), .07); border-color: rgba(var(--pied-encre), .16); color: rgba(var(--pied-encre), .8); }
.pied .puce:hover { background: var(--vert); border-color: var(--vert); color: var(--blanc); }
.pied-bas { border-top: 1px solid rgba(var(--pied-encre), .12); margin-top: 44px; padding-top: 20px; font-size: .85rem; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.pied-tel { font-family: var(--titre); font-weight: 900; font-size: 1.5rem; color: rgb(var(--pied-encre)) !important; display: inline-block; margin-top: 6px; }
.pied-tel:hover { color: var(--vert) !important; }

/* ============================================================ back-office */
.admin { background: var(--fond); min-height: 100vh; }
.admin-entete { background: var(--gris-fonce); color: var(--blanc); padding: 12px 0; }
.admin-entete .nav a { color: rgba(255, 255, 255, .8); font-family: var(--titre); font-weight: 700; padding: 8px 12px; border-radius: var(--r-xs); white-space: nowrap; }
.admin-entete .nav a:hover { background: rgba(255, 255, 255, .1); color: var(--blanc); }

/* --------------------------------------- groupes deroulants du back-office
   Seize liens a plat ne se lisaient plus. Les volets sont des <details> :
   ils fonctionnent sans JavaScript, au clavier comme a la souris. D'ou le
   <summary> deguise en lien et son marqueur natif retire. */
.admin-entete .nav a.ici,
.admin-entete .nav-admin summary.ici { background: rgba(255, 255, 255, .17); color: var(--blanc); }

.nav-admin .groupe-nav { position: relative; }

.nav-admin summary {
    list-style: none;
    cursor: pointer;
    color: rgba(255, 255, 255, .8);
    font-family: var(--titre);
    font-weight: 700;
    padding: 8px 12px;
    border-radius: var(--r-xs);
    display: flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
    transition: background var(--transition), color var(--transition);
}

.nav-admin summary::-webkit-details-marker { display: none; }

.nav-admin summary::after {
    content: '';
    width: 6px;
    height: 6px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    opacity: .65;
}

.nav-admin summary:hover { background: rgba(255, 255, 255, .1); color: var(--blanc); }
.nav-admin summary:focus-visible { outline: 2px solid var(--vert); outline-offset: 2px; }
.nav-admin details[open] > summary { background: rgba(255, 255, 255, .15); color: var(--blanc); }
.nav-admin details[open] > summary::after { transform: translateY(1px) rotate(-135deg); }

.nav-admin .panneau-nav {
    position: absolute;
    top: calc(100% + 9px);
    left: 0;
    z-index: 60;
    min-width: 196px;
    /* Un volet ne doit jamais sortir de la fenetre, meme sur un telephone. */
    max-width: calc(100vw - 28px);
    padding: 6px;
    background: var(--blanc);
    border: 1px solid var(--bordure);
    border-radius: var(--r-s);
    box-shadow: var(--ombre-2);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.nav-admin .panneau-nav::before {
    content: '';
    position: absolute;
    top: -5px;
    left: 18px;
    width: 8px;
    height: 8px;
    background: var(--blanc);
    border-left: 1px solid var(--bordure);
    border-top: 1px solid var(--bordure);
    transform: rotate(45deg);
}

.admin-entete .nav-admin .panneau-nav a {
    color: var(--texte);
    padding: 7px 10px;
    white-space: nowrap;
}

.admin-entete .nav-admin .panneau-nav a:hover { background: rgba(11, 31, 143, .07); color: var(--bleu); }
.admin-entete .nav-admin .panneau-nav a.ici { background: rgba(127, 189, 0, .16); color: var(--bleu); }

/* Le dernier groupe deborderait a droite de la fenetre. */
.nav-admin .groupe-nav:last-of-type .panneau-nav { left: auto; right: 0; }
.nav-admin .groupe-nav:last-of-type .panneau-nav::before { left: auto; right: 18px; }
.admin-corps { padding: 34px 0 70px; }
.admin table { width: 100%; border-collapse: collapse; font-size: .93rem; background: var(--blanc); }
.admin :is(th, td) { padding: 10px 12px; border-bottom: 1px solid var(--bordure); text-align: left; }
.admin th { font-family: var(--titre); font-weight: 800; background: var(--fond); }
.admin input[type=number] { width: 96px; padding: 7px 10px; text-align: right; }
.barre-outils { display: flex; gap: 14px; align-items: end; flex-wrap: wrap; }
.etiquette { display: inline-block; padding: 3px 11px; border-radius: 100px; font-size: .78rem; font-weight: 700; }
.etiquette-vert { background: #eef7e2; color: #4d7600; }
.etiquette-bleu { background: #e8ebfa; color: var(--bleu); }
.etiquette-orange { background: #fff1e0; color: var(--orange-fonce); }
.etiquette-gris { background: var(--fond); color: var(--texte-doux); }
.origine-site { color: var(--vert); font-weight: 700; }
.origine-agence { color: var(--bleu); }
.origine-global { color: var(--texte-doux); }

/* ============================================================== responsive */
@media (max-width: 760px) {
    .section { padding: 56px 0; }
    .hero .conteneur, .hero-accueil .conteneur { padding-top: 54px; padding-bottom: 60px; }
    .appel { padding: 32px; }
    .hero::after { width: 260px; height: 260px; right: -60px; bottom: -70px; }
    .resultat-total { font-size: 2.4rem; }
}

/* ============================================ icones des prestations
   Elles remplacent les panneaux routiers generes par l'ancien site, qui
   mesuraient 163 x 129 px, se placaient sous le titre et laissaient une
   large bande blanche a leur droite. */
.titre-icone { display: flex; align-items: center; gap: 20px; margin-bottom: .5em; }
.titre-icone h1 { margin: 0; }
.icone-prestation {
    flex: 0 0 auto; width: 76px; height: 76px;
    display: grid; place-items: center;
    border-radius: 20px;
    background: rgba(255, 255, 255, .13);
    border: 1px solid rgba(255, 255, 255, .24);
    color: var(--vert);
}
.icone-prestation svg { width: 40px; height: 40px; }

/* Dans les listes, l'icone remplace la pastille ronde. */
.liste-icones a::before { display: none !important; }
.ico-liste {
    flex: 0 0 22px; width: 22px; height: 22px;
    display: grid; place-items: center; color: var(--bleu);
    transition: color var(--transition), transform var(--transition);
}
.ico-liste svg { width: 19px; height: 19px; }
.liste-icones a:hover .ico-liste { color: var(--orange); transform: translateX(2px); }
.liste-icones a.actif .ico-liste { color: var(--orange); }
.pied .liste-icones .ico-liste { color: rgba(var(--pied-encre), .5); }

@media (max-width: 640px) {
    .titre-icone { gap: 14px; }
    .icone-prestation { width: 56px; height: 56px; border-radius: 15px; }
    .icone-prestation svg { width: 30px; height: 30px; }
}

/* Bouton d'action destructrice, en Rouge Brique de la palette secondaire. */
.bouton-rouge { background: var(--rouge-brique); box-shadow: 0 4px 14px rgba(204, 42, 48, .28); }
.bouton-rouge:hover { background: #a82128; box-shadow: 0 8px 22px rgba(204, 42, 48, .38); }

/* En-tetes de colonne cliquables pour le tri. */
.admin th a { color: var(--gris-fonce); white-space: nowrap; }
.admin th a:hover { color: var(--bleu); }

/* ==================================== mise en valeur des contenus repris
   Les pages migrees sont de longues suites de paragraphes et de listes a
   puces. Deux traitements, deduits du contenu lui-meme, leur donnent du
   relief sans qu'il faille reecrire quoi que ce soit. */

/* Chapo : le premier paragraphe de la page. */
.article .chapo {
    font-size: 1.18rem;
    line-height: 1.7;
    color: var(--gris-fonce);
    padding: 2px 0 2px 22px;
    border-left: 4px solid var(--vert);
    margin-bottom: 1.9em;
}
.article .chapo strong { color: var(--bleu); }

/* Grille de prestations : une liste dont les elements mènent a une page. */
.article .services {
    list-style: none;
    margin: 1.9em 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 14px;
}
.article .services li {
    display: flex;
    gap: 15px;
    align-items: flex-start;
    margin: 0;
    padding: 17px 19px;
    background: var(--blanc);
    border: 1px solid var(--bordure);
    border-radius: var(--r-s);
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.article .services li::before { content: none; }
.article .services li:hover {
    transform: translateY(-3px);
    border-color: var(--vert);
    box-shadow: var(--ombre-1);
}

.ico-service {
    flex: 0 0 40px; width: 40px; height: 40px;
    border-radius: 11px;
    display: grid; place-items: center;
    background: #eef2f6;
    color: var(--bleu);
    transition: background var(--transition), color var(--transition);
}
.ico-service svg { width: 22px; height: 22px; }
.article .services li:hover .ico-service { background: var(--vert); color: var(--blanc); }

.txt-service { font-size: .97rem; line-height: 1.55; }
.txt-service a { font-weight: 700; border-bottom: 0; }
.txt-service a:hover { border-bottom: 2px solid var(--orange); }

/* Confort de lecture : une ligne trop longue fatigue. */
.article p:not(.chapo) { max-width: 74ch; }
.article ul:not(.services) li, .article ol li { max-width: 72ch; }

/* ============================================ colonne de droite : encarts repris
   Blocs de l'ancienne colonne (video, actualites, formation, recrutement,
   WebXpert). Tous partagent la meme largeur que les encarts, le meme rayon et
   la meme reaction au survol, pour que la colonne se lise comme un ensemble. */

.encart-video,
.encart-fond,
.encart-banniere,
.encart-image {
    display: block;
    position: relative;
    width: 100%;
    margin-bottom: 22px;
    border-radius: var(--r);
    overflow: hidden;
    box-shadow: var(--ombre-1);
    text-decoration: none;
    transition: transform .22s ease, box-shadow .22s ease;
}

.encart-video:hover,
.encart-fond:hover,
.encart-banniere:hover,
.encart-image:hover {
    transform: translateY(-3px);
    box-shadow: var(--ombre-2);
}

.encart-video img,
.encart-image img,
.encart-banniere video {
    display: block;
    width: 100%;
    height: auto;
    border: 0;
}

/* --- video : pastille de lecture posee au centre ------------------------- */
.encart-video .ico-lecture {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 6px 20px rgba(8, 23, 102, .3);
    transition: background .2s ease, transform .2s ease;
}

.encart-video .ico-lecture svg {
    width: 26px;
    height: 26px;
    margin-left: 3px;
    fill: var(--orange);
}

.encart-video:hover .ico-lecture {
    background: var(--orange);
    transform: translate(-50%, -50%) scale(1.06);
}

.encart-video:hover .ico-lecture svg { fill: var(--blanc); }

/* --- blocs a image de fond (actualites, espace client...) ---------------- */
.encart-fond {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    min-height: 176px;
    padding: 0 14px 20px;
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: cover;
}

.encart-fond span {
    background: var(--blanc);
    color: var(--vert-fonce);
    font-family: var(--titre);
    font-weight: 800;
    font-size: .9rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    text-align: center;
    border-radius: 30px;
    padding: 10px 20px;
    transition: background .2s ease, color .2s ease;
}

.encart-fond:hover span { background: var(--vert); color: var(--blanc); }

/* Le bloc actualites porte sa pastille au centre du visuel. */
.encart-fond.bloc-actualites { align-items: center; padding-bottom: 0; }

/* L'espace client garde le bleu de la marque WebXpert. */
.encart-fond.bloc-webxpert span {
    background: #00a9c2;
    border: 1px solid #00a9c2;
    color: var(--blanc);
    border-radius: 6px;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 700;
}

.encart-fond.bloc-webxpert:hover span { background: var(--blanc); color: #00a9c2; }

/* --- lecteur video en surimpression ------------------------------------- */
dialog.video-modal {
    width: min(900px, 92vw);
    padding: 0;
    border: 0;
    border-radius: var(--r);
    overflow: hidden;
    background: #000;
    box-shadow: var(--ombre-3);
}

dialog.video-modal::backdrop { background: rgba(8, 23, 102, .72); }

dialog.video-modal .cadre { position: relative; padding-top: 56.25%; }

dialog.video-modal iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

dialog.video-modal .fermer {
    position: absolute;
    top: 10px;
    right: 12px;
    z-index: 2;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .9);
    color: var(--gris-fonce);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
}

dialog.video-modal .fermer:hover { background: var(--blanc); }

/* ================================================================ actualites */

.actus {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: 26px;
}

.actu {
    display: flex;
    flex-direction: column;
    background: var(--blanc);
    border: 1px solid var(--bordure);
    border-radius: var(--r);
    overflow: hidden;
    box-shadow: var(--ombre-1);
    text-decoration: none;
    color: inherit;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.actu:hover {
    transform: translateY(-6px);
    box-shadow: var(--ombre-2);
    border-color: transparent;
}

.actu-visuel { aspect-ratio: 16 / 9; overflow: hidden; background: var(--fond); }

.actu-visuel img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s ease;
}

.actu:hover .actu-visuel img { transform: scale(1.05); }

.actu-corps { padding: 20px 22px 24px; display: flex; flex-direction: column; flex: 1; }

.actu-date {
    font-size: .78rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--orange);
    font-weight: 700;
    margin-bottom: 8px;
}

.actu-corps h2 {
    font-size: 1.08rem;
    line-height: 1.35;
    margin: 0 0 14px;
    color: var(--bleu);
}

.actu-corps h2::after { content: none; }

.actu-lire {
    margin-top: auto;
    font-weight: 700;
    font-size: .9rem;
    color: var(--vert-fonce);
}

.actu-lire::after { content: " \203A"; font-weight: 400; }

/* ======================================================= back-office : largeur
   Les fiches comptent une trentaine de champs. Les tenir dans la largeur du
   site public (1220 px) obligeait a defiler sur toute la hauteur de l'ecran
   pendant que les deux tiers de la fenetre restaient vides. Le back-office
   prend donc la largeur disponible, et les groupes de champs se rangent en
   colonnes : une fiche d'agence tient a l'ecran sans defilement. */

.admin .conteneur { max-width: 1840px; padding: 0 30px; }

/* Champs plus compacts : la densite compte sur un ecran d'administration. */
.admin .champ { margin-bottom: 13px; }
.admin .champ label { font-size: .88rem; margin-bottom: 4px; }
.admin .champ :is(input, select, textarea) { padding: 9px 12px; font-size: .94rem; }
.admin .champs-2 { gap: 13px; }
.admin .panneau { padding: 24px; }
.admin h3 { margin: 0 0 12px; font-size: 1rem; }

/* Groupes de champs ranges cote a cote. */
.colonnes-fiche {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
    gap: 20px;
    align-items: start;
}

.groupe {
    background: var(--fond-doux);
    border: 1px solid var(--bordure);
    border-radius: var(--r-s);
    padding: 16px 18px 4px;
}

.groupe > h3 {
    font-family: var(--titre);
    font-weight: 800;
    font-size: .78rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--orange);
    margin: 0 0 14px;
}

/* La colonne de la photo n'a pas besoin de s'etirer comme les autres. */
.groupe-photo { text-align: center; }
.groupe-photo .champ { text-align: left; }

/* Barre d'actions collee en bas de la fiche, toujours atteignable. */
.actions-fiche {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--bordure);
}

/* Tableaux : eviter que le contenu force une barre de defilement laterale. */
.admin table { table-layout: auto; }
.admin :is(th, td) { padding: 8px 10px; }
.admin td { word-break: break-word; }

/* ==================================================== blocs de colonne (admin) */
.apercu-bloc {
    width: 132px;
    height: 84px;
    border-radius: var(--r-xs);
    border: 1px solid var(--bordure);
    background: var(--fond) no-repeat 50% / cover;
    display: block;
}

.liste-videos { font-family: var(--mono, Consolas, monospace); font-size: .86rem; min-height: 110px; }

/* ==================================================== composeur de page (admin)
   La page se monte en blocs que l'on empile et deplace. Chaque bloc montre son
   contenu tel qu'il paraitra ; la barre d'outils du texte n'apparait qu'une
   fois le bloc ouvert, pour que la page reste lisible au repos. */

.zone-composeur { display: flex; flex-direction: column; gap: 14px; }

.bloc-carte {
    border: 1px solid var(--bordure);
    border-radius: var(--r-s);
    background: var(--blanc);
    overflow: hidden;
    transition: border-color .18s ease, box-shadow .18s ease;
}

.bloc-carte:hover { border-color: #c9d4de; box-shadow: var(--ombre-1); }
.bloc-carte.ouvert { border-color: var(--vert); box-shadow: 0 0 0 3px rgba(127, 189, 0, .14); }
.bloc-carte.en-deplacement { opacity: .45; }
.bloc-carte.cible { border-color: var(--orange); }

.bloc-barre {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    background: var(--fond);
    border-bottom: 1px solid var(--bordure);
}

.bloc-barre .pousse { margin-left: auto; }

.bloc-barre .poignee {
    cursor: grab;
    color: var(--texte-doux);
    font-size: 1rem;
    line-height: 1;
    padding: 2px 4px;
    user-select: none;
}

.bloc-barre .poignee:active { cursor: grabbing; }

.bloc-barre .choix-type {
    padding: 4px 8px;
    font-size: .84rem;
    border: 1px solid var(--bordure);
    border-radius: var(--r-xs);
    background: var(--blanc);
    color: var(--gris-fonce);
    font-family: var(--titre);
    font-weight: 700;
}

.bouton-icone {
    width: 28px;
    height: 28px;
    border: 1px solid var(--bordure);
    border-radius: var(--r-xs);
    background: var(--blanc);
    color: var(--texte-doux);
    cursor: pointer;
    line-height: 1;
    font-size: .88rem;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.bouton-icone:hover { background: var(--bleu); border-color: var(--bleu); color: var(--blanc); }
.bouton-icone.supprimer:hover { background: var(--rouge-brique); border-color: var(--rouge-brique); }

.bloc-corps { padding: 16px 18px; }
.bloc-corps .zone-texte { min-height: 40px; cursor: text; }
.bloc-corps .zone-texte :is(h1, h2, h3) { margin-top: .2em; }

/* La barre d'outils du texte ne s'affiche que dans le bloc ouvert. */
.bloc-carte .ql-toolbar { display: none; border-radius: var(--r-xs) var(--r-xs) 0 0; }
.bloc-carte.ouvert .ql-toolbar { display: block; }
.bloc-carte .ql-container { border: 0; font-family: var(--corps); font-size: 1rem; }
.bloc-carte.ouvert .ql-container { border: 1px solid var(--bordure); border-top: 0; }
.bloc-carte .ql-editor { padding: 10px 0; }
.bloc-carte.ouvert .ql-editor { padding: 12px 14px; min-height: 120px; }

.bloc-corps-image { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.bloc-corps-image .champ { width: 100%; margin: 0; }

.apercu-image {
    max-width: 320px;
    width: 100%;
    border-radius: var(--r-xs);
    border: 1px solid var(--bordure);
    background: var(--fond);
    display: block;
}

.bloc-corps-media { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 20px; align-items: start; }
@media (max-width: 900px) { .bloc-corps-media { grid-template-columns: 1fr; } }
.bloc-corps-media .media-cote { display: flex; flex-direction: column; gap: 10px; }
.bloc-corps-media .inverser { font-size: .86rem; color: var(--texte-doux); display: flex; gap: 6px; align-items: center; }
.bloc-corps-media .inverser input { width: auto; }

.ajout-blocs {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 16px;
    padding: 14px 16px;
    border: 1px dashed var(--bordure);
    border-radius: var(--r-s);
    background: var(--fond-doux);
}

.ajout-blocs > span { font-family: var(--titre); font-weight: 800; color: var(--texte-doux); font-size: .86rem; }

/* ======================================== blocs composes, rendu cote visiteur */

/* Un bloc n'ajoute aucune marge : l'espacement reste celui des titres et des
   paragraphes qu'il contient, pour qu'une page enregistree par le composeur
   rende exactement comme avant. */
.article .bloc-page { margin: 0; }

/* Image et texte cote a cote. */
.article .media {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    gap: 30px;
    align-items: center;
    margin: 1.6em 0;
}

.article .media-inverse { direction: rtl; }
.article .media-inverse > * { direction: ltr; }

@media (max-width: 760px) { .article .media { grid-template-columns: 1fr; gap: 18px; } }

.article .media-image img {
    width: 100%;
    height: auto;
    border-radius: var(--r);
    display: block;
    box-shadow: var(--ombre-1);
}

.article .media-texte > *:first-child { margin-top: 0; }

.article figure { margin: 1.6em 0; }
.article figure img { width: 100%; height: auto; border-radius: var(--r); display: block; box-shadow: var(--ombre-1); }
.article figcaption { font-size: .88rem; color: var(--texte-doux); margin-top: .6em; }

.article .encadre-page {
    background: var(--fond);
    border-left: 4px solid var(--orange);
    border-radius: 0 var(--r-s) var(--r-s) 0;
    padding: 18px 22px;
    margin: 1.6em 0;
}

.article .encadre-page > *:first-child { margin-top: 0; }
.article .encadre-page > *:last-child { margin-bottom: 0; }

.article .bloc-cta { margin: 1.8em 0; }

/* ================================================================== mobile
   Verifie au telephone (375 px) et a la tablette (768 px) : rien ne doit
   depasser la largeur de l'ecran. Une page qui defile lateralement donne
   immediatement l'impression d'un site mal fini. */

/* Dernier filet : les cercles decoratifs du bandeau depassent de quelques
   pixels sur un tres petit ecran. "clip" empeche tout defilement lateral sans
   creer de conteneur de defilement, contrairement a "hidden". */
html, body { overflow-x: clip; }

@media (max-width: 700px) {
    /* Le bouton « Devis immédiat » de l'en-tete est deja repris dans le menu
       deroulant ; le garder ici poussait l'en-tete hors de l'ecran. */
    .entete .nav { display: none; }
    .entete-inner { gap: 12px; min-height: 62px; }
    .entete .logo img { height: 26px; }
    .burger { margin-left: auto; }
}

@media (max-width: 380px) {
    .entete .logo img { height: 22px; }
    .conteneur { padding: 0 16px; }
}

/* Les contenus repris contiennent des tableaux, des images flottantes et des
   blocs a largeur fixe, tous concus pour un ecran d'ordinateur. */
.article table { max-width: 100%; }

@media (max-width: 760px) {
    /* Un tableau large defile dans son propre cadre, jamais la page entiere.
       L'ancien site enveloppait certains tableaux dans un div UIkit : il faut
       le brider lui aussi, sinon c'est la page qui s'elargit. */
    .article table,
    .article .uk-overflow-container {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Aucun element ne peut imposer sa largeur a la colonne de texte. */
    .article > * { min-width: 0; max-width: 100%; }

    /* Les images flottantes de l'ancien site reprennent le fil du texte. */
    .article :is(.float_right, .float_left, [align="right"], [align="left"]) {
        float: none !important;
        width: auto !important;
        max-width: 100% !important;
        margin: 1.2em 0 !important;
    }

    .article :is(img, iframe, video, embed, object) { max-width: 100%; height: auto; }

    /* Une adresse ou un mot tres long ne doit pas elargir la colonne. */
    .article { overflow-wrap: break-word; }
    .article :is(h1, h2, h3, h4) { overflow-wrap: anywhere; }

    /* Les contenus repris portent des tailles de police figees dans l'attribut
       style (27pt, 18pt...), pensees pour un ecran large : au telephone elles
       poussent un titre au-dela de la largeur de l'ecran. On rend la main a la
       feuille de style. */
    .article [style*="font-size"] { font-size: inherit !important; }
    .article [style*="width"]:not(img):not(figure) { width: auto !important; max-width: 100% !important; }

    .services { grid-template-columns: 1fr; }
    .chapo { font-size: 1.08rem; }
}

/* Les grilles de chiffres et de cartes se replient. */
@media (max-width: 640px) {
    .chiffres { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
    .cartes { grid-template-columns: 1fr; }
    .hero-actions { flex-direction: column; align-items: stretch; }
    .hero-actions .bouton { width: 100%; }
    .actus { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------ back-office mobile */
@media (max-width: 900px) {
    .admin .conteneur { padding: 0 16px; }
    /* Coince entre le logo et le bord, le menu n'avait qu'une centaine de
       pixels et ses libelles debordaient. Sous 900 px il passe a la ligne et
       prend toute la largeur. */
    .admin-entete .entete-inner { flex-wrap: wrap; row-gap: 8px; }
    .admin-entete .nav { flex-wrap: wrap; gap: 2px; margin-left: 0; width: 100%; }
    .admin-entete .nav a { padding: 6px 8px; font-size: .9rem; }
    .nav-admin summary { padding: 6px 8px; font-size: .9rem; }
    /* Le bandeau passe sur plusieurs lignes : un volet aligne a droite
       de la fenetre se retrouverait loin de son bouton. */
    .nav-admin .groupe-nav:last-of-type .panneau-nav { left: 0; right: auto; }
    .nav-admin .groupe-nav:last-of-type .panneau-nav::before { left: 18px; right: auto; }

    /* Les tableaux d'administration defilent dans leur cadre. */
    .admin .tableau-defilant { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .admin table { min-width: 640px; }

    /* Une seule colonne de champs : au telephone on remplit de haut en bas. */
    .colonnes-fiche { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
    .bloc-barre { flex-wrap: wrap; }
    .ajout-blocs { gap: 8px; }
}

/* ========================================= bandeaux de mise en avant (visiteur)
   Affiches tout en haut, au-dessus de la barre de service. Le visiteur peut les
   masquer : le choix est garde dans son navigateur, par bandeau. */

.bandeau-promo { color: var(--blanc); font-size: .95rem; }
.bandeau-orange { background: linear-gradient(100deg, var(--orange), var(--orange-fonce)); }
.bandeau-vert { background: linear-gradient(100deg, var(--vert), var(--vert-fonce)); }
.bandeau-bleu { background: linear-gradient(100deg, var(--bleu), var(--bleu-nuit)); }
.bandeau-rouge { background: linear-gradient(100deg, var(--rouge-brique), #a82128); }

.bandeau-inner {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 46px;
    padding-top: 8px;
    padding-bottom: 8px;
}

.bandeau-texte { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; flex: 1; }
.bandeau-texte strong { font-family: var(--titre); font-weight: 800; letter-spacing: .01em; }
.bandeau-texte span { opacity: .88; font-size: .9rem; }

.bandeau-action {
    flex: 0 0 auto;
    background: rgba(255, 255, 255, .17);
    border: 1px solid rgba(255, 255, 255, .45);
    color: var(--blanc);
    font-family: var(--titre);
    font-weight: 700;
    font-size: .88rem;
    padding: 6px 15px;
    border-radius: 30px;
    white-space: nowrap;
    transition: background var(--transition), color var(--transition);
}

a.bandeau-action:hover { background: var(--blanc); color: var(--gris-fonce); }

.bandeau-fermer {
    flex: 0 0 auto;
    background: none;
    border: 0;
    color: rgba(255, 255, 255, .7);
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    padding: 2px 4px;
    transition: color var(--transition);
}

.bandeau-fermer:hover { color: var(--blanc); }

@media (max-width: 700px) {
    .bandeau-inner { flex-wrap: wrap; gap: 8px 12px; }
    .bandeau-texte { flex: 1 1 100%; order: 1; }
    .bandeau-action { order: 2; }
    .bandeau-fermer { order: 3; margin-left: auto; }
    .bandeau-promo { font-size: .9rem; }
}

/* ====================================================== encadre reglementaire
   Se distingue du corps de la page : c'est une synthese officielle, pas du
   discours commercial. Filet bleu, fond neutre, source citee en pied. */

.article .reglementation {
    background: var(--fond);
    border: 1px solid var(--bordure);
    border-left: 4px solid var(--bleu);
    border-radius: 0 var(--r) var(--r) 0;
    padding: 26px 28px 22px;
    margin: 2.4em 0 1.6em;
}

.reglementation-entete { display: flex; align-items: center; gap: 14px; margin-bottom: 4px; }

.ico-reglementation {
    flex: 0 0 auto; width: 38px; height: 38px;
    display: grid; place-items: center;
    border-radius: 10px;
    background: var(--blanc);
    border: 1px solid var(--bordure);
    color: var(--bleu);
}

.ico-reglementation svg { width: 21px; height: 21px; }

.article .reglementation h2 { margin: 0; font-size: 1.28rem; }
.article .reglementation h2::after { content: none; }

.reglementation-titre {
    font-family: var(--titre);
    font-weight: 800;
    color: var(--bleu);
    margin: 10px 0 16px;
}

.reglementation-liste {
    display: grid;
    grid-template-columns: minmax(140px, 200px) minmax(0, 1fr);
    gap: 8px 22px;
    margin: 0 0 16px;
}

.reglementation-liste dt {
    font-family: var(--titre);
    font-weight: 700;
    font-size: .9rem;
    color: var(--texte-doux);
    text-transform: uppercase;
    letter-spacing: .04em;
    padding-top: 2px;
}

.reglementation-liste dd { margin: 0; }

@media (max-width: 640px) {
    .reglementation-liste { grid-template-columns: 1fr; gap: 2px 0; }
    .reglementation-liste dd { margin-bottom: 10px; }
    .article .reglementation { padding: 20px; }
}

.reglementation-points { margin: 0 0 16px; padding-left: 0; list-style: none; }

.reglementation-points li {
    position: relative;
    padding-left: 22px;
    margin-bottom: 7px;
}

.reglementation-points li::before {
    content: '';
    position: absolute;
    left: 4px;
    top: .62em;
    width: 7px;
    height: 7px;
    border-radius: 2px;
    background: var(--vert);
}

.reglementation-source {
    font-size: .86rem;
    color: var(--texte-doux);
    border-top: 1px solid var(--bordure);
    padding-top: 12px;
    margin: 0;
}

.reglementation-source a { color: var(--bleu); text-decoration: underline; }

/* L'attribut hidden doit l'emporter sur une regle de classe. La regle du
   navigateur (display: none) a une specificite plus faible que
   « .consentement-panneau { display: flex } » : le panneau restait affiche quoi
   qu'on clique, et aucun bouton ne semblait fonctionner. */
[hidden] { display: none !important; }

/* ============================================== consentement aux cookies
   Le bandeau ne masque pas le contenu et ne bloque pas la navigation : il
   demande, il n'impose pas. Refuser est au meme niveau visuel qu'accepter,
   comme la CNIL le demande. */

.consentement {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 400;
    background: var(--gris-fonce);
    color: rgba(255, 255, 255, .92);
    box-shadow: 0 -6px 28px rgba(8, 23, 102, .28);
}

.consentement-inner {
    display: flex;
    align-items: center;
    gap: 26px;
    padding-top: 16px;
    padding-bottom: 16px;
    flex-wrap: wrap;
}

.consentement-texte { flex: 1 1 340px; }
.consentement-texte strong { font-family: var(--titre); font-weight: 800; display: block; margin-bottom: 3px; }
.consentement-texte p { margin: 0; font-size: .9rem; line-height: 1.5; color: rgba(255, 255, 255, .78); }

.consentement-boutons { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.lien-discret {
    background: none;
    border: 0;
    color: rgba(255, 255, 255, .78);
    text-decoration: underline;
    cursor: pointer;
    font-family: var(--corps);
    font-size: .9rem;
    padding: 6px 2px;
}

.lien-discret:hover { color: var(--blanc); }

/* --- panneau de reglage ------------------------------------------------- */
.consentement-panneau {
    position: fixed;
    inset: 0;
    z-index: 410;
    background: rgba(8, 23, 102, .55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    overflow-y: auto;
}

.consentement-carte {
    background: var(--blanc);
    border-radius: var(--r);
    box-shadow: var(--ombre-3);
    max-width: 640px;
    width: 100%;
    padding: 28px 30px 24px;
    max-height: 90vh;
    overflow-y: auto;
}

.consentement-entete { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.consentement-carte h2 { margin: 0 0 4px; font-size: 1.4rem; color: var(--bleu); }
.consentement-carte h2::after { content: none; }
.consentement-carte > p { font-size: .94rem; color: var(--texte-doux); }

.consentement-croix {
    background: none; border: 0; cursor: pointer;
    font-size: 1.6rem; line-height: 1; color: var(--texte-doux); padding: 0 4px;
}

.consentement-croix:hover { color: var(--gris-fonce); }

.consentement-categorie {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 16px 0;
    border-top: 1px solid var(--bordure);
}

.consentement-categorie strong { font-family: var(--titre); font-weight: 800; color: var(--gris-fonce); }
.consentement-categorie p { margin: 4px 0 0; font-size: .88rem; color: var(--texte-doux); line-height: 1.5; }

.interrupteur {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    font-size: .9rem;
    font-weight: 700;
    color: var(--gris-fonce);
    cursor: pointer;
    white-space: nowrap;
}

.interrupteur input { width: 18px; height: 18px; accent-color: var(--vert); cursor: pointer; }

.consentement-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: flex-end;
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--bordure);
}

.consentement-lien { font-size: .85rem; color: var(--texte-doux); margin: 14px 0 0; }
.consentement-lien a { color: var(--bleu); text-decoration: underline; }

@media (max-width: 700px) {
    .consentement-inner { gap: 14px; }
    .consentement-boutons { width: 100%; }
    .consentement-boutons .bouton { flex: 1 1 auto; }
    .consentement-categorie { flex-direction: column; align-items: flex-start; gap: 10px; }
    .consentement-actions { justify-content: stretch; }
    .consentement-actions .bouton { flex: 1 1 100%; }
}

/* ================================================================== devis
   Formulaire en deux temps : on decrit le bien, puis on recoit le chiffrage.
   Les etapes sont numerotees pour qu'on sache toujours ou l'on en est. */

.etape { display: flex; align-items: center; gap: 14px; margin: 0 0 18px; }

.etape-numero {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--bleu);
    color: var(--blanc);
    font-family: var(--titre);
    font-weight: 900;
}

.etape h2 { margin: 0; font-size: 1.45rem; }
.etape h2::after { content: none; }

.champs-adresse { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 13px; }
@media (max-width: 560px) { .champs-adresse { grid-template-columns: 1fr; } }

/* --- choix multiples presentes comme des pastilles --------------------- */
.choix-boutons { display: flex; flex-wrap: wrap; gap: 9px; }

.choix { position: relative; cursor: pointer; }
.choix input { position: absolute; opacity: 0; width: 0; height: 0; }

.choix span {
    display: inline-block;
    padding: 9px 16px;
    border: 1.5px solid var(--bordure);
    border-radius: 30px;
    font-size: .93rem;
    background: var(--blanc);
    transition: border-color .16s ease, background .16s ease, color .16s ease;
}

.choix:hover span { border-color: #c2ccd6; }

.choix input:checked + span {
    border-color: var(--bleu);
    background: var(--bleu);
    color: var(--blanc);
    font-weight: 600;
}

.choix input:focus-visible + span { outline: 3px solid rgba(127, 189, 0, .4); outline-offset: 2px; }

/* --- cases a cocher en ligne ------------------------------------------ */
.case {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-weight: 400;
    margin-bottom: 9px;
    cursor: pointer;
    line-height: 1.45;
}

.case input { width: 18px; height: 18px; margin-top: 2px; flex: 0 0 auto; accent-color: var(--vert); }

/* --- saisie assistee de la commune ------------------------------------ */
.champ { position: relative; }

.suggestions {
    position: absolute;
    z-index: 40;
    left: 0;
    right: 0;
    background: var(--blanc);
    border: 1px solid var(--bordure);
    border-radius: var(--r-s);
    box-shadow: var(--ombre-2);
    max-height: 280px;
    overflow-y: auto;
    margin-top: 4px;
}

.suggestion {
    display: block;
    width: 100%;
    text-align: left;
    padding: 10px 14px;
    border: 0;
    background: none;
    cursor: pointer;
    font-family: var(--corps);
    font-size: .95rem;
    border-bottom: 1px solid var(--bordure);
}

.suggestion:last-child { border-bottom: 0; }
.suggestion:hover, .suggestion:focus { background: var(--fond); }
.suggestion span { color: var(--texte-doux); font-size: .87rem; margin-left: 6px; }

/* --- le chiffrage ------------------------------------------------------ */
.tableau-devis { width: 100%; border-collapse: collapse; margin: 6px 0 20px; }
.tableau-devis td { padding: 12px 0; border-bottom: 1px solid var(--bordure); vertical-align: top; }
.tableau-devis .raison { font-size: .85rem; color: var(--texte-doux); margin-top: 2px; }
.tableau-devis .prix { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }

.tableau-devis tfoot td { border-bottom: 0; padding: 7px 0; }
.tableau-devis tfoot tr:first-child td { border-top: 2px solid var(--bordure); padding-top: 14px; }
.tableau-devis tfoot .remise td { color: var(--vert-fonce); }

.tableau-devis tfoot .total td {
    font-family: var(--titre);
    font-weight: 900;
    font-size: 1.35rem;
    color: var(--bleu);
    padding-top: 10px;
}

.liste-etapes { margin: 0; padding-left: 20px; }
.liste-etapes li { margin-bottom: 8px; line-height: 1.45; }

/* --- la liste des diagnostics, avant le chiffrage ---------------------- */
.liste-diagnostics { list-style: none; padding: 0; margin: 6px 0 22px; }

.liste-diagnostics li {
    /* La pastille verte vient de .article ul > li::before : on lui laisse la
       place a gauche et on la remonte a hauteur du gros intitule. */
    position: relative;
    padding: 15px 0 15px 28px;
    margin-bottom: 0;
    border-bottom: 1px solid var(--bordure);
}

.liste-diagnostics li::before { top: 1.45em; }

.liste-diagnostics li:last-child { border-bottom: 0; }

.liste-diagnostics strong {
    display: block;
    font-family: var(--titre);
    font-weight: 800;
    font-size: 1.25rem;
    color: var(--bleu);
    line-height: 1.25;
}

.liste-diagnostics .raison {
    display: block;
    font-size: .88rem;
    color: var(--texte-doux);
    margin-top: 3px;
}

/* Le prix n'est pas cache par coquetterie : il se decouvre avec les
   coordonnees, pour que l'agence puisse rappeler le visiteur. */
.prix-masque {
    background: var(--fond);
    border-left: 4px solid var(--vert);
    border-radius: var(--r-xs);
    padding: 16px 20px;
    margin-bottom: 22px;
}

.prix-masque p { margin: 0 0 6px; }
.prix-masque p:last-child { margin-bottom: 0; }

.prix-masque-t {
    font-family: var(--titre);
    font-weight: 900;
    font-size: 1.3rem;
    color: var(--gris-fonce);
}

@media (max-width: 560px) {
    .liste-diagnostics strong { font-size: 1.1rem; }
    .prix-masque-t { font-size: 1.15rem; }
}

/* Une case verrouillee se voit : fond gris, curseur inchange, pas de bordure
   d'appel. Elle reste lisible et selectionnable, mais n'invite pas a taper. */
input[readonly] {
    background: var(--fond);
    color: var(--texte-doux);
    cursor: default;
}

input[readonly]:focus { outline: none; border-color: var(--bordure); }

.message-info {
    background: #EAF1FB;
    border-left: 4px solid var(--bleu-royal);
    color: var(--texte);
}

/* Le « ou » entre les deux facons de se connecter, avec son filet de part
   et d'autre. */
.separateur-ou {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--texte-doux);
    font-size: .88rem;
    margin: 18px 0;
}

.separateur-ou::before,
.separateur-ou::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--bordure);
}

/* ================================================== bibliotheque d'images
   Le selecteur montre toute la bibliotheque — plus de 700 images depuis la
   reprise de la mediatheque du site institutionnel. Les styles sont ici et
   non en attributs : repetes 700 fois, ils pesaient plus que la page. */
.grille-vignettes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
}

.vignette {
    padding: 0;
    border: 1px solid var(--bordure);
    border-radius: var(--r-s);
    overflow: hidden;
    cursor: pointer;
    background: none;
}

.vignette:hover { border-color: var(--bleu); }

.vignette img {
    width: 100%;
    height: 100px;
    object-fit: cover;
    display: block;
}

.vignette span {
    display: block;
    font-size: .72rem;
    padding: 5px;
    color: var(--texte-doux);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ============================================================== assistant
   Deux entrees cote a cote en bas des pages de prestation, et la page
   « /questions » qui porte les reponses. */
.conteneur-etroit { max-width: 820px; }

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

.entrees {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 22px;
}

@media (max-width: 860px) { .entrees { grid-template-columns: 1fr; } }

.entrees > * { min-width: 0; }

.entree {
    background: var(--blanc);
    border: 1px solid var(--bordure);
    border-radius: var(--r);
    padding: 26px 26px 28px;
    box-shadow: var(--ombre-1);
}

.entree h2 { font-size: 1.28rem; margin: 0 0 .35em; }
.entree > p { color: var(--texte-doux); margin: 0 0 1.2em; font-size: .95rem; }
.entree .champ { margin-bottom: 12px; }
.entree .bouton { width: 100%; justify-content: center; }

.entree-choix { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.entree-choix > *:first-child { grid-column: 1 / -1; }
@media (max-width: 520px) { .entree-choix { grid-template-columns: 1fr; } }

.entree-question { background: var(--fond-doux); }
.entree-recours { margin: 1em 0 0; font-size: .92rem; color: var(--texte-doux); text-align: center; }
.entree-recours a { font-weight: 700; }

.assistant-barre { display: flex; gap: 10px; margin: 1.6em 0 2em; }
.assistant-barre input { flex: 1; min-width: 0; }
@media (max-width: 560px) { .assistant-barre { flex-direction: column; } }

.assistant-compte { color: var(--texte-doux); font-size: .92rem; margin-bottom: 1.4em; }
.assistant-reponse { margin-bottom: 2.4em; }
.assistant-reponse > h2 { font-size: 1.35rem; margin-bottom: .6em; }

.assistant-vide {
    background: var(--fond-doux);
    border: 1px solid var(--bordure);
    border-left: 4px solid var(--orange);
    border-radius: var(--r-s);
    padding: 22px 26px;
}

.assistant-vide h2 { font-size: 1.2rem; margin: 0 0 .5em; }
.assistant-recours { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 1.2em; }

.assistant-suggestions { list-style: none; padding: 0; margin: 1em 0 0; }
.assistant-suggestions li + li { border-top: 1px solid var(--bordure); }
.assistant-suggestions a { display: block; padding: 11px 2px; font-weight: 700; }

.assistant-mention {
    margin-top: 2.6em; padding-top: 1.2em;
    border-top: 1px solid var(--bordure);
    font-size: .88rem; color: var(--texte-doux);
}

/* ================================================== catalogue des fonds
   Des vignettes larges : ce sont des bandeaux, on doit juger du cadrage. */
.grille-fonds {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: 18px;
}

.grille-fonds > * { min-width: 0; }

.fond {
    margin: 0;
    border: 1px solid var(--bordure);
    border-radius: var(--r-s);
    overflow: hidden;
    background: var(--blanc);
    box-shadow: var(--ombre-1);
}

.fond img {
    display: block;
    width: 100%;
    aspect-ratio: 1440 / 400;
    max-width: 100%;
    object-fit: cover;
    background: var(--fond);
}

/* Une photo mise de cote se reconnait au premier coup d'oeil. */
.fond-repos { opacity: .5; }
.fond-repos img { filter: grayscale(1); }

.fond figcaption { padding: 12px 14px 14px; }
.fond figcaption strong { display: block; font-family: var(--titre); font-size: 1rem; }

.fond-portee {
    display: block;
    font-size: .82rem;
    color: var(--texte-doux);
    margin-top: 2px;
}

.fond-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 12px;
}

.fond-ordre { display: flex; align-items: center; gap: 6px; margin: 0; }
.fond-ordre label { font-size: .82rem; color: var(--texte-doux); margin: 0; }
.fond-ordre input { width: 64px; padding: 6px 8px; font-size: .88rem; }
.fond-actions .bouton { padding: 7px 12px; font-size: .84rem; }

/* ====================================================== tableau de bord
   Des chiffres qu'on ne trouve nulle part ailleurs, et des graphiques dessines
   en CSS : quelques barres ne justifient pas une bibliotheque de plus. */

/* Bandeau « vous regardez comme quelqu'un d'autre ». Orange plein et haut de
   page : il doit etre impossible d'oublier qu'on n'est pas chez soi. */
.bandeau-impersonation {
    background: var(--orange);
    color: var(--blanc);
    font-size: .92rem;
    padding: 11px 0;
}

.bandeau-impersonation-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

/* Le texte se retrecit pour que le bouton de sortie reste sur la meme ligne :
   il ne doit jamais partir sous le pli. */
.bandeau-impersonation-inner > div { flex: 1 1 380px; }

.bandeau-impersonation strong { font-family: var(--titre); }

.bandeau-impersonation .bouton {
    background: var(--blanc);
    color: var(--orange-fonce);
    box-shadow: none;
    flex: 0 0 auto;
}

.bandeau-impersonation .bouton:hover {
    background: var(--fond);
    color: var(--orange-fonce);
    transform: none;
    box-shadow: none;
}

.entete-tableau { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; flex-wrap: wrap; }

.chiffres-cles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 16px;
    margin-bottom: 22px;
}

.carte-chiffre {
    background: var(--blanc);
    border: 1px solid var(--bordure);
    border-radius: var(--r);
    padding: 20px 22px;
    box-shadow: var(--ombre-1);
}

.carte-chiffre.alerte { border-left: 4px solid var(--orange); }

.carte-chiffre .valeur {
    font-family: var(--titre);
    font-weight: 900;
    font-size: 2.1rem;
    line-height: 1.1;
    color: var(--bleu);
}

.carte-chiffre .valeur.vert { color: var(--vert-fonce); }

.carte-chiffre .libelle {
    font-size: .88rem;
    color: var(--texte-doux);
    margin-top: 4px;
}

.carte-chiffre .evolution { font-size: .82rem; margin-top: 8px; color: var(--texte-doux); }
.carte-chiffre .evolution.hausse { color: var(--vert-fonce); font-weight: 700; }
.carte-chiffre .evolution.baisse { color: var(--rouge-brique); font-weight: 700; }

.sous-titre { color: var(--texte-doux); font-size: .88rem; margin: -6px 0 16px; }

.legende { display: flex; gap: 20px; flex-wrap: wrap; font-size: .85rem; color: var(--texte-doux); margin-bottom: 14px; }
.legende .pastille { display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.pastille.bleu { background: var(--bleu); }
.pastille.gris { background: #c2ccd6; }
.pastille.vert { background: var(--vert); }

/* --- histogramme des douze mois ---------------------------------------- */
.graphe-barres {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 10px;
    align-items: end;
    min-height: 210px;
}

.graphe-barres .colonne { display: flex; flex-direction: column; align-items: center; gap: 6px; }

.graphe-barres .empilement {
    position: relative;
    width: 100%;
    max-width: 46px;
    height: 160px;
    display: flex;
    flex-direction: column-reverse;
    /* Le rail reste tres pale : sur un mois sans demande il ne doit pas se lire
       comme une barre. Le filet du bas sert de ligne de base commune. */
    background: var(--fond-doux);
    border-bottom: 2px solid var(--bordure);
    border-radius: var(--r-xs) var(--r-xs) 0 0;
    overflow: hidden;
}

.graphe-barres .barre { display: block; width: 100%; transition: height .3s ease; }
.graphe-barres .barre.devis { background: var(--bleu); }
.graphe-barres .barre.contacts { background: #c2ccd6; }

/* Le montant devise se lit comme un repere, pas comme une barre pleine. */
.graphe-barres .trait-montant {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    border-top: 2px solid var(--vert);
    pointer-events: none;
}

.graphe-barres .nombre { font-family: var(--titre); font-weight: 800; font-size: .9rem; color: var(--gris-fonce); min-height: 1.1em; }
.graphe-barres .mois { font-size: .76rem; color: var(--texte-doux); text-transform: capitalize; }

/* --- classements -------------------------------------------------------- */
.colonnes-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; }

.classement { display: flex; flex-direction: column; gap: 11px; }

.ligne-classement {
    display: grid;
    grid-template-columns: minmax(90px, 150px) minmax(0, 1fr) minmax(70px, auto);
    gap: 14px;
    align-items: center;
}

.etiquette-ligne {
    font-size: .9rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.piste { background: var(--fond); border-radius: 30px; height: 12px; overflow: hidden; }
.piste span { display: block; height: 100%; background: var(--bleu); border-radius: 30px; transition: width .3s ease; }
.piste span.vert { background: var(--vert); }

.valeur-ligne {
    text-align: right;
    font-family: var(--titre);
    font-weight: 800;
    font-size: .92rem;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.valeur-ligne small { display: block; font-weight: 400; font-size: .76rem; color: var(--texte-doux); }

.puces-villes .puce strong { margin-left: 6px; color: var(--bleu); }

@media (max-width: 700px) {
    .graphe-barres { gap: 4px; }
    .graphe-barres .empilement { height: 120px; }
    .graphe-barres .mois { font-size: .68rem; }
    .ligne-classement { grid-template-columns: minmax(80px, 110px) minmax(0, 1fr) auto; gap: 8px; }
}

/* ---------------------------------------------- ecran des demandes */
.message-demande {
    font-size: .88rem;
    color: var(--texte-doux);
    margin-top: 4px;
    max-height: 4.6em;
    overflow: hidden;
    white-space: pre-line;
}

.montant-demande {
    text-align: right;
    font-family: var(--titre);
    font-weight: 800;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.suivi-demande { margin-top: 6px; }

.suivi-demande select {
    font-size: .82rem;
    padding: 4px 8px;
    border: 1px solid var(--bordure);
    border-radius: var(--r-xs);
    background: var(--blanc);
    max-width: 130px;
}

/* ------------------------------------------------------------------ rythme
   Les pages de prestation sont longues — quatorze titres et cinquante-six
   paragraphes sur celle du DPE. La typographie n'etait pas en cause, le
   rythme manquait : chaque titre ouvre maintenant une section, teintee une
   fois sur deux, et un sommaire ancre permet d'aller droit au but.
   Le decoupage est fait au rendu (voir Sommaire.cs), aucun contenu n'a ete
   reecrit. */

.sommaire {
    margin: 1.8em 0 2.4em;
    padding: 18px 22px 20px;
    background: var(--fond);
    border: 1px solid var(--bordure);
    border-radius: var(--r-s);
    border-left: 4px solid var(--vert);
}
.sommaire-titre {
    font-family: var(--titre);
    font-weight: 800;
    font-size: .78rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--texte-doux);
    margin: 0 0 10px;
}
.sommaire ol {
    margin: 0; padding: 0; list-style: none;
    counter-reset: som;
    columns: 2; column-gap: 28px;
}
.sommaire ol > li {
    position: relative;
    padding-left: 26px;
    margin: 0 0 .42em;
    break-inside: avoid;
    font-size: .95rem;
}
.sommaire ol > li::before {
    counter-increment: som; content: counter(som);
    position: absolute; left: 0; top: .16em;
    width: 18px; height: 18px; border-radius: 50%;
    background: var(--blanc); border: 1px solid var(--bordure); color: var(--texte-doux);
    font-family: var(--titre); font-weight: 800; font-size: .68rem;
    display: grid; place-items: center;
}
.sommaire a { border-bottom: 0; font-weight: 500; color: var(--texte); }

@media (max-width: 720px) { .sommaire ol { columns: 1; } }

/* Les sections. « scroll-margin-top » evite que l'en-tete colle recouvre le
   titre quand on arrive par une ancre du sommaire. */
.article .sect { scroll-margin-top: 96px; margin: 0 0 .6em; }
.article .sect > h2:first-child { margin-top: 1.9em; }

.article .sect-teinte {
    background: var(--fond-doux);
    border: 1px solid var(--bordure);
    border-radius: var(--r);
    padding: 4px 26px 18px;
    margin: 1.6em -26px 1.6em;
}
.article .sect-teinte > h2:first-child { margin-top: .9em; }

@media (max-width: 720px) {
    .article .sect-teinte { margin-left: -14px; margin-right: -14px; padding: 4px 14px 14px; }
}

/* ------------------------------------------------- sommaire colle et suivi */

.sommaire-flux { display: block; }
.sommaire-colle { display: none; }

@media (min-width: 1000px) {
    .sommaire-flux { display: none; }
    .sommaire-colle {
        display: block;
        position: sticky;
        top: 88px;
        /* La carte du responsable, qui suit dans la colonne, passait par
           dessus en defilant : un element colle doit etre empile au-dessus
           de ce qui glisse sous lui. */
        z-index: 2;
        background: var(--blanc);
        max-height: calc(100vh - 120px);
        overflow-y: auto;
        margin: 0 0 20px;
        padding: 16px 18px 18px;
    }
    .sommaire-colle ol { columns: 1; }
    .sommaire-colle li { font-size: .88rem; }
}

/* L'entree de la section qu'on lit. Le point passe au vert plein et le
   libelle se fonce : on sait ou l'on en est dans une page qui compte douze
   chapitres. */
.sommaire ol > li.ici > a { color: var(--bleu); font-weight: 700; }
.sommaire ol > li.ici::before {
    background: var(--vert); border-color: var(--vert-fonce); color: var(--blanc);
}

/* Le numero de section, colle au titre. Discret mais il structure. */
.article .sect-num {
    display: inline-block;
    font-family: var(--titre);
    font-size: .52em;
    font-weight: 800;
    letter-spacing: .06em;
    color: var(--vert-fonce);
    background: rgba(127, 189, 0, .13);
    border-radius: 999px;
    padding: .28em .7em;
    margin-right: .6em;
    vertical-align: .38em;
}

/* Teinte plus affirmee, et un filet vert sur la tranche. */
.article .sect-teinte {
    background: var(--fond);
    border: 1px solid var(--bordure);
    border-left: 4px solid var(--vert);
    border-radius: var(--r);
    padding: 6px 28px 20px;
    margin: 1.8em -28px;
    box-shadow: var(--ombre-1);
}

@media (max-width: 720px) {
    .article .sect-teinte { margin-left: -14px; margin-right: -14px; padding: 6px 14px 14px; }
    .article .sect-num { display: block; margin: 0 0 .5em; width: max-content; }
}

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

/* --------------------------------------------- sommaire repliable */

.sommaire-titre {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    margin: 0 0 10px;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
    text-align: left;
    font-family: var(--titre);
    font-weight: 800;
    font-size: .78rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--texte-doux);
}
.sommaire-titre:hover { color: var(--bleu); }
.sommaire-titre:focus-visible { outline: 2px solid var(--vert); outline-offset: 3px; border-radius: 3px; }

.sommaire-chevron {
    flex: 0 0 auto;
    width: 9px; height: 9px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .18s ease;
}
.sommaire.replie .sommaire-chevron { transform: rotate(-135deg) translate(-3px, -3px); }

/* Replie, il ne reste que sa barre de titre : la fiche du responsable
   redevient visible dans la colonne. */
.sommaire.replie ol { display: none; }
.sommaire.replie { padding-bottom: 14px; }

@media (prefers-reduced-motion: reduce) { .sommaire-chevron { transition: none; } }

/* ------------------------------------- survol du sommaire : la ligne, pas
   un soulignement. Un trait vert sous chaque entree faisait bricole sur une
   liste ; c'est la ligne entiere qui reagit, comme dans un menu. */

.sommaire ol > li {
    padding: 4px 10px 4px 32px;
    margin: 0 -8px .16em;
    border-radius: var(--r-xs);
    transition: background-color .15s ease;
}
.sommaire ol > li::before { left: 7px; top: .46em; }

.sommaire ol > li:hover { background: rgba(11, 31, 143, .055); }
.sommaire ol > li:hover > a { color: var(--bleu); }

/* Plus de trait vert : le survol se lit au fond, pas au soulignement. */
.sommaire a,
.sommaire a:hover { border-bottom: 0; }

/* Au clavier, il faut bien que quelque chose se voie. */
.sommaire a:focus-visible {
    outline: 2px solid var(--vert);
    outline-offset: 2px;
    border-radius: 3px;
}

/* L'entree courante garde sa pastille verte : elle ne doit pas se confondre
   avec la ligne simplement survolee. */
.sommaire ol > li.ici { background: rgba(127, 189, 0, .1); }

@media (prefers-reduced-motion: reduce) { .sommaire ol > li { transition: none; } }