/* ExpertMed — site vitrine. Police, graisses, tailles et couleurs RELEVEES sur le site d'origine (19/09/2026) :
   Open Sans 300 pour le texte, 14px/22px, gris #5c5c5c ; titres 30px/300 ; barre rouge 1px x 120px ; pied #232323. */
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 300 800; font-display: swap; src: url("/assets/fonts/open-sans-normal.woff2") format("woff2"); }
@font-face { font-family: "Open Sans"; font-style: italic; font-weight: 300 800; font-display: swap; src: url("/assets/fonts/open-sans-italic.woff2") format("woff2"); }

:root {
  --rouge: #cb0e19;
  --bleu: #163053;
  --texte: #5c5c5c;
  --titre: #444;
  --fond-boite: #f8f8f8;
  --bord-boite: #d3d3d3;
  --trait: #eee;
  --largeur: 940px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; overflow-wrap: break-word; overflow-x: hidden; font-family: "Open Sans", Arial, sans-serif; font-size: 14px; font-weight: 300; line-height: 22px; color: var(--texte); background: #fff; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--rouge); text-decoration: none; transition: color .3s ease-out, background-color .3s ease-out, border-color .3s ease-out; }
a:hover { color: var(--bleu); }
a:focus-visible, .bouton:focus-visible, label:focus-visible { outline: 3px solid var(--rouge); outline-offset: 2px; }
strong, b { font-weight: 700; }
.marque span { color: var(--rouge); }
address { font-style: normal; }
.largeur { max-width: calc(var(--largeur) + 32px); margin: 0 auto; padding: 0 16px; }
.centre { text-align: center; }
.rouge { color: var(--rouge); }
.evitement { position: absolute; left: -9999px; }
.evitement:focus { left: 16px; top: 16px; z-index: 100; background: #fff; padding: 8px 12px; }
.invisible { position: absolute !important; width: 1px; height: 1px; padding: 0 !important; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- En-tete ---------- */
.entete { position: sticky; top: 0; z-index: 50; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .15); }
.entete-int { display: flex; align-items: center; justify-content: space-between; min-height: 96px; gap: 24px; }
.logo img { width: 270px; height: auto; }
.entete nav ul { list-style: none; display: flex; gap: 6px; margin: 0; padding: 0; }
.entete nav a { display: block; padding: 10px 2px 12px; margin: 0 9px; font-size: 14px; font-weight: 400; color: var(--titre); border-bottom: 1px solid transparent; }
.entete nav a:hover, .entete nav a[aria-current="page"] { color: var(--rouge); }
.entete nav a[aria-current="page"] { border-bottom-color: var(--rouge); }
.bascule-menu { position: absolute; opacity: 0; pointer-events: none; }
.bouton-menu { display: none; cursor: pointer; padding: 12px 8px; }
.bouton-menu span { display: block; width: 26px; height: 3px; margin: 5px 0; background: var(--titre); border-radius: 2px; }

/* ---------- Sections : fond blanc partout ---------- */
main section { padding: 45px max(16px, calc((100% - var(--largeur)) / 2)); background: #fff; }
main section::after { content: ""; display: block; clear: both; }
main section.titre-page { padding-bottom: 0; }

h1, .page-accueil h2, .contactez h2 { margin: 0 0 15px; text-align: center; font-size: 30px; font-weight: 300; line-height: 1.2; letter-spacing: 1px; text-transform: uppercase; color: var(--titre); }
h1::after, .page-accueil h2::after { content: ""; display: block; width: 120px; height: 1px; margin: 20px auto 30px; background: var(--rouge); }
h2 { margin: 0 0 20px; font-size: 20px; font-weight: 300; line-height: 26px; color: var(--titre); }
h3 { margin: 0 0 12px; font-size: 16px; font-weight: 600; color: #333; }
p { margin: 0 0 22px; text-align: justify; }
p.centre, .centre p { text-align: center; }
main ul { list-style: square; padding-left: 45px; margin: 0 0 22px; }
main li { margin: 0; }

/* encadres gris a fin bord (accueil, services, tarifs) */
.boite, .encadre { padding: 8px 8px 0; margin: 0 0 22px; background: var(--fond-boite); border: 1px solid var(--bord-boite); }
.encadre { padding: 15px; }
.boite > p:last-child { padding-bottom: 8px; }
.boite.etroite { width: 80%; margin: 0 auto 30px; padding: 15px; color: var(--bleu); }
.boite.etroite h3 { margin: 20px 0; text-align: center; font-size: 16px; font-weight: 700; color: var(--bleu); }
.boite.rubrique { padding: 8px 8px 0; margin-bottom: 22px; }
.boite.rubrique h2 { margin: 0 0 22px; text-align: center; color: var(--rouge); }
.boite.rubrique h2::before { content: "\2714\00a0"; font-size: 17px; }

/* bouton a contour rouge, centre */
.bouton, main p > a:only-child[href^="/"] { display: inline-block; padding: 10px 25px; font-size: 12px; font-weight: 700; line-height: 12px; text-transform: uppercase; color: var(--rouge); background: transparent; border: 2px solid var(--rouge); }
.bouton::after, main p > a:only-child[href^="/"]::after { content: "\203A"; margin-left: 8px; font-size: 15px; line-height: 0; }
.bouton:hover, main p > a:only-child[href^="/"]:hover { color: #fff; background: var(--rouge); }
main p:has(> a:only-child[href^="/"]) { text-align: center; }

/* grande photo + accroche (accueil) */
main section.accroche { position: relative; padding: 0; background: var(--bleu); }
main section.accroche img { margin: 0; width: 100%; height: clamp(260px, 46vw, 560px); object-fit: cover; }
.accroche h1 { position: absolute; left: 45%; top: 26%; margin: 0; padding: 12px 14px; text-align: left; font-size: clamp(18px, 2.6vw, 30px); font-weight: 300; line-height: 1.35; letter-spacing: 0; text-transform: none; color: #fff; background: rgba(70, 70, 70, .72); }
.accroche h1::after { display: none; }
.page-accueil section img { margin: 24px auto; }
.page-services img { margin: 8px auto 40px; }

/* bandeau bleu fonce pleine largeur : image d'un cote (toute la hauteur du bandeau), texte blanc de l'autre */
main section.bande-bleue, main section.fondatrice { padding-left: 0; padding-right: 0; }
main section.bande-bleue { padding-top: 0; padding-bottom: 0; margin: 30px 0 45px; }
main section.fondatrice { padding-bottom: 0; }
/* overflow "clip" et non "hidden" : "hidden" ferait du bandeau la zone de defilement de reference et figerait l'animation de la Fondatrice */
.bande-bleue { color: #fff; background: var(--bleu); overflow: clip; }
.bande-int { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; max-width: calc(var(--largeur) + 32px); margin: 0 auto; padding: 0 16px; }
.bande-int > img, .page-accueil .bande-int > img { width: 100%; height: 100%; min-height: 283px; margin: 0; object-fit: cover; }
.bande-texte { align-self: center; padding: 30px 0; }
.bande-texte p:last-child { margin-bottom: 0; }
.bande-bleue a { color: #fff; }
.bande-bleue a:hover { color: var(--rouge); }
.fondatrice .bande-texte { font-size: 13.5px; }

/* l'image glisse depuis la gauche et s'arrete a sa place (ordinateur seulement) */
@media (min-width: 821px) and (prefers-reduced-motion: no-preference) {
  .glisse .bande-int > img { animation: glisse-gauche 2.2s ease-out both; }
}
@keyframes glisse-gauche { from { opacity: 0; transform: translateX(-100vw); } to { opacity: 1; transform: none; } }
/* Fondatrice (accueil) : meme glissement, depuis la DROITE, joue UNE fois quand le bandeau arrive a l'ecran
   (classe "en-vue" posee par le petit script du gabarit ; sans script, la photo est simplement affichee) */
@media (min-width: 821px) and (prefers-reduced-motion: no-preference) {
  .js .glisse-droite .bande-bleue:not(.en-vue) .bande-int > img { opacity: 0; }
  .glisse-droite .bande-bleue.en-vue .bande-int > img { animation: glisse-droite 2.2s ease-out both; }
}
@keyframes glisse-droite { from { opacity: 0; transform: translateX(100vw); } to { opacity: 1; transform: none; } }

/* colonnes a pictogramme rouge (mission, valeurs) */
.cartes { display: grid; grid-template-columns: repeat(4, 1fr); margin: 30px 0 0; }
.carte { padding: 0 20px; margin-bottom: 30px; border-left: 1px solid var(--trait); }
.carte:first-child { border-left: 0; }
.carte .icone { position: relative; display: flex; align-items: center; justify-content: center; width: 50px; height: 50px; margin: 40px auto; background: var(--rouge); border-radius: 4px; transition: transform .3s ease-out, background-color .3s ease-out; }
.carte .icone::after { content: ""; position: absolute; left: 50%; bottom: -16px; margin-left: -8px; border: 8px solid transparent; border-top-color: var(--rouge); transition: border-color .3s ease-out; }
.carte:hover .icone { transform: translateY(3px); background: #333; }
.carte:hover .icone::after { border-top-color: #333; }
.carte h2, .carte h3 { margin: 0 0 10px; text-align: center; font-size: 16px; font-weight: 600; line-height: 26px; color: #333; }
.page-accueil .carte h3 { color: var(--rouge); }
.carte p { margin: 0; font-size: 14px; line-height: 18px; text-align: justify; }

/* valeurs : les quatre colonnes remontent sous le bandeau bleu */
main.page-valeurs section.bande-bleue { margin-bottom: 0; }
main.page-valeurs section:nth-of-type(3) { padding-top: 0; }
.page-valeurs .cartes { margin-top: 0; }

/* outils : six encadres, trois par ligne, rapproches du texte d'introduction */
main.page-outils section:first-of-type { padding-bottom: 0; }
main.page-outils section:nth-of-type(2) { padding-top: 8px; }
.page-outils .cartes { grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 0; }
.page-outils .carte { min-height: 310px; padding: 25px 15px 15px; margin: 0; background: var(--fond-boite); border: 1px solid var(--bord-boite); }
.page-outils .carte h2 { margin-bottom: 20px; font-size: 20px; font-weight: 300; color: var(--rouge); }
.page-outils .carte ul { padding-left: 28px; margin: 0; }
.page-outils .carte li { line-height: 20px; }
.page-outils .carte a { color: var(--texte); }
.page-outils .carte a:hover { color: var(--rouge); }
.pdf { padding: 0 4px; font-size: 10px; font-weight: 400; color: #fff; background: var(--rouge); border: 1px solid var(--rouge); }

/* tarifs */
.page-tarifs h2 { margin: 60px 0 30px; text-align: center; color: var(--rouge); }
/* les quatre cadres ont la hauteur du plus grand (demande du 19/09 ; sur le site d'origine ils etaient inegaux) */
.forfaits { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 40px 0 60px; align-items: stretch; }
.forfait { border: 2px solid #b4b4b4; background: var(--fond-boite); }
.forfait h3 { margin: 0; padding: 2px 8px; text-align: center; font-size: 14px; font-weight: 300; line-height: 22px; color: var(--texte); background: #fff; }
.forfait .prix { margin: 0; padding: 0 8px; text-align: center; font-weight: 600; color: #fff; background: var(--bleu); }
/* puces en retrait du bord du cadre (demande du 19/09 ; sur le site d'origine elles collaient au bord gauche) */
.forfait ul { margin: 0; padding: 8px 12px 10px 32px; }
.forfait li { line-height: 20px; text-align: justify; }
.forfait-seul { max-width: 300px; margin: 0 auto 45px; }
h3.legende { margin: 0 0 20px; padding-bottom: 6px; text-align: center; font-size: 16px; font-weight: 300; color: #333; border-bottom: 1px solid #e5e5e5; }
table.frais { width: 100%; border-collapse: collapse; margin: 0 0 30px; }
table.frais td { padding: 0 0 1em; vertical-align: top; text-align: justify; }
table.frais td:first-child { width: 20em; text-decoration: underline; text-align: left; }

/* contact */
.coordonnees address, .coordonnees p { margin: 0 0 14px; padding-left: 22px; background: no-repeat 0 3px / auto 16px; text-align: left; }
.coordonnees .pin { background-image: url("/assets/pin-plein-16.png"); }
.coordonnees .tel { background-image: url("/assets/phone-64.png"); }
.coordonnees .arobase { background-image: url("/assets/at-1.png"); }
.coordonnees .rejoignez { padding-left: 0; }
.coordonnees .rejoignez img { display: inline-block; width: 30px; margin: 0 0 0 4px; vertical-align: middle; }
main section.contactez { padding-top: 0; }
.contactez h2 { margin-bottom: 30px; font-size: 22px; text-transform: none; letter-spacing: 0; color: #999; }
.formulaire { max-width: 860px; margin: 0 auto; padding-right: 60px; }
.formulaire .champ { display: grid; grid-template-columns: 90px 1fr 16px; gap: 0 14px; align-items: start; margin-bottom: 15px; }
.formulaire label { padding-top: 4px; text-align: right; font-size: 12px; font-weight: 700; color: #333; }
.formulaire input[type="text"], .formulaire input[type="email"], .formulaire input[type="tel"], .formulaire textarea { width: 100%; padding: 4px 6px; font: inherit; color: #333; background: #fff; border: 1px solid #ccc; border-radius: 0; }
.formulaire textarea { resize: vertical; }
.formulaire input:focus, .formulaire textarea:focus { outline: 0; border-color: var(--rouge); }
.formulaire .requis { font-size: 16px; font-weight: 700; color: var(--rouge); }
.formulaire .sans-libelle > * { grid-column: 2; }
.formulaire label.accord { padding: 0; text-align: left; }
.formulaire label.accord a { color: var(--rouge); }
.formulaire label.accord input { margin: 0 4px 0 0; vertical-align: -2px; }
.formulaire .information { margin: 6px 0 0; font-size: 12px; line-height: 18px; color: #777; }
.formulaire .information a { color: var(--rouge); }
.formulaire button { justify-self: start; padding: 9px 20px; font: inherit; font-size: 12px; font-weight: 400; color: #fff; background: var(--rouge); border: 0; cursor: pointer; transition: background-color .3s ease-out; }
.formulaire button:hover { background: #333; }
.formulaire .piege { position: absolute; left: -9999px; }
.mentions { text-align: center; }
.mentions img { width: 120px; margin: 0 auto 16px; }
.mentions p { margin: 0; text-align: center; }

/* ---------- Pied de page : fond noir, trait vertical entre les deux adresses ---------- */
.pied { padding: 35px 0 20px; font-size: 12px; line-height: 20px; text-align: center; color: #ccc; background: #232323; }
.pied img { width: 200px; margin: 0 auto 24px; }
.pied p { text-align: center; margin: 0 0 20px; }
.pied a { color: #fff; }
.pied a:hover { color: var(--rouge); }
/* l'adresse du MILIEU est exactement au centre (sous le logo) : colonnes 1fr / auto / 1fr, les deux autres de part et d'autre */
.pied-bureaux { display: grid; grid-template-columns: 1fr auto 1fr; margin-bottom: 20px; }
.pied-bureaux address { padding: 0 10px; text-align: left; }
.pied-bureaux address:nth-child(2) { text-align: center; border-left: 1px solid #fff; border-right: 1px solid #fff; }
.pied-bureaux address:first-child { text-align: right; }
.pied p:last-child { margin: 0; color: #807d7d; }

/* ---------- Maquette uniquement ---------- */
.bandeau-maquette { margin: 0; padding: 8px 16px; font-size: 13px; text-align: center; color: #5b4500; background: #ffe58a; }
mark.a-confirmer { padding: 1px 3px; color: #333; background: #ffe58a; outline: 1px dashed #b38b00; cursor: help; }

/* fleches rondes des cadres qui defilent (creees par le script du gabarit, visibles sur telephone seulement) */
.fleches { display: none; }

/* ---------- Tablette ---------- */
@media (max-width: 1023px) {
  .cartes, .forfaits { grid-template-columns: repeat(2, 1fr); }
  .page-outils .cartes { grid-template-columns: repeat(2, 1fr); }
  .carte:nth-child(odd) { border-left: 0; }
}

/* ---------- Menu replie ---------- */
@media (max-width: 820px) {
  .bouton-menu { display: block; padding: 7px 8px; background: #333; border-radius: 2px; }
  .bouton-menu span { width: 20px; height: 3px; margin: 4px 0; background: #fff; border-radius: 0; }
  .entete nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: #2b2b2b; border-top: 2px solid var(--rouge); }
  .bascule-menu:checked ~ nav { display: block; }
  .bascule-menu:focus-visible + .bouton-menu { outline: 3px solid var(--rouge); }
  .entete nav ul { flex-direction: column; gap: 0; padding: 0 40px 10px; }
  .entete nav a { padding: 16px 0; margin: 0; color: #fff; border-bottom: 1px solid #3c3c3c; }
  .entete nav li:last-child a { border-bottom: 0; }
  .entete nav a[aria-current="page"] { border-bottom-color: #3c3c3c; }
  .bande-int { grid-template-columns: 1fr; gap: 0; }
  .bande-int > img, .page-accueil .bande-int > img { min-height: 0; height: auto; }
  .fondatrice .bande-int > img { order: 2; margin-bottom: 30px; }
  .bande-texte { padding: 24px 0 30px; }
  .boite.etroite { width: 100%; }
  table.frais td { display: block; width: auto !important; }
  table.frais td:first-child { padding-bottom: 0; }
}

/* ---------- Telephone : calque sur le rendu du site d'origine (captures de Christelle, 19/09) ---------- */
@media (max-width: 767px) {
  /* en-tete non fixe, logo large, marges laterales genereuses, texte toujours justifie, titres en grande taille */
  .entete { position: relative; }
  .entete-int { min-height: 100px; padding: 0 40px; }
  .logo img { width: 215px; }
  main section { padding: 40px; }
  main section.bande-bleue, main section.fondatrice, main section.accroche { padding-left: 0; padding-right: 0; }
  .bande-int { padding: 0 40px; }
  main section.accroche img { height: 42vw; min-height: 150px; }
  .accroche h1 { left: 46%; right: 5%; top: 14%; padding: 5px 7px; font-size: 13px; line-height: 1.4; }

  /* les cadres passent UN PAR UN, cote a cote : fleches ou glissement du doigt */
  .page-accueil .cartes, .page-valeurs .cartes, .forfaits { display: flex; gap: 0; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
  .page-accueil .cartes::-webkit-scrollbar, .page-valeurs .cartes::-webkit-scrollbar, .forfaits::-webkit-scrollbar { display: none; }
  .page-accueil .carte, .page-valeurs .carte, .forfaits .forfait { flex: 0 0 100%; scroll-snap-align: center; scroll-snap-stop: always; }
  .page-accueil .carte, .page-valeurs .carte { padding: 0 12px; margin-bottom: 0; border-left: 0; }
  .forfaits { margin-bottom: 0; }
  .fleches { display: flex; justify-content: center; gap: 8px; margin: 36px 0 50px; }
  .fleches button { width: 34px; height: 34px; padding: 0 0 3px; font: inherit; font-size: 22px; line-height: 1; color: #666; background: none; border: 2px solid #ccc; border-radius: 50%; cursor: pointer; }
  .fleches button:active { color: #fff; background: var(--rouge); border-color: var(--rouge); }

  /* services : le texte est deja dans des encadres -> marges laterales reduites pour lui rendre de la largeur (demande du 19/09) */
  main.page-services section { padding-left: 28px; padding-right: 28px; }

  /* outils : rubriques sans encadre, separees par un trait */
  .page-outils .cartes { grid-template-columns: 1fr; gap: 0; }
  .page-outils .carte { min-height: 0; padding: 26px 0; background: none; border: 0; border-top: 1px solid var(--bord-boite); }

  /* trois adresses ne tiennent pas cote a cote sur un telephone : l'une sous l'autre, separees par un petit trait blanc fin (2 traits) */
  .pied-bureaux { grid-template-columns: 1fr; gap: 10px; }
  .pied-bureaux address, .pied-bureaux address:first-child, .pied-bureaux address:nth-child(2) { text-align: center; border: 0; }
  .pied-bureaux address + address::before { content: ""; display: block; width: 36px; height: 1px; margin: 0 auto 10px; background: rgba(255, 255, 255, .7); transform: scaleY(.5); /* un demi-pixel : le plus fin qu'un ecran de telephone sache tracer */ }
  .formulaire { padding-right: 0; }
  .formulaire .champ { grid-template-columns: 1fr 12px; gap: 0 6px; }
  .formulaire label { grid-column: 1 / -1; text-align: left; padding: 0 0 4px; }
  .formulaire .sans-libelle > * { grid-column: 1 / -1; }
}
@media print { .entete, .pied, .bandeau-maquette { display: none; } }