:root {
  --bleu: #12355b;
  --bleu-fonce: #09233f;
  --turquoise: #007c91;
  --bleu-clair: #eaf3f7;
  --fond: #f8fafb;
  --texte: #1b2633;
  --texte-secondaire: #536475;
  --blanc: #fff;
  --ocre: #d89132;
  --ocre-pale: #fff4df;
  --corail: #ba563d;
  --corail-pale: #fff0eb;
  --bordure: #dce5ea;
  --largeur: 72rem;
  --ombre: 0 14px 35px rgb(9 35 63 / 9%);
  --hauteur-entete: 6rem;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--hauteur-entete) + 1rem); }
html:has(:focus-visible) { scroll-behavior: auto; }
body { margin: 0; color: var(--texte); background: var(--fond); font-family: Arial, Helvetica, sans-serif; line-height: 1.6; overflow-wrap: anywhere; }
a { color: inherit; }
h1, h2, h3 { color: var(--bleu-fonce); line-height: 1.15; }
h1 { margin: .35rem 0 1.25rem; font-size: clamp(2.4rem, 5.5vw, 4.7rem); letter-spacing: -.045em; }
h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); }
.conteneur { width: min(100% - 2.5rem, var(--largeur)); margin-inline: auto; }
.lien-evitement { position: absolute; left: -9999px; }
.lien-evitement:focus { position: fixed; top: 1rem; left: 1rem; z-index: 30; padding: .75rem; background: var(--blanc); }

.entete-site { position: sticky; top: 0; z-index: 20; color: var(--blanc); background: rgb(9 35 63 / 96%); border-bottom: 1px solid rgb(255 255 255 / 12%); backdrop-filter: blur(12px); transition: background-color .32s ease, box-shadow .32s ease, color .32s ease; }
.entete-site__contenu { display: flex; align-items: center; min-height: 5.5rem; gap: 1.25rem; transition: min-height .32s ease, padding .32s ease; }
.marque { color: inherit; font-size: 1.15rem; font-weight: 700; text-decoration: none; white-space: nowrap; }
.marque span { color: #d5e5ef; font-weight: 400; }
.marque--logo { display: inline-flex; align-items: center; }
.logo-atms { display: block; width: 3.4rem; height: 3.4rem; object-fit: contain; border-radius: .3rem; }
.entete-site .marque--logo { flex-shrink: 0; }
.entete-site .logo-atms { width: 5.1rem; height: 5.1rem; border-radius: 18%; transition: width .32s ease, height .32s ease, box-shadow .32s ease; }
.logo-atms--pied-page { width: 4.5rem; height: 4.5rem; }
.telephone-entete { margin-left: auto; color: var(--blanc); font-weight: 700; text-decoration-thickness: 2px; text-underline-offset: .3rem; white-space: nowrap; }
nav { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 1.15rem; }
nav a { display: inline-flex; align-items: center; min-height: 44px; padding: .35rem .45rem; color: #e7f0f5; font-size: .92rem; text-decoration: none; }
nav .bouton { min-height: 44px; }
.bouton-menu { display: none; align-items: center; justify-content: center; min-height: 44px; padding: .45rem .65rem; border: 1px solid currentColor; border-radius: .5rem; color: inherit; background: transparent; font: inherit; font-weight: 700; cursor: pointer; }
nav a:hover { color: var(--blanc); text-decoration: underline; text-underline-offset: .35rem; }
.entete-site--defile { color: var(--bleu-fonce); background: rgb(255 255 255 / 40%); border-bottom-color: var(--bordure); box-shadow: 0 2px 14px rgb(9 35 63 / 14%); }
.entete-site--defile .entete-site__contenu { min-height: 3.25rem; }
.entete-site--defile .marque span { color: var(--texte-secondaire); }
.entete-site--defile .logo-atms { width: 3.4rem; height: 3.4rem; box-shadow: 0 1px 4px rgb(9 35 63 / 14%); }
.entete-site--defile .telephone-entete, .entete-site--defile nav a { color: var(--bleu-fonce); }
.entete-site--defile .bouton--clair { color: var(--blanc); background: var(--turquoise); border-color: var(--turquoise); }

.bouton { display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; padding: .75rem 1.1rem; border: 2px solid var(--turquoise); border-radius: .5rem; color: var(--blanc); background: var(--turquoise); font-weight: 700; text-align: center; text-decoration: none; cursor: pointer; transition: transform .2s ease, background .2s ease, box-shadow .2s ease; }
.bouton:hover, .bouton:focus { background: #00677a; border-color: #00677a; transform: translateY(-2px); box-shadow: 0 8px 20px rgb(0 124 145 / 25%); }
.bouton--secondaire, .bouton--clair { color: var(--bleu-fonce); background: var(--blanc); border-color: var(--blanc); }
.bouton--secondaire:hover, .bouton--secondaire:focus, .bouton--clair:hover, .bouton--clair:focus { color: var(--bleu-fonce); background: var(--ocre-pale); border-color: var(--ocre-pale); }
.bouton--petit { min-height: auto; padding: .45rem .7rem; }
.bouton--ocre { color: #382206; background: var(--ocre); border-color: var(--ocre); }
.bouton--ocre:hover, .bouton--ocre:focus { color: #382206; background: #e7a13c; border-color: #e7a13c; box-shadow: 0 8px 20px rgb(216 145 50 / 28%); }

.hero { display: grid; place-items: center; min-height: 34rem; padding: 5.5rem 0; }
.hero, .bandeau-page { position: relative; overflow: hidden; color: var(--blanc); background: radial-gradient(circle at 84% 18%, rgb(216 145 50 / 32%), transparent 19rem), radial-gradient(circle at 82% 79%, rgb(0 124 145 / 50%), transparent 22rem), linear-gradient(125deg, var(--bleu-fonce), var(--bleu) 62%, #0b6072); }
.hero::after, .bandeau-page::after { position: absolute; right: -4rem; bottom: -6rem; width: 25rem; height: 25rem; border: 1px solid rgb(255 255 255 / 12%); border-radius: 50%; pointer-events: none; content: ''; }
.hero > .conteneur, .bandeau-page > .conteneur { position: relative; z-index: 1; }
.hero h1 { color: var(--blanc); }
.hero__contenu { max-width: 53rem; }
.sur-titre { display: inline-flex; align-items: center; gap: .55rem; margin: 0 0 .9rem; color: var(--turquoise); font-size: .82rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.sur-titre::before { width: 2.2rem; height: 3px; background: currentColor; content: ''; }
.hero .sur-titre, .bandeau-page .sur-titre { color: #ffd28a; }
.introduction { max-width: 45rem; color: #e5eef4; font-size: clamp(1.08rem, 2vw, 1.3rem); }
.actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }
.hero-repere { max-width: 26rem; margin-top: 2rem; padding: 1.1rem 1.3rem; border-left: 4px solid var(--ocre); color: #e7f0f5; background: rgb(255 255 255 / 10%); }
.hero-repere strong { color: #ffd28a; }

.bandeau-page { padding: 4.5rem 0; }
.bandeau-page h1 { color: var(--blanc); max-width: 54rem; }
.bandeau-page p:not(.sur-titre) { max-width: 44rem; color: #e5eef4; font-size: 1.15rem; }
.section { padding: 5rem 0; }
.section--teinte { background: var(--bleu-clair); }
.section--chaude { background: radial-gradient(circle at 92% 10%, rgb(216 145 50 / 18%), transparent 22rem), #fffaf3; }
.en-tete-section { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: 2rem; }
.en-tete-section > p { max-width: 32rem; margin-bottom: .35rem; color: var(--texte-secondaire); }
.cartes, .tarifs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.cartes > *, .tarifs > *, .grille-2 > *, .contact-grille > *, .pied-page__grille > * { min-width: 0; }
.section > .conteneur.cartes, .section > .conteneur.tarifs { margin-block: 2rem; }
.cartes--grandes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.carte, .tarifs article, .encadre, .detail-service { padding: 1.5rem; border: 1px solid var(--bordure); border-radius: .9rem; background: var(--blanc); box-shadow: 0 4px 15px rgb(9 35 63 / 4%); }
.carte::before, .detail-service::before { display: block; width: 2.7rem; height: .35rem; margin-bottom: 1.15rem; border-radius: 1rem; background: var(--turquoise); content: ''; }
.carte:nth-child(even)::before, .detail-service:nth-child(even)::before { background: var(--ocre); }
.carte h2, .carte h3, .tarifs h2, .encadre h3, .detail-service h3 { margin-top: 0; }
.carte p, .detail-service p { color: var(--texte-secondaire); }
.lien-fleche { color: var(--turquoise); font-weight: 700; text-decoration-thickness: 2px; text-underline-offset: .25rem; }
.lien-fleche:hover { color: var(--bleu-fonce); }
.lien-fleche::after { content: ' →'; }
.grille-2 { display: grid; grid-template-columns: 1.3fr 1fr; gap: 2.5rem; align-items: start; }
.liste-colonnes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.liste-colonnes p { margin: 0; padding: 1rem; border-left: 4px solid var(--ocre); background: var(--blanc); }
.details-services { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; margin-top: 2rem; }
.detail-service ul { padding-left: 1.25rem; }
.detail-service li + li { margin-top: .55rem; }

.tarifs { grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: stretch; }
.tarifs article { border-top: 5px solid var(--turquoise); }
.tarifs h2 { font-size: clamp(1.35rem, 2vw, 1.75rem); line-height: 1.25; }
.tarifs article:nth-child(2), .tarifs article:nth-child(3) { border-top-color: var(--ocre); background: var(--ocre-pale); }
.tarif-urgent { border-top-color: var(--corail) !important; background: var(--corail-pale) !important; }
.prix { margin: .5rem 0; color: var(--bleu-fonce); font-weight: 700; font-size: 2rem; }
.prix span { font-size: 1rem; font-weight: 400; }
.notice { margin: 2rem 0; padding: 1.25rem; border-left: 4px solid var(--ocre); background: var(--ocre-pale); font-size: 1rem; }
.notice p, .notice h2 { font-size: inherit; line-height: inherit; }
.notice h2 { margin: 0 0 1rem; }
.notice p { margin: 0; }
.notice p + p { margin-top: .4rem; }
.notice--zone { border-color: var(--turquoise); background: var(--bleu-clair); }
.zone-intervention { max-width: 52rem; }
.zone-intervention--contact { margin-top: 2.5rem; }

.faq { max-width: 52rem; }
.faq details { margin-bottom: .75rem; padding: 1rem 1.25rem; border-left: 4px solid var(--ocre); background: var(--blanc); box-shadow: 0 2px 8px rgb(18 53 91 / 5%); }
.faq summary { color: var(--bleu-fonce); font-weight: 700; cursor: pointer; }
.formulaire { max-width: 46rem; }
.contact-grille { display: grid; grid-template-columns: minmax(16rem, .8fr) minmax(0, 1.2fr); gap: 2.5rem; align-items: start; }
.coordonnees { padding: 1.5rem; border-left: 4px solid var(--ocre); background: var(--ocre-pale); }
.coordonnees h2, .coordonnees h3 { margin-top: 0; }
.coordonnees h3 { margin-bottom: .35rem; font-size: 1.05rem; }
.telephone-contact { margin: .5rem 0; font-size: 1.7rem; font-weight: 700; }
.telephone-contact a, .coordonnees > p > a { color: var(--bleu-fonce); text-underline-offset: .25rem; }
.coordonnees address { font-style: normal; }
.note { margin-bottom: 0; font-size: .92rem; }
.formulaire form { display: grid; gap: 1rem; padding: 1.75rem; border: 1px solid var(--bordure); border-radius: .9rem; background: var(--blanc); box-shadow: var(--ombre); }
.champ { display: grid; gap: .35rem; }
.champ label { font-weight: 700; }
.champ input, .champ select, .champ textarea { width: 100%; min-width: 0; padding: .7rem; border: 1px solid #9aa9b8; border-radius: .35rem; font: inherit; }
.champ textarea { min-height: 9rem; resize: vertical; }
.errorlist, .erreurs { margin: 0; padding: .6rem; color: #8a1820; background: #ffe8e9; list-style: none; }
.erreurs--resume { padding: 1rem; border-left: 4px solid #8a1820; }
.erreurs--resume h2 { margin: 0 0 .5rem; color: inherit; font-size: 1.2rem; line-height: 1.4; }
.erreurs--resume p { margin: 0; }
.erreurs--resume ul { margin: .5rem 0 0; padding-left: 1.25rem; }
.messages { margin-top: 1rem; }
.message { padding: 1rem; border-left: 4px solid #287b37; background: #e2f5e5; }
.contenu-legal { max-width: 52rem; }

.pied-page { padding-top: 3.5rem; color: #d7e5ee; background: var(--bleu-fonce); }
.pied-page h2 { margin-top: 0; color: var(--blanc); font-size: 1rem; }
.pied-page__grille { display: grid; grid-template-columns: 2fr 1fr 1.3fr; gap: 2rem; }
.pied-page a:not(.marque) { display: block; margin: .35rem 0; color: #d7e5ee; }
nav a[aria-current="page"], .pied-page a[aria-current="page"]:not(.marque) {
  text-decoration-line: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: .35rem;
  text-decoration-skip-ink: auto;
}
.marque[aria-current="page"] .logo-atms { outline: 2px solid var(--ocre); outline-offset: -2px; }
.pied-page__bas { margin-top: 2rem; padding: 1rem 0; border-top: 1px solid #34516d; color: #aebfcb; font-size: .9rem; }

@media (max-width: 52rem) {
  :root { --hauteur-entete: 12rem; }
  .entete-site__contenu { align-items: center; min-height: auto; padding: .5rem 0; flex-wrap: wrap; gap: .65rem; }
  .entete-site .logo-atms { width: 3.4rem; height: 3.4rem; }
  .telephone-entete { display: inline-flex; align-items: center; min-height: 44px; }
  .entete-site--menu-actif .bouton-menu { display: inline-flex; }
  .entete-site--menu-actif nav[hidden] { display: none; }
  .entete-site--defile .entete-site__contenu { min-height: 3.25rem; padding-block: .55rem; }
  nav { order: 3; justify-content: flex-start; width: 100%; }
  nav { gap: .35rem; }
  .cartes, .cartes--grandes, .tarifs, .liste-colonnes, .grille-2, .contact-grille, .details-services, .pied-page__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 34rem) {
  .conteneur { width: min(100% - 1.5rem, var(--largeur)); }
  .cartes, .cartes--grandes, .tarifs, .liste-colonnes, .grille-2, .contact-grille, .details-services, .pied-page__grille { grid-template-columns: 1fr; }
  .telephone-entete { margin-left: auto; }
  .section { padding: 4rem 0; }
  nav { gap: .7rem; font-size: .86rem; }
  .en-tete-section { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .entete-site, .entete-site__contenu, .entete-site .logo-atms, .bouton { transition: none; }
  .bouton:hover, .bouton:focus { transform: none; }
}

/* Le double contour reste visible sur les fonds clairs comme foncés. */
:is(a[href], button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--bleu-fonce);
  outline-offset: 3px;
  box-shadow: 0 0 0 3px var(--blanc);
}

@media (forced-colors: active) {
  :is(a[href], button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline-color: Highlight;
    box-shadow: none;
  }
}