/* ============================================================
   StructOrga Solutions — charte graphique v1, août 2026
   Surcouche de thème. Ne modifie pas le bundle applicatif.
   Chargée après index-TuBckCcH.css, donc prioritaire.

   Marine  #152344   Bleu   #3E6E9E   Ciel   #75A6D0
   Brume   #D9E6F2   Papier #FBFAF7   Orange #E2701A
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,600;1,8..60,400&display=swap');

/* ---------- 1. Jetons de couleur ---------- */
:root{
  --primary: 222 53% 17%;          /* marine — action principale */
  --primary-foreground: 45 33% 98%;

  --secondary: 222 53% 17%;        /* marine — sections sombres */
  --secondary-foreground: 45 33% 98%;

  --accent: 26 79% 49%;            /* orange — signal uniquement */
  --accent-foreground: 222 53% 17%;/* marine sur orange, jamais blanc */

  --light: 209 49% 90%;            /* brume */
  --light-foreground: 222 53% 17%;

  --white: 45 33% 98%;             /* papier, pas blanc pur */
  --white-foreground: 220 17% 35%;

  --background: 45 33% 98%;
  --foreground: 220 17% 35%;       /* encre douce */

  --card: 45 33% 98%;
  --card-foreground: 220 17% 35%;
  --popover: 45 33% 98%;
  --popover-foreground: 220 17% 35%;

  --muted: 209 40% 96%;
  --muted-foreground: 220 17% 42%;

  --border: 42 15% 87%;            /* trait */
  --input: 42 15% 87%;
  --ring: 26 79% 49%;

  --radius: .5rem;

  --so-marine:#152344; --so-bleu:#3E6E9E; --so-ciel:#75A6D0;
  --so-brume:#D9E6F2; --so-papier:#FBFAF7; --so-orange:#E2701A;
  --so-orange-txt:#B25815; --so-encre:#4A5468; --so-trait:#E3E0D9;
}

.dark{
  --background: 222 53% 17%;
  --foreground: 45 33% 98%;
  --card: 222 50% 21%;
  --card-foreground: 45 33% 98%;
  --popover: 222 50% 21%;
  --popover-foreground: 45 33% 98%;
  --primary: 45 33% 98%;
  --primary-foreground: 222 53% 17%;
  --secondary: 222 50% 24%;
  --secondary-foreground: 45 33% 98%;
  --light: 222 50% 24%;
  --light-foreground: 45 33% 98%;
  --white: 222 50% 21%;
  --white-foreground: 45 33% 98%;
  --muted: 222 40% 30%;
  --muted-foreground: 208 49% 78%;
  --accent: 26 79% 49%;
  --accent-foreground: 222 53% 17%;
  --border: 222 40% 30%;
  --input: 222 40% 30%;
}

/* ---------- 2. Typographie : contraste serif / sans ---------- */
h1, h2, h3,
.font-display, [class*="font-heading"]{
  font-family:'Source Serif 4', Georgia, 'Times New Roman', serif !important;
  font-weight:400 !important;
  letter-spacing:-.005em;
}
h1{ line-height:1.12 !important }
h2{ line-height:1.2 !important }
h1 em, h2 em, h1 i, h2 i{ font-style:italic; color:var(--so-bleu) }

/* Les surtitres restent en sans-serif capitalisé */
.uppercase.tracking-wider, .uppercase.tracking-widest,
[class*="text-xs"].uppercase, [class*="text-sm"].uppercase{
  font-family:'Inter', -apple-system, 'Segoe UI', sans-serif !important;
  font-weight:600 !important;
}

/* ---------- 3. L'orange redevient un signal ---------- */
/* Aucun grand aplat orange : les fonds accent passent en voile discret */
.bg-accent{ background-color:hsl(var(--accent)) }
.bg-accent\/10{ background-color:hsl(209 49% 90% / .55) !important }
.bg-accent\/20{ background-color:hsl(209 49% 90% / .8)  !important }
.bg-primary\/5,
.bg-primary\/10{ background-color:hsl(209 49% 90% / .45) !important }
.bg-primary\/20{ background-color:hsl(209 49% 90% / .7)  !important }
.bg-primary\/30{ background-color:hsl(209 49% 90% / .9)  !important }

/* Texte orange : la variante assombrie, lisible sur fond clair */
.text-accent{ color:var(--so-orange-txt) !important }

/* ---------- 4. Aplat, jamais de relief ---------- */
*, *::before, *::after{
  box-shadow:none !important;
  text-shadow:none !important;
}
.bg-gradient-to-r, .bg-gradient-to-b, .bg-gradient-to-br,
.bg-gradient-to-tr, .bg-gradient-to-l, .bg-gradient-to-t,
[class*="bg-[radial-gradient"], [class*="bg-[linear-gradient"]{
  background-image:none !important;
}

/* ---------- 5. Angles resserrés ---------- */
.rounded-2xl, .rounded-3xl, .rounded-xl{ border-radius:9px !important }
.rounded-lg{ border-radius:6px !important }
.rounded-md{ border-radius:4px !important }
button, .btn, [role="button"], a[class*="bg-primary"]{ border-radius:4px !important }
.rounded-full{ border-radius:9999px !important }

/* ---------- 6. Sections sombres : marine plein, texte papier ---------- */
.bg-secondary, .bg-\[--color-bg\]{ background-color:var(--so-marine) !important }

/* ---------- 7. Le filet orange, seul aplat de la couleur ---------- */
.so-rule, hr.so-rule{
  width:52px; height:3px; background:var(--so-orange);
  border:0; margin:14px 0 0;
}

/* ---------- 8. Chiffres alignés ---------- */
[class*="tabular"], td, th, time{ font-variant-numeric:tabular-nums }

/* ---------- 9. Confort de lecture ---------- */
p{ max-width:68ch }
p.max-w-none, .prose p{ max-width:none }

/* ============================================================
   10. Rythme clair / sombre
   Le fond par défaut redevient le papier. Deux bandes marine
   subsistent : l'accroche et la bande de rappel en milieu de page.
   Les sections 2 et 3, reconnaissables à leur filet supérieur,
   basculent en clair.
   ============================================================ */
section.bg-navy.border-t{
  background-color:var(--so-papier) !important;
  color:var(--so-encre) !important;
  border-top-color:var(--so-trait) !important;
}
section.bg-navy.border-t [class*="text-white"],
section.bg-navy.border-t [class*="text-slate-3"],
section.bg-navy.border-t [class*="text-slate-4"]{ color:var(--so-encre) !important }
section.bg-navy.border-t h1,
section.bg-navy.border-t h2,
section.bg-navy.border-t h3,
section.bg-navy.border-t strong,
section.bg-navy.border-t b{ color:var(--so-marine) !important }
section.bg-navy.border-t [class*="bg-white\/"],
section.bg-navy.border-t [class*="bg-primary\/"],
section.bg-navy.border-t [class*="bg-accent\/"]{ background-color:var(--so-brume) !important }
section.bg-navy.border-t [class*="border-white"]{ border-color:var(--so-trait) !important }

/* Décor : la trame de points et les halos disparaissent sur fond clair */
section.bg-navy.border-t > .absolute.inset-0,
section.bg-navy.border-t [class*="blur-"],
section.bg-navy.border-t [class*="opacity-\[0"]{
  background-image:none !important;
  background-color:transparent !important;
  opacity:0 !important;
}

/* ============================================================
   11. Le bouton d'appel du bandeau
   Sur fond marine, il s'inverse : papier et texte marine.
   Aucun bouton orange, conformément à la charte.
   ============================================================ */
header a.bg-accent,
header button.bg-accent{
  background-color:var(--so-papier) !important;
  color:var(--so-marine) !important;
}
header a.bg-accent:hover,
header button.bg-accent:hover{ background-color:var(--so-brume) !important }

/* ============================================================
   12. Bulles posées sur les visuels
   La classe text-navy n'est définie nulle part dans la feuille
   du site : ces encarts héritaient de la couleur claire de leur
   section et affichaient donc du texte pâle sur fond blanc.
   On rétablit l'encre, et un filet remplace l'ombre portée
   supprimée par la charte.
   ============================================================ */
.text-navy{ color:var(--so-marine) !important }

.bg-white{ background-color:var(--so-papier) !important }

.bg-white.shadow-lg, .bg-white.shadow, .bg-white.shadow-md,
.bg-white.shadow-xl, .absolute.bg-white{
  border:1px solid var(--so-trait);
}

/* Le contenu des encarts clairs repasse en encre, quoi qu'il hérite */
.bg-white, .bg-white p, .bg-white span, .bg-white li, .bg-white div{
  color:var(--so-encre) !important;
}
.bg-white [class*="text-white"]{ color:var(--so-encre) !important }
.bg-white h1, .bg-white h2, .bg-white h3, .bg-white h4,
.bg-white strong, .bg-white b,
.bg-white .font-semibold, .bg-white .font-bold{
  color:var(--so-marine) !important;
}
.bg-white .text-primary, .bg-white [class*="text-primary"]{
  color:var(--so-bleu) !important;
}
.bg-white .text-accent{ color:var(--so-orange-txt) !important }

/* ============================================================
   13. Ordre de l'accroche
   Les boutons d'action existaient mais passaient sous la ligne
   de flottaison, repoussés par les trois cartes Mode. On les
   remonte juste après le texte, et on resserre les marges pour
   que l'ensemble tienne sur le premier écran d'un portable.
   ============================================================ */
section.bg-navy div:has(> h1){
  display:flex;
  flex-direction:column;
}
section.bg-navy div:has(> h1) > :nth-child(5){ order:2 }  /* cartes Mode   */
section.bg-navy div:has(> h1) > :nth-child(6){ order:1 }  /* boutons       */
section.bg-navy div:has(> h1) > :nth-child(7){ order:3 }  /* ligne contact */

section.bg-navy div:has(> h1) > p{ margin-bottom:1rem }
section.bg-navy div:has(> h1) > h1{ margin-bottom:1.25rem }
section.bg-navy div:has(> h1) > :nth-child(6){ margin-bottom:1.75rem }
section.bg-navy div:has(> h1) > :nth-child(5){ margin-bottom:1.5rem }

/* Sur fond marine, l'action principale s'inverse : papier, texte marine.
   L'action secondaire reste un lien souligné d'un filet orange.        */
section.bg-navy a.bg-accent,
section.bg-navy button.bg-accent{
  background-color:var(--so-papier) !important;
  color:var(--so-marine) !important;
}
section.bg-navy a.bg-accent:hover,
section.bg-navy button.bg-accent:hover{ background-color:var(--so-brume) !important }

/* ============================================================
   14. Boutons pleins sur fond marine
   --primary vaut désormais le marine : un bouton bg-primary
   posé sur une section marine devenait invisible. Sur ce fond,
   l'action principale s'inverse — papier, texte marine —
   comme prévu par la charte.
   ============================================================ */
section.bg-navy a[class*="bg-primary"],
section.bg-navy button[class*="bg-primary"],
.bg-secondary a[class*="bg-primary"],
.bg-secondary button[class*="bg-primary"]{
  background-color:var(--so-papier) !important;
  color:var(--so-marine) !important;
  border:0 !important;
}
section.bg-navy a[class*="bg-primary"]:hover,
section.bg-navy button[class*="bg-primary"]:hover,
.bg-secondary a[class*="bg-primary"]:hover,
.bg-secondary button[class*="bg-primary"]:hover{
  background-color:var(--so-brume) !important;
}

/* ============================================================
   15. L'accroche passe en clair
   Elle occupait 90 % de la hauteur d'écran en marine, ce qui
   faisait basculer toute la première impression dans le sombre.
   Le marine ne subsiste que sur le bandeau de navigation et
   la bande de rappel de milieu de page.
   ============================================================ */
section.bg-navy[class*="min-h-"]{
  background-color:var(--so-papier) !important;
  color:var(--so-encre) !important;
}
section.bg-navy[class*="min-h-"] h1,
section.bg-navy[class*="min-h-"] h2,
section.bg-navy[class*="min-h-"] strong{ color:var(--so-marine) !important }
section.bg-navy[class*="min-h-"] [class*="text-white"]{ color:var(--so-encre) !important }
section.bg-navy[class*="min-h-"] [class*="text-primary"]{ color:var(--so-bleu) !important }

/* Cartes Mode : voile brume et filet, au lieu du blanc translucide */
section.bg-navy[class*="min-h-"] [class*="bg-white\/"]{ background-color:var(--so-brume) !important }
section.bg-navy[class*="min-h-"] [class*="border-white"]{ border-color:var(--so-trait) !important }
section.bg-navy[class*="min-h-"] > .absolute.inset-0{
  background-image:none !important;
  opacity:0 !important;
}

/* Sur fond clair, l'action principale redevient un plein marine */
section.bg-navy[class*="min-h-"] a[class*="bg-primary"],
section.bg-navy[class*="min-h-"] button[class*="bg-primary"]{
  background-color:var(--so-marine) !important;
  color:var(--so-papier) !important;
}
section.bg-navy[class*="min-h-"] a[class*="bg-primary"]:hover,
section.bg-navy[class*="min-h-"] button[class*="bg-primary"]:hover{
  background-color:#1E2F58 !important;
}

/* Action secondaire : contour discret, texte marine */
section.bg-navy[class*="min-h-"] a[class*="border-white"],
section.bg-navy[class*="min-h-"] a[class*="bg-white\/5"]{
  background-color:transparent !important;
  border-color:var(--so-trait) !important;
  color:var(--so-marine) !important;
}

/* ============================================================
   16. Repérage des points clés
   Les surtitres étaient tantôt bleus, tantôt orange, et aucun
   marqueur ne signalait un point important. On unifie : tout
   surtitre devient orange et porte un tiret, et chaque titre de
   section reçoit le filet orange de la charte.
   ============================================================ */

/* --- Surtitres : orange, précédés d'un tiret --- */
p[class*="uppercase"][class*="tracking-"],
span[class*="uppercase"][class*="tracking-"]{
  color:var(--so-orange-txt) !important;
  font-weight:600 !important;
  display:flex;
  align-items:center;
  gap:.6em;
}
p[class*="uppercase"][class*="tracking-"]::before,
span[class*="uppercase"][class*="tracking-"]::before{
  content:"";
  flex:0 0 auto;
  width:16px;
  height:2px;
  background:var(--so-orange);
}
.text-center p[class*="uppercase"][class*="tracking-"],
.text-center span[class*="uppercase"][class*="tracking-"]{ justify-content:center }

/* Sur fond marine, l'orange plein reste lisible (ratio 4,84) */
section.bg-navy:not([class*="min-h-"]):not(.border-t) p[class*="uppercase"][class*="tracking-"],
.bg-secondary p[class*="uppercase"][class*="tracking-"]{
  color:var(--so-orange) !important;
}

/* --- Filet orange sous les titres de section --- */
section h2::after{
  content:"";
  display:block;
  width:52px;
  height:3px;
  background:var(--so-orange);
  margin:14px 0 0;
}
.text-center h2::after,
h2[class*="text-center"]::after{ margin-left:auto; margin-right:auto }

/* Pas de filet sur les titres d'encart ou de carte */
.bg-white h2::after,
[class*="rounded-"] h2::after,
.absolute h2::after{ display:none }

/* ============================================================
   17. Blocs marine imbriqués dans une section claire
   Les règles de bascule en clair (10 et 15) s'appliquaient aussi
   au contenu des encarts et boutons marine posés à l'intérieur :
   texte encre sur fond marine, ratio 2,06. On rétablit le papier
   partout où le fond est un plein marine.
   Note : .bg-primary ne vise que la classe exacte ; les variantes
   .bg-primary/10 et suivantes restent des voiles clairs.
   ============================================================ */
section .bg-primary,
section .bg-primary p,
section .bg-primary span,
section .bg-primary li,
section .bg-primary h1,
section .bg-primary h2,
section .bg-primary h3,
section .bg-primary h4,
section .bg-primary strong,
section .bg-primary a,
section .bg-primary svg,
section a.bg-primary,
section button.bg-primary{
  color:var(--so-papier) !important;
}

/* Le surtitre d'un encart marine garde l'orange plein, lisible dessus */
section .bg-primary p[class*="uppercase"][class*="tracking-"]{
  color:var(--so-orange) !important;
}

/* Un bouton marine posé sur une carte claire reste marine sur papier */
.bg-light a.bg-primary,
.bg-light button.bg-primary,
.bg-white a.bg-primary,
.bg-white button.bg-primary{
  background-color:var(--so-marine) !important;
  color:var(--so-papier) !important;
}

/* ============================================================
   18. Boutons portant la classe bg-navy
   Ils héritaient d'une règle claire plus spécifique et
   affichaient de l'encre sur marine (ratio 2,06).
   L'attribut [class] rehausse la spécificité juste assez.
   ============================================================ */
a.bg-navy[class], button.bg-navy[class],
a.bg-secondary[class], button.bg-secondary[class]{
  background-color:var(--so-marine) !important;
  color:var(--so-papier) !important;
}
a.bg-navy[class] *, button.bg-navy[class] *,
a.bg-secondary[class] *, button.bg-secondary[class] *{
  color:var(--so-papier) !important;
}
a.bg-navy[class]:hover, button.bg-navy[class]:hover{
  background-color:#1E2F58 !important;
}

/* ============================================================
   19. Deux cas résiduels
   a) text-primary valait l'orange avant la charte : employé en
      emphase dans un titre posé sur marine, il devenait marine
      sur marine. Sur fond sombre, l'emphase passe au ciel.
   b) Les badges bg-primary situés hors d'un <section> n'étaient
      pas couverts par la règle 17.
   ============================================================ */
.bg-primary[class],
.bg-primary[class] *{ color:var(--so-papier) !important }

.bg-primary[class] p[class*="uppercase"][class*="tracking-"]{
  color:var(--so-orange) !important;
}

.bg-navy .text-primary,
.bg-secondary .text-primary,
.bg-navy h1 .text-primary,
.bg-navy h2 .text-primary,
.bg-navy [class*="text-primary"]{
  color:var(--so-ciel) !important;
}

/* ============================================================
   20. Suppression de l'ancienne modale de contact
   Les boutons du site montent une fenêtre modale React
   contenant le formulaire mailto d'origine. Elle est neutralisée
   ici : plus aucun affichage, même fugace, et le défilement de
   la page reste libre. La redirection vers /contact est assurée
   par le script de garde dans index.html.
   ============================================================ */
[role="dialog"]:has(form),
[role="dialog"]:has(input[type="email"]),
[role="alertdialog"]:has(form){
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
}

/* Le voile sombre qui accompagne la modale disparaît avec elle */
[data-state="open"][class*="fixed"][class*="inset-0"][class*="bg-black"],
[data-radix-popper-content-wrapper]:has(form){
  display:none !important;
}

/* React verrouille le défilement à l'ouverture : on le rend */
body[data-scroll-locked],
body[style*="overflow: hidden"]{
  overflow:auto !important;
  padding-right:0 !important;
  margin-right:0 !important;
}

/* ============================================================
   21. Pied de page et derniers boutons orange
   a) Les trois lignes légales sont centrées dans le HTML, mais
      la règle 9 (max-width:68ch) les enfermait dans une colonne
      étroite calée à gauche — d'où l'effet de tas. On libère la
      largeur et on répartit : mentions à gauche, copyright à
      droite, sur une même ligne de base.
   b) Il subsistait des boutons orange, contraires à la charte :
      sur fond clair ils passent en plein marine.
   ============================================================ */
footer p{ max-width:none }

footer .border-t{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:flex-start;
  column-gap:0;
  row-gap:4px;
}
footer .border-t > p{
  text-align:left !important;
  margin:0 !important;
}
footer .border-t > p:nth-of-type(2)::before{
  content:"·";
  margin:0 .55em;
  opacity:.45;
}
footer .border-t > p:nth-of-type(3){
  margin-left:auto !important;
}
@media(max-width:820px){
  footer .border-t{ display:block }
  footer .border-t > p{ margin-bottom:4px !important }
  footer .border-t > p:nth-of-type(2)::before{ content:none }
}

/* Les colonnes du pied : la première respire un peu plus */
@media(min-width:1024px){
  footer .grid[class*="lg:grid-cols-4"]{
    grid-template-columns:1.5fr 1fr 1fr 1fr !important;
  }
}

/* b) Plus aucun bouton orange sur fond clair */
a.bg-accent[class]:not(header a),
button.bg-accent[class]:not(header button){
  background-color:var(--so-marine) !important;
  color:var(--so-papier) !important;
}
a.bg-accent[class]:not(header a):hover,
button.bg-accent[class]:not(header button):hover{
  background-color:#1E2F58 !important;
}