/* ==============================================================
   Gestion DBI Télécommunication
   Feuille de style principale
   ============================================================== */

/* Polices hébergées sur le site (polices variables, sous-ensemble latin)
   Licence SIL Open Font License 1.1 : voir assets/fonts/OFL-*.txt */
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 500 800;
    font-display: swap;
    src: url('../fonts/montserrat.woff2') format('woff2');
}
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400 600;
    font-display: swap;
    src: url('../fonts/open-sans.woff2') format('woff2');
}

:root {
    --bleu:        #1d5fb8;   /* bleu du logo */
    --bleu-fonce:  #154a92;
    --bleu-clair:  #5192e1;   /* bleu de gestiondbi.com */
    --marine:      #0f1c2e;
    --ardoise:     #26313c;
    --texte:       #2b3440;
    --texte-doux:  #5d6875;
    --fond-pale:   #f2f6fb;
    --bordure:     #dde4ed;
    --blanc:       #ffffff;
    --succes:      #1f7a4d;
    --erreur:      #b3261e;

    --police-titre: 'Montserrat', system-ui, sans-serif;
    --police-texte: 'Open Sans', system-ui, sans-serif;

    --rayon: 10px;
    --ombre: 0 8px 24px rgba(15, 28, 46, .08);
    --largeur: 1180px;
}

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

html { scroll-behavior: smooth; scroll-padding-top: 90px; }

body {
    margin: 0;
    font-family: var(--police-texte);
    font-size: 1rem;
    line-height: 1.65;
    color: var(--texte);
    background: var(--blanc);
    -webkit-font-smoothing: antialiased;
}

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

a { color: var(--bleu); }
a:hover { color: var(--bleu-fonce); }

h1, h2, h3 {
    font-family: var(--police-titre);
    color: var(--marine);
    line-height: 1.2;
    margin: 0 0 .6em;
}
h1 { font-size: clamp(2rem, 4.5vw, 3.25rem); font-weight: 800; }
h2 { font-size: clamp(1.6rem, 3vw, 2.25rem); font-weight: 700; }
h3 { font-size: 1.15rem; font-weight: 700; }
p  { margin: 0 0 1em; }

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

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

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

.saut { position: absolute; left: -999px; top: 0; background: var(--marine); color: var(--blanc); padding: 10px 16px; z-index: 100; }
.saut:focus { left: 10px; }

/* ---------- Icônes ---------- */
.icone        { width: 28px; height: 28px; }
.icone-sm     { width: 16px; height: 16px; vertical-align: -3px; }
.icone-geante { width: 100%; height: 100%; stroke-width: .9; }

.pastille {
    display: inline-grid; place-items: center;
    width: 60px; height: 60px; border-radius: 14px;
    background: linear-gradient(135deg, var(--bleu), var(--bleu-clair));
    color: var(--blanc); flex-shrink: 0;
}
.pastille-sm { width: 48px; height: 48px; border-radius: 12px; }
.pastille-sm .icone { width: 24px; height: 24px; }

/* ---------- Boutons ---------- */
.bouton {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 14px 26px; border: 2px solid var(--bleu); border-radius: 50px;
    background: var(--bleu); color: var(--blanc);
    font-family: var(--police-titre); font-weight: 600; font-size: .95rem;
    text-decoration: none; cursor: pointer;
    transition: background .2s, border-color .2s, color .2s, transform .2s;
}
.bouton:hover { background: var(--bleu-fonce); border-color: var(--bleu-fonce); color: var(--blanc); transform: translateY(-1px); }
.bouton-petit { padding: 9px 18px; font-size: .85rem; }
.bouton-contour { background: transparent; border-color: rgba(255,255,255,.75); color: var(--blanc); }
.bouton-contour:hover { background: var(--blanc); border-color: var(--blanc); color: var(--marine); }
.bouton-blanc { background: var(--blanc); border-color: var(--blanc); color: var(--bleu); }
.bouton-blanc:hover { background: var(--fond-pale); border-color: var(--fond-pale); color: var(--bleu-fonce); }

.lien-fleche {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--police-titre); font-weight: 600; font-size: .9rem;
    color: var(--bleu); text-decoration: none;
}
.lien-fleche .icone-sm { transition: transform .2s; }
.lien-fleche:hover .icone-sm { transform: translateX(4px); }

.surtitre {
    font-family: var(--police-titre); font-weight: 700; font-size: .8rem;
    text-transform: uppercase; letter-spacing: .12em; color: var(--bleu-clair);
    margin-bottom: .6em;
}

/* ---------- Barre d'information ---------- */
.barre-info { background: var(--marine); color: #c6d2e1; font-size: .85rem; }
.barre-info .conteneur { display: flex; justify-content: space-between; gap: 16px; padding-top: 8px; padding-bottom: 8px; }
.barre-info a { color: #c6d2e1; text-decoration: none; }
.barre-info a:hover { color: var(--blanc); }
.barre-info-droite { display: flex; gap: 22px; }

/* ---------- En-tête ---------- */
.entete {
    position: sticky; top: 0; z-index: 50;
    background: var(--blanc); border-bottom: 1px solid var(--bordure);
    transition: box-shadow .2s;
}
.entete.defile { box-shadow: var(--ombre); }
.entete-interieur { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 80px; }
.logo img { width: 190px; }

.navigation { display: flex; align-items: center; gap: 28px; }
.navigation a { white-space: nowrap; }
.navigation ul { display: flex; gap: 26px; list-style: none; margin: 0; padding: 0; }
.navigation ul a {
    font-family: var(--police-titre); font-weight: 600; font-size: .95rem;
    color: var(--ardoise); text-decoration: none; padding: 6px 0;
    border-bottom: 2px solid transparent;
}
.navigation ul a:hover, .navigation ul a[aria-current="page"] { color: var(--bleu); border-bottom-color: var(--bleu); }

.lien-langue {
    font-family: var(--police-titre); font-weight: 700; font-size: .85rem;
    color: var(--ardoise); text-decoration: none;
    padding: 5px 10px; border: 1px solid var(--bordure); border-radius: 6px;
}
.lien-langue abbr { text-decoration: none; }
.lien-langue:hover { color: var(--bleu); border-color: var(--bleu); }

.menu-bouton { display: none; background: none; border: 0; padding: 8px; color: var(--marine); cursor: pointer; }
.menu-bouton svg { width: 28px; height: 28px; }
.icone-menu-fermer { display: none; }

/* ---------- Héros ---------- */
.hero {
    position: relative; color: var(--blanc);
    background: linear-gradient(100deg, rgba(10,22,40,.92) 0%, rgba(10,22,40,.72) 55%, rgba(10,22,40,.35) 100%),
                url('../img/hero-tour.jpg') center right / cover no-repeat var(--marine);
}
.hero-contenu { padding-top: clamp(80px, 12vw, 150px); padding-bottom: clamp(80px, 12vw, 150px); max-width: var(--largeur); }
.hero h1 { color: var(--blanc); max-width: 720px; }
.hero-texte { font-size: 1.15rem; max-width: 600px; color: #d6e0ec; margin-bottom: 2em; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* ---------- Bandeau des pages intérieures ---------- */
.bandeau {
    color: var(--blanc); padding: 70px 0 60px;
    background: linear-gradient(100deg, rgba(10,22,40,.94), rgba(21,74,146,.85)),
                url('../img/hero-tour.jpg') center / cover no-repeat var(--marine);
}
.bandeau h1 { color: var(--blanc); }
.bandeau p:last-child { max-width: 640px; color: #d6e0ec; font-size: 1.1rem; margin: 0; }

/* ---------- Page Urgence ---------- */
.bandeau-urgence {
    background: linear-gradient(100deg, rgba(10,22,40,.95), rgba(140,29,24,.88)),
                url('../img/hero-tour.jpg') center / cover no-repeat var(--marine);
}
.bandeau-urgence h1 + p { max-width: 640px; color: #e6dcdc; font-size: 1.1rem; }
.bandeau-urgence .note-frais { margin: 14px 0 0 30px; color: rgba(255,255,255,.55); font-size: .5rem; font-style: italic; }
.tel-urgence {
    display: inline-flex; align-items: center; gap: 14px; margin-top: 28px; padding: 16px 30px;
    background: var(--blanc); color: var(--erreur); border-radius: 50px; text-decoration: none;
    font-family: var(--police-titre); font-weight: 800; font-size: clamp(1.4rem, 4vw, 2.1rem);
    box-shadow: 0 10px 30px rgba(0,0,0,.25); transition: transform .2s;
}
.tel-urgence:hover { color: var(--erreur); transform: translateY(-2px); }
.tel-urgence .icone { width: 1.1em; height: 1.1em; }
.grille-urgences { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
/* Une colonne par carte, peu importe les règles de placement de .grille-services */
.grille-urgences .carte-service.carte-statique:nth-child(n) { grid-column: auto; }
.grille-urgences .pastille { margin-bottom: 14px; }
.grille-urgences .carte-statique:hover { transform: none; box-shadow: none; border-color: var(--bordure); }
.grille-urgences .h3 { font-size: 1.15rem; }
.note-etat { text-align: center; color: var(--texte-doux); margin: 34px 0 0; }
.deux-colonnes-haut { align-items: start; }
.deux-colonnes-haut .pastille { margin-bottom: 18px; }
.alerte-danger { max-width: 800px; margin: 0 auto 50px; text-align: center; font-size: 1.05rem; }

/* ---------- Sections ---------- */
.section { padding: clamp(60px, 8vw, 100px) 0; }
.section-pale { background: var(--fond-pale); }

.entete-section { text-align: center; max-width: 680px; margin: 0 auto 50px; }
.entete-section p:last-child { color: var(--texte-doux); }

.deux-colonnes { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 70px); align-items: center; }
.deux-colonnes-inverse > :first-child { order: 2; }

.photo-cadre { border-radius: var(--rayon); overflow: hidden; box-shadow: var(--ombre); }
.photo-cadre img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* ---------- Cartes de services ---------- */
.grille-services { display: grid; grid-template-columns: repeat(6, 1fr); gap: 24px; }
.carte-service {
    grid-column: span 2;
    display: flex; flex-direction: column; gap: 4px;
    padding: 30px; border: 1px solid var(--bordure); border-radius: var(--rayon);
    background: var(--blanc); color: var(--texte); text-decoration: none;
    transition: transform .2s, box-shadow .2s, border-color .2s;
}
/* 5 cartes : 3 en haut, 2 centrées en bas */
.carte-service:nth-child(4) { grid-column: 2 / span 2; }
.carte-service:hover { transform: translateY(-4px); box-shadow: var(--ombre); border-color: transparent; color: var(--texte); }
.carte-service .pastille { margin-bottom: 14px; }
.carte-service p { color: var(--texte-doux); font-size: .95rem; flex-grow: 1; }

/* ---------- Atouts ---------- */
.liste-atouts { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 22px; }
.liste-atouts li { display: flex; gap: 18px; align-items: flex-start; }
.liste-atouts h3 { margin-bottom: .25em; }
.liste-atouts p { margin: 0; color: var(--texte-doux); font-size: .95rem; }

.clientele { list-style: none; padding: 0; margin: 24px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.clientele li {
    padding: 12px 14px; border-left: 3px solid var(--bleu-clair);
    background: var(--fond-pale); border-radius: 0 6px 6px 0;
    font-weight: 600; font-size: .9rem; color: var(--ardoise);
}

/* ---------- Page services ---------- */
.sous-menu { background: var(--blanc); border-bottom: 1px solid var(--bordure); }
.sous-menu .conteneur { display: flex; flex-wrap: wrap; gap: 8px 10px; padding-top: 16px; padding-bottom: 16px; }
.sous-menu a {
    padding: 7px 14px; border-radius: 50px; background: var(--fond-pale);
    font-family: var(--police-titre); font-weight: 600; font-size: .82rem;
    color: var(--ardoise); text-decoration: none;
}
.sous-menu a:hover { background: var(--bleu); color: var(--blanc); }

.service-detail .pastille { margin-bottom: 18px; }
.service-detail .intro { font-size: 1.1rem; color: var(--texte-doux); }

.liste-coches { list-style: none; padding: 0; margin: 0 0 26px; display: grid; gap: 10px; }
.liste-coches li { position: relative; padding-left: 30px; }
.liste-coches li::before {
    content: ''; position: absolute; left: 0; top: .3em;
    width: 18px; height: 18px; border-radius: 50%;
    background: var(--bleu) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12l4 4 8-8'/%3E%3C/svg%3E") center / 12px no-repeat;
}

.illustration {
    aspect-ratio: 4 / 3; border-radius: var(--rayon);
    display: grid; place-items: center; padding: 18%;
    color: rgba(255,255,255,.9);
    background: radial-gradient(circle at 30% 20%, var(--bleu-clair), var(--bleu) 45%, var(--marine));
    box-shadow: var(--ombre);
}

/* ---------- Appel à l'action ---------- */
.appel { background: linear-gradient(110deg, var(--bleu-fonce), var(--bleu) 60%, var(--bleu-clair)); color: var(--blanc); padding: 56px 0; }
.appel-contenu { display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.appel h2 { color: var(--blanc); margin-bottom: .3em; }
.appel p { margin: 0; color: #e3ecf8; }
.appel-actions { display: flex; flex-wrap: wrap; gap: 12px; flex-shrink: 0; }

/* ---------- Contact ---------- */
.contact-grille { display: grid; grid-template-columns: 1.6fr 1fr; gap: clamp(30px, 5vw, 60px); align-items: start; }

.champs-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
.champ { margin-bottom: 20px; }
.champ label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: 6px; color: var(--ardoise); }
.requis { color: var(--erreur); }
.champ input, .champ select, .champ textarea {
    width: 100%; padding: 12px 14px; font: inherit; color: var(--texte);
    border: 1px solid var(--bordure); border-radius: 8px; background: var(--blanc);
    transition: border-color .2s, box-shadow .2s;
}
.champ input:focus, .champ select:focus, .champ textarea:focus {
    outline: none; border-color: var(--bleu-clair); box-shadow: 0 0 0 3px rgba(81,146,225,.25);
}
/* Liste déroulante : même hauteur que les autres champs, y compris sur Safari / iPhone */
.champ select {
    -webkit-appearance: none; appearance: none; padding-right: 42px;
    background: var(--blanc) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center / 18px;
}
.champ [aria-invalid="true"] { border-color: var(--erreur); }
.champ-erreur { color: var(--erreur); font-size: .85rem; margin: 6px 0 0; }
.champ-piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.alerte { padding: 18px 20px; border-radius: 8px; margin-bottom: 24px; }
.alerte h2 { font-size: 1.25rem; color: inherit; }
.alerte p:last-child { margin: 0; }
.alerte-succes { background: #e7f5ee; color: var(--succes); border: 1px solid #b7e0cb; }
.alerte-erreur { background: #fdecea; color: var(--erreur); border: 1px solid #f5c2bd; }

.contact-infos { display: grid; gap: 16px; }
.carte-info { display: flex; gap: 16px; padding: 22px; border-radius: var(--rayon); background: var(--fond-pale); }
.carte-info h2 { font-size: 1rem; margin-bottom: .3em; }
.carte-info a { font-weight: 600; text-decoration: none; word-break: break-word; }
.carte-info .heures li { color: var(--texte); }
.carte-info > div { flex: 1; min-width: 0; }
.note { font-size: .85rem; color: var(--texte-doux); margin: 8px 0 0; font-style: italic; }

.heures { list-style: none; padding: 0; margin: 0; font-size: .9rem; }
.heures li { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; }

/* ---------- Pied de page ---------- */
.pied { background: var(--marine); color: #aebbcc; font-size: .92rem; padding-top: 60px; }
.pied a { color: #d6e0ec; text-decoration: none; }
.pied a:hover { color: var(--blanc); }
.pied-grille { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 40px; padding-bottom: 50px; }
.pied-titre { font-family: var(--police-titre); font-weight: 700; color: var(--blanc); font-size: 1rem; margin-bottom: 1em; }
.pied-titre-espace { margin-top: 1.6em; }
.pied-liens { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.pied-contact li { display: flex; align-items: center; gap: 8px; }
.pied-note { font-style: italic; font-size: .85rem; margin-top: 10px; }
.social { list-style: none; padding: 0; margin: 18px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.social a { display: inline-block; padding: 6px 14px; border: 1px solid rgba(255,255,255,.2); border-radius: 50px; font-size: .82rem; }
.social a:hover { background: var(--bleu); border-color: var(--bleu); }
.copyright { border-top: 1px solid rgba(255,255,255,.1); padding: 18px 0; font-size: .85rem; text-align: center; }

/* ---------- Texte long (politique de confidentialité) ---------- */
.texte-long { max-width: 800px; }
.texte-long h2 { font-size: clamp(1.25rem, 2.2vw, 1.5rem); margin: 2em 0 .6em; }
.texte-long ul { margin: 0 0 1em; padding-left: 1.3em; }
.texte-long li { margin-bottom: .4em; }
.texte-long > .note { margin: 0 0 1.5em; }
.note-formulaire { font-size: .85rem; color: var(--texte-doux); margin: 14px 0 0; }

/* ---------- Réactif ---------- */
@media (max-width: 1000px) {
    .menu-bouton { display: block; }
    .navigation {
        display: none; position: absolute; top: 100%; left: 0; right: 0;
        flex-direction: column; align-items: stretch; gap: 16px;
        padding: 16px 20px 24px; background: var(--blanc);
        border-bottom: 1px solid var(--bordure); box-shadow: var(--ombre);
    }
    .navigation ul { flex-direction: column; gap: 0; }
    .navigation ul a { display: block; padding: 12px 0; border-bottom: 1px solid var(--bordure); }
    .navigation ul a:hover, .navigation ul a[aria-current="page"] { border-bottom-color: var(--bordure); }
    .navigation .bouton { justify-content: center; }
    .lien-langue { align-self: flex-start; }
    .entete.ouvert .navigation { display: flex; }
    .entete.ouvert .icone-menu-ouvrir { display: none; }
    .entete.ouvert .icone-menu-fermer { display: block; }

    .grille-services, .grille-urgences { grid-template-columns: 1fr 1fr; }
    .carte-service, .carte-service:nth-child(4) { grid-column: auto; }
    .carte-service:last-child { grid-column: 1 / -1; }
    .pied-grille { grid-template-columns: 1fr 1fr; }
    .pied-grille > :first-child { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
    .deux-colonnes, .contact-grille { grid-template-columns: 1fr; }
    .deux-colonnes-inverse > :first-child { order: 0; }
    .appel-contenu { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 640px) {
    .barre-info .conteneur > span:first-child { display: none; }
    .barre-info .conteneur { justify-content: center; }
    .barre-info-droite { gap: 16px; flex-wrap: wrap; justify-content: center; }
    .logo img { width: 150px; }
    .entete-interieur { min-height: 68px; }
    .conteneur { padding-left: 16px; padding-right: 16px; }
    .grille-services, .grille-urgences, .champs-2, .clientele, .pied-grille { grid-template-columns: 1fr; }
    .tel-urgence { width: 100%; justify-content: center; }
    .bandeau-urgence .note-frais { margin-left: 0; text-align: center; }
    .carte-service:last-child { grid-column: auto; }
    .carte-service { padding: 24px; }
    .hero-actions .bouton, .appel-actions .bouton { width: 100%; justify-content: center; }
    .appel-actions { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { transition: none !important; }
}