/*
Theme Name: CIBAMATECH
Theme URI: https://cibamatech.com
Author: CIBAMATECH
Description: Thème enfant de Hello Elementor pour CIBAMATECH. Tout le style de la maquette validée vit ici ; Elementor (Pro) ne porte que le contenu, l'en-tête et le pied de page.
Template: hello-elementor
Version: 1.5.5
Requires at least: 6.6
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: cibamatech-el
*/

/* FICHIER GÉNÉRÉ par scripts/elementor_css.py depuis site/css/style.css
   et src/elementor-ajouts.css : modifier ces sources, puis relancer. */

:root {
  --m-fleche: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 17 17 7M9 7h8v8' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --i-fleche-orange: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 17 17 7M9 7h8v8' fill='none' stroke='%23ee9137' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --m-code: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m8 7-5 5 5 5M16 7l5 5-5 5M13.5 4l-3 16' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --m-web: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='2.5' y='4' width='19' height='15' rx='2.5' fill='none' stroke='%23000' stroke-width='1.7'/%3E%3Cpath d='M2.5 8.5h19M6 6.3h.01M8.5 6.3h.01M6 12h7M6 15h4' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E");
  --m-mobile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='6' y='2.5' width='12' height='19' rx='3' fill='none' stroke='%23000' stroke-width='1.7'/%3E%3Cpath d='M10.5 18.5h3' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E");
  --m-design: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3a9 9 0 1 0 0 18c1.2 0 1.8-.9 1.8-1.8 0-1.3-1-1.6-1-2.7 0-1 .8-1.7 1.8-1.7H17a4 4 0 0 0 4-4C21 6.6 17 3 12 3Z' fill='none' stroke='%23000' stroke-width='1.7' stroke-linejoin='round'/%3E%3Ccircle cx='7.5' cy='11' r='1.2' fill='%23000'/%3E%3Ccircle cx='10' cy='7' r='1.2' fill='%23000'/%3E%3Ccircle cx='14.5' cy='7' r='1.2' fill='%23000'/%3E%3C/svg%3E");
  --m-marketing: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 20h18M6 16v-4M10.5 16V9M15 16v-6M19.5 16V5' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E");
  --m-cube: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.8 20.5 7.5v9L12 21.2l-8.5-4.7v-9L12 2.8Z M3.5 7.5 12 12l8.5-4.5M12 12v9.2' fill='none' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E");
  --m-cible: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='8.5' fill='none' stroke='%23000' stroke-width='1.7'/%3E%3Ccircle cx='12' cy='12' r='4.5' fill='none' stroke='%23000' stroke-width='1.7'/%3E%3Ccircle cx='12' cy='12' r='1.2' fill='%23000'/%3E%3C/svg%3E");
  --m-bouclier: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3 4.5 6v5.5c0 4.6 3.2 8.2 7.5 9.5 4.3-1.3 7.5-4.9 7.5-9.5V6L12 3Z M8.8 12l2.2 2.2 4.4-4.4' fill='none' stroke='%23000' stroke-width='1.7' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E");
  --m-relais: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12a8 8 0 0 1 13.7-5.6L20 8.7M20 4v4.7h-4.7M20 12a8 8 0 0 1-13.7 5.6L4 15.3M4 20v-4.7h4.7' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --m-lieu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-7-6.1-7-11.5a7 7 0 0 1 14 0C19 14.9 12 21 12 21Z' fill='none' stroke='%23000' stroke-width='1.7'/%3E%3Ccircle cx='12' cy='9.5' r='2.5' fill='none' stroke='%23000' stroke-width='1.7'/%3E%3C/svg%3E");
  --m-horloge: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='8.5' fill='none' stroke='%23000' stroke-width='1.7'/%3E%3Cpath d='M12 7.5V12l3 2' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --m-tel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 3.5h3.5l1.8 4.5-2.3 1.4a11 11 0 0 0 6.6 6.6l1.4-2.3 4.5 1.8V19a1.5 1.5 0 0 1-1.5 1.5A16.5 16.5 0 0 1 3.5 5 1.5 1.5 0 0 1 5 3.5Z' fill='none' stroke='%23000' stroke-width='1.7' stroke-linejoin='round'/%3E%3C/svg%3E");
  --m-mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='5' width='18' height='14' rx='2.5' fill='none' stroke='%23000' stroke-width='1.7'/%3E%3Cpath d='m4 7 8 6 8-6' fill='none' stroke='%23000' stroke-width='1.7' stroke-linejoin='round'/%3E%3C/svg%3E");
  --m-ia: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 3.5l1.6 4.4L16 9.5l-4.4 1.6L10 15.5l-1.6-4.4L4 9.5l4.4-1.6L10 3.5Z' fill='none' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M17.5 14v6.5M14.5 20.5h6M17.5 14l3-2.5M17.5 14l-3-2.5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='20.5' cy='11.5' r='1' fill='%23000'/%3E%3Ccircle cx='14.5' cy='11.5' r='1' fill='%23000'/%3E%3C/svg%3E");
  --m-marque: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='5' y='4.6' width='11' height='2.4' fill='%23000'/%3E%3Crect x='5' y='10.8' width='6.2' height='2.6' rx='1.3' fill='%23000'/%3E%3Cpath d='M13.6 10.4l1.9 1.7-1.9 1.7M16.6 14.2h2.4' fill='none' stroke='%23000' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3Crect x='5' y='17' width='11' height='2.4' fill='%23000'/%3E%3C/svg%3E");
  --i-marque-coeur: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='5' y='4.6' width='11' height='2.4' fill='%231a385c'/%3E%3Crect x='5' y='10.8' width='6.2' height='2.6' rx='1.3' fill='%23ffffff'/%3E%3Cpath d='M13.6 10.4l1.9 1.7-1.9 1.7M16.6 14.2h2.4' fill='none' stroke='%231a385c' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3Crect x='5' y='17' width='11' height='2.4' fill='%231a385c'/%3E%3C/svg%3E");
  --m-whatsapp: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z' fill='%23000'/%3E%3C/svg%3E");
  --m-facebook: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.101 23.691v-7.98H6.627v-3.667h2.474v-1.58c0-4.085 1.848-5.978 5.858-5.978.401 0 .955.042 1.468.103a8.68 8.68 0 0 1 1.141.195v3.325a8.623 8.623 0 0 0-.653-.036 26.805 26.805 0 0 0-.733-.009c-.707 0-1.259.096-1.675.309a1.686 1.686 0 0 0-.679.622c-.258.42-.374.995-.374 1.752v1.297h3.919l-.386 2.103-.287 1.564h-3.246v8.245C19.396 23.238 24 18.179 24 12.044c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.628 3.874 10.35 9.101 11.647Z' fill='%23000'/%3E%3C/svg%3E");
  --m-instagram: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.0301.084c-1.2768.0602-2.1487.264-2.911.5634-.7888.3075-1.4575.72-2.1228 1.3877-.6652.6677-1.075 1.3368-1.3802 2.127-.2954.7638-.4956 1.6365-.552 2.914-.0564 1.2775-.0689 1.6882-.0626 4.947.0062 3.2586.0206 3.6671.0825 4.9473.061 1.2765.264 2.1482.5635 2.9107.308.7889.72 1.4573 1.388 2.1228.6679.6655 1.3365 1.0743 2.1285 1.38.7632.295 1.6361.4961 2.9134.552 1.2773.056 1.6884.069 4.9462.0627 3.2578-.0062 3.668-.0207 4.9478-.0814 1.28-.0607 2.147-.2652 2.9098-.5633.7889-.3086 1.4578-.72 2.1228-1.3881.665-.6682 1.0745-1.3378 1.3795-2.1284.2957-.7632.4966-1.636.552-2.9124.056-1.2809.0692-1.6898.063-4.948-.0063-3.2583-.021-3.6668-.0817-4.9465-.0607-1.2797-.264-2.1487-.5633-2.9117-.3084-.7889-.72-1.4568-1.3876-2.1228C21.2982 1.33 20.628.9208 19.8378.6165 19.074.321 18.2017.1197 16.9244.0645 15.6471.0093 15.236-.005 11.977.0014 8.718.0076 8.31.0215 7.0301.0839m.1402 21.6932c-1.17-.0509-1.8053-.2453-2.2287-.408-.5606-.216-.96-.4771-1.3819-.895-.422-.4178-.6811-.8186-.9-1.378-.1644-.4234-.3624-1.058-.4171-2.228-.0595-1.2645-.072-1.6442-.079-4.848-.007-3.2037.0053-3.583.0607-4.848.05-1.169.2456-1.805.408-2.2282.216-.5613.4762-.96.895-1.3816.4188-.4217.8184-.6814 1.3783-.9003.423-.1651 1.0575-.3614 2.227-.4171 1.2655-.06 1.6447-.072 4.848-.079 3.2033-.007 3.5835.005 4.8495.0608 1.169.0508 1.8053.2445 2.228.408.5608.216.96.4754 1.3816.895.4217.4194.6816.8176.9005 1.3787.1653.4217.3617 1.056.4169 2.2263.0602 1.2655.0739 1.645.0796 4.848.0058 3.203-.0055 3.5834-.061 4.848-.051 1.17-.245 1.8055-.408 2.2294-.216.5604-.4763.96-.8954 1.3814-.419.4215-.8181.6811-1.3783.9-.4224.1649-1.0577.3617-2.2262.4174-1.2656.0595-1.6448.072-4.8493.079-3.2045.007-3.5825-.006-4.848-.0608M16.953 5.5864A1.44 1.44 0 1 0 18.39 4.144a1.44 1.44 0 0 0-1.437 1.4424M5.8385 12.012c.0067 3.4032 2.7706 6.1557 6.173 6.1493 3.4026-.0065 6.157-2.7701 6.1506-6.1733-.0065-3.4032-2.771-6.1565-6.174-6.1498-3.403.0067-6.156 2.771-6.1496 6.1738M8 12.0077a4 4 0 1 1 4.008 3.9921A3.9996 3.9996 0 0 1 8 12.0077' fill='%23000'/%3E%3C/svg%3E");
  --m-linkedin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z' fill='%23000'/%3E%3C/svg%3E");
  --m-tiktok: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z' fill='%23000'/%3E%3C/svg%3E");
  --m-youtube: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z' fill='%23000'/%3E%3C/svg%3E");
}
.ic-fleche { --ic: var(--m-fleche); }
.ic-code { --ic: var(--m-code); }
.ic-web { --ic: var(--m-web); }
.ic-mobile { --ic: var(--m-mobile); }
.ic-design { --ic: var(--m-design); }
.ic-marketing { --ic: var(--m-marketing); }
.ic-cube { --ic: var(--m-cube); }
.ic-cible { --ic: var(--m-cible); }
.ic-bouclier { --ic: var(--m-bouclier); }
.ic-relais { --ic: var(--m-relais); }
.ic-lieu { --ic: var(--m-lieu); }
.ic-horloge { --ic: var(--m-horloge); }
.ic-tel { --ic: var(--m-tel); }
.ic-mail { --ic: var(--m-mail); }
.ic-ia { --ic: var(--m-ia); }
.ic-marque { --ic: var(--m-marque); }
.ic-whatsapp { --ic: var(--m-whatsapp); }
.ic-facebook { --ic: var(--m-facebook); }
.ic-instagram { --ic: var(--m-instagram); }
.ic-linkedin { --ic: var(--m-linkedin); }
.ic-tiktok { --ic: var(--m-tiktok); }
.ic-youtube { --ic: var(--m-youtube); }

/* ------------------------------------------------------------------
   NEUTRALISATION D'ELEMENTOR (filet, spécificité 0,1,1)
   L'essentiel se règle dans le kit (étape E3). Les conteneurs sont
   remis en flux normal : la maquette est en blocs, pas en flex colonne.
   ------------------------------------------------------------------ */
body .e-con { --container-default-padding-top: 0px; --container-default-padding-right: 0px;
  --container-default-padding-bottom: 0px; --container-default-padding-left: 0px;
  display: block; width: auto; }
/* Elementor met ses conteneurs flex en colonne avec retour à la ligne : on rend les
   valeurs par défaut du CSS, la maquette pose elle-même direction et retour. */
body .e-con.e-flex { --flex-direction: row; --flex-wrap: nowrap; }
/* Elementor réserve ::before des conteneurs à son calque de fond (absolu, pleine taille) :
   on le rend neutre, la maquette y dessine ses propres décors. */
body .e-con::before { position: static; top: auto; left: auto; width: auto; height: auto;
  border: 0 none; border-radius: 0; opacity: 1; mix-blend-mode: normal; transition: none; }
body .elementor-element { --widgets-spacing: 0px 0px; --widgets-spacing-row: 0px; --widgets-spacing-column: 0px; }
body .elementor-widget:not(:last-child) { --kit-widget-spacing: 0px; }
/* <span> isolé de la maquette (surtitre, catégorie, numéro…) : il est rendu dans le <p>
   d'un texte ; côté visiteur, l'enveloppe et le <p> s'effacent pour que le <span> se place
   exactement comme dans la maquette (en ligne dans un bloc, ou élément d'une grille/flex).
   Dans l'éditeur, l'enveloppe garde sa boîte pour rester sélectionnable. */
body:not(.elementor-editor-active) .elementor-widget.en-ligne,
body:not(.elementor-editor-active) .elementor-widget.en-ligne > p { display: contents; }
body .elementor-widget.en-ligne { position: static; }
/* Elementor plafonne les widgets à 100 % en (0,4,0) : il lira la largeur de la maquette. */
body .elementor.elementor .e-con > .elementor-widget, body .e-con.e-con > .e-con-inner > .elementor-widget { max-width: var(--max-w, 100%); }
/* letter-spacing en em : recalculé sur le titre lui-même, pas hérité de l'enveloppe en px */
body .elementor-heading-title { font: inherit; color: inherit; letter-spacing: -0.025em; line-height: inherit; }
body .elementor-heading-title em { font-style: normal; }
body .elementor-widget-text-editor p:last-child { margin-bottom: 0; }
body .elementor-widget-image img { display: block; }
body .elementor-button { line-height: inherit; }
body .elementor-widget-heading { font-family: var(--f-titre); font-weight: 400; color: var(--encre); letter-spacing: -0.025em; line-height: 1.08; }
body .sombre .elementor-widget-heading { color: var(--blanc); }

/* ------------------------------------------------------------------
   CSS DE LA MAQUETTE, RÉÉCRIT POUR ELEMENTOR
   ------------------------------------------------------------------ */
:root {
  --marine: #1a385c;        
  --nuit: var(--marine);
  --nuit-2: #183554;        
  --orange: #ee9137;        
  --orange-fonce: #b9631a;  
  --encre: var(--marine);   
  --texte: #4c5f78;
  --texte-doux: #7b879a;
  --clair: #f4f6f9;
  --blanc: #ffffff;
  --ligne: #e2e6ec;
  --ligne-nuit: rgba(255, 255, 255, 0.14);
  --carte-nuit: rgba(255, 255, 255, 0.06);
  --ombre: 16, 36, 60;      
  --ligne-marine: rgba(255, 255, 255, 0.12);

  --f-titre: "Bricolage Grotesque", "Manrope", Arial, sans-serif;
  --f-texte: "Manrope", Arial, sans-serif;
  --f-code: "JetBrains Mono", ui-monospace, Menlo, monospace;

  --largeur: 1240px;
  --gouttiere: clamp(20px, 4vw, 48px);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--blanc);
  color: var(--texte);
  font-family: var(--f-texte);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--f-titre);
  font-weight: 400;
  color: var(--encre);
  letter-spacing: -0.025em;
  line-height: 1.08;
  hyphens: none;
  text-wrap: balance;
}
p { margin: 0; }
.e-con.enveloppe { width: min(var(--largeur), 100% - 2 * var(--gouttiere)); margin-inline: auto; }
.surtitre {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--f-code); font-size: 12px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--orange-fonce);
}
.sombre .surtitre { color: var(--orange); }
.surtitre::before { content: ""; width: 7px; height: 7px; border-radius: 2px; background: var(--orange); }
.e-con .elementor-widget.titre-section { font-size: clamp(36px, 4.1vw, 56px); }
.titre-section em { display: block; color: var(--orange-fonce); }
.sombre .elementor-widget.titre-section, .sombre h2, .sombre h3 { color: var(--blanc); }
.sombre .titre-section em { color: var(--orange); }
.btn .elementor-button {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 16px 28px; border-radius: 999px;
  font-family: var(--f-texte); font-size: 15px; font-weight: 600;
  background: var(--orange); color: var(--encre);
  box-shadow: 0 12px 32px -10px rgba(238, 145, 55, 0.65);
  transition: transform .25s, box-shadow .25s, background .25s;
}
.btn:hover .elementor-button { transform: translateY(-2px); box-shadow: 0 18px 40px -12px rgba(238, 145, 55, 0.8); }
.btn-ligne .elementor-button {
  background: transparent; color: var(--blanc);
  border: 1px solid rgba(255,255,255,.22); box-shadow: none;
}
.btn-ligne:hover .elementor-button { border-color: var(--orange); box-shadow: none; }
.lien-fleche .elementor-button, .lien-fleche {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 600; color: var(--encre);
}
.e-con.entete {
  position: fixed; inset: 0 0 auto; z-index: 50;
  background: rgba(26, 56, 92, 0.94);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--ligne-marine);
  box-shadow: 0 10px 30px -18px rgba(var(--ombre),.6);
}
.entete .e-con.enveloppe { display: flex; align-items: center; justify-content: space-between; height: 76px; }
.e-con.heros {
  position: relative; overflow: hidden;
  padding: 170px 0 110px;
  background:
    radial-gradient(900px 520px at 0% 0%, rgba(238,145,55,.30), transparent 62%),
    radial-gradient(800px 600px at 85% 45%, rgba(74,122,180,.38), transparent 70%),
    var(--nuit);
  color: rgba(255,255,255,.76);
}
.e-con.heros::before { 
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
}
.heros .e-con.enveloppe { position: relative; display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: center; }
.heros h1 { margin: 26px 0 28px; font-size: clamp(42px, 4.4vw, 64px); color: var(--blanc); }
.heros h1 em { position: relative; display: inline-block; white-space: nowrap; color: var(--orange); }
.heros h1 em::after {
  content: ""; position: absolute; left: 2px; right: 6px; bottom: -8px; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, var(--orange), rgba(238,145,55,0));
}
.heros .elementor-widget.chapo { max-width: 540px; --max-w: 540px; font-size: 18px; line-height: 1.75; }
.heros .e-con.actions { display: flex; flex-wrap: wrap; gap: 14px; margin: 40px 0 48px; }
.heros .e-con.chiffres { display: flex; gap: 0; }
.heros .chiffres div { padding: 0 34px; border-left: 1px solid rgba(255,255,255,.18); }
.heros .chiffres div:first-child { padding-left: 0; border-left: 0; }
.heros .chiffres strong { display: block; font-family: var(--f-titre); font-size: 20px; font-weight: 500; color: var(--blanc); }
.heros .chiffres span { font-size: 13px; color: rgba(255,255,255,.58); }
.e-con.iso { position: relative; height: 560px; perspective: 1800px; }
.e-con.iso-plan {
  position: absolute; left: 50%; top: 50%;
  width: 520px; height: 520px; margin: -260px 0 0 -260px;
  transform-style: preserve-3d;
  transform: rotateX(56deg) rotateZ(-42deg);
}
.e-con .elementor-widget.tuile {
  position: absolute; width: 132px; height: 132px; border-radius: 22px;
  display: grid; place-items: center; align-content: center; gap: 10px;
  background: linear-gradient(150deg, #2c5489 0%, #20446f 70%);
  border: 1px solid rgba(170, 200, 240, .22);
  box-shadow:
    1px 1px 0 #17324f, 2px 2px 0 #17324f, 3px 3px 0 #162f4b, 4px 4px 0 #162f4b,
    5px 5px 0 #152d48, 6px 6px 0 #152d48, 7px 7px 0 #142b45, 8px 8px 0 #142b45,
    9px 9px 0 #132942, 10px 10px 0 #132942,
    24px 30px 40px rgba(var(--ombre),.55);
  color: var(--blanc);
  animation: flotte 6s ease-in-out infinite;
}
.tuile em { font-style: normal; font-family: var(--f-code); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.8); }
.e-con .elementor-widget.tuile.coeur {
  width: 168px; height: 168px; border-radius: 28px;
  background: linear-gradient(150deg, #f3a457 0%, var(--orange) 45%, #c96f1d 100%);
  border-color: rgba(255,255,255,.45);
  box-shadow:
    1px 1px 0 #b5621a, 2px 2px 0 #b5621a, 3px 3px 0 #a95a16, 4px 4px 0 #a95a16,
    5px 5px 0 #9d5313, 6px 6px 0 #9d5313, 7px 7px 0 #914c10, 8px 8px 0 #914c10,
    9px 9px 0 #85450d, 10px 10px 0 #85450d, 11px 11px 0 #7a3f0b, 12px 12px 0 #7a3f0b,
    0 0 90px rgba(238,145,55,.55), 30px 36px 50px rgba(var(--ombre),.5);
  color: var(--encre);
}
.tuile.coeur em { color: var(--encre); font-weight: 500; }
.e-con .elementor-widget.t-coeur { left: 176px; top: 176px; animation-delay: -1s; }
.e-con .elementor-widget.t-logiciel { left: 30px;  top: 20px;  animation-delay: -2s; }
.e-con .elementor-widget.t-web { left: 360px; top: 20px;  animation-delay: -3s; }
.e-con .elementor-widget.t-mobile { left: 360px; top: 350px; animation-delay: -4s; }
.e-con .elementor-widget.t-uiux { left: 30px;  top: 350px; animation-delay: -5s; }
.e-con .elementor-widget.t-marketing { left: 380px; top: 192px; width: 112px; height: 112px; animation-delay: -2.5s; }
.e-con .elementor-widget.t-ia { left: 30px; top: 204px; width: 112px; height: 112px; animation-delay: -3.5s; }
.e-con.badge, .e-con .elementor-widget.badge {
  position: absolute; z-index: 3;
  padding: 14px 16px; border-radius: 14px;
  background: rgba(24, 52, 86, .92); border: 1px solid var(--ligne-nuit);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 24px 50px -16px rgba(var(--ombre),.7);
  color: var(--blanc); font-size: 13px; line-height: 1.4;
}
.badge small { display: block; font-family: var(--f-code); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.55); margin-bottom: 6px; }
.e-con.badge-seo { right: -10px; top: 40px; width: 190px; }
.badge-seo strong { font-family: var(--f-titre); font-size: 22px; font-weight: 500; color: var(--orange); }
.e-con .elementor-widget.badge-code { left: 0; bottom: 30px; font-family: var(--f-code); font-size: 12px; line-height: 1.7; }
.badge-code .k { color: var(--orange); }
.badge-code .c { color: rgba(255,255,255,.45); }
@keyframes flotte { 0%, 100% { translate: 0 0; } 50% { translate: -6px -6px; } }
.e-con.technos { background: var(--blanc); border-bottom: 1px solid var(--ligne); }
.technos .e-con.enveloppe { display: flex; align-items: center; gap: 48px; padding: 30px 0; }
.technos .elementor-widget.technos-titre { flex: none; font-family: var(--f-code); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--texte-doux); max-width: 150px; --max-w: 150px; line-height: 1.6; }
.technos .e-con.defile {
  flex: 1; min-width: 0; overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.technos .e-con.piste { display: flex; width: max-content; animation: defile 38s linear infinite; }
.technos .defile:hover .e-con.piste { animation-play-state: paused; }
.technos .e-con.liste-technos { display: flex; align-items: center; gap: 56px; margin: 0; padding: 0 28px; list-style: none; }
.technos .e-con.techno {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--f-titre); font-size: 20px; font-weight: 500; color: var(--marine);
  letter-spacing: -0.01em; white-space: nowrap;
  opacity: .62; transition: opacity .3s, transform .3s;
}
.technos .techno img { width: 30px; height: 30px; }
.technos .e-con.techno:hover { opacity: 1; transform: translateY(-3px); }
@keyframes defile { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
.technos .e-con.piste { animation: none; }
.technos .e-con.liste-technos[aria-hidden] { display: none; }
.technos .e-con.liste-technos { flex-wrap: wrap; gap: 18px 36px; }
}
.e-con.problemes { padding: 130px 0 120px; background: var(--blanc); }
.problemes .e-con.tete { display: grid; grid-template-columns: 1.4fr 1fr; gap: 60px; align-items: end; margin-bottom: 70px; }
.problemes .tete p:not(.en-ligne p, .bloc-texte p) { font-size: 18px; max-width: 360px; justify-self: end; }
.problemes .e-con.corps { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: start; }
.problemes .elementor-widget.question { font-size: 17px; font-weight: 500; color: var(--encre); margin-bottom: 18px; }
.e-con.accordeon { border-top: 1px solid var(--ligne); }
.e-con.pli { border-bottom: 1px solid var(--ligne); }
.pli .pli-titre p {
  all: unset; box-sizing: border-box; cursor: pointer;
  display: grid; grid-template-columns: 54px 1fr 24px; align-items: center;
  width: 100%; padding: 24px 0;
  font-family: var(--f-texte); font-size: 18px; font-weight: 500; color: var(--encre);
}
.pli .num { font-family: var(--f-code); font-size: 12px; color: var(--texte-doux); }
.pli .e-con.contenu { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s ease; }
.pli.ouvert .e-con.contenu { grid-template-rows: 1fr; }
.pli .etiquette { display: inline-block; margin-bottom: 14px; padding: 4px 12px; border-radius: 999px; background: rgba(238,145,55,.14); color: var(--orange-fonce); font-size: 12px; font-weight: 600; }
.pli h3 { font-size: 30px; margin-bottom: 12px; }
.pli .contenu p:not(.en-ligne p, .bloc-texte p) { padding-bottom: 28px; max-width: 470px; }
.e-con.photo-pile { position: relative; padding: 0 0 60px 40px; }
.photo-pile img { width: 100%; aspect-ratio: 4 / 4.2; object-fit: cover; border-radius: 22px; box-shadow: 0 40px 80px -30px rgba(var(--ombre),.45); }
.photo-pile .elementor-widget.carte-flottante {
  position: absolute; left: 0; bottom: 0; width: 270px;
  padding: 22px 24px; border-radius: 18px;
  background: var(--nuit); color: rgba(255,255,255,.72); font-size: 14px; line-height: 1.55;
  box-shadow: 0 30px 60px -20px rgba(var(--ombre),.6);
}
.photo-pile .carte-flottante strong { display: block; font-family: var(--f-titre); font-size: 44px; font-weight: 400; line-height: 1; color: var(--orange); margin-bottom: 8px; }
.e-con.benefices { padding: 110px 0 130px; background: var(--clair); text-align: center; }
.benefices .elementor-widget.titre-section { margin: 20px auto 64px; max-width: 900px; --max-w: 900px; }
.e-con.grille-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; text-align: left; }
.e-con.carte-benef {
  padding: 34px 32px 38px; border-radius: 16px;
  background: var(--blanc); border: 1px solid var(--ligne);
  box-shadow: 0 1px 2px rgba(var(--ombre),.04);
}
.e-con.carte-benef::before { content: ""; display: block; width: 36px; height: 3px; border-radius: 3px; background: var(--orange); margin-bottom: 30px; }
.carte-benef h3 { font-size: 26px; margin-bottom: 8px; }
.carte-benef p:not(.en-ligne p, .bloc-texte p) { font-size: 15px; }
.e-con.expertises { position: relative; padding: 120px 0 130px; background: var(--nuit); color: rgba(255,255,255,.7); overflow: hidden; }
.e-con.expertises::before {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse at 50% 40%, #000 30%, transparent 75%);
}
.expertises .e-con.enveloppe { position: relative; }
.expertises .e-con.tete { display: grid; grid-template-columns: 1.3fr 1fr; gap: 60px; align-items: end; margin-bottom: 64px; }
.expertises .tete p:not(.en-ligne p, .bloc-texte p) { max-width: 380px; justify-self: end; }
.e-con.grille-expertises { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; }
.e-con.carte-exp {
  grid-column: span 2; position: relative;
  display: flex; flex-direction: column; min-height: 300px;
  padding: 30px 30px 28px; border-radius: 18px;
  background: linear-gradient(170deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  border: 1px solid var(--ligne-nuit);
  transition: border-color .3s, transform .3s;
}
.e-con.carte-exp:hover, .e-con.carte-exp.vedette { border-color: rgba(238,145,55,.75); }
.e-con.carte-exp.vedette { box-shadow: 0 0 0 1px rgba(238,145,55,.2), 0 30px 60px -30px rgba(238,145,55,.45); }
.e-con.carte-exp:hover { transform: translateY(-4px); }
.carte-exp .icone { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; border: 1px solid var(--ligne-nuit); background: rgba(255,255,255,.06); color: var(--orange); margin-bottom: 34px; }
.carte-exp h3 { font-size: 26px; margin-bottom: 10px; }
.carte-exp p:not(.en-ligne p, .bloc-texte p) { font-size: 15px; line-height: 1.65; }
.carte-exp ul { margin: 18px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.carte-exp li { padding: 3px 10px; border-radius: 999px; border: 1px solid var(--ligne-nuit); font-size: 11.5px; color: rgba(255,255,255,.66); }
.carte-exp .fleche { margin-top: auto; padding-top: 24px; color: var(--orange); }
.e-con.comparaison { padding: 130px 0; background: var(--blanc); }
.comparaison .e-con.tete { text-align: center; margin-bottom: 64px; }
.comparaison .tete .elementor-widget.titre-section { margin: 20px 0 18px; }
.e-con.tableau { position: relative; display: grid; grid-template-columns: 200px 1fr 1fr; border: 1px solid var(--ligne); border-radius: 20px; overflow: visible; background: var(--blanc); }
.tableau > div { padding: 28px 30px; border-top: 1px solid var(--ligne); }
.tableau .elementor-widget.entete-col { border-top: 0; font-family: var(--f-titre); font-size: 22px; color: var(--encre); text-align: center; padding: 30px; }
.tableau .elementor-widget.entete-col.coin { font-family: var(--f-texte); font-size: 13px; font-weight: 600; text-align: left; color: var(--texte); }
.tableau .elementor-widget.ligne-nom { font-family: var(--f-code); font-size: 11.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--texte-doux); display: flex; align-items: center; }
.tableau .elementor-widget.avant { text-align: center; font-size: 15px; color: var(--texte-doux); border-left: 1px solid var(--ligne); }
.tableau .avant strong, .tableau .apres strong { display: block; font-weight: 500; color: var(--encre); margin-bottom: 4px; }
.tableau .elementor-widget.apres { text-align: center; font-size: 15px; background: #fdf6ee; border-left: 1px solid var(--ligne); }
.tableau .apres strong::before { content: "✓"; color: var(--orange-fonce); margin-right: 8px; }
.tableau .elementor-widget.entete-col.nous {
  position: relative; margin: -14px -1px 0 0; padding-top: 44px;
  background: var(--nuit); color: var(--blanc);
  border-radius: 18px 18px 0 0;
}
.tableau .elementor-widget.entete-col.nous::after { content: "CIBAMATECH"; position: absolute; top: 16px; left: 50%; transform: translateX(-50%); font-family: var(--f-code); font-size: 10px; letter-spacing: .2em; color: var(--orange); }
.comparaison .e-con.cta-centre { margin-top: 54px; text-align: center; }
.e-con.methode { position: relative; padding: 130px 0; background: var(--nuit-2); color: rgba(255,255,255,.7); overflow: hidden; }
.e-con.methode::after { content: ""; position: absolute; right: -200px; top: -200px; width: 700px; height: 700px; border-radius: 50%; background: radial-gradient(circle, rgba(238,145,55,.16), transparent 65%); }
.methode .e-con.enveloppe { position: relative; z-index: 1; display: grid; grid-template-columns: 440px 1fr; gap: 70px; align-items: start; }
.methode .e-con.colle { position: sticky; top: 130px; }
.methode .elementor-widget.titre-section { margin: 20px 0 24px; }
.e-con.etapes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; counter-reset: etape; }
.e-con.etape { padding: 30px; border-radius: 16px; border: 1px solid var(--ligne-nuit); background: var(--carte-nuit); }
.e-con.etape:nth-child(even) { transform: translateY(48px); }
.etape .n { font-family: var(--f-code); font-size: 12px; color: var(--orange); display: inline-flex; width: 36px; height: 36px; border-radius: 50%; align-items: center; justify-content: center; border: 1px solid rgba(238,145,55,.45); margin-bottom: 26px; }
.etape h3 { font-size: 25px; margin-bottom: 8px; }
.etape p:not(.en-ligne p, .bloc-texte p) { font-size: 15px; }
.e-con.pourquoi { padding: 160px 0 130px; background: var(--clair); }
.pourquoi .e-con.tete { display: grid; grid-template-columns: 1.3fr 1fr; gap: 60px; align-items: end; margin-bottom: 60px; }
.pourquoi .tete .e-con.texte { max-width: 400px; justify-self: end; }
.pourquoi .tete .texte p:not(.en-ligne p, .bloc-texte p) { margin-bottom: 18px; }
.pourquoi .e-con.corps { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch; }
.e-con.grille-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.e-con.carte-atout { padding: 30px 28px; border-radius: 16px; background: var(--blanc); border: 1px solid var(--ligne); }
.carte-atout .ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: rgba(238,145,55,.14); color: var(--orange-fonce); margin-bottom: 40px; }
.carte-atout h3 { font-size: 22px; margin-bottom: 8px; }
.carte-atout p:not(.en-ligne p, .bloc-texte p) { font-size: 14.5px; line-height: 1.6; }
.pourquoi .e-con.photo { position: relative; border-radius: 20px; overflow: hidden; min-height: 460px; }
.pourquoi .photo .elementor-widget-image { position: absolute; inset: 0; }
.pourquoi .photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pourquoi .photo .lieu {
  position: absolute; left: 22px; bottom: 22px; display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 16px; border-radius: 999px; background: rgba(26,56,92,.9); color: #fff; font-size: 13px;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.e-con.realisations { padding: 130px 0; background: var(--blanc); }
.realisations .e-con.tete { display: grid; grid-template-columns: 1.3fr 1fr; gap: 60px; align-items: end; margin-bottom: 60px; }
.realisations .tete .e-con.texte { max-width: 380px; justify-self: end; }
.realisations .tete .texte p:not(.en-ligne p, .bloc-texte p) { margin-bottom: 18px; }
.e-con.grille-projets { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.e-con.projet { border-radius: 20px; overflow: hidden; background: var(--clair); border: 1px solid var(--ligne); display: flex; flex-direction: column; transition: transform .3s, box-shadow .3s; }
.e-con.projet:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -30px rgba(var(--ombre),.35); }
.projet .e-con.visuel { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--nuit); }
.projet .visuel img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.projet:hover .visuel img { transform: scale(1.04); }
.projet .visuel .pastille { position: absolute; top: 18px; right: 18px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(26,56,92,.85); color: var(--orange); }
.projet .e-con.infos { padding: 26px 30px 30px; display: flex; flex-direction: column; flex: 1; }
.projet .cat { font-family: var(--f-code); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--orange-fonce); margin-bottom: 10px; }
.projet h3 { font-size: 26px; margin-bottom: 8px; }
.projet p:not(.en-ligne p, .bloc-texte p) { font-size: 15px; margin-bottom: 22px; }
.projet .lien-fleche .elementor-button, .projet .lien-fleche { margin-top: auto; }
.e-con.temoignages { position: relative; padding: 130px 0; background: var(--nuit); color: rgba(255,255,255,.72); overflow: hidden; }
.e-con.temoignages::before { content: ""; position: absolute; left: -250px; bottom: -250px; width: 700px; height: 700px; border-radius: 50%; background: radial-gradient(circle, rgba(238,145,55,.18), transparent 65%); }
.temoignages .e-con.enveloppe { position: relative; }
.temoignages .e-con.tete { display: grid; grid-template-columns: 1.3fr 1fr; gap: 60px; align-items: end; margin-bottom: 56px; }
.temoignages .tete p:not(.en-ligne p, .bloc-texte p) { max-width: 360px; justify-self: end; }
.e-con.grille-avis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.e-con.avis { display: flex; flex-direction: column; padding: 32px; border-radius: 18px; border: 1px solid var(--ligne-nuit); background: var(--carte-nuit); }
.avis .haut p { display: flex; justify-content: space-between; align-items: center; }
.avis .elementor-widget.haut { margin-bottom: 26px; }
.avis .initiales { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: rgba(238,145,55,.14); color: var(--orange); font-family: var(--f-titre); font-size: 16px; border: 1px solid rgba(238,145,55,.5); }
.avis .etoiles { color: var(--orange); letter-spacing: 3px; font-size: 14px; }
.avis blockquote { margin: 0 0 28px; font-size: 16px; line-height: 1.75; color: rgba(255,255,255,.86); }
.avis .elementor-widget.qui { margin-top: auto; padding-top: 20px; border-top: 1px solid var(--ligne-nuit); font-size: 14px; }
.avis .qui strong { display: block; color: #fff; font-weight: 500; }
.avis .qui span { font-size: 12.5px; color: rgba(255,255,255,.5); }
.e-con.appel { padding: 140px 0; background: var(--blanc); text-align: center; position: relative; overflow: hidden; }
.e-con.appel::before { content: ""; position: absolute; left: 50%; top: 100%; width: 1100px; height: 700px; transform: translate(-50%, -45%); border-radius: 50%; background: radial-gradient(circle, rgba(238,145,55,.16), transparent 65%); }
.appel .e-con.enveloppe { position: relative; }
.appel .elementor-widget.titre-section { font-size: clamp(40px, 5.6vw, 72px); margin: 22px auto 22px; max-width: 980px; --max-w: 980px; }
.appel p:not(.en-ligne p, .bloc-texte p) { max-width: 560px; margin: 0 auto 40px; font-size: 18px; }
.appel .coordonnees p { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px 36px; }
.appel .elementor-widget.coordonnees { margin-top: 46px; font-size: 15px; color: var(--encre); }
.appel .coordonnees a, .appel .coordonnees .adresse { display: inline-flex; align-items: center; gap: 10px; }
.e-con.pied { background: var(--marine); color: rgba(255,255,255,.72); font-size: 14px; padding: 80px 0 0; }
.pied .e-con.colonnes { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 50px; padding-bottom: 60px; }
.pied .presentation p:not(.en-ligne p, .bloc-texte p) { margin: 22px 0 0; max-width: 320px; line-height: 1.7; }
.pied h4 { font-family: var(--f-code); font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--orange); margin-bottom: 22px; }
.pied ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.pied a:hover { color: var(--orange); }
.pied .contact li { display: flex; gap: 12px; }
.pied .e-con.bas { display: flex; justify-content: space-between; gap: 20px; padding: 26px 0; border-top: 1px solid var(--ligne-marine); font-size: 12.5px; color: rgba(255,255,255,.55); }
.pied .bas .liens-legaux p { display: flex; gap: 26px; }
@media (max-width: 1080px) {
.heros .e-con.enveloppe { grid-template-columns: minmax(0, 1fr); }
.heros h1 em { white-space: normal; display: inline; }
.e-con.iso { height: 470px; transform: scale(.82); margin: -30px 0; }
.methode .e-con.enveloppe { grid-template-columns: 1fr; gap: 40px; }
.methode .e-con.colle { position: static; }
.pied .e-con.colonnes { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
.problemes .e-con.tete, .expertises .e-con.tete, .pourquoi .e-con.tete, .realisations .e-con.tete, .temoignages .e-con.tete { grid-template-columns: 1fr; gap: 24px; }
.problemes .tete p:not(.en-ligne p, .bloc-texte p), .expertises .tete p:not(.en-ligne p, .bloc-texte p), .pourquoi .tete .e-con.texte, .realisations .tete .e-con.texte, .temoignages .tete p:not(.en-ligne p, .bloc-texte p) { justify-self: start; }
.problemes .e-con.corps, .pourquoi .e-con.corps, .e-con.grille-projets { grid-template-columns: 1fr; }
.e-con.grille-3, .e-con.grille-avis { grid-template-columns: 1fr; }
.e-con.grille-expertises { grid-template-columns: 1fr 1fr; }
.e-con.carte-exp { grid-column: auto; }
.technos .e-con.enveloppe { flex-direction: column; align-items: flex-start; gap: 18px; }
.technos .e-con.defile { width: 100%; flex: none; }
.e-con.tableau { grid-template-columns: 1fr 1fr; }
.tableau .elementor-widget.coin { display: none; }
.tableau .elementor-widget.ligne-nom { grid-column: 1 / -1; padding: 18px 20px 0; border-top: 1px solid var(--ligne); }
.tableau .elementor-widget.avant, .tableau .elementor-widget.apres { border-top: 0; padding: 12px 18px 22px; }
.tableau .elementor-widget.avant { border-left: 0; }
.e-con.etape:nth-child(even) { transform: none; }
.e-con.pourquoi { padding-top: 120px; }
}
@media (max-width: 560px) {
body { font-size: 16px; }
.technos .e-con.techno { font-size: 17px; }
.technos .techno img { width: 24px; height: 24px; }
.technos .e-con.liste-technos { gap: 36px; padding: 0 18px; }
.e-con.problemes, .e-con.benefices, .e-con.expertises, .e-con.comparaison, .e-con.methode, .e-con.realisations, .e-con.temoignages, .e-con.appel { padding-top: 90px; padding-bottom: 90px; }
.e-con.pourquoi { padding-top: 90px; padding-bottom: 90px; }
.e-con.heros { padding: 130px 0 70px; }
.heros .e-con.chiffres { flex-direction: column; gap: 16px; }
.heros .chiffres div { padding: 0; border: 0; }
.e-con.iso { height: 440px; transform: scale(.5); margin: -110px -60px; }
.e-con.badge-seo { right: -40px; top: -60px; }
.e-con .elementor-widget.badge-code { left: -50px; bottom: -70px; }
.e-con.grille-expertises, .e-con.etapes, .e-con.grille-2 { grid-template-columns: 1fr; }
.e-con.photo-pile { padding: 0 0 70px 0; }
.photo-pile .elementor-widget.carte-flottante { left: 16px; width: 240px; }
.pli h3 { font-size: 24px; }
.pied .e-con.colonnes { grid-template-columns: 1fr; }
.pied .e-con.bas { flex-direction: column; }
.tableau .elementor-widget.entete-col { font-size: 17px; padding: 22px 12px; }
.tableau .elementor-widget.entete-col.nous { padding-top: 38px; }
}
.nobr { white-space: nowrap; }
.e-con.heros-page {
  position: relative; overflow: hidden;
  padding: 160px 0 90px;
  background:
    radial-gradient(800px 460px at 0% 0%, rgba(238,145,55,.26), transparent 62%),
    radial-gradient(700px 500px at 90% 60%, rgba(74,122,180,.34), transparent 70%),
    var(--nuit);
  color: rgba(255,255,255,.76);
}
.e-con.heros-page::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
}
.heros-page .e-con.enveloppe { position: relative; display: grid; grid-template-columns: 1.2fr 1fr; gap: 60px; align-items: end; }
.heros-page.seul .e-con.enveloppe { grid-template-columns: 1fr; }
.ariane p { display: flex; gap: 10px; }
.e-con .elementor-widget.ariane { margin-bottom: 26px; font-size: 13px; color: rgba(255,255,255,.5); }
.ariane a:hover { color: var(--orange); }
.ariane span::before { content: "/"; margin-right: 10px; opacity: .5; }
.heros-page h1 { margin: 22px 0 24px; font-size: clamp(40px, 4.4vw, 62px); color: var(--blanc); }
.heros-page h1 em { display: block; color: var(--orange); }
.heros-page .elementor-widget.chapo { max-width: 560px; --max-w: 560px; font-size: 18px; line-height: 1.75; }
.heros-page .e-con.actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }
.heros-page .e-con.visuel-tete { position: relative; align-self: stretch; min-height: 340px; }
.heros-page .visuel-tete .elementor-widget-image { position: absolute; inset: 0; }
.heros-page .visuel-tete img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 22px; box-shadow: 0 40px 80px -30px rgba(var(--ombre),.7); }
.heros-page .visuel-tete .e-con.badge, .heros-page .visuel-tete .elementor-widget.badge { left: -34px; bottom: -30px; }
.heros-page + section { position: relative; }
.e-con.liste-services { padding: 120px 0; background: var(--blanc); }
.e-con.ligne-service { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; padding: 60px 0; border-top: 1px solid var(--ligne); }
.e-con.ligne-service:first-child { border-top: 0; padding-top: 0; }
.ligne-service:nth-child(even) .e-con.media { order: 2; }
.ligne-service .e-con.media { position: relative; }
.ligne-service .media img { width: 100%; aspect-ratio: 16 / 11; object-fit: cover; border-radius: 20px; }
.ligne-service .media .num-geant { position: absolute; top: -26px; right: 22px; font-family: var(--f-titre); font-size: 96px; line-height: 1; color: var(--orange); text-shadow: 0 10px 30px rgba(238,145,55,.35); }
.ligne-service h2 { font-size: clamp(32px, 3.2vw, 44px); margin: 16px 0 16px; }
.ligne-service p:not(.en-ligne p, .bloc-texte p) { max-width: 480px; }
.coches ul { margin: 24px 0 30px; padding: 0; list-style: none; display: grid; gap: 10px; }
.coches li { display: flex; gap: 12px; align-items: baseline; color: var(--encre); font-size: 15.5px; }
.coches li::before { content: "✓"; color: var(--orange-fonce); font-weight: 600; }
.sombre .coches li { color: rgba(255,255,255,.86); }
.sombre .coches li::before { color: var(--orange); }
.e-con.prestations { padding: 120px 0; background: var(--blanc); }
.prestations .e-con.tete { display: grid; grid-template-columns: 1.3fr 1fr; gap: 60px; align-items: end; margin-bottom: 56px; }
.prestations .tete p:not(.en-ligne p, .bloc-texte p) { max-width: 380px; justify-self: end; }
.e-con.grille-presta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.e-con.presta { padding: 32px 30px; border-radius: 16px; border: 1px solid var(--ligne); background: var(--blanc); transition: border-color .3s, transform .3s; }
.e-con.presta:hover { border-color: var(--orange); transform: translateY(-3px); }
.presta .n { font-family: var(--f-code); font-size: 12px; color: var(--orange-fonce); }
.presta h3 { font-size: 24px; margin: 26px 0 10px; }
.presta p:not(.en-ligne p, .bloc-texte p) { font-size: 15px; }
.e-con.livrables { position: relative; padding: 120px 0; background: var(--nuit); color: rgba(255,255,255,.72); overflow: hidden; }
.e-con.livrables::after { content: ""; position: absolute; right: -220px; bottom: -260px; width: 720px; height: 720px; border-radius: 50%; background: radial-gradient(circle, rgba(238,145,55,.16), transparent 65%); }
.livrables .e-con.enveloppe { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; }
.livrables .elementor-widget.titre-section { margin: 20px 0 22px; }
.puces p { display: flex; flex-wrap: wrap; gap: 8px; }
.e-con .elementor-widget.puces { margin-top: 30px; }
.puces span { padding: 7px 14px; border-radius: 999px; border: 1px solid var(--ligne-nuit); font-size: 13px; color: rgba(255,255,255,.75); background: rgba(26,56,92,.25); }
.livrables .e-con.photo-cadre { position: relative; }
.livrables .photo-cadre img { width: 100%; aspect-ratio: 4 / 3.4; object-fit: cover; border-radius: 22px; box-shadow: 0 40px 80px -30px rgba(var(--ombre),.7); }
.livrables .photo-cadre .e-con.badge, .livrables .photo-cadre .elementor-widget.badge { right: -24px; top: 30px; }
.e-con.faq { padding: 120px 0; background: var(--clair); }
.faq .e-con.enveloppe { display: grid; grid-template-columns: 400px 1fr; gap: 70px; align-items: start; }
.faq .elementor-widget.titre-section { margin: 20px 0 20px; }
.faq .e-con.accordeon { background: var(--blanc); border: 1px solid var(--ligne); border-radius: 18px; padding: 0 30px; }
.faq .e-con.pli:last-child { border-bottom: 0; }
.faq .pli .pli-titre p { grid-template-columns: 1fr 24px; font-size: 17px; }
.e-con.autres { padding: 110px 0; background: var(--blanc); }
.autres .elementor-widget.titre-section { margin: 20px 0 44px; }
.e-con.grille-autres { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
.e-con.autre { display: flex; flex-direction: column; gap: 30px; padding: 26px; border-radius: 16px; border: 1px solid var(--ligne); transition: border-color .3s, transform .3s; }
.e-con.autre:hover { border-color: var(--orange); transform: translateY(-3px); }
.autre h3 { font-size: 21px; }
.autre .lien-fleche .elementor-button, .autre .lien-fleche { margin-top: auto; }
.e-con.appel-sombre { position: relative; padding: 0 0 120px; background: var(--blanc); }
.appel-sombre .e-con.boite {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 1.4fr auto; gap: 40px; align-items: center;
  padding: 64px 64px; border-radius: 26px;
  background: radial-gradient(600px 300px at 0% 0%, rgba(238,145,55,.35), transparent 65%), var(--nuit);
  color: rgba(255,255,255,.72);
}
.appel-sombre h2 { font-size: clamp(32px, 3.4vw, 48px); color: var(--blanc); margin-bottom: 12px; }
.appel-sombre h2 em { color: var(--orange); }
.e-con.histoire { padding: 120px 0; background: var(--blanc); }
.histoire .e-con.enveloppe { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.histoire .elementor-widget.titre-section { margin: 20px 0 26px; }
.histoire p + p:not(.en-ligne p, .bloc-texte p) { margin-top: 18px; }
.histoire .e-con.collage { position: relative; padding: 0 60px 80px 0; }
.histoire .collage .elementor-widget.carte-flottante { position: absolute; left: -30px; bottom: 30px; width: 230px; padding: 20px 22px; border-radius: 16px; background: var(--nuit); color: rgba(255,255,255,.72); font-size: 14px; line-height: 1.5; box-shadow: 0 30px 60px -20px rgba(var(--ombre),.6); }
.histoire .collage .carte-flottante strong { display: block; font-family: var(--f-titre); font-size: 30px; font-weight: 400; color: var(--orange); margin-bottom: 4px; }
.e-con.mission { padding: 120px 0; background: var(--nuit); color: rgba(255,255,255,.72); position: relative; overflow: hidden; }
.mission .e-con.enveloppe { position: relative; }
.mission .e-con.grille-mission { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 56px; }
.mission .e-con.bloc { padding: 40px; border-radius: 20px; border: 1px solid var(--ligne-nuit); background: var(--carte-nuit); }
.mission .e-con.bloc.vedette { border-color: rgba(238,145,55,.7); }
.mission .bloc h3 { font-size: 30px; margin: 22px 0 12px; }
.e-con.valeurs { padding: 120px 0; background: var(--clair); }
.valeurs .e-con.tete { text-align: center; margin-bottom: 56px; }
.valeurs .elementor-widget.titre-section { margin-top: 20px; }
.e-con.grille-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.e-con.portfolio { padding: 100px 0 120px; background: var(--blanc); }
.e-con.filtres { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 44px; }
.e-con.grille-portfolio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grille-portfolio .e-con.projet.cache { display: none; }
.grille-portfolio .projet h3 { font-size: 23px; }
.grille-portfolio .projet .e-con.visuel { aspect-ratio: 4 / 3; }
.e-con.contact-zone { padding: 100px 0 130px; background: var(--clair); }
.contact-zone .e-con.enveloppe { display: grid; grid-template-columns: 1fr 1.35fr; gap: 40px; align-items: start; }
.e-con.coord-cartes { display: grid; gap: 16px; }
.e-con.coord { display: flex; gap: 20px; align-items: flex-start; padding: 26px 28px; border-radius: 16px; background: var(--blanc); border: 1px solid var(--ligne); }
.coord .ico { flex: none; width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: rgba(238,145,55,.14); color: var(--orange-fonce); }
.coord small { display: block; font-family: var(--f-code); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--texte-doux); margin-bottom: 4px; }
.coord strong, .coord a { font-size: 17px; font-weight: 500; color: var(--encre); }
.coord-cartes .e-con.photo-contact { position: relative; border-radius: 18px; overflow: hidden; min-height: 260px; }
.coord-cartes .photo-contact .elementor-widget-image { position: absolute; inset: 0; }
.coord-cartes .photo-contact img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.e-con.formulaire { padding: 48px; border-radius: 22px; background: var(--blanc); border: 1px solid var(--ligne); box-shadow: 0 40px 80px -50px rgba(var(--ombre),.35); }
.formulaire h2 { font-size: 34px; margin-bottom: 8px; }
.formulaire .btn .elementor-button { border: 0; cursor: pointer; }
@media (max-width: 1080px) {
.heros-page .e-con.enveloppe, .livrables .e-con.enveloppe, .histoire .e-con.enveloppe, .contact-zone .e-con.enveloppe { grid-template-columns: minmax(0, 1fr); }
.faq .e-con.enveloppe { grid-template-columns: 1fr; gap: 30px; }
.e-con.grille-autres, .e-con.grille-4 { grid-template-columns: 1fr 1fr; }
.e-con.grille-portfolio { grid-template-columns: 1fr 1fr; }
.heros-page .visuel-tete .e-con.badge, .heros-page .visuel-tete .elementor-widget.badge { left: 16px; }
.livrables .photo-cadre .e-con.badge, .livrables .photo-cadre .elementor-widget.badge { right: 16px; }
}
@media (max-width: 860px) {
.prestations .e-con.tete { grid-template-columns: 1fr; gap: 20px; }
.prestations .tete p:not(.en-ligne p, .bloc-texte p) { justify-self: start; }
.e-con.grille-presta, .mission .e-con.grille-mission { grid-template-columns: 1fr; }
.e-con.ligne-service { grid-template-columns: 1fr; gap: 34px; }
.ligne-service:nth-child(even) .e-con.media { order: 0; }
.appel-sombre .e-con.boite { grid-template-columns: 1fr; padding: 44px 30px; }
}
@media (max-width: 560px) {
.e-con.heros-page { padding: 120px 0 60px; }
.heros-page .e-con.visuel-tete { min-height: 240px; }
.e-con.grille-autres, .e-con.grille-4, .e-con.grille-portfolio { grid-template-columns: 1fr; }
.e-con.formulaire { padding: 30px 22px; }
.formulaire .btn .elementor-button { justify-content: center; }
.histoire .e-con.collage { padding: 0 0 90px 0; }
.histoire .collage .elementor-widget.carte-flottante { left: 12px; }
.ligne-service .media .num-geant { font-size: 70px; top: -20px; }
.e-con.liste-services, .e-con.prestations, .e-con.livrables, .e-con.faq, .e-con.autres, .e-con.histoire, .e-con.mission, .e-con.valeurs, .e-con.portfolio, .e-con.contact-zone { padding-top: 80px; padding-bottom: 80px; }
.e-con.appel-sombre { padding-bottom: 80px; }
.appel-sombre .e-con.boite { padding: 40px 24px; }
.appel-sombre .btn .elementor-button { width: 100%; justify-content: center; white-space: nowrap; padding-left: 18px; padding-right: 18px; }
}
@media (max-width: 359px) {
.appel-sombre .btn .elementor-button { white-space: normal; font-size: 14px; }
}
.ligne-service h2 em { color: var(--orange-fonce); }
.sombre + .e-con.appel-sombre { padding-top: 120px; }
@media (max-width: 560px) {
.sombre + .e-con.appel-sombre { padding-top: 80px; }
}
.pied .reseaux ul { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.pied .reseaux a {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--ligne-marine); color: var(--blanc);
  transition: background .25s, border-color .25s, color .25s, transform .25s;
}
.pied .reseaux a:hover { background: var(--orange); border-color: var(--orange); color: var(--marine); transform: translateY(-3px); }
.bouton-whatsapp .elementor-button {
  position: fixed; right: 24px; bottom: 24px; z-index: 60;
  display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%;
  background: var(--orange); color: var(--marine);
  box-shadow: 0 14px 34px -10px rgba(238,145,55,.75), 0 0 0 4px rgba(255,255,255,.9);
  transition: transform .25s;
}
.bouton-whatsapp .elementor-button::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid var(--orange); animation: onde 2.4s ease-out infinite;
}
.bouton-whatsapp:hover .elementor-button { transform: scale(1.06); }
.bouton-whatsapp .elementor-button .elementor-button-text {
  position: absolute; right: calc(100% + 14px); top: 50%; transform: translate(8px, -50%);
  padding: 10px 16px; border-radius: 999px; white-space: nowrap;
  background: var(--marine); color: var(--blanc); font-size: 14px; font-weight: 500;
  box-shadow: 0 14px 30px -12px rgba(var(--ombre),.6);
  opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s;
}
.bouton-whatsapp:hover .elementor-button .elementor-button-text, .bouton-whatsapp .elementor-button .elementor-button:focus-visible .elementor-button-text { opacity: 1; transform: translate(0, -50%); }
@keyframes onde { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(1.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
.bouton-whatsapp .elementor-button::before { animation: none; }
}
@media (max-width: 560px) {
.bouton-whatsapp .elementor-button { right: 16px; bottom: 16px; width: 56px; height: 56px; }
.bouton-whatsapp .elementor-button .elementor-button-text { display: none; }
}
.pied .e-con.bas { padding-right: 96px; }
@media (max-width: 560px) {
.pied .e-con.bas { padding-right: 0; padding-bottom: 84px; }
}
.e-con.plan-site { padding: 100px 0 120px; background: var(--clair); }
.plan-site .e-con.enveloppe { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: start; }
.e-con.groupe-plan { padding: 34px 30px; border-radius: 20px; background: var(--blanc); border: 1px solid var(--ligne); }
.groupe-plan h2 { display: flex; align-items: center; gap: 14px; font-size: 26px; margin-bottom: 22px; }
.groupe-plan h2 .n { font-family: var(--f-code); font-size: 12px; color: var(--orange-fonce); display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(238,145,55,.45); }
.groupe-plan ul { margin: 0; padding: 0; list-style: none; display: grid; }
.groupe-plan li + li { border-top: 1px solid var(--ligne); }
.groupe-plan a, .groupe-plan .item {
  display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-items: center;
  padding: 15px 4px; transition: padding .25s;
}
.groupe-plan a:hover { padding-left: 10px; }
.groupe-plan a:hover strong { color: var(--orange-fonce); }
.groupe-plan strong { font-size: 16px; font-weight: 500; color: var(--encre); transition: color .2s; }
.groupe-plan span { grid-column: 2; font-size: 13.5px; color: var(--texte-doux); line-height: 1.45; }
@media (max-width: 1080px) {
.plan-site .e-con.enveloppe { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
.plan-site .e-con.enveloppe { grid-template-columns: 1fr; }
.e-con.plan-site { padding: 70px 0 80px; }
}
.e-con.legal { padding: 90px 0 120px; background: var(--blanc); }
.legal .e-con.enveloppe { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 70px; align-items: start; }
.e-con.sommaire { position: sticky; top: 110px; padding: 26px; border-radius: 18px; background: var(--clair); border: 1px solid var(--ligne); }
.sommaire strong { display: block; font-family: var(--f-code); font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--orange-fonce); margin-bottom: 14px; }
.sommaire ol { margin: 0; padding: 0; list-style: none; counter-reset: s; display: grid; gap: 4px; }
.sommaire li { counter-increment: s; }
.sommaire a { display: flex; gap: 10px; padding: 7px 0; font-size: 14px; color: var(--texte); transition: color .2s; }
.sommaire a::before { content: counter(s, decimal-leading-zero); font-family: var(--f-code); font-size: 11px; color: var(--texte-doux); padding-top: 3px; }
.sommaire a:hover { color: var(--orange-fonce); }
.e-con.texte-legal { max-width: 780px; }
.texte-legal .maj { display: inline-block; margin-bottom: 34px; padding: 6px 14px; border-radius: 999px; background: rgba(238,145,55,.14); color: var(--orange-fonce); font-size: 13px; font-weight: 500; }
.texte-legal section { padding: 34px 0; border-top: 1px solid var(--ligne); scroll-margin-top: 100px; }
.texte-legal section:first-of-type { border-top: 0; padding-top: 0; }
.texte-legal h2 { font-size: 28px; margin-bottom: 16px; }
.texte-legal h3 { font-size: 19px; margin: 22px 0 8px; }
.texte-legal p:not(.en-ligne p, .bloc-texte p), .texte-legal li { font-size: 16px; line-height: 1.8; }
.texte-legal p + p:not(.en-ligne p, .bloc-texte p) { margin-top: 12px; }
.texte-legal ul { margin: 12px 0 0; padding-left: 22px; }
.texte-legal li { margin-bottom: 6px; }
.texte-legal li::marker { color: var(--orange); }
.texte-legal a { color: var(--marine); font-weight: 500; text-decoration: underline; text-decoration-color: rgba(238,145,55,.6); text-underline-offset: 3px; }
.texte-legal a:hover { color: var(--orange-fonce); }
.fiche dl { display: grid; grid-template-columns: 200px 1fr; margin-top: 8px; border: 1px solid var(--ligne); border-radius: 14px; overflow: hidden; }
.fiche dt, .fiche dd { margin: 0; padding: 13px 18px; font-size: 15px; border-top: 1px solid var(--ligne); }
.fiche dt:first-of-type, .fiche dt:first-of-type + dd { border-top: 0; }
.fiche dt { background: var(--clair); font-weight: 600; color: var(--encre); }
.fiche dd { color: var(--texte); }
mark.a-completer { padding: 1px 8px; border-radius: 6px; background: rgba(238,145,55,.2); color: var(--orange-fonce); font-weight: 500; }
.sombre mark.a-completer { background: rgba(238,145,55,.18); color: var(--orange); }
.fiche-projet { display: grid; grid-template-columns: repeat(4, minmax(0, max-content)); gap: 14px 48px; margin: 6px 0 0; }
.fiche-projet dt { margin: 0 0 4px; font-family: var(--f-code); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.fiche-projet dd { margin: 0; font-size: 15px; color: var(--blanc); }
@media (max-width: 700px) {
.fiche-projet { grid-template-columns: 1fr 1fr; gap: 16px 24px; }
}
@media (max-width: 960px) {
.legal .e-con.enveloppe { grid-template-columns: minmax(0, 1fr); gap: 36px; }
.e-con.sommaire { position: static; }
}
@media (max-width: 560px) {
.e-con.legal { padding: 60px 0 80px; }
.fiche dl { grid-template-columns: 1fr; }
.fiche dd { border-top: 0; padding-top: 0; }
.texte-legal h2 { font-size: 24px; }
}
.texte-legal a[href^="tel:"], .coord a[href^="tel:"] { white-space: nowrap; }
.e-con .elementor-widget.mt-titre { margin-top: 20px; }
.blog-zone { padding: 100px 0 120px; background: var(--blanc); }
.blog-suite { padding-top: 40px; background: var(--clair); }
.blog-suite .elementor-widget.titre-section { margin-bottom: 44px; }
.blog-categories { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 44px; }
.blog-categories a {
  padding: 10px 20px; border-radius: 999px; border: 1px solid var(--ligne);
  font-size: 14px; font-weight: 500; color: var(--encre); transition: border-color .2s;
}
.blog-categories a:hover { border-color: var(--orange); }
.blog-categories .elementor-widgeta.actif { background: var(--nuit); border-color: var(--nuit); color: var(--blanc); }
.grille-articles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grille-articles.deux { grid-template-columns: repeat(2, 1fr); }
.carte-article {
  display: flex; flex-direction: column; border-radius: 20px; overflow: hidden;
  background: var(--blanc); border: 1px solid var(--ligne); transition: transform .3s, box-shadow .3s;
}
.carte-article:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -30px rgba(var(--ombre),.35); }
.carte-article .article-visuel { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--nuit); }
.carte-article .article-visuel img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.carte-article:hover .article-visuel img { transform: scale(1.04); }
.carte-article .article-infos { display: flex; flex-direction: column; flex: 1; padding: 26px 28px 28px; }
.article-meta { display: flex; flex-wrap: wrap; gap: 10px 0; margin: 0 0 12px -26px; clip-path: inset(0 0 0 26px); font-family: var(--f-code); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--orange-fonce); }
.article-meta span::before { content: "·"; display: inline-block; width: 6px; margin: 0 10px; letter-spacing: 0; text-align: center; color: var(--texte-doux); }
.carte-article h2 { font-size: 24px; margin-bottom: 10px; }
.carte-article h2 a:hover { color: var(--orange-fonce); }
.carte-article .article-infos > p:not(.article-meta):not(.en-ligne p, .bloc-texte p) { font-size: 15px; margin-bottom: 22px; }
.article-lien, .article-retour { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--encre); }
.carte-article .article-lien { margin-top: auto; }
.article-lien::after, .article-retour::before {
  content: ""; width: 14px; height: 14px; background: var(--orange-fonce);
  -webkit-mask: var(--m-fleche) center / contain no-repeat; mask: var(--m-fleche) center / contain no-repeat; transition: transform .2s;
}
.article-retour::before { transform: rotate(-135deg); }
.article-lien:hover::after { transform: translate(3px, -3px); }
.blog-vide { padding: 60px 30px; border: 1px dashed var(--ligne); border-radius: 20px; text-align: center; }
.blog-pagination { display: flex; justify-content: center; gap: 8px; margin-top: 50px; }
.blog-pagination .page-numbers { display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--ligne); font-weight: 500; color: var(--encre); }
.blog-pagination .page-numbers.current { background: var(--nuit); border-color: var(--nuit); color: var(--blanc); }
.article-entete h1 { max-width: 980px; font-size: clamp(36px, 4vw, 56px); text-wrap: pretty; }
.article-entete .meta-article { display: flex; flex-wrap: wrap; gap: 8px 0; margin: 4px 0 0 -40px; clip-path: inset(0 0 0 40px); font-size: 14px; color: rgba(255,255,255,.65); }
.article-entete .meta-article span::before { content: ""; display: inline-block; width: 4px; height: 4px; margin: 0 14px 3px 22px; border-radius: 50%; background: var(--orange); }
.e-con.heros-page.article-entete { padding-bottom: 90px; }
.article-chapo { max-width: 720px; margin: -6px 0 24px; font-size: 22px; line-height: 1.55; color: rgba(255,255,255,.62); }
.article-image { margin: 40px 0 0; }
.article-image img { width: 100%; height: auto; aspect-ratio: 16 / 7; object-fit: cover; border-radius: 22px; }
.article-zone { display: flow-root; padding: 0 0 100px; background: var(--blanc); }
.article-sommaire { max-width: 760px; margin: 64px auto 0; border-top: 1px solid var(--ligne); }
.article-sommaire-titre { margin: 0; padding: 16px 0; border-bottom: 1px solid var(--ligne); font-family: var(--f-code); font-size: 12px; letter-spacing: .04em; color: var(--orange-fonce); }
.article-sommaire ol { list-style: none; counter-reset: sommaire; margin: 0; padding: 0; }
.article-sommaire li { counter-increment: sommaire; margin: 0; border-bottom: 1px solid var(--ligne); }
.article-sommaire a { display: flex; gap: 14px; padding: 16px 0; font-size: 16px; line-height: 1.45; color: var(--encre); }
.article-sommaire a:hover { color: var(--marine); }
.article-sommaire a::before { content: counter(sommaire) "."; flex: none; min-width: 20px; }
.article-sommaire + .prose { margin-top: 48px; }
.prose { max-width: 760px; margin: 64px auto 0; font-size: 18px; line-height: 1.8; color: var(--texte); }
.prose > :first-child { margin-top: 0; }
.prose h2 { font-size: 32px; margin: 48px 0 16px; scroll-margin-top: 110px; }
.prose h3 { font-size: 24px; margin: 36px 0 12px; }
.prose p:not(.en-ligne p, .bloc-texte p) { margin: 0 0 20px; }
.prose ul, .prose ol { margin: 0 0 22px; padding-left: 24px; }
.prose li { margin-bottom: 8px; }
.prose li::marker { color: var(--orange); }
.prose strong { color: var(--encre); }
.prose a { color: var(--marine); font-weight: 500; text-decoration: underline; text-decoration-color: rgba(238,145,55,.6); text-underline-offset: 3px; }
.prose blockquote { margin: 34px 0; padding: 24px 30px; border-left: 3px solid var(--orange); border-radius: 0 16px 16px 0; background: var(--clair); font-family: var(--f-titre); font-size: 23px; line-height: 1.45; color: var(--encre); }
.prose blockquote p:not(.en-ligne p, .bloc-texte p) { margin: 0; }
.prose img { border-radius: 16px; }
.prose figure { margin: 30px 0; }
.article-pied { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px; max-width: 760px; margin: 50px auto 0; padding-top: 30px; border-top: 1px solid var(--ligne); }
@media (max-width: 1080px) {
.grille-articles { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
.grille-articles, .grille-articles.deux { grid-template-columns: 1fr; }
.blog-zone { padding: 70px 0 80px; }
.prose { margin-top: 44px; font-size: 17px; }
.prose h2 { font-size: 26px; }
.prose blockquote { font-size: 20px; padding: 20px 22px; }
}
@media (max-width: 1080px) {
.e-con.heros-page.article-entete { padding-bottom: 64px; }
.article-chapo { max-width: 640px; font-size: 20px; }
.article-image { margin-top: 30px; }
.article-image img { aspect-ratio: 16 / 10; }
.article-sommaire { margin-top: 56px; }
.article-sommaire + .prose { margin-top: 40px; }
}
@media (max-width: 700px) {
.e-con.heros-page.article-entete { padding-bottom: 56px; }
.article-chapo { font-size: 18px; }
.article-image { margin-top: 26px; }
}
:root { --m-fleche: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 17 17 7M9 7h8v8' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }

/* ------------------------------------------------------------------
   AJOUTS PROPRES À ELEMENTOR (src/elementor-ajouts.css)
   ------------------------------------------------------------------ */
/* Ajouts propres à la voie Elementor Pro.
   Ce que la maquette dessinait avec du balisage (SVG, éléments vides,
   bouton d'onglet, menu) est redessiné ici sur le balisage d'Elementor,
   sans rien ajouter au contenu : icônes en masques CSS, décors en
   pseudo-éléments, menu et formulaire sur les classes des widgets Pro. */

/* ---------- Icônes : masques, couleur = currentColor ou couleur posée ---------- */
.masque { background: currentColor; -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }

/* Boutons : flèche après le libellé */
.btn:not(.btn-ligne) .elementor-button::after,
.lien-fleche .elementor-button::after, .lien-fleche p::after, a.lien-fleche::after {
  content: ""; flex: none; width: 16px; height: 16px; background: currentColor;
  -webkit-mask: var(--m-fleche) center / contain no-repeat; mask: var(--m-fleche) center / contain no-repeat;
}
.lien-fleche .elementor-button, .lien-fleche p, a.lien-fleche { display: inline-flex; align-items: center; gap: 8px; }
.lien-fleche .elementor-button { background: none; padding: 0; border-radius: 0; color: var(--encre); font-size: 14px; font-weight: 600; }
.lien-fleche .elementor-button:hover, .lien-fleche .elementor-button:focus { color: var(--encre); }
.lien-fleche .elementor-button::after, .lien-fleche p::after, a.lien-fleche::after { width: 14px; height: 14px; background: var(--orange-fonce); transition: transform .2s; }
.lien-fleche .elementor-button:hover::after, a.lien-fleche:hover::after, .projet:hover .lien-fleche p::after { transform: translate(3px, -3px); }
.btn .elementor-button:hover, .btn .elementor-button:focus, .btn .elementor-button:visited { color: var(--encre); }
.btn-ligne .elementor-button:hover, .btn-ligne .elementor-button:focus, .btn-ligne .elementor-button:visited { color: var(--blanc); }
.elementor-button .elementor-button-content-wrapper { gap: 0; }

/* Tuiles du plateau isométrique */
.tuile::before { content: ""; width: 40px; height: 40px; background: var(--orange); -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
.t-marketing::before, .t-ia::before { width: 34px; height: 34px; }
.tuile.coeur::before { width: 76px; height: 76px; -webkit-mask: none; mask: none; background: var(--i-marque-coeur) center / contain no-repeat; }
.tuile p { line-height: 1; }
/* Fils lumineux et socle : décors du plateau, sous les tuiles */
.e-con.iso-plan::before {
  content: ""; position: absolute; inset: -30px; z-index: -2; border-radius: 44px;
  border: 1px dashed rgba(170,200,240,.18);
  background: radial-gradient(circle at 50% 50%, rgba(74,122,180,.25), transparent 70%);
}
.e-con.iso-plan::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 520 520'%3E%3Cdefs%3E%3Cfilter id='g' x='-50%25' y='-50%25' width='200%25' height='200%25'%3E%3CfeGaussianBlur stdDeviation='3'/%3E%3C/filter%3E%3C/defs%3E%3Cg stroke='%23ee9137' stroke-width='2' stroke-linecap='round' fill='none'%3E%3Cg filter='url(%23g)' opacity='.8'%3E%3Cpath d='M176 177L126.5 127.5M344 177L393.5 127.5M344 345L393.5 394.5M176 345L126.5 394.5M344 261H380M176 261H140'/%3E%3C/g%3E%3Cpath opacity='.85' d='M176 177L126.5 127.5M344 177L393.5 127.5M344 345L393.5 394.5M176 345L126.5 394.5M344 261H380M176 261H140'/%3E%3C/g%3E%3Cg fill='%23ee9137'%3E%3Ccircle cx='126.5' cy='127.5' r='4'/%3E%3Ccircle cx='393.5' cy='127.5' r='4'/%3E%3Ccircle cx='393.5' cy='394.5' r='4'/%3E%3Ccircle cx='126.5' cy='394.5' r='4'/%3E%3Ccircle cx='380' cy='261' r='4'/%3E%3Ccircle cx='140' cy='261' r='4'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
/* Barres du badge « trafic organique » */
.e-con.badge-seo::after {
  content: ""; display: block; height: 42px; margin-top: 8px;
  background:
    linear-gradient(var(--orange), var(--orange)) 100% 100% / 22px 42px no-repeat,
    linear-gradient(rgba(170,200,240,.25), rgba(170,200,240,.25)) 108px 100% / 22px 29px no-repeat,
    linear-gradient(rgba(170,200,240,.25), rgba(170,200,240,.25)) 81px 100% / 22px 24px no-repeat,
    linear-gradient(rgba(170,200,240,.25), rgba(170,200,240,.25)) 54px 100% / 22px 16px no-repeat,
    linear-gradient(rgba(170,200,240,.25), rgba(170,200,240,.25)) 27px 100% / 22px 18px no-repeat,
    linear-gradient(rgba(170,200,240,.25), rgba(170,200,240,.25)) 0 100% / 22px 13px no-repeat;
}

/* Cartes d'expertise : case d'icône, icône, flèche */
.e-con.carte-exp { padding-bottom: 81px; background: var(--i-fleche-orange) 30px calc(100% - 34px) / 18px 18px no-repeat, linear-gradient(170deg, rgba(255,255,255,.08), rgba(255,255,255,.03)); }
.e-con.carte-exp::before { content: ""; display: block; width: 52px; height: 52px; border-radius: 14px; border: 1px solid var(--ligne-nuit); background: rgba(255,255,255,.06); margin-bottom: 34px; }
.e-con.carte-exp::after { content: ""; position: absolute; top: 44px; left: 44px; width: 24px; height: 24px; background: var(--orange); -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
/* Atouts et valeurs */
.e-con.carte-atout::before { content: ""; display: block; width: 40px; height: 40px; border-radius: 12px; background: rgba(238,145,55,.14); margin-bottom: 40px; }
.e-con.carte-atout::after { content: ""; position: absolute; top: 40px; left: 38px; width: 20px; height: 20px; background: var(--orange-fonce); -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
/* Coordonnées (page Contact) */
.e-con.coord::before { content: ""; flex: none; width: 46px; height: 46px; border-radius: 12px; background: rgba(238,145,55,.14); }
.e-con.coord::after { content: ""; position: absolute; top: 39px; left: 41px; width: 20px; height: 20px; background: var(--orange-fonce); -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
/* Autres services */
.e-con.autre::before { content: ""; width: 26px; height: 26px; background: var(--marine); -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
/* Pastille flèche des projets */
.projet .e-con.visuel::after { content: ""; position: absolute; top: 18px; right: 18px; width: 40px; height: 40px; border-radius: 50%; background: var(--i-fleche-orange) center / 16px no-repeat, rgba(26,56,92,.85); }
/* Point du badge de localisation */
.pourquoi .photo .lieu::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 4px rgba(238,145,55,.25); }

/* Icônes attribuées par la nature du lien : tél., email, WhatsApp, adresse, pages de service */
.appel .coordonnees a::before, .appel .coordonnees .adresse::before,
.pied .contact li::before, .groupe-plan a::before, .groupe-plan .item::before,
.nav-principale .sub-menu a::before, .pied .reseaux a::before {
  content: ""; flex: none; width: 18px; height: 18px; background: var(--orange-fonce);
  -webkit-mask: var(--ic, var(--m-lieu)) center / contain no-repeat; mask: var(--ic, var(--m-lieu)) center / contain no-repeat;
}
a[href^="tel:"]::before, li:has(> a[href^="tel:"])::before { --ic: var(--m-tel); }
a[href^="mailto:"]::before, li:has(> a[href^="mailto:"])::before, .groupe-plan a[href="/contact/"]::before { --ic: var(--m-mail); }
a[href*="wa.me"]::before, li:has(> a[href*="wa.me"])::before { --ic: var(--m-whatsapp); }
a[href*="developpement-logiciel"]::before { --ic: var(--m-code); }
a[href*="sites-web"]::before { --ic: var(--m-web); }
a[href*="applications-mobiles"]::before { --ic: var(--m-mobile); }
a[href*="design-ui-ux"]::before { --ic: var(--m-design); }
a[href*="marketing-digital"]::before { --ic: var(--m-marketing); }
a[href*="automatisation-ia"]::before { --ic: var(--m-ia); }
.pied .contact li::before { width: 16px; height: 16px; margin-top: 4px; background: var(--orange); }
/* Plan du site : seules les entrées de service et de contact ont une icône */
.groupe-plan a { grid-template-columns: 1fr; }
.groupe-plan a span { grid-column: 1; }
.groupe-plan a::before { display: none; width: 22px; height: 22px; grid-row: span 2; }
.groupe-plan .item::before { width: 22px; height: 22px; grid-row: span 2; }
.groupe-plan a:is([href*="developpement-logiciel"], [href*="sites-web"], [href*="applications-mobiles"], [href*="design-ui-ux"], [href*="marketing-digital"], [href*="automatisation-ia"], [href*="wa.me"], [href^="tel:"]),
.groupe-plan li:nth-child(1) a[href="/contact/"] { grid-template-columns: auto 1fr; }
.groupe-plan a:is([href*="developpement-logiciel"], [href*="sites-web"], [href*="applications-mobiles"], [href*="design-ui-ux"], [href*="marketing-digital"], [href*="automatisation-ia"], [href*="wa.me"], [href^="tel:"]) span,
.groupe-plan li:nth-child(1) a[href="/contact/"] span { grid-column: 2; }
.groupe-plan a:is([href*="developpement-logiciel"], [href*="sites-web"], [href*="applications-mobiles"], [href*="design-ui-ux"], [href*="marketing-digital"], [href*="automatisation-ia"], [href*="wa.me"], [href^="tel:"])::before,
.groupe-plan li:nth-child(1) a[href="/contact/"]::before { display: block; }
/* Réseaux sociaux : le libellé reste dans le contenu (éditable), l'icône le remplace à l'écran */
.pied .reseaux a { font-size: 0; }
.pied .reseaux a::before { width: 17px; height: 17px; background: currentColor; }
.pied .reseaux a:is([href*="facebook"], [aria-label="Facebook"])::before { --ic: var(--m-facebook); }
.pied .reseaux a:is([href*="instagram"], [aria-label="Instagram"])::before { --ic: var(--m-instagram); }
.pied .reseaux a:is([href*="linkedin"], [aria-label="LinkedIn"])::before { --ic: var(--m-linkedin); }
.pied .reseaux a:is([href*="tiktok"], [aria-label="TikTok"])::before { --ic: var(--m-tiktok); }
.pied .reseaux a:is([href*="youtube"], [aria-label="YouTube"])::before { --ic: var(--m-youtube); }

/* ---------- Accordéon ---------- */
.pli .pli-titre { cursor: pointer; }
.pli .pli-titre p::after {
  content: ""; width: 18px; height: 18px; justify-self: end;
  background: linear-gradient(var(--orange), var(--orange)) center / 100% 2px no-repeat, linear-gradient(var(--orange), var(--orange)) center / 2px 100% no-repeat;
  transition: background-size .3s;
}
.pli.ouvert .pli-titre p::after { background-size: 100% 2px, 2px 0; }
.pli .contenu > .e-con { overflow: hidden; padding-left: 54px; }
.pli .pli-titre:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; }

/* ---------- Filtres du portfolio ---------- */
.filtres .filtre {
  cursor: pointer; padding: 10px 20px; border-radius: 999px;
  border: 1px solid var(--ligne); font-size: 14px; font-weight: 500; color: var(--encre);
  transition: border-color .2s;
}
.filtres .filtre:hover { border-color: var(--orange); }
.filtres .filtre.actif { background: var(--nuit); border-color: var(--nuit); color: var(--blanc); }

/* ---------- Collage de la page À propos ---------- */
.histoire .collage .elementor-widget-image:nth-child(1) img { width: 100%; aspect-ratio: 4 / 4.4; object-fit: cover; border-radius: 22px; }
.histoire .collage .elementor-widget-image:nth-child(2) { position: absolute; right: 0; bottom: 0; width: 52%; }
.histoire .collage .elementor-widget-image:nth-child(2) img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 18px; border: 8px solid var(--blanc); box-shadow: 0 30px 60px -20px rgba(var(--ombre),.45); }

/* ---------- Bouton WhatsApp flottant ---------- */
.bouton-whatsapp .elementor-button { padding: 0; }
.bouton-whatsapp .elementor-button::after {
  content: ""; position: absolute; inset: 0; margin: auto; width: 30px; height: 30px; background: var(--marine);
  -webkit-mask: var(--m-whatsapp) center / contain no-repeat; mask: var(--m-whatsapp) center / contain no-repeat;
}
.bouton-whatsapp .elementor-button:hover .elementor-button-text, .bouton-whatsapp .elementor-button:focus-visible .elementor-button-text { opacity: 1; transform: translate(0, -50%); }

/* ---------- Pied de page ---------- */
.pied .e-con.logo-pied { display: inline-flex; align-items: center; gap: 14px; }
.pied .logo-pied .elementor-widget-image:nth-child(1) img { height: 56px; width: auto; }
.pied .logo-pied .elementor-widget-image:nth-child(2) img { height: 40px; width: auto; }
.appel .coordonnees .adresse { color: var(--encre); }

/* ---------- En-tête : modèle du Theme Builder, logo et widget Menu (Pro) ---------- */
.entete .logo img { display: block; height: 40px; width: auto; }
.entete .logo a { display: block; }
.entete .e-con.enveloppe { gap: 24px; }
.nav-principale { margin-left: auto; }
.nav-principale .elementor-nav-menu--main .elementor-nav-menu { display: flex; align-items: center; gap: 34px; }
.nav-principale .elementor-nav-menu--main .elementor-item {
  position: relative; display: inline-flex; align-items: center; padding: 6px 0;
  font-family: var(--f-texte); font-size: 14px; font-weight: 400; color: rgba(255,255,255,.82); transition: color .2s;
}
.nav-principale .elementor-nav-menu--main .elementor-item:hover,
.nav-principale .elementor-nav-menu--main .elementor-item.elementor-item-active { color: var(--blanc); }
.nav-principale .elementor-nav-menu--main .elementor-item.elementor-item-active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; border-radius: 2px; background: var(--orange);
}
.nav-principale .elementor-nav-menu--main .sub-arrow { display: inline-block; padding: 0; margin-left: 6px; }
.nav-principale .elementor-nav-menu--main .sub-arrow > * { display: none; }
.nav-principale .elementor-nav-menu--main .sub-arrow::before {
  content: ""; display: inline-block; width: 8px; height: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-3px) rotate(45deg); opacity: .7;
}
.nav-principale .elementor-nav-menu--main .sub-menu {
  min-width: 300px; padding: 10px; border-radius: 16px; margin-top: 18px;
  background: var(--marine); border: 1px solid var(--ligne-marine); box-shadow: 0 30px 60px -20px rgba(var(--ombre),.7);
}
.nav-principale .elementor-nav-menu--main .sub-menu .elementor-sub-item {
  display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 10px;
  font-size: 14px; font-weight: 500; color: var(--blanc); background: transparent; border: 0;
}
.nav-principale .elementor-nav-menu--main .sub-menu .elementor-sub-item:hover { background: rgba(255,255,255,.08); color: var(--blanc); }
.nav-principale .sub-menu a::before { width: 20px; height: 20px; background: var(--orange); }
/* Menu mobile : burger et panneau du widget */
.nav-principale .elementor-menu-toggle {
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--ligne-marine);
  background: transparent; color: var(--blanc); font-size: 18px;
}
.nav-principale .elementor-menu-toggle svg { fill: var(--blanc); }
.nav-principale .elementor-nav-menu--dropdown { background: var(--marine); border-top: 1px solid var(--ligne-marine); }
.nav-principale .elementor-nav-menu--dropdown .elementor-item,
.nav-principale .elementor-nav-menu--dropdown .elementor-sub-item {
  display: flex; align-items: center; gap: 12px; padding: 12px var(--gouttiere); font-size: 17px; color: var(--blanc);
  background: transparent; border-bottom: 1px solid var(--ligne-marine);
}
.nav-principale .elementor-nav-menu--dropdown .elementor-sub-item { padding-left: calc(var(--gouttiere) + 18px); font-size: 15px; color: rgba(255,255,255,.72); }
.nav-principale .elementor-nav-menu--dropdown .elementor-item:hover,
.nav-principale .elementor-nav-menu--dropdown .elementor-item.elementor-item-active,
.nav-principale .elementor-nav-menu--dropdown .elementor-sub-item:hover { background: rgba(255,255,255,.06); color: var(--blanc); }
.nav-principale .elementor-nav-menu--dropdown .sub-arrow { display: none; }
/* Comme la maquette, les six services restent visibles sous « Services » dans le panneau mobile.
   !important : le widget Menu pose display:none en ligne sur le sous-menu (SmartMenus). */
.nav-principale .elementor-nav-menu--dropdown .sub-menu { display: block !important; position: static; width: auto; margin: 0; box-shadow: none; border: 0; background: transparent; }
.entete .btn-entete .elementor-button { padding: 12px 22px; font-size: 14px; }
@media (max-width: 1080px) {
  .entete .btn-entete { display: none; }
}

/* ---------- Formulaire (widget Formulaire de Pro) ---------- */
.formulaire .elementor-widget-heading + .elementor-widget-text-editor { margin-bottom: 32px; font-size: 15px; }
.form-contact .elementor-field-group .elementor-field-label { margin-bottom: 8px; font-size: 13px; font-weight: 600; color: var(--encre); }
.form-contact .elementor-field-group .elementor-field,
.form-contact .elementor-field-group .elementor-select-wrapper select {
  width: 100%; padding: 15px 16px; border-radius: 12px; border: 1px solid var(--ligne); background: var(--clair);
  font: inherit; font-size: 15px; color: var(--encre); min-height: 0; transition: border-color .2s, background .2s;
}
.form-contact .elementor-field-group .elementor-select-wrapper { padding: 0; border: 0; background: none; }
.form-contact .elementor-field-group textarea.elementor-field { min-height: 150px; resize: vertical; }
.form-contact .elementor-field-group .elementor-field:focus,
.form-contact .elementor-field-group .elementor-select-wrapper select:focus { outline: none; border-color: var(--orange); background: var(--blanc); }
.form-contact .e-form__buttons { justify-content: flex-end; margin-top: 8px; }
.form-contact .elementor-field-type-submit .elementor-button {
  display: inline-flex; align-items: center; gap: 12px; min-height: 0; padding: 16px 28px; border: 0; border-radius: 999px;
  font-family: var(--f-texte); font-size: 15px; font-weight: 600; background: var(--orange); color: var(--encre); cursor: pointer;
  box-shadow: 0 12px 32px -10px rgba(238,145,55,.65); transition: transform .25s, box-shadow .25s;
}
.form-contact .elementor-field-type-submit .elementor-button::after {
  content: ""; width: 16px; height: 16px; background: currentColor; -webkit-mask: var(--m-fleche) center / contain no-repeat; mask: var(--m-fleche) center / contain no-repeat;
}
.form-contact .elementor-field-type-submit .elementor-button:hover { transform: translateY(-2px); }
.formulaire .mention-form { margin-top: 18px; font-size: 12.5px; color: var(--texte-doux); }
.formulaire .mention-form a { color: var(--marine); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 560px) {
  .pli .contenu > .e-con { padding-left: 0; }
  .e-con.carte-exp { padding-bottom: 79px; }   /* corps 16 px : ligne de la flèche 2 px plus basse */
}

/* ---------- En-tête de repli (header.php, seulement si Pro est absent) ---------- */
.entete-repli .menu { display: flex; align-items: center; gap: 34px; list-style: none; margin: 0; padding: 0; }
.entete-repli .menu a { font-size: 14px; color: rgba(255,255,255,.82); }
.entete-repli .menu a:hover, .entete-repli .menu .current-menu-item > a { color: var(--blanc); }
@media (max-width: 1080px) { .entete-repli .menu-repli { display: none; } }

/* Barre d'administration (visible seulement connecté). Les extensions y ajoutent tant d'éléments qu'elle passe
   sur deux lignes : elle grandit avec son fond au lieu de déborder sur le site, et app.js mesure sa hauteur
   (--barre-admin) et son bas visible (--barre-admin-bas, qui diminue quand elle défile sur mobile) pour
   placer le contenu et l'en-tête fixe juste dessous. Valeurs de repli : hauteurs standard de WordPress. */
html #wpadminbar { height: auto; min-height: 32px; }
html #wpadminbar .quicklinks { display: flow-root; }
html.barre-admin-mesuree { margin-top: var(--barre-admin) !important; }
.admin-bar .e-con.entete { top: var(--barre-admin-bas, 32px); }
@media (max-width: 782px) {
  html #wpadminbar { min-height: 46px; }
  .admin-bar .e-con.entete { top: var(--barre-admin-bas, 46px); }
}

/* Zone de l'article (single.php) : flow-root comme dans style.css, au-dessus du filet « body .e-con { display: block } » */
body .e-con.article-zone { display: flow-root; }

/* ---------- Accueil, étape 8 (styles existants réutilisés ; seuls les écarts de mise en page) ---------- */
/* Problèmes : lien « Voir le service » sous le texte de chaque pli */
.pli .contenu .elementor-widget.lien-service { margin: -12px 0 28px; }
/* Pourquoi : 4 cartes « atout » en grille-4, puis le tableau comparatif dans la même section */
.pourquoi .e-con.comparaison { margin-top: 110px; padding: 0; background: none; }
.pourquoi .comparaison .e-con.tete { display: block; }   /* pas la grille de l'en-tête « Pourquoi » */
/* Méthode : frise courte, 6 étapes réduites au titre */
.methode.frise .e-con.enveloppe { grid-template-columns: 1fr; gap: 56px; }
.methode.frise .e-con.colle { position: static; max-width: 640px; }
.methode.frise .elementor-widget.lien-fleche { margin-top: 8px; }
.sombre .lien-fleche .elementor-button, .sombre .lien-fleche .elementor-button:hover { color: var(--blanc); }
.methode.frise .e-con.etapes { grid-template-columns: repeat(6, 1fr); gap: 14px; }
.methode.frise .e-con.etape { padding: 24px 22px; }
.methode.frise .e-con.etape:nth-child(even) { transform: none; }
.methode.frise .etape .n { margin-bottom: 18px; }
.methode.frise .etape h3 { margin: 0; font-size: 21px; }
/* L'équipe à Thiès : texte + photo de la section « Pourquoi » */
.e-con.pourquoi.equipe { padding: 130px 0; }
.equipe .e-con.texte-equipe { align-self: center; max-width: 480px; }
.equipe .elementor-widget.titre-section { margin: 20px 0 20px; }
.equipe .texte-equipe p:not(.en-ligne p, .bloc-texte p) { margin-bottom: 22px; }
/* Derniers articles : en-tête de la section « Réalisations », titres de cartes en h3 */
.carte-article h3 { font-size: 24px; margin-bottom: 10px; }
.carte-article h3 a:hover { color: var(--orange-fonce); }
@media (max-width: 1080px) {
  .methode.frise .e-con.etapes { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
  .pourquoi .e-con.comparaison { margin-top: 80px; }
  .methode.frise .e-con.etapes { grid-template-columns: 1fr 1fr; gap: 12px; }
  .methode.frise .e-con.etape { padding: 20px 18px; }
  .methode.frise .etape h3 { font-size: 19px; }
  .e-con.pourquoi.equipe { padding: 90px 0; }
  .equipe .e-con.photo { min-height: 320px; }
}

/* Plan du site, listes automatiques (articles, réalisations) : sans icône, même si l'adresse contient le nom d'un service */
.groupe-plan .plan-liste a { grid-template-columns: 1fr; }
.groupe-plan .plan-liste a span { grid-column: 1; }
.groupe-plan .plan-liste a::before { display: none; }
/* Pages services : ligne « Pour aller plus loin » sous « Une autre question ? » */
.faq .elementor-widget.plus-loin { margin-top: 14px; }

/* ---------- Typographie (30/10/2026, choix du client : version E) ----------
   Titres en Bricolage Grotesque gras, textes en Manrope, pour se distinguer de my-dev.ai (Questrial + Poppins).
   font-size-adjust garde la taille visuelle des anciens titres (Outfit) : la mise en page ne bouge pas. */
body .elementor-widget-heading, body .elementor-heading-title, h1, h2, h3 {
  font-weight: 700 !important; letter-spacing: -0.035em !important; font-size-adjust: 0.5;
}
/* Exceptions : petits titres en police d'étiquette (JetBrains Mono), à garder comme avant */
body .pied h4.elementor-heading-title, .pied h4 { font-size: 13px; font-weight: 500 !important; letter-spacing: .16em !important; font-size-adjust: none; }   /* 11 px → 13 px (client, 30/10/2026) */
.groupe-plan h2 .n { font-weight: 400; letter-spacing: 0; font-size-adjust: none; }

/* Cartes projet Elementor : l'image remplit toute la vignette (16:10) quel que soit son format d'origine */
.projet .e-con.visuel .elementor-widget-image { position: absolute; inset: 0; }
.projet .e-con.visuel .elementor-widget-image img { width: 100%; height: 100%; object-fit: cover; }

/* Formulaire de contact : case de consentement facultative (31/10/2026), case à gauche du texte, sans libellé au-dessus */
.form-contact .elementor-field-type-acceptance > .elementor-field-label { display: none; }
.form-contact .elementor-field-type-acceptance .elementor-field-subgroup { width: 100%; }
.form-contact .elementor-field-type-acceptance .elementor-field-option { display: flex; align-items: flex-start; gap: 10px; text-align: left; }
.form-contact .elementor-field-type-acceptance input[type="checkbox"] { flex: none; width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--orange); }
.form-contact .elementor-field-type-acceptance .elementor-field-option label { font-size: 14px; line-height: 1.5; color: var(--texte); }


/* Variantes interactives toutes visibles dans l'éditeur (règle 7). */
.elementor-editor-active .pli .e-con.contenu { grid-template-rows: 1fr; }
.elementor-editor-active .grille-portfolio .e-con.projet.cache { display: flex; }
.elementor-editor-active .technos .piste { animation: none; }