/* La Fibre Alpine – feuille de style unique, sans dépendance externe */

:root {
  --fond: #ffffff;
  --gris: #eef2f7;          /* sections alternées */
  --texte: #1d2433;
  --texte-doux: #4a5568;
  --marine: #12284c;        /* titres, contact, pied de page */
  --accent: #1a6ff0;        /* boutons, liens, icônes */
  --accent-fonce: #1558c0;
  --pale: #e8f0fe;          /* pastilles d'icônes */
  --filet: #d6dde8;

  /* Une teinte « métier » par carte de compétence : cinq teintes bien distinctes, sobres, qui s'accordent avec le bleu et le blanc */
  --c-dsi: #1d4f91;         /* bleu : responsable informatique, la couleur du site */
  --c-dev: #5b3fa6;         /* violet indigo : logiciels et IA */
  --c-web: #0f7b5f;         /* vert émeraude : site web */
  --c-secu: #b42334;         /* rouge : sécurité */
  --c-cloud: #a1327a;       /* prune : serveur cloud privé */
  --c-conseil: #b45f06;         /* ambre : conseil */
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1.125rem;      /* 18 px */
  line-height: 1.65;
  color: var(--texte);
  background: var(--fond);
}

.conteneur {
  max-width: 44rem;
  margin: 0 auto;
  padding: 0 1.25rem;
}

.conteneur.large { max-width: 66rem; }

/* Titres */
h1, h2, h3 { margin: 0; color: var(--marine); line-height: 1.1; }

h1 {
  font-size: clamp(3rem, 10vw, 5.5rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #fff;
}

h2 {
  font-size: clamp(2rem, 5.5vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  margin-bottom: 2.5rem;
  text-align: center;
}

h3 {
  font-size: 1.3125rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  line-height: 1.25;
  margin-bottom: 0.75rem;
}

p { margin: 0 0 1.5rem; }

a { color: var(--accent); }

/* Boutons */
.boutons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}

.bouton {
  display: inline-block;
  padding: 0.9rem 1.9rem;
  border: 2px solid transparent;
  border-radius: 999px;
  font-weight: 650;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* Bouton principal : blanc, texte bleu marine (sur fond bleu) */
.bouton-plein {
  background: #fff;
  color: var(--marine);
}

.bouton-plein:hover,
.bouton-plein:focus {
  background: var(--pale);
  color: var(--marine);
}

.bouton-contour {
  border-color: #fff;
  color: #fff;
}

.bouton-contour:hover,
.bouton-contour:focus {
  background: #fff;
  color: var(--marine);
}

a:focus-visible,
.bouton:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

.bandeau a:focus-visible,
.contact a:focus-visible {
  outline-color: #fff;
}

/* Bandeau d'accueil : dégradé bleu, montagnes géométriques en bas */
.bandeau {
  position: relative;
  padding: 5rem 0 11rem;
  text-align: center;
  color: #fff;
  background: linear-gradient(135deg, var(--marine) 0%, var(--accent) 100%);
  overflow: hidden;
}

.decor {
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 12rem;
  display: block;
}

.bandeau .conteneur {
  position: relative;
  z-index: 1;
}

.accroche {
  max-width: 36rem;
  margin: 1.5rem auto 2.5rem;
  font-size: 1.375rem;
  color: #fff;
}

/* Bande de réassurance */
.reassurance {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 2.5rem;
  margin: 0;
  padding: 1.75rem 1.25rem;
  list-style: none;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--marine);
  background: var(--gris);
}

.reassurance li::before {
  content: "";
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  margin-right: 0.6rem;
  border-radius: 50%;
  background: var(--accent);
  vertical-align: 0.1em;
}

/* Sections */
.section { padding: 5rem 0; }
/* La bande de réassurance et les offres forment un seul bloc gris */
.reassurance + main > .section-grise { padding-top: 2.5rem; }
.section-grise { background: var(--gris); }

/* Cartes : une colonne sur mobile, grille sur ordinateur */
.grille {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

.carte {
  background: #fff;
  border: 1px solid var(--filet);
  border-top: 6px solid var(--c, var(--accent));
  border-radius: 24px;
  padding: 2rem 1.75rem;
  box-shadow: 0 4px 16px rgba(18, 40, 76, 0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.carte p {
  margin: 0;
  font-size: 1.0625rem;
  color: var(--texte-doux);
}

/* Pastille ronde pleine à la teinte de la carte, icône blanche */
.pastille {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  margin-bottom: 1.25rem;
  border-radius: 50%;
  background: var(--c, var(--accent));
}

.pastille svg {
  width: 1.75rem;
  height: 1.75rem;
  fill: none;
  stroke: #fff;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Teinte de chaque carte, dans l'ordre de la page */
.grille .carte:nth-child(1) { --c: var(--c-dsi); }
.grille .carte:nth-child(2) { --c: var(--c-dev); }
.grille .carte:nth-child(3) { --c: var(--c-web); }
.grille .carte:nth-child(4) { --c: var(--c-secu); }
.grille .carte:nth-child(5) { --c: var(--c-cloud); }
.grille .carte:nth-child(6) { --c: var(--c-conseil); }

/* Survol et focus clavier : la carte se soulève, l'ombre s'accentue, les côtés prennent la teinte de la carte */
.carte:hover,
.carte:focus,
.carte:focus-within {
  transform: translateY(-4px);
  border-left-color: var(--c, var(--accent));
  border-right-color: var(--c, var(--accent));
  border-bottom-color: var(--c, var(--accent));
  box-shadow: 0 12px 30px rgba(18, 40, 76, 0.12);
}

/* Étapes numérotées */
.etapes {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: etape;
}

.etapes li {
  position: relative;
  padding-top: 4.5rem;
  text-align: center;
  counter-increment: etape;
}

.etapes li::before {
  content: counter(etape);
  position: absolute;
  top: 0;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  margin-left: -1.625rem;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 1.375rem;
  font-weight: 700;
}

.etapes p {
  margin: 0;
  color: var(--texte-doux);
}

/* Contact : pleine largeur, fond bleu marine */
.contact {
  background: var(--marine);
  color: #d6e2f5;
  text-align: center;
}

.contact h2 { color: #fff; margin-bottom: 1.5rem; }

.adresse {
  margin: 2rem 0;
  font-size: clamp(1.4rem, 5vw, 2rem);
  font-weight: 700;
  overflow-wrap: anywhere;
}

.contact .adresse a { color: #fff; }

/* Bandeau des outils : texte seul */
.outils {
  padding: 3.5rem 0 2.5rem;
  background: var(--gris);
  text-align: center;
  animation: apparition 0.6s ease both;
}

.outils h2 {
  margin-bottom: 1.75rem;
  font-size: 1.375rem;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.liste-outils {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin: 0 0 2rem;
  padding: 0;
  list-style: none;
}

.liste-outils li {
  padding: 0.5rem 1.25rem;
  background: #fff;
  border: 1px solid #dfe5ee;
  border-radius: 999px;
  font-weight: 600;
  color: var(--marine);
}

.souverain {
  max-width: 36rem;
  margin: 0 auto 2rem;
  color: var(--texte);
}

.mention {
  max-width: 36rem;
  margin: 0 auto;
  font-size: 0.8125rem;
  color: var(--texte-doux);
}

/* Page « Mes services » */
.entete-page {
  padding: 3rem 0 3.5rem;
  text-align: center;
  color: #fff;
  background: linear-gradient(135deg, var(--marine) 0%, #1a4fa8 100%);
}
.entete-page .accroche { margin-bottom: 0; }
.retour { margin: 0 0 2rem; font-size: 1rem; text-align: left; }
.retour a { color: #fff; }

.sommaire { background: var(--gris); border-bottom: 1px solid var(--filet); }
.sommaire ul {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1.75rem;
  margin: 0; padding: 1rem 1.25rem; list-style: none; font-size: 1rem; font-weight: 600;
}

.texte-long h2 { text-align: left; margin-bottom: 1.5rem; }
.texte-long .conteneur:not(.large) { max-width: 42rem; }
.texte-long { scroll-margin-top: 1rem; }

.scenario {
  margin: 2rem 0;
  padding: 1.75rem 1.5rem 0.5rem;
  background: #fff;
  border: 1px solid var(--filet);
  border-left: 5px solid var(--accent);
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(18, 40, 76, 0.05);
}
.scenario h3 { margin-bottom: 1rem; }
.protege { padding: 0.9rem 1.1rem; background: var(--pale); border-radius: 12px; color: var(--marine); }
.sous-titre { margin: 3rem 0 1rem; }

.sources { margin: 2rem 0 0; font-size: 0.9375rem; color: var(--texte-doux); }
.sources summary { cursor: pointer; font-weight: 600; }
.sources ul { margin: 0.75rem 0 0; padding-left: 1.25rem; }

.suite { margin: 2.5rem 0 0; text-align: center; }
.bouton-bleu { background: var(--accent); color: #fff; }
.bouton-bleu:hover, .bouton-bleu:focus { background: var(--accent-fonce); color: #fff; }

/* Teinte de chaque compétence sur la page « Mes services » : les mêmes que les cartes de l'accueil */
#responsable { --c: var(--c-dsi); }
#logiciels   { --c: var(--c-dev); }
#site        { --c: var(--c-web); }
#securite    { --c: var(--c-secu); }
#conseil     { --c: var(--c-conseil); }

.sommaire li::before {
  content: ""; display: inline-block; width: 0.65rem; height: 0.65rem; margin-right: 0.5rem;
  border-radius: 50%; background: var(--accent); vertical-align: 0.05em;
}
.sommaire li:nth-child(1)::before { background: var(--c-dsi); }
.sommaire li:nth-child(2)::before { background: var(--c-dev); }
.sommaire li:nth-child(3)::before { background: var(--c-web); }
.sommaire li:nth-child(4)::before { background: var(--c-secu); }
.sommaire li:nth-child(5)::before { background: var(--c-conseil); }

/* Texte et photo côte à côte, la photo alterne de côté ; en dessous de 56rem, tout en colonne */
.duo { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: start; }
.colonne-texte { min-width: 0; }
.texte-long .colonne-texte h2 { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }
.texte-long .colonne-texte h2::after { content: none; }
.pastille-titre { flex: none; width: 3rem; height: 3rem; margin: 0; }
.pastille-titre svg { width: 1.5rem; height: 1.5rem; }

.photo { position: relative; margin: 0; z-index: 0; }
.photo::before {
  content: ""; position: absolute; inset: 0.9rem -0.9rem -0.9rem 0.9rem; z-index: -1;
  border-radius: 24px; background: var(--c); opacity: 0.22;
}
.photo img {
  display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: 24px; border-top: 6px solid var(--c); background: var(--c);
  box-shadow: 0 10px 28px rgba(18, 40, 76, 0.14);
}
.photo figcaption { margin-top: 1.25rem; font-size: 0.8125rem; color: var(--texte-doux); }

/* Les cadres des scénarios et des conseils reprennent la teinte de la compétence */
.scenario { border-left-color: var(--c); }
.protege { background: #fff; border: 1px solid var(--filet); border-left: 4px solid var(--c); }
.sous-titre { color: var(--c); }
.sources summary { color: var(--c); }

@media (min-width: 56rem) {
  .duo { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.85fr); gap: 4rem; }
  .duo.inverse { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.25fr); }
  .duo.inverse .photo { order: -1; }
  .photo { position: sticky; top: 2rem; }
  .duo.inverse .photo::before { inset: 0.9rem 0.9rem -0.9rem -0.9rem; }
}

/* Pied de page */
.pied {
  padding: 2rem 0 2.5rem;
  background: var(--marine);
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  text-align: center;
  font-size: 0.9375rem;
  color: #d6e2f5;
}

.pied p { margin: 0; }

/* Apparition douce au chargement */
@keyframes apparition {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.bandeau,
.reassurance,
.section,
.pied {
  animation: apparition 0.6s ease both;
}

@media (min-width: 48rem) {
  .bandeau { padding: 8rem 0 14rem; }
  .decor { height: 16rem; }
  .grille { grid-template-columns: 1fr 1fr; gap: 2rem; }
  /* Cinquième carte seule sur sa ligne : centrée, à la largeur d'une colonne */
  .grille .carte:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 1rem); }
  .etapes { grid-template-columns: repeat(3, 1fr); gap: 2rem; }
  .section { padding: 6.5rem 0; }
}

/* Pas d'animation ni de déplacement pour les personnes qui ont réduit les animations */
@media (prefers-reduced-motion: reduce) {
  .bandeau,
  .reassurance,
  .section,
  .outils,
  .pied {
    animation: none;
  }

  .carte,
  .bouton {
    transition: none;
  }

  .carte:hover,
  .carte:focus,
  .carte:focus-within {
    transform: none;
  }
}

/* Refonte de la page « Mes services » : texte d'ouverture + accordéons (details/summary, sans JavaScript) */
.ouverture { font-size: 1.1875rem; }

.accordeons { margin: 0 0 1.5rem; }

.acc {
  margin: 0 0 0.75rem;
  background: #fff;
  border: 1px solid var(--filet);
  border-left: 5px solid var(--c, var(--accent));
  border-radius: 14px;
}

.acc summary {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 3.5rem;               /* cible tactile confortable */
  padding: 0.75rem 1.1rem;
  cursor: pointer;
  list-style: none;
  border-radius: 12px;
}
.acc summary::-webkit-details-marker { display: none; }

.acc summary h3 {
  flex: 1;
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.35;
  color: var(--marine);
}

/* Marqueur + / – toujours visible, à la teinte de la compétence */
.acc summary::after {
  content: "+";
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--c, var(--accent));
  color: #fff;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
}
.acc[open] summary::after { content: "–"; }

.acc summary:hover h3 { text-decoration: underline; text-decoration-color: var(--c, var(--accent)); text-underline-offset: 3px; }
.acc summary:focus-visible { outline: 3px solid var(--c, var(--accent)); outline-offset: 2px; }

.acc-corps { padding: 0 1.1rem 0.25rem; }
.acc-corps p { margin: 0 0 1rem; font-size: 1.0625rem; }
.acc-corps .protege { margin-bottom: 1.1rem; font-size: 1rem; }

.appel {
  margin: 1.5rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--filet);
  font-weight: 600;
  color: var(--marine);
}
.appel a { color: var(--c, var(--accent-fonce)); }

.texte-long .sources { margin: 1rem 0 0; }
.sources summary { min-height: 2.75rem; display: flex; align-items: center; }
.sources ul { padding-left: 1.25rem; }

@media (prefers-reduced-motion: no-preference) {
  .acc summary::after { transition: background-color 0.2s ease; }
}


/* Pied de page : liens vers les pages du site */
.liens-pied {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.25rem 1.5rem;
  margin: 0 0 1rem; padding: 0; list-style: none;
}
.liens-pied a { display: inline-block; padding: 0.6rem 0.25rem; color: #fff; }

/* Pages de texte simples (Qui je suis, Mentions légales) */
.page-texte h2 { font-size: 1.5rem; text-align: left; margin: 2rem 0 0.75rem; }
.page-texte h2:first-child { margin-top: 0; }
.signature { margin-bottom: 1.5rem; font-weight: 600; color: var(--texte-doux); }

/* Titre de page intérieure : moins grand que celui de l'accueil, pour les titres longs */
.entete-page h1 { font-size: clamp(2.25rem, 6vw, 3.5rem); }


/* Page « Qui je suis » : mêmes cadres que « Mes services », teinte bleue du site */
.bio { --c: var(--c-dsi); }
.photo.portrait img { aspect-ratio: 4 / 5; object-position: center 25%; }
.bio-final { text-align: center; }
.citation {
  margin: 0 0 2rem; padding: 0.25rem 0 0.25rem 1.5rem; text-align: left;
  border-left: 6px solid var(--c-dsi);
  font-size: clamp(1.375rem, 3.2vw, 1.875rem); font-weight: 600; line-height: 1.4; color: var(--marine);
}

/* Photos : le décalage coloré est porté par l'image elle-même (ombre pleine), pour que le crédit reste en dessous et centré */
.photo::before,
.duo.inverse .photo::before { content: none; }
.photo img {
  box-shadow:
    0.9rem 0.9rem 0 color-mix(in srgb, var(--c) 22%, white),
    0 10px 28px rgba(18, 40, 76, 0.14);
}
.duo.inverse .photo img {
  box-shadow:
    -0.9rem 0.9rem 0 color-mix(in srgb, var(--c) 22%, white),
    0 10px 28px rgba(18, 40, 76, 0.14);
}
.photo figcaption { margin-top: 1.75rem; text-align: center; }
@media (max-width: 55.99rem) {
  .duo.inverse .photo img { box-shadow: 0.9rem 0.9rem 0 color-mix(in srgb, var(--c) 22%, white), 0 10px 28px rgba(18, 40, 76, 0.14); }
  .photo { margin-right: 0.9rem; }
}

/* Crédits photo : très discrets */
.photo figcaption { font-size: 0.6875rem; line-height: 1.3; margin-top: 1.5rem; opacity: 0.85; }

/* Crédit photo logé dans la bande pâle sous l'image (le décalage coloré est un peu plus haut pour l'accueillir) */
.photo { position: relative; margin-bottom: 1.5rem; }
.photo img {
  box-shadow:
    0.9rem 1.35rem 0 color-mix(in srgb, var(--c) 22%, white),
    0 10px 28px rgba(18, 40, 76, 0.14);
}
.duo.inverse .photo img {
  box-shadow:
    -0.9rem 1.35rem 0 color-mix(in srgb, var(--c) 22%, white),
    0 10px 28px rgba(18, 40, 76, 0.14);
}
.photo figcaption {
  position: absolute; top: 100%; left: 0.9rem; right: -0.9rem; height: 1.35rem; margin: 0;
  font-size: 0.5625rem; line-height: 1.35rem; text-align: center; opacity: 1;
  color: var(--marine);
}
.duo.inverse .photo figcaption { left: -0.9rem; right: 0.9rem; }
.photo figcaption a { color: inherit; }
@media (max-width: 55.99rem) {
  .duo.inverse .photo img { box-shadow: 0.9rem 1.35rem 0 color-mix(in srgb, var(--c) 22%, white), 0 10px 28px rgba(18, 40, 76, 0.14); }
  .duo.inverse .photo figcaption { left: 0.9rem; right: -0.9rem; }
}


/* Menu unique, en haut de chaque page */
.menu { position: relative; z-index: 2; }
.menu-interieur {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 0.25rem 1.5rem; padding-top: 0.75rem; padding-bottom: 0.25rem;
}
.menu-marque { padding: 0.6rem 0; color: #fff; font-size: 1.125rem; font-weight: 800; text-decoration: none; }
.menu ul { display: flex; flex-wrap: wrap; gap: 0 0.25rem; margin: 0; padding: 0; list-style: none; }
.menu ul a {
  display: inline-block; padding: 0.7rem 0.9rem; border-radius: 999px;
  color: #fff; font-size: 1rem; font-weight: 600; text-decoration: none;
}
.menu ul a:hover, .menu ul a:focus-visible { background: rgba(255, 255, 255, 0.16); }
.menu ul a[aria-current="page"] { background: rgba(255, 255, 255, 0.22); }
.menu a:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.bandeau .menu-marque { display: none; }
.bandeau .menu-interieur { justify-content: flex-end; }
.bandeau { padding-top: 0.75rem; }

/* Fil d'Ariane */
.fil ol { display: flex; flex-wrap: wrap; margin: 0 0 1.5rem; padding: 0; list-style: none; font-size: 0.9375rem; text-align: left; }
.fil li + li::before { content: "›"; margin: 0 0.6rem; opacity: 0.7; }
.fil a { color: #fff; }
.fil [aria-current="page"] { opacity: 0.9; }

/* Bandeau des pages intérieures : même motif de montagnes que l'accueil, deux fois moins haut */
.entete-page { position: relative; overflow: hidden; padding: 0 0 4.5rem; --suite: #fff; }
.entete-page.suite-grise { --suite: var(--gris); }
.bandeau { --suite: var(--gris); }
.montagne-avant { fill: var(--suite, #fff); }
.entete-page .decor { height: 6rem; }
.entete-page .contenu { position: relative; z-index: 1; padding-top: 1.25rem; }
@media (min-width: 48rem) {
  .entete-page { padding-bottom: 6rem; }
  .entete-page .decor { height: 8rem; }
  .bandeau { padding-top: 1rem; }
}

/* Accueil : l'espace au-dessus du titre est maintenant en partie occupé par le menu */
.bandeau > .conteneur { padding-top: 2.5rem; }
@media (min-width: 48rem) { .bandeau > .conteneur { padding-top: 5rem; } }

/* Menu hamburger (téléphone et tablette) */
.menu-bouton { display:none; }
@media (max-width:63.99rem) {
  .menu-interieur { flex-wrap:wrap; }
  .menu-bouton { display:inline-flex; flex-direction:column; justify-content:center; gap:.35rem; width:3rem; height:3rem; margin-left:auto; padding:0 .75rem; border:0; border-radius:999px; background:rgba(255,255,255,.16); cursor:pointer; }
  .menu-bouton span { display:block; height:2px; background:#fff; border-radius:2px; transition:transform .2s, opacity .2s; }
  .menu-bouton[aria-expanded="true"] span:nth-child(1) { transform:translateY(.55rem) rotate(45deg); }
  .menu-bouton[aria-expanded="true"] span:nth-child(2) { opacity:0; }
  .menu-bouton[aria-expanded="true"] span:nth-child(3) { transform:translateY(-.55rem) rotate(-45deg); }
  .menu ul { display:none; flex-basis:100%; flex-direction:column; gap:.15rem; padding:.5rem 0 .75rem; }
  .menu ul.ouvert { display:flex; }
  .menu ul a { display:block; padding:.85rem 1rem; }
  .bandeau .menu-interieur { justify-content:flex-end; }
}
@media (min-width:64rem) { .menu ul { display:flex; } }

/* Page contact : formulaire */
.formulaire { margin-top: 1rem; }
.formulaire .champ { margin: 0 0 1.25rem; }
.formulaire label { display: block; margin-bottom: .4rem; font-weight: 600; color: var(--marine); }
.formulaire .oblig { font-weight: 400; color: var(--texte-doux); }
.formulaire input, .formulaire textarea { width: 100%; padding: .8rem 1rem; border: 2px solid #c5d0e0; border-radius: .75rem; background: #fff; color: var(--marine); font: inherit; font-size: 1rem; }
.formulaire textarea { resize: vertical; min-height: 9rem; }
.formulaire input:focus-visible, .formulaire textarea:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-color: var(--accent); }
.formulaire .note-form { margin: 1.5rem 0; font-size: .9375rem; color: var(--texte-doux); }
.formulaire .piege { position: absolute; left: -9999px; height: 0; overflow: hidden; }
.message { display: none; margin: 0 0 1.5rem; padding: 1rem 1.25rem; border-radius: .75rem; }
.message:target { display: block; }
.message-ok { background: #e3f5ea; color: #14532d; border: 2px solid #86d4a3; }
.message-erreur { background: #fde8e8; color: #7f1d1d; border: 2px solid #f0a3a3; }

/* Blason de Savoie à gauche du menu */
.menu-drapeau { display:inline-flex; align-items:center; margin-right:.75rem; padding:.4rem 0; }
.menu-drapeau img { display:block; height:2.6rem; width:auto; filter:drop-shadow(0 1px 2px rgba(0,0,0,.35)); }
.menu-interieur { flex-wrap:nowrap; }
.menu-marque { margin-right:auto; }
.bandeau .menu-interieur { justify-content:space-between; }
@media (max-width:63.99rem) { .menu-interieur { flex-wrap:wrap; } .menu-drapeau { margin-right:.5rem; } .bandeau .menu-interieur { justify-content:flex-start; } }

/* Logo dans le menu, à droite du blason */
.menu-logo { display:inline-flex; align-items:center; margin-right:.75rem; padding:.3rem 0; }
.menu-logo img { display:block; height:2.9rem; width:auto; }
@media (max-width:63.99rem) { .menu-logo { margin-right:.6rem; } .menu-logo img { height:2.6rem; } }
.menu-logo img { height:3.4rem; }
.bandeau .menu-logo { margin-right:auto; }
@media (max-width:63.99rem) { .menu-logo img { height:2.9rem; } }
@media (max-width:63.99rem) {
  .menu-drapeau { margin-right:.4rem; }
  .menu-drapeau img { height:2.2rem; }
  .menu-logo { margin-right:.4rem; }
  .menu-logo img { height:2.5rem; }
  .menu-marque { font-size:1rem; margin-right:0; }
  .menu-bouton { flex-shrink:0; }
}

/* Logo avec le blason de Savoie posé en bas à droite, par-dessus */
.menu-logo { position:relative; margin-right:1.4rem; }
.menu-logo .logo-img { height:3.4rem; width:auto; display:block; }
.menu-logo .logo-blason { position:absolute; right:-1rem; bottom:-.1rem; height:2.3rem; width:auto; display:block; filter:drop-shadow(0 1px 3px rgba(0,0,0,.45)); }
@media (max-width:63.99rem) {
  .menu-logo { margin-right:1.1rem; }
  .menu-logo .logo-img { height:2.9rem; }
  .menu-logo .logo-blason { height:1.95rem; right:-.8rem; }
}

/* Encadré « cloud suisse » sur l'accueil */
.encadre-cloud { display:flex; flex-direction:column; align-items:flex-start; gap:1.25rem; padding:1.75rem; border:2px solid var(--accent); border-radius:1.25rem; background:var(--pale); }
.encadre-cloud .pastille { flex-shrink:0; }
.encadre-cloud h2 { margin:0 0 .5rem; font-size:1.5rem; text-align:left; }
.encadre-cloud h2::after { content:none; }
.encadre-cloud p { margin:0; color:var(--texte); }
@media (min-width:48rem) { .encadre-cloud { flex-direction:row; align-items:center; gap:1.75rem; padding:2rem 2.25rem; } .encadre-cloud .bouton { flex-shrink:0; } }
.menu-logo .logo-blason { bottom:-.5rem; }
@media (max-width:63.99rem) { .menu-logo .logo-blason { bottom:-.4rem; } }

/* Lien « En savoir plus » en bas de chaque carte, à la teinte de la carte */
.grille .carte { display:flex; flex-direction:column; }
.carte .en-savoir-plus { margin-top:auto; padding-top:1.1rem; font-size:1rem; font-weight:700; }
.carte .en-savoir-plus a { color:var(--c, var(--accent-fonce)); text-decoration:none; border-bottom:2px solid transparent; }
.carte .en-savoir-plus a::after { content:" \2192"; }
.carte .en-savoir-plus a:hover, .carte .en-savoir-plus a:focus-visible { border-bottom-color:currentColor; }
.sr-only { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* Logos des outils connus : tuiles blanches de même hauteur */
.liste-outils { gap:.9rem; }
.liste-outils li { display:flex; align-items:center; justify-content:center; height:4.25rem; padding:.7rem 1.4rem; border-radius:1rem; }
.liste-outils li img { display:block; height:2.4rem; width:auto; max-width:8.5rem; object-fit:contain; }
.liste-outils li.nom { font-size:1.125rem; }

/* Page contact : encadré urgence (WhatsApp) et menu déroulant */
.encadre-urgence { margin:0 0 2rem; padding:1.5rem 1.75rem; border:2px solid var(--accent); border-radius:1.25rem; background:var(--pale); }
.encadre-urgence h2 { margin:0 0 .5rem; font-size:1.375rem; text-align:left; }
.encadre-urgence h2::after { content:none; }
.encadre-urgence p { margin:0 0 1.1rem; }
.formulaire select { width:100%; padding:.8rem 1rem; border:2px solid #c5d0e0; border-radius:.75rem; background:#fff; color:var(--marine); font:inherit; font-size:1rem; }
.formulaire select:focus-visible { outline:3px solid var(--accent); outline-offset:2px; border-color:var(--accent); }

/* Urgence : teinte rouge de la charte (celle de la sécurité) */
.encadre-urgence { border-color:var(--c-secu); background:color-mix(in srgb, var(--c-secu) 8%, #fff); }
.encadre-urgence h2 { color:var(--c-secu); }
.bouton-rouge { background:var(--c-secu); color:#fff; }
.bouton-rouge:hover, .bouton-rouge:focus { background:#8f1b29; color:#fff; }
.formulaire .aide-champ { margin:0 0 .75rem; color:var(--texte-doux); font-size:.9375rem; }

/* Pages protégées (mentions légales, confidentialité) : texte sous forme d'images, non sélectionnable, non imprimable */
.protegee { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.protegee .bloc-image { display: block; width: 100%; max-width: 672px; height: auto; margin: 0 0 1.5rem; pointer-events: none; -webkit-user-drag: none; }
@media print {
  .protegee * { display: none !important; }
  .protegee::before { content: "Impression non autorisée."; display: block; font: 1rem sans-serif; padding: 2rem; }
}

/* Catalogue : encadrés description + tarif */
.carte-catalogue { display: flex; flex-direction: column; }
.carte-catalogue h3 { margin-bottom: 0.75rem; }
.carte-catalogue .description { flex: 1; margin-bottom: 1.25rem; }
.carte-catalogue .tarif { margin: 0 0 1rem; padding-top: 1rem; border-top: 1px solid var(--filet); color: var(--texte); }
.tarif-montant { display: block; font-size: 1.375rem; font-weight: 700; color: var(--c, var(--accent)); }
.tarif-precision { font-size: 0.9375rem; color: var(--texte-doux); }
.note-catalogue { margin: 2rem 0 1.5rem; font-size: 0.9375rem; color: var(--texte-doux); }
.message-info { padding: 1rem 1.25rem; border-left: 4px solid var(--accent); background: #eef4ff; border-radius: 12px; margin: 0 0 1.5rem; }
.formulaire input:disabled, .formulaire button:disabled { opacity: 0.4; cursor: not-allowed; }
@media (min-width: 48rem) { .grille-catalogue { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 70rem) { .grille-catalogue { grid-template-columns: repeat(3, 1fr); } }
/* Lien « Espace client » du menu : discret, en contour */
.menu-client { border: 1px solid rgba(255,255,255,.55); border-radius: 999px; padding: 0.35rem 0.9rem; }
/* Menu à 7 entrées : resserré pour tenir sur une ligne, nom de marque insécable */
.menu-marque { white-space: nowrap; }
@media (min-width: 64rem) {
  #menu-liste { gap: 0.1rem; }
  #menu-liste a { padding-left: 0.65rem; padding-right: 0.65rem; font-size: 0.9375rem; white-space: nowrap; }
}

/* Petit drapeau suisse à côté de « Cloud suisse » dans le menu */
.drapeau-menu { display: inline-block; width: 1.05em; height: 1.05em; margin-left: 0.4rem; vertical-align: -0.15em; border-radius: 2px; pointer-events: none; }

/* Catalogue : catégorie, mention « à partir de », garantie */
.categorie { margin: 0 0 0.5rem; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--c, var(--accent)); }
.tarif-avant { display: block; font-size: 0.875rem; color: var(--texte-doux); }
.garantie { margin: 0 0 2rem; padding: 1rem 1.25rem; border-left: 4px solid var(--c-cloud); background: #fff; border-radius: 12px; }

/* Chapitre « Mon éthique » de la page Qui je suis */
.ethique h3 { margin: 2rem 0 0.5rem; font-size: 1.25rem; line-height: 1.3; color: var(--marine); text-align: left; }
.ethique .ouverture { font-size: 1.1875rem; color: var(--texte-doux); }
.ethique .appel { margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--filet); }