/* =============================================================================
   GisMapX : feuille de style du site
   -----------------------------------------------------------------------------
   Ce fichier règle l'apparence des 5 pages. Il est découpé en sections
   numérotées (cherche « 1. », « 2. »… avec Ctrl+F) :

     1.  Polices
     2.  Réglages principaux : couleurs, polices, tailles  <- à modifier en priorité
     3.  Base (texte, liens, images)
     4.  Bascule français / anglais
     5.  Mise en page générale (conteneur, sections, titres)
     6.  En-tête et menu
     7.  Boutons
     8.  Accueil : bandeau d'introduction et plan de réseaux
     8 bis. Plan de réseaux en 3D (boutons, info-bulle, légende cliquable)
     9.  Cartes de services, étapes, pastilles (secteurs, outils)
     10. Bandeau « Prendre rendez-vous »
     11. Pages intérieures : en-tête de page
     12. Page À propos
     13. Page Services
     13 bis. Petites animations des illustrations
     14. Page Contact (Calendly)
     15. Mentions légales
     16. Pied de page
     17. Adaptation tablette et téléphone
     18. Accessibilité : mouvements réduits

   Astuce : pour changer une couleur partout sur le site, modifie seulement
   la valeur dans la section 2 (par exemple --bleu-marine).
   ============================================================================= */


/* =============================================================================
   1. POLICES
   Space Grotesk (titres, menu, boutons) et IBM Plex Sans (texte courant).
   Les fichiers sont dans assets/fonts/ (licence SIL Open Font License 1.1).
   ============================================================================= */
@font-face { font-family: "Space Grotesk"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/space-grotesk-500.woff2") format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/space-grotesk-600.woff2") format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/space-grotesk-700.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/ibm-plex-sans-400.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/ibm-plex-sans-600.woff2") format("woff2"); }


/* =============================================================================
   2. RÉGLAGES PRINCIPAUX
   ============================================================================= */
:root {
  /* --- Couleurs de la marque (reprises de l'ancien site et du logo) --- */
  --bleu-marine: #003086;        /* titres et boutons principaux */
  --bleu-marine-fonce: #00215E;  /* survol des boutons */
  --bleu-nuit: #0A1A3F;          /* fond du pied de page */
  --cyan: #00A8E8;               /* accent du logo (le « X ») : décor uniquement */
  --cyan-texte: #0074B3;         /* cyan assombri, lisible pour du texte */
  --violet: #302880;             /* violet du pin du logo */

  /* --- Texte et fonds --- */
  --texte: #16233F;              /* texte courant */
  --texte-doux: #4A5874;         /* texte secondaire */
  --ciel-0: #FDFFFF;             /* dégradé bleu très clair de l'ancien site (haut) */
  --ciel-1: #F2FAFF;
  --ciel-2: #EBF7FF;             /* dégradé (bas) */
  --trait: #D8E6F4;              /* bordures fines */
  --blanc: #FFFFFF;

  /* --- Couleurs normalisées des réseaux (légende du plan) --- */
  --reseau-elec: #D62839;        /* électricité : rouge */
  --reseau-gaz: #E0A400;         /* gaz, hydrocarbures : jaune */
  --reseau-telecom: #2E9E50;     /* télécoms : vert */
  --reseau-eau: #1F6FC5;         /* eau potable : bleu */

  /* --- Polices --- */
  --police-titres: "Space Grotesk", "Segoe UI", system-ui, -apple-system, sans-serif;
  --police-texte: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* --- Dimensions --- */
  --largeur-max: 1160px;         /* largeur maximale du contenu */
  --marge-cote: 24px;            /* marge gauche / droite du contenu */
  --rayon: 16px;                 /* arrondi des cartes */
  --rayon-petit: 10px;           /* arrondi des boutons */
  --ombre: 0 1px 2px rgba(0, 48, 134, .05), 0 10px 30px rgba(0, 48, 134, .07);
  --ombre-forte: 0 2px 6px rgba(0, 48, 134, .06), 0 24px 60px rgba(0, 48, 134, .14);

  color-scheme: light;
}


/* =============================================================================
   3. BASE
   ============================================================================= */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }

body {
  margin: 0;
  background: var(--blanc);
  color: var(--texte);
  font: 400 1.0625rem/1.65 var(--police-texte);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; font-family: var(--police-titres); color: var(--bleu-marine); line-height: 1.15; }
p, ul, ol, dl, dd, figure { margin: 0; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }

a { color: var(--bleu-marine); text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { color: var(--cyan-texte); }

/* Contour bien visible quand on navigue au clavier */
:focus-visible { outline: 3px solid var(--cyan-texte); outline-offset: 2px; border-radius: 4px; }

/* Lien « Aller au contenu » : invisible sauf au clavier */
.lien-evitement { position: absolute; left: -9999px; top: 10px; z-index: 100; background: var(--blanc); padding: 10px 14px; border-radius: 8px; box-shadow: var(--ombre); }
.lien-evitement:focus { left: 16px; }


/* =============================================================================
   4. BASCULE FRANÇAIS / ANGLAIS
   Chaque texte existe deux fois dans le HTML : data-l="fr" et data-l="en".
   Sans choix, le français s'affiche ; le bouton EN ajoute la classe « en »
   sur la page, ce qui masque le français et affiche l'anglais.
   ============================================================================= */
html:not(.en) [data-l="en"],
html.en [data-l="fr"] { display: none !important; }


/* =============================================================================
   5. MISE EN PAGE GÉNÉRALE
   ============================================================================= */
.conteneur { width: 100%; max-width: calc(var(--largeur-max) + 2 * var(--marge-cote)); margin: 0 auto; padding: 0 var(--marge-cote); }

.section { padding: 88px 0; }
.section--ciel { background: linear-gradient(180deg, var(--ciel-1) 0%, var(--ciel-0) 100%); }

/* Titre + introduction en tête de section */
.section__tete { max-width: 680px; margin-bottom: 40px; }
.section__tete h2 { font-size: clamp(1.75rem, 3vw, 2.4rem); font-weight: 700; letter-spacing: -.01em; }
.section__tete p { margin-top: 12px; color: var(--texte-doux); font-size: 1.08rem; }


/* =============================================================================
   6. EN-TÊTE ET MENU
   ============================================================================= */
.entete {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .94);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--trait);
}
.entete__barre { display: flex; align-items: center; gap: 28px; min-height: 74px; }

/* Logo : icône + nom « GisMapX » (le X en cyan comme sur le logo) */
.marque { display: flex; align-items: center; gap: 11px; text-decoration: none; color: var(--bleu-marine); }
.marque img { width: 42px; height: 42px; border-radius: 11px; }
.marque__nom { font: 700 1.4rem/1 var(--police-titres); letter-spacing: -.01em; }
.marque__nom span { color: var(--cyan); }

/* Menu principal */
.menu { margin-left: auto; display: flex; align-items: center; gap: 26px; }
.menu ul { list-style: none; padding: 0; display: flex; gap: 26px; }
/* « .menu ul a » vise seulement les liens des pages (pas le bouton « Prendre RDV ») */
.menu ul a { position: relative; font: 500 1rem/1 var(--police-titres); color: var(--texte); text-decoration: none; padding: 8px 0; }
.menu ul a:hover { color: var(--bleu-marine); }
.menu ul a[aria-current="page"] { color: var(--bleu-marine); }
.menu ul a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; border-radius: 2px; background: var(--cyan); }

/* Boutons FR / EN */
.langues { display: flex; padding: 3px; gap: 2px; border: 1px solid var(--trait); border-radius: 999px; background: var(--blanc); }
.langues button { font: 600 .82rem/1 var(--police-titres); letter-spacing: .03em; color: var(--texte-doux); background: none; border: 0; border-radius: 999px; padding: 7px 11px; cursor: pointer; }
.langues button[aria-pressed="true"] { background: var(--bleu-marine); color: var(--blanc); }

/* Bouton « Menu » : visible seulement sur téléphone et tablette (section 17) */
.entete__menu { display: none; margin-left: auto; align-items: center; gap: 8px; font: 600 .95rem/1 var(--police-titres); color: var(--bleu-marine); background: var(--ciel-1); border: 1px solid var(--trait); border-radius: var(--rayon-petit); padding: 10px 14px; cursor: pointer; }
.entete__menu svg { width: 18px; height: 18px; }


/* =============================================================================
   7. BOUTONS
   .bouton--plein (bleu marine), .bouton--contour (bordure), .bouton--clair (sur fond foncé)
   ============================================================================= */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px; padding: 0 24px;
  font: 600 1rem/1.1 var(--police-titres);
  text-decoration: none; text-align: center;
  border-radius: var(--rayon-petit); border: 1.5px solid transparent;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.bouton svg { width: 18px; height: 18px; flex: none; }
.bouton--plein { background: var(--bleu-marine); color: var(--blanc); box-shadow: 0 8px 20px rgba(0, 48, 134, .18); }
.bouton--plein:hover { background: var(--bleu-marine-fonce); color: var(--blanc); }
.bouton--contour { background: var(--blanc); color: var(--bleu-marine); border-color: var(--bleu-marine); }
.bouton--contour:hover { background: var(--ciel-1); color: var(--bleu-marine); }
.bouton--clair { background: var(--blanc); color: var(--bleu-marine); }
.bouton--clair:hover { background: var(--ciel-2); color: var(--bleu-marine); }
.bouton--petit { min-height: 42px; padding: 0 16px; font-size: .95rem; }


/* =============================================================================
   8. ACCUEIL : BANDEAU D'INTRODUCTION ET PLAN DE RÉSEAUX
   ============================================================================= */
.hero {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, var(--ciel-0) 0%, var(--ciel-1) 55%, var(--ciel-2) 100%);
}
/* Fond de courbes de niveau, estompé côté texte */
.hero::before {
  content: ""; position: absolute; inset: 0;
  background: url("../img/courbes.svg") center / cover no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 55%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 55%);
}
/* padding-block : marges haut et bas seulement (les marges gauche / droite viennent de .conteneur) */
.hero__grille { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 56px; align-items: center; padding-block: 76px 92px; }
.hero h1 { font-size: clamp(2.2rem, 4.4vw, 3.5rem); font-weight: 700; line-height: 1.07; letter-spacing: -.025em; max-width: 19ch; text-wrap: balance; }
.hero__intro { margin: 22px 0 32px; font-size: 1.15rem; color: var(--texte-doux); max-width: 54ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* Petite présentation avec photo, sous les boutons */
.auteur { display: flex; align-items: center; gap: 14px; margin-top: 36px; }
.auteur picture { flex: none; }   /* empêche la photo de s'écraser sur petit écran */
.auteur img { width: 58px; height: 58px; border-radius: 50%; border: 3px solid var(--blanc); box-shadow: var(--ombre); object-fit: cover; }
.auteur strong { display: block; font: 600 1.02rem/1.3 var(--police-titres); color: var(--bleu-marine); }
.auteur span { font-size: .95rem; color: var(--texte-doux); }

/* Carte contenant l'illustration du plan de réseaux */
.plan { background: var(--blanc); border: 1px solid var(--trait); border-radius: 20px; box-shadow: var(--ombre-forte); padding: 14px; }
.plan img { width: 100%; border-radius: 12px; }
/* Légende sous le plan : un trait de couleur par réseau */
.plan figcaption { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 14px 6px 4px; font-size: .9rem; color: var(--texte-doux); }
.plan figcaption span { display: inline-flex; align-items: center; gap: 8px; }
.plan figcaption i { width: 22px; height: 4px; border-radius: 2px; display: inline-block; }
.plan .l-elec { background: var(--reseau-elec); }
.plan .l-gaz { background: var(--reseau-gaz); }
.plan .l-telecom { background: var(--reseau-telecom); }
.plan .l-eau { background: var(--reseau-eau); }
.plan .l-point { width: 11px; height: 11px; border-radius: 50%; background: var(--blanc); border: 2px solid var(--bleu-marine); }


/* =============================================================================
   8 bis. PLAN DE RÉSEAUX EN 3D (accueil)
   La scène est dessinée par assets/js/plan-3d.js. Tant que le script n'a pas
   démarré (ou sans JavaScript), c'est l'image 2D plan-reseaux.svg qui s'affiche.
   ============================================================================= */
.plan-3d__scene { position: relative; aspect-ratio: 600 / 470; border-radius: 12px; overflow: hidden; background: linear-gradient(180deg, #FAFDFF 0%, #EDF4FC 100%); }
.plan-3d__secours { width: 100%; height: 100%; object-fit: cover; }
.plan-3d__canvas { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; cursor: grab; touch-action: pan-y; }
.plan-3d__canvas:active { cursor: grabbing; }
.plan-3d.actif .plan-3d__canvas { display: block; }
.plan-3d.actif .plan-3d__secours { visibility: hidden; }
.plan-3d:not(.actif) .plan-3d__boutons,
.plan-3d:not(.actif) .plan-3d__aide { display: none; }
/* Navigateurs anciens qui ne connaissent pas aspect-ratio : la hauteur est réservée
   par un padding (470 / 600 = 78,33 %, 90 % sur téléphone) */
@supports not (aspect-ratio: 1 / 1) {
  .plan-3d__scene { height: 0; padding-top: 78.33%; }
  .plan-3d__secours { position: absolute; top: 0; left: 0; }
}

/* Aide « Glissez pour faire pivoter » (disparaît après la première action) */
.plan-3d__aide { position: absolute; left: 12px; top: 12px; margin: 0; padding: 7px 11px; border-radius: 999px; background: rgba(255, 255, 255, .92); border: 1px solid var(--trait); font: 500 .8rem/1 var(--police-titres); color: var(--bleu-marine); white-space: nowrap; pointer-events: none; transition: opacity .4s ease; }
.plan-3d.touche .plan-3d__aide { opacity: 0; }
/* Mode « animations réduites » (voir section 18) : le script remplace l'aide par
   « Animations réduites sur cet appareil : appuyez sur Lancer », ou par la version
   courte « Appuyez sur Lancer » quand la scène est trop étroite */
.plan-3d__aide .aide-courte,
.plan-3d.aide-compacte .plan-3d__aide .aide-longue { display: none; }
.plan-3d.aide-compacte .plan-3d__aide .aide-courte { display: inline; }

/* Boutons de la scène (en bas à droite) */
.plan-3d__boutons { position: absolute; right: 10px; bottom: 10px; display: flex; gap: 6px; }
.plan-3d__boutons button { min-height: 34px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--trait); background: rgba(255, 255, 255, .95); color: var(--bleu-marine); font: 600 .8rem/1 var(--police-titres); cursor: pointer; }
.plan-3d__boutons button:hover { border-color: var(--bleu-marine); }
.plan-3d__boutons .carre { width: 34px; padding: 0; font-size: 1.1rem; }
/* Bouton « Lancer » (mode animations réduites) : mis en avant, avec un triangle de lecture */
.plan-3d__boutons button.lancer { display: inline-flex; align-items: center; gap: 7px; background: var(--bleu-marine); border-color: var(--bleu-marine); color: var(--blanc); }
.plan-3d__boutons button.lancer::before { content: ""; width: 0; height: 0; border-left: 8px solid currentColor; border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
/* Le bouton de vue affiche « Vue de dessus » en 3D et « Vue 3D » en vue de dessus */
.plan-3d[data-vue="3d"] .si-dessus,
.plan-3d[data-vue="dessus"] .si-3d { display: none; }

/* Info-bulle d'un point géoréférencé */
.plan-3d__info { position: absolute; left: 0; top: 0; min-width: 196px; padding: 10px 12px; border-radius: 10px; background: rgba(255, 255, 255, .97); border: 1px solid var(--trait); box-shadow: var(--ombre); font-size: .82rem; line-height: 1.45; pointer-events: none; }
.plan-3d__info[hidden] { display: none; }
.plan-3d__titre { display: flex; align-items: center; gap: 7px; margin: 0 0 6px; font: 600 .86rem/1.2 var(--police-titres); color: var(--bleu-marine); }
.plan-3d__titre i { width: 14px; height: 4px; border-radius: 2px; }
.plan-3d__titre b { margin-left: auto; font-weight: 500; color: var(--texte-doux); }
.plan-3d__info dl { display: grid; grid-template-columns: auto 1fr; gap: 1px 14px; margin: 0; }
.plan-3d__info dt { color: var(--texte-doux); }
.plan-3d__info dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; color: var(--texte); }
.plan-3d__etat { margin: 6px 0 0; font-weight: 600; color: var(--cyan-texte); }
.plan-3d__reseau { margin: 6px 0 0; padding-top: 6px; border-top: 1px solid var(--trait); color: var(--texte-doux); }

/* Légende cliquable sous la scène */
.plan-3d figcaption { display: block; padding: 12px 4px 2px; }
.plan-3d__legende { display: flex; flex-wrap: wrap; gap: 6px 8px; }
.plan-3d__legende button { display: inline-flex; align-items: center; gap: 8px; padding: 6px 11px; border-radius: 999px; border: 1px solid var(--trait); background: var(--blanc); font: 400 .88rem/1.2 var(--police-texte); color: var(--texte); cursor: pointer; }
.plan-3d__legende button:hover { border-color: #A9CBEB; }
.plan-3d__legende button[aria-pressed="false"] { opacity: .45; text-decoration: line-through; }
.plan-3d__point { display: inline-flex; align-items: center; gap: 8px; padding: 6px 4px; font-size: .88rem; color: var(--texte-doux); }
.plan-3d__note { margin-top: 8px; font-size: .78rem; color: var(--texte-doux); }
/* Compteur mis à jour en direct sous les scènes (photos prises, points mesurés…) */
.plan-3d__compteur { margin-top: 10px; font-size: .86rem; color: var(--texte-doux); }
.plan-3d__compteur b { font-variant-numeric: tabular-nums; color: var(--bleu-marine); }
/* Pastille de légende en damier (points d'appui, cibles) */
.plan-3d__legende i.damier { width: 12px; height: 12px; border-radius: 2px; border: 1px solid #003086; background: conic-gradient(#003086 0 25%, #fff 0 50%, #003086 0 75%, #fff 0); }
/* Pastille de légende ronde (sphères de recalage) */
.plan-3d__legende i.sphere { width: 12px; height: 12px; border-radius: 50%; border: 1px solid #3C4A64; background: radial-gradient(circle at 35% 35%, #fff, #AFC0D8); }

/* En-têtes de page avec une scène 3D à droite (Services, À propos) */
.entete-page--scene { padding: 44px 0 56px; }
.entete-page__grille { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 48px; align-items: center; }

/* Bande avec une scène 3D (page Contact) : texte à gauche, scène à droite */
.bande-scene { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 48px; align-items: center; }
.bande-scene h2 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); font-weight: 700; letter-spacing: -.01em; }
.bande-scene h2 ~ p { margin-top: 14px; color: var(--texte-doux); max-width: 52ch; }
.bande-scene .bouton { margin-top: 22px; }


/* =============================================================================
   9. CARTES DE SERVICES, ÉTAPES, PASTILLES
   ============================================================================= */
/* --- Grille des 6 services (accueil) --- */
.services-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.carte-service {
  position: relative;
  background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--rayon);
  padding: 26px 24px 24px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.carte-service:hover { border-color: #A9CBEB; box-shadow: var(--ombre); }
.carte-service__icone { width: 50px; height: 50px; display: grid; place-items: center; margin-bottom: 18px; border-radius: 13px; background: var(--ciel-1); border: 1px solid var(--trait); }
.carte-service__icone svg { width: 26px; height: 26px; }
.carte-service h3 { font-size: 1.2rem; font-weight: 600; margin-bottom: 8px; }
/* Le titre est un lien qui rend toute la carte cliquable */
.carte-service h3 a { text-decoration: none; color: inherit; }
.carte-service h3 a::after { content: ""; position: absolute; inset: 0; border-radius: var(--rayon); }
.carte-service p { color: var(--texte-doux); font-size: .98rem; }

/* --- Étapes numérotées (accueil : 3 étapes ; À propos : 6 étapes) --- */
.etapes { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; counter-reset: etape; }
.etapes li { counter-increment: etape; background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--rayon); padding: 24px; }
.etapes li::before {
  content: counter(etape);
  display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 14px;
  font: 700 1.05rem/1 var(--police-titres); color: var(--bleu-marine);
  background: var(--ciel-1); border: 2px solid var(--cyan); border-radius: 50%;
}
.etapes h3 { font-size: 1.12rem; font-weight: 600; margin-bottom: 6px; }
.etapes p { color: var(--texte-doux); font-size: .98rem; }

/* --- Pastilles (clients, domaines, outils) --- */
.pastilles { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.pastilles li { padding: 8px 15px; border-radius: 999px; background: var(--blanc); border: 1px solid var(--trait); font-size: .97rem; }
.pastilles--secteurs li { display: inline-flex; align-items: center; gap: 9px; padding: 10px 16px; font-weight: 600; color: var(--bleu-marine); }
.pastilles--secteurs li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); }
/* Petit titre au-dessus d'une liste de pastilles (« Domaines d'application ») */
.pastilles__titre { margin: 28px 0 12px; font-size: .98rem; font-weight: 600; color: var(--texte-doux); }

/* --- Outils regroupés par famille --- */
.outils { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 40px; }
.outils h3 { font-size: .98rem; font-weight: 600; color: var(--texte-doux); margin-bottom: 10px; }

/* --- Avis clients (bloc à activer dans index.html) --- */
.avis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.avis blockquote { margin: 0; background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--rayon); padding: 24px; }
.avis blockquote p { font-size: 1rem; }
.avis footer { margin-top: 14px; font-size: .92rem; color: var(--texte-doux); }


/* =============================================================================
   10. BANDEAU « PRENDRE RENDEZ-VOUS »
   ============================================================================= */
.bandeau {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px; align-items: center;
  padding: 52px 56px; border-radius: 24px;
  background: var(--bleu-marine) url("../img/courbes-blanc.svg") center / cover no-repeat;
  color: #D9E6FF;
}
.bandeau h2 { color: var(--blanc); font-size: clamp(1.6rem, 2.8vw, 2.2rem); font-weight: 700; }
.bandeau p { margin-top: 10px; max-width: 58ch; }


/* =============================================================================
   11. PAGES INTÉRIEURES : EN-TÊTE DE PAGE
   ============================================================================= */
.entete-page { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--ciel-0) 0%, var(--ciel-2) 100%); padding: 64px 0 58px; border-bottom: 1px solid var(--trait); }
.entete-page::before {
  content: ""; position: absolute; inset: 0;
  background: url("../img/courbes.svg") center / cover no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent 10%, #000 70%);
  mask-image: linear-gradient(90deg, transparent 10%, #000 70%);
}
.entete-page .conteneur { position: relative; }
.entete-page h1 { font-size: clamp(2.1rem, 4vw, 3.1rem); font-weight: 700; letter-spacing: -.02em; }
.entete-page h1 ~ p { margin-top: 14px; max-width: 60ch; font-size: 1.12rem; color: var(--texte-doux); }


/* =============================================================================
   12. PAGE À PROPOS
   ============================================================================= */
/* Deux colonnes : « Qui sommes-nous » à gauche, « Ce que nous faisons » à droite */
.deux-colonnes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; }
.deux-colonnes h2 { font-size: clamp(1.5rem, 2.4vw, 1.9rem); margin-bottom: 20px; }
.deux-colonnes p { max-width: 62ch; }
.deux-colonnes p + p { margin-top: 14px; }
/* Lien « Voir le détail des services » placé sous une liste */
.lien-suite { margin-top: 20px; font-weight: 600; }
.lien-suite a::after { content: " →"; }

/* Phrase de mission mise en avant */
.mission { max-width: 760px; padding: 6px 0 6px 24px; border-left: 4px solid var(--cyan); font: 500 clamp(1.2rem, 2vw, 1.45rem)/1.45 var(--police-titres); color: var(--bleu-marine); }

/* Atouts (pourquoi choisir GisMapX) */
.atouts { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 22px; }
.atouts li { padding-top: 18px; border-top: 3px solid var(--bleu-marine); }
.atouts h3 { font-size: 1.08rem; font-weight: 600; margin-bottom: 6px; }
.atouts p { color: var(--texte-doux); font-size: .97rem; }


/* =============================================================================
   13. PAGE SERVICES
   ============================================================================= */
/* Sommaire en haut de page (liens vers chaque service) */
.sommaire { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.sommaire a { display: inline-block; padding: 9px 16px; border-radius: 999px; background: var(--blanc); border: 1px solid var(--trait); text-decoration: none; font: 500 .95rem/1.2 var(--police-titres); color: var(--bleu-marine); }
.sommaire a:hover { border-color: var(--bleu-marine); }

/* Un bloc par service : texte + illustration, en alternance gauche / droite */
.service { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 56px; align-items: center; padding: 72px 0; }
.service + .service { border-top: 1px solid var(--trait); }
.service:nth-of-type(even) .service__visuel { order: -1; }
.service__etiquette { display: inline-block; margin-bottom: 14px; padding: 5px 12px; border-radius: 999px; background: var(--ciel-1); border: 1px solid var(--trait); font: 600 .85rem/1.2 var(--police-titres); color: var(--cyan-texte); }
.service h2 { font-size: clamp(1.6rem, 2.6vw, 2.15rem); font-weight: 700; letter-spacing: -.01em; }
.service__accroche { margin: 14px 0 22px; font-size: 1.12rem; color: var(--texte-doux); max-width: 56ch; }
.service h3 { font-size: 1rem; font-weight: 600; margin-bottom: 12px; color: var(--texte); }

/* Liste avec coches */
.coches { list-style: none; padding: 0; display: grid; gap: 10px; }
.coches li { position: relative; padding-left: 32px; }
.coches li::before {
  content: ""; position: absolute; left: 0; top: .25em; width: 20px; height: 20px; border-radius: 50%;
  background: var(--ciel-1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%230074B3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat;
  border: 1px solid var(--trait);
}

/* Panneau illustré : pictogramme sur fond de courbes de niveau.
   Pour mettre ta propre image, voir le commentaire dans la page Services. */
.service__visuel {
  display: grid; place-items: center; aspect-ratio: 4 / 3;
  border-radius: 22px; border: 1px solid var(--trait);
  background: url("../img/courbes.svg") center / cover no-repeat, linear-gradient(160deg, var(--ciel-0), var(--ciel-2));
}
.service__visuel svg { width: 62%; height: auto; }
.service__visuel img { width: 100%; height: 100%; object-fit: cover; border-radius: 22px; }


/* =============================================================================
   13 bis. PETITES ANIMATIONS DES ILLUSTRATIONS
   Mouvements lents et discrets des pictogrammes des services (accueil) et des
   illustrations de la page Services. Chaque forme animée porte une classe
   « anim-… » dans la page : pour arrêter une animation, supprime sa classe dans
   la page, ou sa ligne ci-dessous. Durées en secondes (s) : plus grand = plus lent.
   Elles s'arrêtent d'elles-mêmes si le visiteur a demandé moins d'animations (section 18).
   ============================================================================= */
/* Les formes tournent ou grossissent autour de leur propre centre */
[class*="anim-"] { transform-box: fill-box; transform-origin: center; }

/* --- Accueil : pictogrammes des 6 cartes de services --- */
.anim-cible { animation: gm-cible 2.4s ease-in-out infinite; }             /* détection : la cible pulse */
.anim-clignote { animation: gm-clignote 1.8s ease-in-out infinite; }       /* PODS, satellite : signal qui clignote */
.anim-descend { animation: gm-descend 1.4s ease-in-out infinite alternate; } /* traitement : la flèche descend */
.anim-trace { stroke-dasharray: 10; animation: gm-trace 3.2s ease-in-out infinite; }  /* cartographie : l'itinéraire se dessine */
.anim-tourne { animation: gm-tourne 14s linear infinite; }                 /* analyses : l'isochrone tourne */
.anim-satellite { animation: gm-flotte-mini 2.6s ease-in-out infinite alternate; }   /* satellite : léger flottement */

/* --- Page Services : grandes illustrations --- */
.anim-detecteur { animation: gm-balayage 6s ease-in-out infinite alternate; }  /* détection : le détecteur balaie le sol */
.anim-ondes { animation: gm-clignote 1.6s ease-in-out infinite; }              /* ... et ses ondes pulsent */
.anim-flux { animation: gm-flux 2.4s linear infinite; }                        /* PODS : le produit circule dans la conduite */
.anim-lien { animation: gm-lien 1.2s linear infinite; }                        /* ... et les données descendent vers la base */
.anim-flotte { animation: gm-flotte 4s ease-in-out infinite alternate; }       /* traitement : les couches brutes flottent */
.anim-fleche { animation: gm-fleche 1.6s ease-in-out infinite alternate; }     /* ... la flèche avance */
.anim-valide { animation: gm-battement 3s ease-in-out infinite; }              /* ... la coche de validation bat */
.anim-zone { animation: gm-zone 5s ease-in-out infinite; }                     /* cartographie : les zones varient doucement */
.anim-zone--2 { animation-delay: -1.7s; }
.anim-zone--3 { animation-delay: -3.4s; }
.anim-repere { animation: gm-rebond 2.8s ease-in-out infinite; }               /* ... le repère rebondit */
.anim-isochrone { animation: gm-isochrone 3s linear infinite; }                /* analyses : l'isochrone extérieure tourne */
.anim-respire { animation: gm-respire 3.2s ease-in-out infinite; }             /* ... la zone intérieure respire */
.anim-points circle { animation: gm-clignote 2.6s ease-in-out infinite; }      /* ... les points clignotent, en décalé */
.anim-points circle:nth-child(2n) { animation-delay: -1.3s; }
.anim-points circle:nth-child(3n) { animation-delay: -.7s; }

@keyframes gm-cible { 50% { transform: scale(.8); } }
@keyframes gm-clignote { 50% { opacity: .3; } }
@keyframes gm-descend { from { transform: translateY(-1px); } to { transform: translateY(1.3px); } }
@keyframes gm-trace { 0% { stroke-dashoffset: 10; } 55%, 100% { stroke-dashoffset: 0; } }
@keyframes gm-tourne { to { transform: rotate(360deg); } }
@keyframes gm-flotte-mini { from { transform: translateY(-.9px); } to { transform: translateY(.9px); } }
@keyframes gm-balayage { from { transform: translateX(-26px); } to { transform: translateX(26px); } }
@keyframes gm-flux { to { stroke-dashoffset: -32; } }
@keyframes gm-lien { to { stroke-dashoffset: -16; } }
@keyframes gm-flotte { from { transform: translateY(-3px); } to { transform: translateY(3px); } }
@keyframes gm-fleche { from { transform: translateX(-3px); } to { transform: translateX(4px); } }
@keyframes gm-battement { 0%, 70%, 100% { transform: scale(1); } 82% { transform: scale(1.14); } }
@keyframes gm-zone { 50% { opacity: .55; } }
@keyframes gm-rebond { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-7px); } }
@keyframes gm-isochrone { to { stroke-dashoffset: -22; } }
@keyframes gm-respire { 50% { transform: scale(1.06); } }


/* =============================================================================
   14. PAGE CONTACT (CALENDLY)
   ============================================================================= */
.contact-grille { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .6fr); gap: 26px; align-items: start; }
.carte { background: var(--blanc); border: 1px solid var(--trait); border-radius: 20px; padding: 32px; box-shadow: var(--ombre); }
.carte h2 { font-size: clamp(1.35rem, 2.2vw, 1.65rem); font-weight: 700; }
.carte > p { margin-top: 10px; color: var(--texte-doux); }

/* Boîte Calendly : accueil (avant le clic), puis calendrier intégré */
.calendly { margin-top: 24px; border-radius: 14px; background: linear-gradient(180deg, var(--ciel-0), var(--ciel-2)); border: 1px dashed #B9D4EE; }
.calendly__accueil { display: grid; justify-items: center; gap: 14px; text-align: center; padding: 56px 24px; }
.calendly__accueil svg { width: 54px; height: 54px; }
.calendly__accueil p { max-width: 46ch; color: var(--texte-doux); font-size: .97rem; }
.calendly__accueil .petit-lien { font-size: .95rem; }
/* Une fois chargé : le calendrier prend toute la largeur */
.calendly.charge { border: 0; background: none; }
.calendly iframe { display: block; width: 100%; height: 760px; border: 0; border-radius: 14px; }

/* Carte « Écrire un mail » */
.mail { display: inline-block; margin: 16px 0 6px; font: 600 1.3rem/1.3 var(--police-titres); overflow-wrap: anywhere; }
.infos { display: grid; gap: 16px; margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--trait); }
.infos dt { font: 600 .9rem/1.3 var(--police-titres); color: var(--bleu-marine); }
.infos dd { color: var(--texte-doux); font-size: .97rem; }


/* =============================================================================
   15. MENTIONS LÉGALES
   ============================================================================= */
.texte-legal { max-width: 76ch; display: grid; gap: 30px; }
.texte-legal h2 { font-size: 1.3rem; margin-bottom: 8px; }
.texte-legal p + p { margin-top: 8px; }


/* =============================================================================
   16. PIED DE PAGE
   ============================================================================= */
.pied { margin-top: 0; background: var(--bleu-nuit); color: #C7D3EA; padding: 64px 0 28px; font-size: .97rem; }
.pied__grille { display: grid; grid-template-columns: 1.5fr 1fr 1.3fr 1.2fr; gap: 36px; }
.pied__logo img { width: 84px; height: 84px; border-radius: 14px; }
.pied__logo p { margin-top: 16px; max-width: 34ch; }
.pied h2 { font: 600 1rem/1.3 var(--police-titres); color: var(--blanc); margin-bottom: 14px; }
.pied ul { list-style: none; padding: 0; display: grid; gap: 9px; }
.pied a { color: #C7D3EA; text-decoration: none; }
.pied a:hover { color: var(--blanc); text-decoration: underline; }
.pied__bas { margin-top: 48px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .12); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; font-size: .9rem; color: #9FB0CF; }


/* =============================================================================
   17. ADAPTATION TABLETTE ET TÉLÉPHONE
   ============================================================================= */
@media (max-width: 1080px) {
  .services-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pied__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .avis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 960px) {
  /* Menu repliable : le bouton « Menu » ouvre la liste des pages */
  .entete__menu { display: inline-flex; }
  .menu {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 16px;
    padding: 18px var(--marge-cote) 24px; background: var(--blanc);
    border-bottom: 1px solid var(--trait); box-shadow: var(--ombre);
  }
  .entete.ouvert .menu { display: flex; }
  .menu ul { flex-direction: column; gap: 4px; }
  .menu ul a { display: block; padding: 12px 0; font-size: 1.08rem; }
  .menu ul a[aria-current="page"]::after { display: none; }
  .langues { align-self: flex-start; }

  .hero__grille { grid-template-columns: 1fr; gap: 44px; padding-block: 52px 64px; }
  .hero::before { -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 60%); mask-image: linear-gradient(180deg, transparent 0%, #000 60%); }
  .service { grid-template-columns: 1fr; gap: 30px; padding: 56px 0; }
  .service:nth-of-type(even) .service__visuel { order: 0; }
  .service__visuel { aspect-ratio: 16 / 9; }
  .service__visuel svg { width: 36%; }
  .contact-grille, .deux-colonnes { grid-template-columns: 1fr; }
  .entete-page__grille, .bande-scene { grid-template-columns: 1fr; gap: 32px; }
  .bandeau { grid-template-columns: 1fr; padding: 40px 32px; }
}

@media (max-width: 640px) {
  :root { --marge-cote: 18px; }
  body { font-size: 1rem; }
  .section { padding: 64px 0; }
  .services-grille, .etapes, .outils, .avis { grid-template-columns: 1fr; }
  .hero__actions .bouton { flex: 1 1 100%; }
  .plan-3d__scene { aspect-ratio: 10 / 9; }         /* scène 3D plus haute sur téléphone */
  @supports not (aspect-ratio: 1 / 1) { .plan-3d__scene { padding-top: 90%; } }
  .marque__nom { font-size: 1.25rem; }
  .carte { padding: 24px 20px; }
  .calendly iframe { height: 1000px; }   /* sur téléphone, Calendly s'affiche en hauteur */
  .bandeau { padding: 34px 22px; border-radius: 18px; }
  .bandeau .bouton { width: 100%; }
  .pied__grille { grid-template-columns: 1fr; }
}


/* =============================================================================
   18. ACCESSIBILITÉ : MOUVEMENTS RÉDUITS
   Si le visiteur a demandé moins d'animations dans son système, on les coupe.
   C'est souvent le cas sur les ordinateurs d'entreprise (effets d'animation de
   Windows désactivés, bureau à distance). Les scènes 3D s'affichent alors
   terminées, avec un bouton « Lancer » pour jouer l'animation à la demande
   (réglage IGNORER_ANIMATIONS_REDUITES dans plan-3d.js et scene-3d.js).
   ============================================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}