/* ==========================================================================
   I2C INFORMATIQUE — feuille de style unique (HTML/CSS pur)
   Reconstruction fidèle du thème « Salient » (preset 4) du site d'origine.
   ========================================================================== */

/* Police : Source Sans Pro. Pour l'auto-héberger, déposez les fichiers .woff2
   dans /fonts puis décommentez le bloc ci-dessous.
@font-face { font-family: "Source Sans Pro"; font-weight: 300; font-display: swap;
  src: url("../fonts/source-sans-pro-300.woff2") format("woff2"); }
@font-face { font-family: "Source Sans Pro"; font-weight: 400; font-display: swap;
  src: url("../fonts/source-sans-pro-400.woff2") format("woff2"); }
@font-face { font-family: "Source Sans Pro"; font-weight: 700; font-display: swap;
  src: url("../fonts/source-sans-pro-700.woff2") format("woff2"); }
*/

:root {
  --navy: #2f3d54;
  --navy-dark: #1d2533;
  --navy-darker: #141923;
  --box: #202a3a;
  --yellow: #e3dc49;
  --yellow-light: #f8ef34;
  --text: #686868;
  --muted: #888;
  --menu: #a8a8a8;
  --line: #d9d9d9;
  --map: #383838;
  --font: "Source Sans Pro", "Source Sans 3", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --container: 75rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--muted);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; height: auto; border: 0; vertical-align: middle; }
a { color: var(--navy); text-decoration: none; transition: color .2s; }
a:hover { color: var(--navy-darker); }
p { margin: 1rem 0; }
h1, h2, h3, h4, h5 { font-family: var(--font); font-weight: 700; margin: .75rem 0; line-height: 1.25; }
h1 { font-size: 2.25rem; }
h2 { font-size: 1.9rem; }
hr { border: 0; border-top: 1px solid var(--line); margin: 1.5rem 0; }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 1rem; }
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 1rem; top: 1rem; background: #fff; padding: .5rem 1rem; z-index: 100; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Icônes (SVG en ligne) */
.icon { width: 1em; height: 1em; fill: currentColor; display: inline-block; vertical-align: -.125em; }

/* --------------------------------------------------------------------------
   Boutons
   -------------------------------------------------------------------------- */
.button {
  display: inline-block;
  font-family: var(--font);
  font-weight: 700;
  font-size: 1rem;
  border-radius: 3px;
  background: var(--navy);
  color: #fff !important;
  border: 2px solid transparent;
  padding: .5rem 1.5rem;
  line-height: 1.5;
  transition: all .25s;
  cursor: pointer;
}
.button:hover, .button:focus { background: var(--navy-darker); color: #fff !important; }
.button-3 { border-radius: 2rem; background: transparent; color: var(--navy) !important; border-color: var(--navy); }
.button-3:hover, .button-3:focus { background: transparent; border-color: var(--navy-darker); color: var(--navy-darker) !important; }
.button-4 { background: transparent; color: var(--navy) !important; border-color: var(--navy); }
.button-4:hover, .button-4:focus { background: transparent; border-color: var(--navy-darker); color: var(--navy-darker) !important; }

/* --------------------------------------------------------------------------
   En-tête & navigation
   -------------------------------------------------------------------------- */
#g-navigation {
  background: #fff;
  color: var(--menu);
  border-top: 5px solid var(--navy);
  position: relative;
  z-index: 100;
}
.nav-top { display: flex; align-items: center; justify-content: space-between; padding: 2rem 1rem 1rem; }
.g-logo img { width: 180px; display: block; }
.g-social { display: flex; gap: .15rem; }
.g-social a { color: #212121; font-size: 1.1rem; padding: .25rem; display: inline-flex; }
.g-social a:hover { color: var(--navy); }
/* Icônes sociales : boîtes ajustées aux glyphes pour un alignement et un espacement réguliers */
.icon-fb { width: 0.5208em; }
.icon-x { width: 0.8163em; }  /* tracé vectoriel du logo officiel X */

.nav-toggle { display: none; }
.nav-burger { display: none; }

.g-main-nav { padding: 0 1rem 2rem; }
.g-toplevel { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: flex-end; gap: .25rem 0; }
.g-toplevel > li { position: relative; margin: 0 .5rem; }
.g-toplevel > li:first-child { margin-left: 0; }
.g-toplevel > li > a {
  display: block;
  color: var(--menu);
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1;
  padding: .25rem 0;
  transition: color .35s;
}
.g-toplevel > li > a .title {
  display: inline-block;
  padding: 0 1rem 5px 0;
  border-bottom: 1px solid #cecece;
  transition: border-color .35s;
}
.g-toplevel > li > a .caret { font-size: .7rem; margin-left: .35rem; opacity: .75; }
.g-toplevel > li > a .icon-home { font-size: 1.15rem; opacity: .6; vertical-align: -.2em; }
.g-toplevel > li:hover > a,
.g-toplevel > li:focus-within > a,
.g-toplevel > li.active > a { color: var(--navy); }
.g-toplevel > li:hover > a .title,
.g-toplevel > li:focus-within > a .title,
.g-toplevel > li.active > a .title { border-bottom-color: currentColor; }

.g-dropdown {
  list-style: none;
  margin: 0;
  padding: .3rem;
  position: absolute;
  top: calc(100% + 5px);
  left: 0;
  width: 250px;
  background: var(--navy);
  border: 1px solid var(--navy-darker);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .3s ease-out, transform .3s ease-out, visibility .3s;
}
.g-dropdown::before { content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 8px; }
.g-toplevel > li:hover > .g-dropdown,
.g-toplevel > li:focus-within > .g-dropdown { opacity: 1; visibility: visible; transform: none; }
.g-dropdown li { padding: .15rem 0; }
.g-dropdown a {
  display: block;
  color: #fff;
  font-size: .9rem;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.2;
  padding: .45rem .6rem;
  border: 1px solid transparent;
  border-radius: 2px;
}
.g-dropdown a:hover, .g-dropdown a:focus, .g-dropdown li.active a {
  background: var(--navy-dark);
  border-color: #19212d;
  color: #fff;
}

/* --------------------------------------------------------------------------
   Accueil — mosaïque de tuiles
   -------------------------------------------------------------------------- */
#g-slideshow { padding: 0 1rem; }
.tiles {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 10px;
}
.tiles-col { display: flex; flex-direction: column; gap: 10px; }
.tiles-col-center { display: flex; }

.tile {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 3px;
  color: #fff;
  font-weight: 700;
  text-transform: uppercase;
}
.tile > img { width: 100%; display: block; transition: opacity .2s; }
.tiles-col-center .tile { flex: 1; }
.tiles-col-center .tile > img { height: 100%; object-fit: cover; }
.tile a { color: #fff; }
.tile-title { position: absolute; top: .75rem; left: 1rem; font-size: 2.5rem; line-height: 1; transition: all .3s; }
.tile-desc { position: absolute; bottom: .75rem; left: 1rem; right: 1rem; transition: all .3s; }
.tile-desc span { display: block; white-space: pre-line; padding-right: 3rem; }
.tile-more { position: absolute; right: 1rem; bottom: -.25rem; font-size: 2rem; line-height: 1; transition: all .3s; }
.tile-button { position: absolute; right: 1rem; bottom: .5rem; opacity: 0; transform: scale(0); transition: all .3s; }
.tile-button .button { color: #fff !important; border: 2px solid #fff; background: transparent; padding: .5rem 1rem; }

.bg-1 { background: var(--navy); }
.bg-2 { background: var(--yellow); }
.bg-3 { background: #d43b3b; }
.bg-4 { background: linear-gradient(to right, #1b3868, #2f3d54); }
.bg-4:hover { background: linear-gradient(to right, #2f3d54, #0e3575); }
.bg-5 { background: linear-gradient(to right, var(--yellow), var(--yellow-light)); }
.bg-5:hover { background: linear-gradient(to right, var(--yellow), #fff52d); }

/* Animation 1 : le titre et la description apparaissent au survol */
.anim-1 .tile-title { opacity: 0; transform: translateY(-100%); }
.anim-1 .tile-desc { opacity: 0; transform: scale(0); }
.anim-1:hover > img, .anim-1:focus-within > img { opacity: .25; }
.anim-1:hover .tile-title, .anim-1:focus-within .tile-title { opacity: 1; transform: none; }
.anim-1:hover .tile-desc, .anim-1:focus-within .tile-desc { opacity: 1; transform: none; }

/* Animations 2 et 3 : le titre est visible, un bouton apparaît au survol */
.anim-2 .tile-desc, .anim-3 .tile-desc { font-size: .85rem; }
.anim-2:hover .tile-title, .anim-2:focus-within .tile-title { transform: scale(.75); transform-origin: left top; }
.anim-3:hover .tile-title, .anim-3:focus-within .tile-title { transform: scale(0); }
.anim-3:hover .tile-desc, .anim-3:focus-within .tile-desc { transform: scale(0); }
.anim-2:hover .tile-more, .anim-3:hover .tile-more,
.anim-2:focus-within .tile-more, .anim-3:focus-within .tile-more { opacity: 0; transform: scale(0); }
.anim-2:hover .tile-button, .anim-3:hover .tile-button,
.anim-2:focus-within .tile-button, .anim-3:focus-within .tile-button { opacity: 1; transform: scale(1); }

/* --------------------------------------------------------------------------
   Accueil — accroche, pictogrammes, « Essentiel »
   -------------------------------------------------------------------------- */
#g-showcase { padding: 2.5rem 1rem 1rem; color: #999; }
.promo { display: flex; align-items: center; gap: 1.5rem; padding: 0 1rem; }
.promo-text { flex: 1; }
.g-subpromo { font-size: 2.1rem; line-height: 1.15; font-weight: 300; letter-spacing: -2px; color: #999; margin: 0 0 .5rem; }
.g-textpromo { font-size: .95rem; }
.promo .button-3 { border-color: var(--line); color: #737373 !important; padding: .4rem 1.4rem; text-transform: uppercase; font-size: .9rem; }
.promo .button-3:hover { border-color: var(--navy); color: var(--navy-darker) !important; }

.solutions-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.5rem;
  padding: 3rem 1rem 2rem;
}
.solutions-grid a { display: block; color: var(--navy); }
.solutions-grid img { width: 90px; margin-bottom: 1.5rem; }
.solutions-grid .g-subtitle { font-weight: 700; font-size: 1.15rem; line-height: 1.25; text-transform: uppercase; }
.solutions-grid a:hover { color: var(--navy-darker); }

#g-bottom { padding: 2rem 1rem 3rem; color: var(--text); }
.g-title {
  display: block;
  position: relative;
  font-weight: 400;
  font-size: 1.75rem;
  line-height: 1.5;
  color: var(--muted);
  margin: .25rem 0 1.5rem;
  padding: 0 0 .75rem 1.65rem;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.g-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  width: 1rem;
  height: 1.15rem;
  background: #212121;
  transform: skew(30deg);
}
.testimonial { display: flex; gap: 1rem; align-items: flex-start; padding: 0 1rem; }
.testimonial-img { flex: 0 0 63px; border-radius: 50%; overflow: hidden; }
.testimonial-content p { margin: 0 0 1rem; font-size: 1.25rem; line-height: 1.3; font-weight: 300; letter-spacing: -.5px; color: #555; }
.testimonial-author { font-size: .95rem; color: var(--text); }
.testimonial-author a { text-transform: uppercase; }

/* --------------------------------------------------------------------------
   Pages intérieures
   -------------------------------------------------------------------------- */
#g-mainbar { padding: 2.5rem 1rem 2rem; color: var(--text); }
#g-mainbar .page-header h1 {
  color: #0f0f0f;
  font-size: 1.9rem;
  text-transform: uppercase;
  margin: 0 0 1.5rem;
}
.article { overflow: hidden; }
.article::after { content: ""; display: block; clear: both; }
.article .float-right { float: right; margin: 0 0 1rem 1.5rem; }
.article strong, .article .em { font-weight: 600; color: #555; }
.article .em-lg { font-size: 1.2em; font-weight: 600; color: #555; }
.article .brand { font-size: 1.2em; font-weight: 500; }
.article .warn { color: #ff6600; font-weight: 700; }
.article .link-underline { color: #3366ff; text-decoration: underline; }
.article ul.plain { list-style: none; padding: 0; margin: 0 0 1rem; }
.article h3 { font-size: 1rem; text-transform: uppercase; color: #555; margin: 1.5rem 0 .5rem; }
.logos { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; margin: 1.5rem 0; }
.logos img { width: 160px; }
.logos.small img { width: 40px; }
.logos.medium img { width: 125px; }
.logos-partners a { display: block; }
.logos-partners img { width: auto; max-height: 100px; }
.essentiel-label { margin-top: 2rem; font-weight: 600; letter-spacing: .5px; }

/* Diaporama (CSS pur, pastilles cliquables) */
#g-expanded { padding: 1rem 1rem 2rem; }
.slider { max-width: 1030px; margin: 0 auto; position: relative; }
.slider input { position: absolute; opacity: 0; pointer-events: none; }
.slides { position: relative; overflow: hidden; aspect-ratio: 1030 / 469; }
.slide { position: absolute; inset: 0; opacity: 0; transition: opacity .6s; pointer-events: none; }
.slide a { display: block; }
.slide img { width: 100%; display: block; }
#s1:checked ~ .slides .slide:nth-child(1),
#s2:checked ~ .slides .slide:nth-child(2),
#s3:checked ~ .slides .slide:nth-child(3) { opacity: 1; pointer-events: auto; }
.slider-dots { position: absolute; top: 12px; right: 14px; display: flex; gap: 6px; z-index: 2; }
.slider-dots label { width: 11px; height: 11px; border-radius: 50%; border: 2px solid #fff; cursor: pointer; opacity: .8; }
#s1:checked ~ .slider-dots label[for="s1"],
#s2:checked ~ .slider-dots label[for="s2"],
#s3:checked ~ .slider-dots label[for="s3"] { background: #fff; opacity: 1; }
.slider input:focus-visible ~ .slider-dots { outline: 2px solid var(--navy); outline-offset: 4px; }

/* Formulaire de contact */
.contact-form { max-width: 720px; }
.contact-form fieldset { border: 0; padding: 0; margin: 0 0 1rem; }
.contact-form legend { font-size: 1.25rem; font-weight: 700; color: #555; margin-bottom: 1rem; padding: 0; }
.form-row { display: grid; grid-template-columns: 160px 1fr; gap: .5rem 1rem; align-items: start; margin-bottom: 1rem; }
.form-row label { padding-top: .45rem; font-weight: 600; color: #555; }
.form-row .star, .required-note strong { color: #c00; }
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
  width: 100%;
  font: inherit;
  color: #333;
  padding: .5rem .65rem;
  border: 1px solid #ccc;
  border-radius: 3px;
  background: #fff;
}
.contact-form input:focus, .contact-form textarea:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 2px rgba(47, 61, 84, .15); }
.contact-form .checkbox { display: flex; gap: .5rem; align-items: flex-start; font-weight: 400; padding-top: 0; }
.contact-form .checkbox input { margin-top: .3rem; }
.form-actions { padding-left: 176px; }
.form-note { font-size: .875rem; color: var(--muted); margin-top: 1rem; }

/* --------------------------------------------------------------------------
   Pied de page
   -------------------------------------------------------------------------- */
#g-footer-wrap { padding: 0 1rem; }
.footer-grid { display: grid; grid-template-columns: 1fr 1fr; }
/* Carte des agences : affichée à ses proportions d'origine (598 × 401),
   en haut de la colonne, sans déformation ni recadrage */
.footer-grid > .contact-map-wrap { background: transparent; }
.contact-map {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 598 / 401;
  background: var(--map) url("../images/carte-lg.webp") no-repeat center top / 100% auto;
}
.contact-map::before { content: ""; position: absolute; inset: 0; background: rgba(56, 56, 56, .5); transition: background .2s; }
.contact-map:hover::before { background: rgba(47, 61, 84, .25); }

.footside-a { background: var(--box); color: #fff; padding: 2.5rem 1.5rem; }
.footside-a .phone { font-size: 1.75rem; font-weight: 400; margin: 0; line-height: 1.3; }
.footside-a .phone a, .footside-a p a { color: #fff; }
.footside-a p { font-size: 1.15rem; margin: .5rem 0 0; }
.footside-b { display: grid; grid-template-columns: 1fr 1fr; gap: 0 2rem; padding: 2rem 1.5rem; color: var(--muted); }
.footside-b .g-title { font-size: 1.75rem; }
.compact { font-style: normal; line-height: 1.6; }
.compact span { display: block; }
.compact .spacer { height: 1.6em; }

#g-copyright { padding: 0 1rem; color: var(--text); text-align: center; }
#g-copyright .inner { border-top: 5px solid var(--navy); display: grid; grid-template-columns: repeat(3, 1fr); align-items: center; padding: 1.5rem 0; }
.g-footer-logo img { width: 125px; }
.g-totop a { color: var(--text); font-size: 2rem; display: inline-block; }
.g-totop a:hover { color: var(--navy); }
#g-copyright .g-social { justify-content: center; }
#g-copyright .g-social a { color: var(--text); }
#g-copyright .g-social a:hover { color: var(--navy); }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 60rem) {
  .solutions-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-grid { grid-template-columns: 1fr; }
  .tile-title { font-size: 2rem; }
}

@media (max-width: 48rem) {
  /* Menu mobile (case à cocher, sans JavaScript) */
  .nav-top { padding: 1.25rem 1rem; }
  .g-logo img { width: 130px; }
  .nav-burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    font-size: 1.4rem;
    color: var(--navy);
    cursor: pointer;
    order: -1;
    margin-right: .5rem;
  }
  .nav-top > .g-logo { margin-right: auto; }
  .g-main-nav { display: none; padding: 0 1rem 1.5rem; }
  .nav-toggle:checked ~ .g-main-nav { display: block; }
  .nav-toggle:focus-visible ~ .nav-top .nav-burger { outline: 2px solid var(--navy); }
  .g-toplevel { flex-direction: column; align-items: stretch; }
  .g-toplevel > li { margin: 0; border-bottom: 1px solid #eee; }
  .g-toplevel > li > a { padding: .85rem 0; font-size: .85rem; }
  .g-toplevel > li > a .title { border: 0; padding: 0; }
  .g-toplevel > li > a .caret { display: none; }
  .g-dropdown {
    position: static;
    width: auto;
    opacity: 1;
    visibility: visible;
    transform: none;
    background: none;
    border: 0;
    padding: 0 0 .5rem 1rem;
  }
  .g-dropdown a { color: var(--text); font-size: .8rem; padding: .4rem 0; }
  .g-dropdown a:hover, .g-dropdown a:focus, .g-dropdown li.active a { background: none; border-color: transparent; color: var(--navy); }

  .tiles { grid-template-columns: 1fr 1fr; }
  .tiles-col-center { grid-column: 1 / -1; order: -1; }
  .tile-decor { display: none; }
  .promo { flex-direction: column; align-items: flex-start; padding: 0; }
  .g-subpromo { font-size: 1.75rem; letter-spacing: -1px; }
  .solutions-grid { grid-template-columns: repeat(2, 1fr); padding: 2rem 0; }
  .testimonial { flex-direction: column; padding: 0; }
  .article .float-right { float: none; display: block; margin: 0 0 1rem; }
  .footside-b { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .form-row label { padding-top: 0; }
  .form-actions { padding-left: 0; }
  #g-mainbar .page-header h1 { font-size: 1.5rem; }
  #g-copyright .inner { grid-template-columns: 1fr; gap: 1rem; }
  .g-title { white-space: normal; }
}

@media (max-width: 30rem) {
  .tiles { grid-template-columns: 1fr; }
  .tile-title { font-size: 1.75rem; }
  .solutions-grid { grid-template-columns: 1fr 1fr; gap: 1rem; }
  .solutions-grid .g-subtitle { font-size: 1rem; }
  .footside-a .phone { font-size: 1.4rem; }
}

/* Écrans tactiles (pas de survol) : titres des tuiles toujours visibles et cliquables */
@media (hover: none) {
  .anim-1 > img { opacity: .35; }
  .anim-1 .tile-title, .anim-1 .tile-desc { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

@media print {
  #g-navigation .g-main-nav, .nav-burger, #g-slideshow, .contact-map, .g-totop { display: none !important; }
  body { color: #000; }
}
.logos img.w60 { width: 60px; }
.logos img.w140 { width: 140px; }