/* =================================================================== ANAGAMTOPO — feuille de style (v2, trilingue FR/AR/EN) Marque : marine #002E77 · émeraude #006B4C (couleurs du logo réel) Typo LTR : Source Serif 4 (titres) · Inter (texte) · IBM Plex Mono (données) Typo RTL : Amiri (titres) · IBM Plex Sans Arabic (texte) Écrit avec des propriétés logiques (inline-start/end) : le passage en RTL se fait uniquement via [dir="rtl"] sur , sans feuille séparée. =================================================================== */ /* Les polices sont chargées depuis le de chaque page (preconnect + link), et non par @import : cela évite une cascade de requêtes qui bloque le rendu. */ :root{ --navy: #002E77; --navy-ink: #001A46; --emerald: #00694A; --emerald-deep: #004E38; --paper: #FAFAF7; --mist: #EDF1EF; --mist-dark: #E0E7E3; --slate: #51606B; --line: #D8DFDC; --max: 1180px; } [id]{scroll-margin-top:150px;} *{box-sizing:border-box;} html{scroll-behavior:smooth;} @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} } body{ margin:0; background:var(--paper); color:var(--navy-ink); font-family:'Inter',sans-serif; font-size:16px; line-height:1.65; -webkit-font-smoothing:antialiased; } h1,h2,h3,h4{ font-family:'Source Serif 4',serif; font-weight:600; line-height:1.18; margin:0 0 .4em; color:var(--navy-ink); } h1{font-size:clamp(2.2rem,4.6vw,3.4rem);font-weight:700;} h2{font-size:clamp(1.6rem,3vw,2.2rem);} h3{font-size:1.2rem;} p{margin:0 0 1em;color:var(--slate);} a{color:inherit;text-decoration:none;} img{max-width:100%;display:block;} ul{margin:0;padding-inline-start:18px;color:var(--slate);} li{margin-bottom:8px;} .mono{font-family:'IBM Plex Mono',monospace;letter-spacing:.03em;} .ltr{direction:ltr;unicode-bidi:isolate;display:inline-block;} /* Sur une cellule de tableau, le display:inline-block ci-dessus empêche la cellule de remplir sa colonne : la bordure basse s'arrête avec le texte. */ td.ltr,th.ltr{display:table-cell;} .container{max-width:var(--max);margin-inline:auto;padding-inline:32px;} @media(max-width:640px){.container{padding-inline:20px;}} /* --- typographie arabe --- */ html[dir="rtl"] body{font-family:'IBM Plex Sans Arabic',sans-serif;} html[dir="rtl"] h1,html[dir="rtl"] h2,html[dir="rtl"] h3,html[dir="rtl"] h4{font-family:'Amiri',serif;font-weight:700;} html[dir="rtl"] .eyebrow,html[dir="rtl"] .brand-text small,html[dir="rtl"] footer h4, html[dir="rtl"] .card .ref,html[dir="rtl"] .stat .lbl,html[dir="rtl"] table.clean th, html[dir="rtl"] .tag,html[dir="rtl"] .coord-bar,html[dir="rtl"] .footer-bottom{ font-family:'IBM Plex Sans Arabic',sans-serif;letter-spacing:0; } html[dir="rtl"] ul{padding-inline-start:18px;} html[dir="rtl"] .mono{font-family:'IBM Plex Sans Arabic',sans-serif;letter-spacing:0;} /* --- barre d'en-tête (téléphones + réseaux + langues) --- */ .coord-bar{ background:var(--navy-ink); color:#CBD8E8; font-family:'IBM Plex Mono',monospace; font-size:.74rem; letter-spacing:.03em; padding:8px 0; } .coord-bar .container{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;} .coord-phones{display:flex;align-items:center;gap:12px;flex-wrap:wrap;} .coord-phones a{display:inline-flex;align-items:center;gap:5px;color:#CBD8E8;opacity:.92;} .coord-phones a:hover{color:#fff;opacity:1;} .coord-phones svg{width:13px;height:13px;flex-shrink:0;opacity:.85;} .coord-right{display:flex;align-items:center;gap:14px;} .coord-social a{display:flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:4px;background:rgba(255,255,255,.08);color:#CBD8E8;} .coord-social a:hover{background:var(--emerald);color:#fff;} .coord-social svg{width:13px;height:13px;} .coord-lang{display:flex;gap:2px;} .coord-lang a{padding:4px 8px;border:1px solid rgba(255,255,255,.22);color:#CBD8E8;border-radius:2px;font-size:.68rem;} .coord-lang a.cur{background:var(--emerald);border-color:var(--emerald);color:#fff;} /* --- en-tête / nav --- */ header.site-header{ background:var(--paper); border-bottom:1px solid var(--line); position:sticky;top:0;z-index:50; } .nav-row{display:flex;align-items:center;justify-content:space-between;padding:10px 0;gap:20px;} html[dir="rtl"] .nav-row{flex-direction:row-reverse;} /* --- bloc marque : pictogramme + nom, lisible à toute taille --- */ .brand{display:flex;align-items:center;gap:8px;flex-shrink:0;} .brand-picto{height:64px;width:64px;flex-shrink:0;object-fit:contain;} /* align-items:center centre la baseline sous le nom */ .brand-text{display:flex;flex-direction:column;align-items:center;line-height:1.15;} .brand-text strong{ font-family:'Source Serif 4',serif;font-size:1.58rem;font-weight:700; color:var(--navy);letter-spacing:.015em; } .brand-text small{ font-family:'IBM Plex Mono',monospace;font-size:.48rem;letter-spacing:.11em; color:var(--emerald);text-transform:uppercase;margin-top:4px; white-space:nowrap;text-align:center; } html[dir="rtl"] .brand-text strong{font-family:'Source Serif 4',serif;} html[dir="rtl"] .brand-text small{font-family:'IBM Plex Sans Arabic',sans-serif;letter-spacing:0;font-size:.53rem;} @media(max-width:640px){ .brand-picto{height:50px;width:50px;} .brand-text strong{font-size:1.2rem;} .brand-text small{font-size:.41rem;letter-spacing:.08em;} } @media(max-width:380px){.brand-text small{display:none;}} nav.main-nav{display:flex;gap:2px;align-items:center;flex-wrap:wrap;} nav.main-nav a{font-size:.86rem;font-weight:500;padding:9px 13px;border-radius:2px;color:var(--navy-ink);position:relative;white-space:nowrap;} nav.main-nav a:hover{color:var(--emerald);} nav.main-nav a.active{color:var(--emerald);} nav.main-nav a.active::after{content:'';position:absolute;inset-inline:13px;bottom:2px;height:2px;background:var(--emerald);} .nav-cta{background:var(--navy);color:var(--paper)!important;padding:10px 18px!important;border-radius:2px;font-weight:600!important;} .nav-cta:hover{background:var(--emerald)!important;color:var(--paper)!important;} .nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:6px;} .nav-toggle span{display:block;width:22px;height:2px;background:var(--navy-ink);margin:5px 0;} /* --- menu déroulant "Nos Services" --- */ .nav-dropdown{position:relative;} .dropdown-menu{ position:absolute;top:100%;inset-inline-start:0;min-width:280px; background:var(--paper);border:1px solid var(--line);border-radius:2px; box-shadow:0 14px 30px rgba(0,20,60,.14); opacity:0;visibility:hidden;transform:translateY(6px); transition:opacity .16s ease, transform .16s ease, visibility .16s; z-index:60; } .nav-dropdown:hover .dropdown-menu, .nav-dropdown:focus-within .dropdown-menu{opacity:1;visibility:visible;transform:translateY(0);} .dropdown-menu a{display:block;padding:13px 18px;border-bottom:1px solid var(--mist);font-size:.86rem;white-space:normal;} .dropdown-menu a:last-child{border-bottom:none;} .dropdown-menu a::after{display:none;} @media(max-width:960px){ nav.main-nav{ position:absolute;top:100%;inset-inline:0;background:var(--paper); flex-direction:column;align-items:stretch;border-bottom:1px solid var(--line); padding:8px 0;display:none; } nav.main-nav.open{display:flex;} nav.main-nav a{padding:14px 32px;border-bottom:1px solid var(--mist);} .nav-toggle{display:block;} .nav-cta{margin:10px 32px;text-align:center;} .nav-dropdown .dropdown-toggle{border-bottom:none;padding-bottom:0;} .dropdown-menu{ position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:none; padding-inline-start:16px; } .dropdown-menu a{padding:10px 32px;} } /* --- eyebrow --- */ .eyebrow{ font-family:'IBM Plex Mono',monospace;font-size:.72rem;letter-spacing:.11em; color:var(--emerald);text-transform:uppercase; display:flex;align-items:center;gap:10px;margin-bottom:14px; } .eyebrow::before{content:'';width:22px;height:1px;background:var(--emerald);} /* Un titre de section peut porter la classe eyebrow : la hiérarchie de titres reste correcte pour les moteurs et les lecteurs d'écran, l'apparence ne change pas. */ h2.eyebrow,h3.eyebrow{font-weight:500;line-height:1.4;} /* --- hero --- */ .hero{padding:80px 0 64px;position:relative;overflow:hidden;} .hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:52px;align-items:center;} @media(max-width:900px){.hero-grid{grid-template-columns:1fr;}} .hero h1{max-width:17ch;} .hero .lede{font-size:1.1rem;max-width:48ch;} .hero-actions{display:flex;gap:14px;margin-top:26px;flex-wrap:wrap;} .btn{display:inline-block;padding:13px 24px;border-radius:2px;font-weight:600;font-size:.9rem;border:1px solid var(--navy);transition:all .15s ease;} .btn-primary{background:var(--navy);color:var(--paper);} .btn-primary:hover{background:var(--emerald);border-color:var(--emerald);} .btn-ghost{background:transparent;color:var(--navy-ink);} .btn-ghost:hover{border-color:var(--emerald);color:var(--emerald);} /* --- cadre photo héros (visuel fourni par le client) --- */ .hero-photo-frame{position:relative;border-radius:4px;overflow:hidden;border:1px solid var(--line);background:var(--mist);aspect-ratio:6/5;} .hero-photo{width:100%;height:100%;object-fit:cover;display:block;} .hero-photo-placeholder{ display:none;position:absolute;inset:0;flex-direction:column;align-items:center;justify-content:center; gap:12px;text-align:center;padding:24px;color:var(--slate); } .hero-photo-placeholder svg{width:40px;height:40px;opacity:.4;} .hero-photo-placeholder .l1{font-weight:600;color:var(--navy-ink);font-size:.95rem;} .hero-photo-placeholder .l2{font-family:'IBM Plex Mono',monospace;font-size:.72rem;opacity:.8;} html[dir="rtl"] .hero-photo-placeholder .l2{font-family:'IBM Plex Sans Arabic',sans-serif;} /* --- bandeau d'identifiants (signature textuelle) --- */ .credentials{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;} .credential{ font-family:'IBM Plex Mono',monospace;font-size:.72rem;color:var(--navy); border:1px solid var(--line);border-radius:20px;padding:6px 13px;background:var(--mist); } html[dir="rtl"] .credential{font-family:'IBM Plex Sans Arabic',sans-serif;letter-spacing:0;} /* --- sections --- */ section{padding:72px 0;} .section-mist{background:var(--mist);} .section-navy{background:var(--navy-ink);color:var(--paper);} .section-navy h2,.section-navy h3{color:var(--paper);} .section-navy p{color:rgba(250,250,247,.78);} .section-navy .eyebrow{color:#5FD9A8;} .section-navy .eyebrow::before{background:#5FD9A8;} .section-head{max-width:62ch;margin-bottom:42px;} hr.rule{border:none;border-top:1px solid var(--line);margin:0;} .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;} .grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;} .grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;} @media(max-width:880px){.grid-3{grid-template-columns:1fr;}.grid-2{grid-template-columns:1fr;}.grid-4{grid-template-columns:repeat(2,1fr);}} @media(max-width:560px){.grid-4{grid-template-columns:1fr;}} .card{background:var(--paper);border:1px solid var(--line);padding:28px 26px;border-radius:2px;transition:border-color .15s ease;} .card:hover{border-color:var(--emerald);} .card .ref{font-family:'IBM Plex Mono',monospace;font-size:.7rem;color:var(--emerald);letter-spacing:.08em;margin-bottom:10px;display:block;} .stat{border-inline-start:2px solid var(--emerald);padding-inline-start:18px;} .stat .num{font-family:'Source Serif 4',serif;font-size:2.3rem;font-weight:700;line-height:1;display:block;margin-bottom:6px;} html[dir="rtl"] .stat .num{font-family:'Amiri',serif;} .stat .lbl{font-family:'IBM Plex Mono',monospace;font-size:.7rem;letter-spacing:.05em;color:var(--slate);text-transform:uppercase;} .person{display:flex;gap:20px;padding:24px 0;border-bottom:1px solid var(--line);} .person:last-child{border-bottom:none;} .person-mark{width:52px;height:52px;border-radius:50%;background:var(--mist-dark);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-family:'Source Serif 4',serif;font-weight:700;color:var(--navy);} .person h4{margin-bottom:2px;} .person .role{font-size:.84rem;color:var(--emerald);font-weight:600;margin-bottom:6px;} .person .cred{font-family:'IBM Plex Mono',monospace;font-size:.72rem;color:var(--slate);} .person .bio{font-size:.92rem;margin-top:8px;} table.clean{width:100%;border-collapse:collapse;} table.clean th,table.clean td{text-align:start;padding:13px 10px;border-bottom:1px solid var(--line);font-size:.92rem;} table.clean th{font-family:'IBM Plex Mono',monospace;font-size:.68rem;letter-spacing:.05em;text-transform:uppercase;color:var(--slate);font-weight:500;} .cta-band{background:var(--navy-ink);color:var(--paper);padding:52px 0;} .cta-row{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;} .cta-row h2{color:var(--paper);margin:0;} /* La marge basse ménage la place du bouton WhatsApp flottant. */ footer.site-footer{background:var(--navy-ink);color:rgba(250,250,247,.75);padding:52px 0 26px;} .footer-bottom{padding-inline-end:76px;} @media(max-width:640px){.footer-bottom{padding-inline-end:0;padding-bottom:56px;}} /* La première colonne est élargie pour que le bloc marque tienne sur une ligne. */ .footer-grid{display:grid;grid-template-columns:1.55fr .75fr .95fr 1.15fr;gap:30px;margin-bottom:38px;} @media(max-width:880px){.footer-grid{grid-template-columns:1fr 1fr;}} @media(max-width:560px){.footer-grid{grid-template-columns:1fr;}} .footer-brand{display:flex;align-items:center;gap:8px;margin-bottom:18px;} .footer-picto{height:56px;width:56px;flex-shrink:0;object-fit:contain;} .footer-brand-text{display:flex;flex-direction:column;align-items:center;line-height:1.15;} .footer-brand-text strong{font-family:'Source Serif 4',serif;font-size:1.36rem;font-weight:700;color:var(--paper);letter-spacing:.015em;} /* nowrap : sans cela la baseline se coupe en deux lignes dans cette colonne étroite, ce qui casse le centrage sous le nom. */ .footer-brand-text small{ font-family:'IBM Plex Mono',monospace;font-size:.55rem;letter-spacing:.055em; color:#5FD9A8;text-transform:uppercase;margin-top:5px; white-space:nowrap;text-align:center; } /* La baseline du pied de page s'aligne sous le nom, pas sous le pictogramme : le retrait vaut la largeur du pictogramme plus l'écart qui le sépare du texte. */ .footer-tagline{padding-inline-start:64px;} @media(max-width:560px){.footer-tagline{padding-inline-start:0;}} /* Bloc adresse du pied de page */ .footer-address{font-style:normal;font-size:.88rem;line-height:1.7;color:rgba(250,250,247,.75);} .footer-address a{display:inline;padding:0;color:rgba(250,250,247,.75);} .footer-address a:hover{color:#5FD9A8;} .footer-address .line{display:block;padding:2px 0;} .footer-address .lbl{color:rgba(250,250,247,.5);font-family:'IBM Plex Mono',monospace;font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;display:block;margin-top:12px;} html[dir="rtl"] .footer-address .lbl{font-family:'IBM Plex Sans Arabic',sans-serif;letter-spacing:0;} html[dir="rtl"] .footer-brand-text small{font-family:'IBM Plex Sans Arabic',sans-serif;letter-spacing:0;font-size:.47rem;} footer.site-footer h4{color:var(--paper);font-family:'IBM Plex Mono',monospace;font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;font-weight:500;margin-bottom:14px;} footer.site-footer a{display:block;font-size:.88rem;padding:5px 0;color:rgba(250,250,247,.75);} footer.site-footer a:hover{color:#5FD9A8;} .footer-bottom{border-top:1px solid rgba(250,250,247,.15);padding-top:20px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:.76rem;font-family:'IBM Plex Mono',monospace;color:rgba(250,250,247,.5);} .center{text-align:center;} .tag-list{display:flex;flex-wrap:wrap;gap:8px;} .tag{font-family:'IBM Plex Mono',monospace;font-size:.72rem;padding:5px 11px;border:1px solid var(--line);border-radius:20px;color:var(--slate);} html[dir="rtl"] .tag{font-family:'IBM Plex Sans Arabic',sans-serif;letter-spacing:0;} .reveal{opacity:0;transform:translateY(14px);transition:opacity .6s ease, transform .6s ease;} .reveal.in{opacity:1;transform:translateY(0);} @media (prefers-reduced-motion: reduce){.reveal{opacity:1;transform:none;transition:none;}} /* --- marqueur des informations restant à fournir --- Volontairement voyant : ces mentions ne doivent pas partir en production. Rechercher "todo" dans le dossier site/ pour toutes les retrouver. */ .todo{ background:#FFF3CD;color:#7A5B00;border:1px dashed #C9A227; padding:1px 7px;border-radius:3px;font-size:.82em; font-family:'IBM Plex Mono',monospace;white-space:normal; } .todo::before{content:'\26A0\FE0E ';} /* --- boutons de contact direct --- */ .contact-actions{display:flex;flex-direction:column;gap:12px;margin-top:4px;} .contact-btn{ display:flex;align-items:center;gap:12px; padding:15px 18px;border:1px solid var(--line);border-radius:3px; background:var(--paper);color:var(--navy-ink); transition:border-color .15s ease,background .15s ease; } .contact-btn:hover{border-color:var(--emerald);background:var(--mist);} .contact-btn svg{width:21px;height:21px;flex-shrink:0;color:var(--emerald);} .contact-btn .cb-label{display:flex;flex-direction:column;line-height:1.3;} .contact-btn .cb-label small{ font-family:'IBM Plex Mono',monospace;font-size:.66rem;letter-spacing:.07em; text-transform:uppercase;color:var(--slate);margin-bottom:2px; } html[dir="rtl"] .contact-btn .cb-label small{font-family:'IBM Plex Sans Arabic',sans-serif;letter-spacing:0;} .contact-btn .cb-label strong{font-weight:600;font-size:1rem;} .contact-btn.is-whatsapp:hover{border-color:#25D366;} .contact-btn.is-whatsapp svg{color:#25D366;} /* --- page de confirmation --- */ .confirm-mark{ width:56px;height:56px;border-radius:50%;background:var(--emerald);color:#fff; display:flex;align-items:center;justify-content:center;margin-bottom:22px; } .confirm-mark svg{width:28px;height:28px;} /* --- bouton WhatsApp flottant --- */ .wa-float{ position:fixed;inset-block-end:22px;inset-inline-end:22px;z-index:80; width:54px;height:54px;border-radius:50%;background:#25D366;color:#fff; display:flex;align-items:center;justify-content:center; box-shadow:0 6px 20px rgba(0,20,60,.28);transition:transform .15s ease; } .wa-float:hover{transform:scale(1.07);} .wa-float svg{width:29px;height:29px;} @media(max-width:640px){.wa-float{width:48px;height:48px;inset-block-end:16px;inset-inline-end:16px;}.wa-float svg{width:26px;height:26px;}} @media print{.wa-float{display:none;}} /* --- formulaire contact --- */ .field{margin-bottom:16px;} /* Piège à robots : masqué aux visiteurs, rempli par les automates */ .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;} .field label{font-family:'IBM Plex Mono',monospace;font-size:.7rem;letter-spacing:.05em;color:var(--slate);text-transform:uppercase;display:block;margin-bottom:6px;} html[dir="rtl"] .field label{font-family:'IBM Plex Sans Arabic',sans-serif;letter-spacing:0;} .field input,.field select,.field textarea{width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:2px;background:var(--paper);font-family:'Inter',sans-serif;font-size:.95rem;} html[dir="rtl"] .field input,html[dir="rtl"] .field select,html[dir="rtl"] .field textarea{font-family:'IBM Plex Sans Arabic',sans-serif;} .field textarea{resize:vertical;}